Add support for all images in media content

.github/workflows/npm-publish-beta.yml

@@ -1,9 +1,7 @@
 name: Publish NPM Beta Package
 
 on:
-  pull_request:
-    types:
-      - closed
+  push:
     branches:
       - master
 

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;

src/components/MediaContent.tsx

@@ -1,48 +1,124 @@
 import React from "react";
 import Constants from "../constants/Constants";
+import LinkIcon from "./LinkIcon";
 
 interface Props {
   question: object;
+
+  // Added only for example in story
+  hardcodedLink?: string;
+  iFrame?: boolean;
 }
 
-const MediaContent = ({ question }: Props) => {
-  const renderMedia = () => {
+const YOUTUBE_URL = "https://www.youtube.com/";
+const GOOGLE_DRIVE_URL = "https://drive.google.com/";
+
+const MediaContent = ({ question, hardcodedLink, iFrame }: Props) => {
+  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();
+  // 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;

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

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;