[New #149] Add support of images for media content

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;

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;