From e87b6f609e078d095c273cc73af37ebab8e6d8ea Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Fri, 6 May 2022 10:12:16 +0200
Subject: [PATCH 1/7] [Fix] Fix publish beta release

---
 .github/workflows/npm-publish-beta.yml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/npm-publish-beta.yml b/.github/workflows/npm-publish-beta.yml
index 7b29e512..d03b58cb 100644
--- a/.github/workflows/npm-publish-beta.yml
+++ b/.github/workflows/npm-publish-beta.yml
@@ -1,9 +1,7 @@
 name: Publish NPM Beta Package
 
 on:
-  pull_request:
-    types:
-      - closed
+  push:
     branches:
       - master
 

From 6f0aadee2cf4194055ef4966fbac6f96eda261d8 Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Fri, 6 May 2022 10:12:47 +0200
Subject: [PATCH 2/7] [New] Add prop to hide overlay of link icon

---
 src/components/LinkIcon.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkIcon.jsx b/src/components/LinkIcon.jsx
index d3169e60..84189017 100644
--- a/src/components/LinkIcon.jsx
+++ b/src/components/LinkIcon.jsx
@@ -4,7 +4,7 @@ import ExternalLink from "../styles/icons/ExternalLink";
 import IconOverlay from "./IconOverlay";
 
 const LinkIcon = (props) => {
-  return (
+  return props.showOverlay ? (
     <IconOverlay
       tooltipContent={props.url["@id"] || props.url}
       id="url-tooltip"
@@ -18,6 +18,14 @@ const LinkIcon = (props) => {
         <ExternalLink className={props.iconClass} />
       </a>
     </IconOverlay>
+  ) : (
+    <a
+      href={props.url["@id"] || props.url}
+      target="_blank"
+      className={props.iconClassContainer}
+    >
+      <ExternalLink className={props.iconClass} />
+    </a>
   );
 };
 
@@ -30,12 +38,14 @@ LinkIcon.propTypes = {
   iconClass: PropTypes.string,
   overlayPlacement: PropTypes.string,
   absolutePosition: PropTypes.bool,
+  showOverlay: PropTypes.bool,
 };
 
 LinkIcon.defaultProps = {
   iconClassContainer: "",
   iconClass: "",
   absolutePosition: true,
+  showOverlay: true,
 };
 
 export default LinkIcon;

From 5ed4bd1b080df44917ef629d80348ce92d1ad420 Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Fri, 6 May 2022 11:14:52 +0200
Subject: [PATCH 3/7] [New #149] Add support of images for media content

---
 src/components/MediaContent.tsx | 83 +++++++++++++++++++++++++--------
 src/styles/s-forms.css          | 41 ++++++++++++++++
 2 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/src/components/MediaContent.tsx b/src/components/MediaContent.tsx
index 18391823..45d7f368 100644
--- a/src/components/MediaContent.tsx
+++ b/src/components/MediaContent.tsx
@@ -1,48 +1,93 @@
 import React from "react";
 import Constants from "../constants/Constants";
+import LinkIcon from "./LinkIcon";
 
 interface Props {
   question: object;
 }
 
+const YOUTUBE_URL = "https://www.youtube.com/";
+const GOOGLE_DRIVE_URL = "https://drive.google.com/";
+
 const MediaContent = ({ question }: Props) => {
-  const renderMedia = () => {
+  const isGoogleDriveImage = (mediaContentUrl: string) => {
+    return (
+      mediaContentUrl.includes("/file/d/") &&
+      mediaContentUrl.includes(GOOGLE_DRIVE_URL)
+    );
+  };
+
+  const isYoutubeVideo = (mediaContentUrl: string) => {
+    return (
+      mediaContentUrl.includes("watch?v=") &&
+      mediaContentUrl.includes(YOUTUBE_URL)
+    );
+  };
+
+  const getMediaId = (mediaContentUrl: string) => {
+    if (isGoogleDriveImage(mediaContentUrl)) {
+      return mediaContentUrl.substring(
+        mediaContentUrl.indexOf("/file/d/") + 8,
+        mediaContentUrl.lastIndexOf("/")
+      );
+    }
+    if (isYoutubeVideo(mediaContentUrl)) {
+      return mediaContentUrl.substring(mediaContentUrl.indexOf("watch?v=") + 8);
+    }
+  };
+
+  const getEmbedLink = (mediaContentUrl: string) => {
+    if (isGoogleDriveImage(mediaContentUrl)) {
+      return (
+        GOOGLE_DRIVE_URL + "uc?export=view&id=" + getMediaId(mediaContentUrl)
+      );
+    }
+    if (isYoutubeVideo(mediaContentUrl)) {
+      return YOUTUBE_URL + "embed/" + getMediaId(mediaContentUrl);
+    }
+    return mediaContentUrl;
+  };
+
+  const getMediaType = (mediaContentUrl: string) => {
+    if (mediaContentUrl.includes(YOUTUBE_URL)) {
+      return <iframe src={getEmbedLink(mediaContentUrl)} allowFullScreen />;
+    }
+    return (
+      <div className="media-content-image">
+        <LinkIcon
+          url={mediaContentUrl}
+          iconClassContainer="media-content-link"
+          showOverlay={false}
+        />
+        <img src={getEmbedLink(mediaContentUrl)} alt={mediaContentUrl} />
+      </div>
+    );
+  };
+
+  const renderMediaContent = () => {
     // @ts-ignore
     const mediaContent = question[Constants.HAS_MEDIA_CONTENT];
 
     if (mediaContent) {
       if (Array.isArray(mediaContent)) {
         return (
-          <div className="col-6">
+          <div className="media-content-items">
             {mediaContent.map((src: string, index: number) => (
-              <div
-                key={index}
-                className="row embed-responsive-21by9 media-content-video-container mb-3"
-              >
-                <iframe
-                  src={mediaContent[index]}
-                  className="embed-responsive-item"
-                  allowFullScreen
-                />
+              <div key={index} className="media-content-item">
+                {getMediaType(mediaContent[index])}
               </div>
             ))}
           </div>
         );
       }
       return (
-        <div className="col-6">
-          <iframe
-            src={mediaContent}
-            className="embed-responsive-item"
-            allowFullScreen
-          />
-        </div>
+        <div className="media-content-item">{getMediaType(mediaContent)}</div>
       );
     }
     return null;
   };
 
-  return renderMedia();
+  return <div className="media-content">{renderMediaContent()}</div>;
 };
 
 export default MediaContent;
diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
index 04ad2b8f..b747364c 100644
--- a/src/styles/s-forms.css
+++ b/src/styles/s-forms.css
@@ -315,6 +315,47 @@ 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 img {
+  /*default size of iframe*/
+  height: 150px;
+  width: 300px;
+  border: gray solid 2px;
+}
+
+.media-content-item iframe {
+  /*default size of iframe*/
+  height: 150px;
+  width: 300px;
+  border: gray solid 2px;
+}
+
+.media-content-item .media-content-image {
+  height: 150px;
+  width: 300px;
+}
+
+.media-content-item .media-content-image .media-content-link {
+  position: absolute;
+}
+
+.media-content-item .media-content-link:hover {
+  opacity: 0.8;
+}
+
 @keyframes emphasiseOnRelevant {
   0% {
     display: none;

From d98c2f38eead36202833a5036d79f601c68d99c4 Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Fri, 6 May 2022 11:43:24 +0200
Subject: [PATCH 4/7] [Test #149] Add example of different type of links to
 test media types

---
 src/components/MediaContent.tsx      | 35 ++++++++++++++++++++++++++--
 src/stories/MediaContent.stories.tsx | 26 +++++++++++++++++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

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 <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
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",
+};

From 3d099d9d44cd54d0f9db6c61ea59c961677f1c3f Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Thu, 26 May 2022 11:43:05 +0200
Subject: [PATCH 5/7] [Upd #149] Images keep proportions and can be zoomed in

---
 package-lock.json               | 176 ++++++++++++++++++++++++++++++--
 package.json                    |   1 +
 src/components/MediaContent.tsx |  92 ++++++++---------
 src/styles/s-forms.css          |  26 ++---
 4 files changed, 229 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4c34d5b..ff13dff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "prop-types": "^15.7.2",
         "react-bootstrap": "1.0.1",
         "react-datepicker": "^4.2.1",
+        "react-image-zooom": "^1.0.4",
         "react-intl": "^5.24.6",
         "react-loader-spinner": "^5.1.0",
         "react-select": "^3.1.0",
@@ -7482,6 +7483,22 @@
         "react-docgen": "^5.0.0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
     "node_modules/babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -8432,6 +8449,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==",
+      "peer": true
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -10361,6 +10384,15 @@
         "source-map-resolve": "^0.6.0"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -10451,6 +10483,17 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "peer": true,
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -21846,6 +21889,16 @@
         "react-dom": "^16.6.0 || ^17.0.0"
       }
     },
+    "node_modules/react-image-zooom": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-image-zooom/-/react-image-zooom-1.0.4.tgz",
+      "integrity": "sha512-Mqi++XgazQ1aG9P2rDprKTUQr/h/VNMrbNGIWtxfgi2dCI2oqI/Gx/9MP5nLyrWityzbGccxWZpuCj1DxAUo/Q==",
+      "peerDependencies": {
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
+        "styled-components": "^5.2.1"
+      }
+    },
     "node_modules/react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
@@ -21900,8 +21953,7 @@
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
@@ -23794,8 +23846,7 @@
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "node_modules/shasum": {
       "version": "1.0.2",
@@ -25036,6 +25087,46 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
     "node_modules/subarg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
@@ -33570,6 +33661,19 @@
         "react-docgen": "^5.0.0"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "peer": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -34346,6 +34450,12 @@
         "quick-lru": "^4.0.1"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==",
+      "peer": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -35918,6 +36028,12 @@
         }
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "peer": true
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -35984,6 +36100,17 @@
         "nth-check": "^2.0.1"
       }
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "peer": true,
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -44654,6 +44781,12 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-image-zooom": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-image-zooom/-/react-image-zooom-1.0.4.tgz",
+      "integrity": "sha512-Mqi++XgazQ1aG9P2rDprKTUQr/h/VNMrbNGIWtxfgi2dCI2oqI/Gx/9MP5nLyrWityzbGccxWZpuCj1DxAUo/Q==",
+      "requires": {}
+    },
     "react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
@@ -44693,8 +44826,7 @@
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-lifecycles-compat": {
       "version": "3.0.4",
@@ -46198,8 +46330,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shasum": {
       "version": "1.0.2",
@@ -47204,6 +47335,35 @@
         "tslib": "^2.1.0"
       }
     },
