feat: Implement preview support for mp4 files (#1127)

src/api/model.ts

@@ -165,6 +165,7 @@ export class TreeModel {
 export interface IFileBlob {
   blob?: Blob;
   file?: FeedFile;
+  url?: string;
   fileType: string;
 }
 
@@ -192,6 +193,11 @@ export const fileViewerMap: any = {
   smoothwm: "XtkDisplay",
   pial: "XtkDisplay",
   "nii.gz": "NiiVueDisplay",
+  mp4: "VideoDisplay", // Add mp4 format
+  avi: "VideoDisplay", // Add avi format
+  mov: "VideoDisplay", // Add mov format
+  wmv: "VideoDisplay", // Add wmv format
+  mkv: "VideoDisplay", // Add mkv format
 };
 
 // Description: get file type by file extension

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -275,6 +275,7 @@ const FileBrowser = (props: FileBrowserProps) => {
             handlePrevious={handlePrevious}
             selectedFile={selectedFile}
             preview="large"
+            isPublic={feed?.data.public}
           />
         )}
         {drawerState.preview.currentlyActive === "xtk" && <XtkViewer />}

src/components/Preview/FileDetailView.tsx

@@ -37,12 +37,15 @@ interface AllProps {
   handleNext?: () => void;
   handlePrevious?: () => void;
   gallery?: boolean;
+  isPublic?: boolean;
 }
 
 export interface ActionState {
   [key: string]: boolean | string;
 }
 
+const fileTypes = ["nii", "dcm", "fsm", "crv", "smoothwm", "pial", "nii.gz"];
+
 const FileDetailView = (props: AllProps) => {
   const [tagInfo, setTagInfo] = React.useState<any>();
   const [actionState, setActionState] = React.useState<ActionState>({
@@ -117,6 +120,15 @@ const FileDetailView = (props: AllProps) => {
     const fileName = selectedFile.data.fname;
     const fileType = getFileExtension(fileName);
 
+    if (props.isPublic && !fileTypes.includes(fileType)) {
+      return {
+        blob: undefined,
+        file: selectedFile,
+        fileType,
+        url: selectedFile?.collection.items[0].links[0].href, // Corrected semicolon to comma
+      };
+    }
+
     try {
       const blob = await selectedFile.getFileBlob();
       return {

src/components/Preview/displays/ImageDisplay.tsx

@@ -7,9 +7,11 @@ type AllProps = {
 
 const ImageDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
   const { fileItem } = props;
-  const url = fileItem.blob
-    ? window.URL.createObjectURL(new Blob([fileItem.blob]))
-    : "";
+  const url = fileItem.url
+    ? fileItem.url
+    : fileItem.blob
+      ? window.URL.createObjectURL(new Blob([fileItem.blob]))
+      : "";
   return (
     <img
       id={props.fileItem.file ? props.fileItem.file.data.fname : ""}

src/components/Preview/displays/PdfDisplay.tsx

@@ -6,11 +6,13 @@ type AllProps = {
 };
 
 const PdfDisplay: React.FC<AllProps> = ({ fileItem }: AllProps) => {
-  const url = fileItem.blob
-    ? window.URL.createObjectURL(
-        new Blob([fileItem.blob], { type: "application/pdf" }),
-      )
-    : "";
+  const url = fileItem.url
+    ? fileItem.url
+    : fileItem.blob
+      ? window.URL.createObjectURL(
+          new Blob([fileItem.blob], { type: "application/pdf" }),
+        )
+      : "";
   return (
     <div className="iframe-container">
       <iframe

src/components/Preview/displays/TextDisplay.tsx

@@ -32,6 +32,37 @@ const TextDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
     }
   }, [fileItem]);
 
+  React.useEffect(() => {
+    const textDisplay = document.getElementById("text-display");
+
+    if (textDisplay) {
+      const displayContent = async () => {
+        if (fileItem.blob) {
+          const reader = new FileReader();
+          reader.addEventListener(
+            "load",
+            () => {
+              //@ts-ignore
+              textDisplay.innerText = reader.result;
+            },
+            false,
+          );
+          reader.readAsText(fileItem.blob);
+        } else if (fileItem.url) {
+          try {
+            const response = await fetch(fileItem.url);
+            const text = await response.text();
+            textDisplay.innerText = text;
+          } catch (error) {
+            console.error("Failed to fetch text content from URL:", error);
+          }
+        }
+      };
+
+      displayContent();
+    }
+  }, [fileItem]);
+
   return (
     <Fragment>
       <div
@@ -48,7 +79,7 @@ const TextDisplay: React.FunctionComponent<AllProps> = (props: AllProps) => {
             fontFamily: "monospace",
             color: "white",
           }}
-        ></span>
+        />
       </div>
     </Fragment>
   );

src/components/Preview/displays/VideoDisplay.tsx

@@ -0,0 +1,27 @@
+import { IFileBlob } from "../../../api/model";
+
+type AllProps = {
+  fileItem: IFileBlob;
+};
+
+const VideoDisplay = (props: AllProps) => {
+  const { fileItem } = props;
+  const { blob, url, fileType } = fileItem;
+  const urlToFetch = url
+    ? url
+    : blob
+      ? window.URL.createObjectURL(new Blob([blob], { type: blob.type }))
+      : "";
+  const sourceType = url ? fileType : blob ? blob.type : "";
+
+  return (
+    // biome-ignore lint/a11y/useMediaCaption: <explanation>
+    <video controls width="90%" height="90%">
+      <source src={urlToFetch} type={`video/${sourceType}`} />
+      {/* Fallback message for browsers that do not support video playback */}
+      Your browser does not support the video tag.
+    </video>
+  );
+};
+
+export default VideoDisplay;

src/components/Preview/displays/ViewerDisplay.tsx

@@ -10,6 +10,7 @@ import {
   XtkDisplay,
   TextDisplay,
   NiiVueDisplay,
+  VideoDisplay,
 } from "./index";
 import { ActionState } from "../FileDetailView";
 
@@ -23,6 +24,7 @@ const components = {
   XtkDisplay,
   TextDisplay,
   NiiVueDisplay,
+  VideoDisplay,
 };
 
 interface ViewerDisplayProps {

src/components/Preview/displays/index.ts

@@ -8,3 +8,4 @@ export { default as PdfDisplay } from "./PdfDisplay";
 export { default as XtkDisplay } from "./XtkDisplay";
 export { default as TextDisplay } from "./TextDisplay";
 export { default as NiiVueDisplay } from "./NiiVueDisplay.tsx";
+export { default as VideoDisplay } from "./VideoDisplay.tsx";

tests/feedops.spec.ts

@@ -8,8 +8,6 @@ const SOME_FILE = path.join(__dirname, "..", "package-lock.json");
 test("Can perform feed operations", async ({ page, isMobile }) => {
   test.slow();
   await page.goto("feeds?type=private");
-  const classSelector = ".ant-typography";
-
   const animal = faker.animal.type();
   const feedName = `A study on ${animal}`;
   await createFeed(page, feedName, SOME_FILE);