diff --git a/src/components/MediaContent.tsx b/src/components/MediaContent.tsx
index 45d7f368..441498fa 100644
--- a/src/components/MediaContent.tsx
+++ b/src/components/MediaContent.tsx
@@ -4,12 +4,16 @@ import LinkIcon from "./LinkIcon";
interface Props {
question: object;
+
+ // Added only for example in story
+ hardcodedLink?: string;
+ iFrame?: boolean;
}
const YOUTUBE_URL = "https://www.youtube.com/";
const GOOGLE_DRIVE_URL = "https://drive.google.com/";
-const MediaContent = ({ question }: Props) => {
+const MediaContent = ({ question, hardcodedLink, iFrame }: Props) => {
const isGoogleDriveImage = (mediaContentUrl: string) => {
return (
mediaContentUrl.includes("/file/d/") &&
@@ -87,7 +91,34 @@ const MediaContent = ({ question }: Props) => {
return null;
};
- return
{renderMediaContent()}
;
+ // Added only for example in story
+ const isHardcoded = () => {
+ return !!hardcodedLink;
+ };
+
+ // Added only for example in story
+ const isIframe = () => {
+ return iFrame;
+ };
+
+ // Added only for example in story
+ return (
+ <>
+ {isHardcoded() && !isIframe() && (
+
+ )}
+ {isHardcoded() && isIframe() && (
+
+ )}
+ {!isHardcoded() && (
+ {renderMediaContent()}
+ )}
+ >
+ );
};
export default MediaContent;
diff --git a/src/stories/MediaContent.stories.tsx b/src/stories/MediaContent.stories.tsx
index 6110dbdd..2f0fc429 100644
--- a/src/stories/MediaContent.stories.tsx
+++ b/src/stories/MediaContent.stories.tsx
@@ -11,6 +11,7 @@ const question = {
"http://onto.fel.cvut.cz/ontologies/form/has-media-content": [
"https://www.youtube.com/embed/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",
],
};
@@ -29,7 +30,28 @@ YoutubeVideo.args = {
question: questionWithMedia,
};
-export const ImageAndVideo = Template.bind({});
-ImageAndVideo.args = {
+export const ParsedUrl = Template.bind({});
+ParsedUrl.args = {
question: question,
};
+
+export const PreviewUrl = Template.bind({});
+PreviewUrl.args = {
+ iFrame: true,
+ hardcodedLink:
+ "https://drive.google.com/file/d/1ItZqsUm82nKW4ZqvKaiGUn202NEF79FC/preview",
+};
+
+export const ViewUrl = Template.bind({});
+ViewUrl.args = {
+ iFrame: true,
+ hardcodedLink:
+ "https://drive.google.com/file/d/1ItZqsUm82nKW4ZqvKaiGUn202NEF79FC/view?usp=sharing",
+};
+
+export const ExportViewUrl = Template.bind({});
+ExportViewUrl.args = {
+ iFrame: true,
+ hardcodedLink:
+ "https://drive.google.com/uc?export=view&id=1ItZqsUm82nKW4ZqvKaiGUn202NEF79FC",
+};