+    "styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "peer": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+          "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+          "peer": true,
+          "requires": {
+            "@emotion/memoize": "^0.7.4"
+          }
+        }
+      }
+    },
     "subarg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
diff --git a/package.json b/package.json
index 669cce0e..9a791c3c 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "prop-types": "^15.7.2",
     "react-bootstrap": "1.0.1",
     "react-datepicker": "^4.2.1",
+    "react-image-zooom": "^1.0.4",
     "react-intl": "^5.24.6",
     "react-loader-spinner": "^5.1.0",
     "react-select": "^3.1.0",
diff --git a/src/components/MediaContent.tsx b/src/components/MediaContent.tsx
index 441498fa..74433c47 100644
--- a/src/components/MediaContent.tsx
+++ b/src/components/MediaContent.tsx
@@ -1,60 +1,81 @@
 import React from "react";
 import Constants from "../constants/Constants";
 import LinkIcon from "./LinkIcon";
+// @ts-ignore
+import ImageZoom from "react-image-zooom";
 
 interface Props {
   question: object;
-
-  // Added only for example in story
-  hardcodedLink?: string;
-  iFrame?: boolean;
+  isIframe?: boolean;
 }
 
 const YOUTUBE_URL = "https://www.youtube.com/";
+const YOUTUBE_WATCH_URL_PARAMETER = "watch?v=";
 const GOOGLE_DRIVE_URL = "https://drive.google.com/";
