[Test #149] Add example of different type of links to test media types

kbss-cvut · May 6, 2022 · e59e792 · e59e792
1 parent e39d83f
commit e59e792
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git 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 <div className="media-content">{renderMediaContent()}</div>;
+  // 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() && (
+        <img
+          className="media-content"
+          src={hardcodedLink}
+          alt={hardcodedLink}
+        />
+      )}
+      {isHardcoded() && isIframe() && (
+        <iframe className="media-content" src={hardcodedLink} />
+      )}
+      {!isHardcoded() && (
+        <div className="media-content">{renderMediaContent()}</div>
+      )}
+    </>
+  );
 };
 
 export default MediaContent;
diff --git 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",
+};