{mediaContent.map((src: string, index: number) => (
-
-
+
+ {getMediaType(mediaContent[index])}
))}
);
}
return (
-
-
-
+
{getMediaType(mediaContent)}
);
}
return null;
};
- return renderMedia();
+ return
{renderMediaContent()}
;
};
export default MediaContent;
diff --git a/src/stories/MediaContent.stories.tsx b/src/stories/MediaContent.stories.tsx
index 6110dbdd..39661cec 100644
--- a/src/stories/MediaContent.stories.tsx
+++ b/src/stories/MediaContent.stories.tsx
@@ -1,8 +1,7 @@
import React from "react";
import MediaContent from "../components/MediaContent";
import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-import questionWithMedia from "./assets/question/questionWithMedia.json";
+import { ConfigurationContextProvider } from "../contexts/ConfigurationContext";
const question = {
"@id": "job-9002",
@@ -10,8 +9,11 @@ const question = {
"http://www.w3.org/2000/01/rdf-schema#label": "Job",
"http://onto.fel.cvut.cz/ontologies/form/has-media-content": [
"https://www.youtube.com/embed/yzXRaJCZdFI",
+ "https://www.youtube.com/watch?v=yzXRaJCZdFI",
"https://drive.google.com/file/d/1C8vvDQX90vFDno0HpUCUNmVhW1_EchaX/preview",
+ "https://drive.google.com/file/d/1ItZqsUm82nKW4ZqvKaiGUn202NEF79FC/view?usp=sharing",
"https://drive.google.com/file/d/1ItZqsUm82nKW4ZqvKaiGUn202NEF79FC/preview",
+ "https://medecine.univ-lorraine.fr/sites/medecine.univ-lorraine.fr/files/users/documents/schema-etudes.png",
],
};
@@ -20,16 +22,21 @@ export default {
component: MediaContent,
} as ComponentMeta
;
-const Template: ComponentStory = (args) => {
- return ;
-};
-
-export const YoutubeVideo = Template.bind({});
-YoutubeVideo.args = {
- question: questionWithMedia,
+const Template: ComponentStory = (
+ args,
+ { globals: { unifyMediaContent } }
+) => {
+ const options = {
+ unifyMediaContent: unifyMediaContent,
+ };
+ return (
+
+
+
+ );
};
-export const ImageAndVideo = Template.bind({});
-ImageAndVideo.args = {
+export const Default = Template.bind({});
+Default.args = {
question: question,
};
diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
index 04ad2b8f..560ff1e8 100644
--- a/src/styles/s-forms.css
+++ b/src/styles/s-forms.css
@@ -315,6 +315,49 @@ input:disabled {
pointer-events: auto;
}
+.media-content {
+ overflow: hidden;
+}
+
+.media-content-items {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.media-content-item {
+ padding: 0.5rem;
+}
+
+.media-content-item .media-content-image {
+ position: relative;
+ max-height: 150px;
+ max-width: 300px;
+}
+
+.media-content-item-image {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ border: gray solid 2px;
+}
+
+.media-content-item iframe {
+ border: gray solid 2px;
+}
+
+.media-content-item .media-content-image .media-content-link {
+ position: absolute;
+ z-index: 10;
+}
+
+.media-content-item .media-content-link:hover {
+ opacity: 0.8;
+}
+
@keyframes emphasiseOnRelevant {
0% {
display: none;