+const EMBED_URL_PARAMETER = "embed/";
+const GOOGLE_DRIVE_FILE_PATH = "/file/d/";
+const GOOGLE_DRIVE = "uc?export=view&id=";
 
-const MediaContent = ({ question, hardcodedLink, iFrame }: Props) => {
+const MediaContent = ({ question, isIframe = true }: Props) => {
   const isGoogleDriveImage = (mediaContentUrl: string) => {
     return (
-      mediaContentUrl.includes("/file/d/") &&
+      mediaContentUrl.includes(GOOGLE_DRIVE_FILE_PATH) &&
       mediaContentUrl.includes(GOOGLE_DRIVE_URL)
     );
   };
 
   const isYoutubeVideo = (mediaContentUrl: string) => {
     return (
-      mediaContentUrl.includes("watch?v=") &&
-      mediaContentUrl.includes(YOUTUBE_URL)
+      mediaContentUrl.includes(YOUTUBE_URL) &&
+      (mediaContentUrl.includes(YOUTUBE_WATCH_URL_PARAMETER) ||
+        mediaContentUrl.includes(EMBED_URL_PARAMETER))
     );
   };
 
   const getMediaId = (mediaContentUrl: string) => {
     if (isGoogleDriveImage(mediaContentUrl)) {
       return mediaContentUrl.substring(
-        mediaContentUrl.indexOf("/file/d/") + 8,
+        mediaContentUrl.indexOf(GOOGLE_DRIVE_FILE_PATH) +
+          GOOGLE_DRIVE_FILE_PATH.length,
         mediaContentUrl.lastIndexOf("/")
       );
     }
     if (isYoutubeVideo(mediaContentUrl)) {
-      return mediaContentUrl.substring(mediaContentUrl.indexOf("watch?v=") + 8);
+      return mediaContentUrl.substring(
+        mediaContentUrl.indexOf(YOUTUBE_WATCH_URL_PARAMETER) +
+          YOUTUBE_WATCH_URL_PARAMETER.length
+      );
     }
   };
 
   const getEmbedLink = (mediaContentUrl: string) => {
     if (isGoogleDriveImage(mediaContentUrl)) {
-      return (
-        GOOGLE_DRIVE_URL + "uc?export=view&id=" + getMediaId(mediaContentUrl)
-      );
+      return GOOGLE_DRIVE_URL + GOOGLE_DRIVE + getMediaId(mediaContentUrl);
     }
-    if (isYoutubeVideo(mediaContentUrl)) {
-      return YOUTUBE_URL + "embed/" + getMediaId(mediaContentUrl);
+    if (
+      isYoutubeVideo(mediaContentUrl) &&
+      !mediaContentUrl.includes(EMBED_URL_PARAMETER)
+    ) {
+      return YOUTUBE_URL + EMBED_URL_PARAMETER + getMediaId(mediaContentUrl);
     }
     return mediaContentUrl;
   };
 
   const getMediaType = (mediaContentUrl: string) => {
-    if (mediaContentUrl.includes(YOUTUBE_URL)) {
-      return <iframe src={getEmbedLink(mediaContentUrl)} allowFullScreen />;
+    if (
+      isYoutubeVideo(mediaContentUrl) ||
+      (isGoogleDriveImage(mediaContentUrl) && isIframe)
+    ) {
+      return (
+        <div className="media-content-image">
+          <LinkIcon
+            url={mediaContentUrl}
+            iconClassContainer="media-content-link"
+            showOverlay={false}
+          />
+          <iframe src={getEmbedLink(mediaContentUrl)} allowFullScreen />
+        </div>
+      );
     }
     return (
       <div className="media-content-image">
@@ -63,7 +84,13 @@ const MediaContent = ({ question, hardcodedLink, iFrame }: Props) => {
           iconClassContainer="media-content-link"
           showOverlay={false}
         />
-        <img src={getEmbedLink(mediaContentUrl)} alt={mediaContentUrl} />
+        <ImageZoom
+          className="media-content-item-image"
+          src={getEmbedLink(mediaContentUrl)}
+          alt={mediaContentUrl}
+          width="100%"
+          height="100%"
+        />
       </div>
     );
   };
@@ -91,34 +118,7 @@ const MediaContent = ({ question, hardcodedLink, iFrame }: Props) => {
     return null;
   };
 
-  // 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>
-      )}
-    </>
-  );
+  return <div className="media-content">{renderMediaContent()}</div>;
 };
 
 export default MediaContent;
diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
index b747364c..560ff1e8 100644
--- a/src/styles/s-forms.css
+++ b/src/styles/s-forms.css
@@ -329,27 +329,29 @@ input:disabled {
   padding: 0.5rem;
 }
 
-.media-content-item img {
-  /*default size of iframe*/
-  height: 150px;
-  width: 300px;
-  border: gray solid 2px;
+.media-content-item .media-content-image {
+  position: relative;
+  max-height: 150px;
+  max-width: 300px;
 }
 
-.media-content-item iframe {
-  /*default size of iframe*/
-  height: 150px;
-  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 .media-content-image {
-  height: 150px;
-  width: 300px;
+.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 {

From 49ff881911e4df2972b9a12134cc40bc9980827f Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Thu, 26 May 2022 11:44:35 +0200
Subject: [PATCH 6/7] [Upd #149] Updated media content story and added isIframe
 as global parameter

---
 .storybook/preview.js                |  7 ++++++
 src/stories/MediaContent.stories.tsx | 32 ++++------------------------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 120376b3..32319db7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -50,6 +50,12 @@ export const globalTypes = {
     defaultValue: false,
     control: { type: "boolean" },
   },
+  isIframe: {
+    name: "IFrame",
+    description: "Set IFrame to eligible media contents",
+    defaultValue: false,
+    control: { type: "boolean" },
+  },
 };
 
 const options = {
@@ -67,6 +73,7 @@ const options = {
   wizardStepButtons: true,
   enableForwardSkip: true,
   startingStep: 1,
+  isIframe: false,
   debugMode: false,
   users: [
     { id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart" },
diff --git a/src/stories/MediaContent.stories.tsx b/src/stories/MediaContent.stories.tsx
index 2f0fc429..ce105436 100644
--- a/src/stories/MediaContent.stories.tsx
+++ b/src/stories/MediaContent.stories.tsx
@@ -10,9 +10,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",
   ],
 };
 
@@ -25,33 +27,7 @@ const Template: ComponentStory<typeof MediaContent> = (args) => {
   return <MediaContent {...args} />;
 };
 
-export const YoutubeVideo = Template.bind({});
-YoutubeVideo.args = {
-  question: questionWithMedia,
-};
-
-export const ParsedUrl = Template.bind({});
-ParsedUrl.args = {
+export const Default = Template.bind({});
+Default.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",
-};

From 61f3074f7868c608498f60abc15bb9ca466b09ac Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Thu, 26 May 2022 11:54:09 +0200
Subject: [PATCH 7/7] [Upd #149] Refactor iframe parameter in options

---
 .storybook/preview.js                |  6 +++---
 src/components/MediaContent.tsx      | 11 +++++++----
 src/stories/MediaContent.stories.tsx | 17 +++++++++++++----
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 32319db7..dc75aff7 100644
--- 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
index 74433c47..17ee34bc 100644
--- 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
index ce105436..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",
@@ -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({});