[Upd #149] Refactor iframe parameter in options

kbss-cvut · Oct 16, 2022 · 61f3074 · 61f3074
1 parent 49ff881
commit 61f3074
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -50,8 +50,8 @@ export const globalTypes = {
     defaultValue: false,
     control: { type: "boolean" },
   },
-  isIframe: {
-    name: "IFrame",
+  unifyMediaContent: {
+    name: "Unify media content",
     description: "Set IFrame to eligible media contents",
     defaultValue: false,
     control: { type: "boolean" },
@@ -73,7 +73,7 @@ const options = {
   wizardStepButtons: true,
   enableForwardSkip: true,
   startingStep: 1,
-  isIframe: false,
+  unifyMediaContent: true,
   debugMode: false,
   users: [
     { id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart" },

diff --git a/src/components/MediaContent.tsx b/src/components/MediaContent.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
 import Constants from "../constants/Constants";
 import LinkIcon from "./LinkIcon";
 // @ts-ignore
 import ImageZoom from "react-image-zooom";
+import { ConfigurationContext } from "../contexts/ConfigurationContext";
 
 interface Props {
   question: object;
-  isIframe?: boolean;
 }
 
 const YOUTUBE_URL = "https://www.youtube.com/";
@@ -16,7 +16,10 @@ const EMBED_URL_PARAMETER = "embed/";
 const GOOGLE_DRIVE_FILE_PATH = "/file/d/";
 const GOOGLE_DRIVE = "uc?export=view&id=";
 
-const MediaContent = ({ question, isIframe = true }: Props) => {
+const MediaContent = ({ question }: Props) => {
+  // @ts-ignore
+  const { options } = useContext(ConfigurationContext);
+
   const isGoogleDriveImage = (mediaContentUrl: string) => {
     return (
       mediaContentUrl.includes(GOOGLE_DRIVE_FILE_PATH) &&
@@ -64,7 +67,7 @@ const MediaContent = ({ question, isIframe = true }: Props) => {
   const getMediaType = (mediaContentUrl: string) => {
     if (
       isYoutubeVideo(mediaContentUrl) ||
-      (isGoogleDriveImage(mediaContentUrl) && isIframe)
+      (isGoogleDriveImage(mediaContentUrl) && options.unifyMediaContent)
     ) {
       return (
         <div className="media-content-image">

diff --git 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",
@@ -23,8 +22,18 @@ export default {
   component: MediaContent,
 } as ComponentMeta<typeof MediaContent>;
 
-const Template: ComponentStory<typeof MediaContent> = (args) => {
-  return <MediaContent {...args} />;
+const Template: ComponentStory<typeof MediaContent> = (
+  args,
+  { globals: { unifyMediaContent } }
+) => {
+  const options = {
+    unifyMediaContent: unifyMediaContent,
+  };
+  return (
+    <ConfigurationContextProvider options={options}>
+      <MediaContent {...args} />
+    </ConfigurationContextProvider>
+  );
 };
 
 export const Default = Template.bind({});