Hotfix: Video support for private files (#1128)

* hotfix: Fix type mismatch in the VideoDisplay * refactor: Remove console.log
FNNDSC · Mar 27, 2024 · f9a5fc7 · f9a5fc7
1 parent 4696d3b
commit f9a5fc7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/src/components/Preview/FileDetailView.tsx b/src/components/Preview/FileDetailView.tsx
@@ -135,6 +135,7 @@ const FileDetailView = (props: AllProps) => {
         blob,
         file: selectedFile,
         fileType,
+        url: "",
       };
     } catch (error: any) {
       setError("Failed to fetch the data for preview");

diff --git a/src/components/Preview/displays/IframeDisplay.tsx b/src/components/Preview/displays/IframeDisplay.tsx
@@ -10,15 +10,19 @@ const IframeDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
   let url = "";
 
   if (fileItem.fileType === "html") {
-    url = fileItem.blob
-      ? window.URL.createObjectURL(
-          new Blob([fileItem.blob], { type: "text/html" }),
-        )
-      : "";
+    url = fileItem.url
+      ? fileItem.url
+      : fileItem.blob
+        ? window.URL.createObjectURL(
+            new Blob([fileItem.blob], { type: "text/html" }),
+          )
+        : "";
   } else {
-    url = fileItem.blob
-      ? window.URL.createObjectURL(new Blob([fileItem.blob]))
-      : "";
+    url = fileItem.url
+      ? fileItem.url
+      : fileItem.blob
+        ? window.URL.createObjectURL(new Blob([fileItem.blob]))
+        : "";
   }
 
   return (

diff --git a/src/components/Preview/displays/VideoDisplay.tsx b/src/components/Preview/displays/VideoDisplay.tsx
@@ -12,12 +12,13 @@ const VideoDisplay = (props: AllProps) => {
     : blob
       ? window.URL.createObjectURL(new Blob([blob], { type: blob.type }))
       : "";
-  const sourceType = url ? fileType : blob ? blob.type : "";
+
+  const sourceType = url ? `video/${fileType}` : blob ? blob.type : "";
 
   return (
     // biome-ignore lint/a11y/useMediaCaption: <explanation>
     <video controls width="90%" height="90%">
-      <source src={urlToFetch} type={`video/${sourceType}`} />
+      <source src={urlToFetch} type={sourceType} />
       {/* Fallback message for browsers that do not support video playback */}
       Your browser does not support the video tag.
     </video>