Add Support for heic images

packages/files-ui/cypress/tests/file-preview-spec.ts

@@ -73,13 +73,22 @@ describe("File Preview", () => {
         homePage.fileItemName().dblclick()
         previewModal.unsupportedFileLabel().should("exist")
         previewModal.downloadUnsupportedFileButton().should("be.visible")
+        // ensure that the file download does not start until the download button is clicked
+        cy.get("@downloadRequest").then(($request) => {
+          // retrieving the alias (spy) should yield null because posts should not have been made yet
+          expect($request).to.be.null
+        })
+
+        // begin the file download 
+        previewModal.downloadUnsupportedFileButton().click()
+
         // ensure the download request contains the correct file
-        cy.get("@downloadRequest").its("request.body").should("contain", {
+        cy.wait("@downloadRequest").its("request.body").should("contain", {
           path: "/file.zip"
         })
       })
 
-      // return to the home and ensure preview menu option is not shown for unsupported file
+      // return to home, ensure the preview menu option is not shown for an unsupported file
       previewModal.closeButton().click()
       homePage.fileItemKebabButton().click()
       homePage.previewMenuOption().should("not.exist")

packages/files-ui/package.json

@@ -31,6 +31,7 @@
     "ethers": "^5.4.3",
     "fflate": "^0.7.1",
     "formik": "^2.2.5",
+    "heic-convert": "^1.2.4",
     "mime-matcher": "^1.0.5",
     "posthog-js": "^1.13.10",
     "react": "^16.14.0",

packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx

@@ -84,7 +84,7 @@ const SearchFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false
   const getPath = useCallback((cid: string): string => {
     const searchEntry = getSearchEntry(cid)
     // Set like this as look ups should always be using available cids
-    return searchEntry ? searchEntry.path : ""
+    return searchEntry ? searchEntry.path.replace(searchEntry.content.name, "") : ""
   }, [getSearchEntry])
 
   const pathContents: FileSystemItem[] = useMemo(() =>

packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx

@@ -40,7 +40,6 @@ export const useGetFile = () => {
     setError("")
 
     try {
-
       const content = await getFileContent(
         id,
         {
@@ -69,8 +68,6 @@ export const useGetFile = () => {
         setError(t`There was an error getting the preview.`)
       }
     }
-
-
   }, [bucket, getFileContent])
 
   return { getFile, isDownloading, error, downloadProgress }

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -43,7 +43,6 @@ import { CONTENT_TYPES } from "../../../../Utils/Constants"
 import { CSFTheme } from "../../../../Themes/types"
 import MimeMatcher from "../../../../Utils/MimeMatcher"
 import { useLanguageContext } from "../../../../Contexts/LanguageContext"
-import { getPathWithFile } from "../../../../Utils/pathUtils"
 import SurveyBanner from "../../../SurveyBanner"
 import { DragPreviewLayer } from "./DragPreviewLayer"
 import { useFileBrowser } from "../../../../Contexts/FileBrowserContext"
@@ -1083,7 +1082,7 @@ const FilesList = ({ isShared = false }: Props) => {
           closePreview={closePreview}
           nextFile={fileIndex < files.length - 1 ? setNextPreview : undefined}
           previousFile={fileIndex > 0 ? setPreviousPreview : undefined}
-          filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : getPathWithFile(currentPath, files[fileIndex].name)}
+          filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : currentPath}
         />
       )}
       { filePath && isReportFileModalOpen &&

packages/files-ui/src/Components/Modules/FilePreviewModal.tsx

@@ -27,9 +27,11 @@ import { useFileBrowser } from "../../Contexts/FileBrowserContext"
 import { useGetFile } from "./FileBrowsers/hooks/useGetFile"
 import { useMemo } from "react"
 import Menu from "../../UI-components/Menu"
+import { getPathWithFile } from "../../Utils/pathUtils"
 
 export interface IPreviewRendererProps {
   contents: Blob
+  contentType?: string
 }
 
 const SUPPORTED_FILE_TYPES: Record<string, React.FC<IPreviewRendererProps>> = {
@@ -196,6 +198,13 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
     delta: 20
   })
 
+  const previewRendererKey = useMemo(() => content_type &&
+    Object.keys(SUPPORTED_FILE_TYPES).find((type) => {
+      const matcher = new MimeMatcher(type)
+
+      return matcher.match(content_type)
+    }), [content_type])
+
   useEffect(() => {
     let bucketId
     // Handle preview in Search where a Bucket is not available, but can be assumed to be a `CSF` bucket
@@ -205,24 +214,24 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
     } else {
       bucketId = bucket.id
     }
-    getFile({ file, filePath, bucketId })
-      .then(setFileContent)
-      .catch(console.error)
-  }, [file, filePath, getFile, bucket, buckets])
 
-  const validRendererMimeType =
-    content_type &&
-    Object.keys(SUPPORTED_FILE_TYPES).find((type) => {
-      const matcher = new MimeMatcher(type)
+    if (previewRendererKey) {
+      setFileContent(undefined)
+      getFile({ file, filePath: getPathWithFile(filePath, file.name), bucketId })
+        .then((content) => {
+          setFileContent(content)
+        })
+        .catch(console.error)
+    }
+  }, [file, filePath, getFile, bucket, buckets, previewRendererKey])
+
 
-      return matcher.match(content_type)
-    })
 
   const PreviewComponent =
-    content_type &&
-    fileContent &&
-    validRendererMimeType &&
-    SUPPORTED_FILE_TYPES[validRendererMimeType]
+    !!content_type &&
+    !!fileContent &&
+    !!previewRendererKey &&
+    SUPPORTED_FILE_TYPES[previewRendererKey]
 
   useHotkeys("Esc,Escape", () => {
     if (file) {
@@ -231,15 +240,11 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
   })
 
   useHotkeys("Left,ArrowLeft", () => {
-    if (file && previousFile) {
-      previousFile()
-    }
+    previousFile && previousFile()
   })
 
   useHotkeys("Right,ArrowRight", () => {
-    if (file && nextFile) {
-      nextFile()
-    }
+    nextFile && nextFile()
   })
 
   const handleDownload = useCallback(() => {
@@ -389,7 +394,11 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
               !error &&
               compatibleFilesMatcher.match(content_type) &&
               fileContent &&
-              PreviewComponent && <PreviewComponent contents={fileContent} />}
+              PreviewComponent &&
+              <PreviewComponent
+                contents={fileContent}
+                contentType={content_type} />
+            }
           </div>
         </Grid>
         {desktop && (

packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react"
 import { IPreviewRendererProps } from "../FilePreviewModal"
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
+import heicConvert from "heic-convert"
+
 import {
   makeStyles,
   ITheme,
@@ -11,7 +13,8 @@ import {
   Button,
   ZoomInIcon,
   ZoomOutIcon,
-  FullscreenIcon
+  FullscreenIcon,
+  Loading
 } from "@chainsafe/common-components"
 
 const useStyles = makeStyles(
@@ -41,67 +44,82 @@ const useStyles = makeStyles(
     })
 )
 
-const ImagePreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
+const ImagePreview: React.FC<IPreviewRendererProps> = ({ contents, contentType }) => {
   const [imageUrl, setImageUrl] = useState<string | undefined>()
-
+  const [loading, setLoading] = useState(false)
   useEffect(() => {
-    setImageUrl(URL.createObjectURL(contents))
-
-    return () => {
-      imageUrl && URL.revokeObjectURL(imageUrl)
+    if (contentType !== "image/heic") {
+      setImageUrl(URL.createObjectURL(contents))
+    } else {
+      setLoading(true)
+      contents.arrayBuffer()
+        .then(b => heicConvert({
+          buffer: Buffer.from(b),
+          format: "JPEG",
+          quality: 0.5
+        }))
+        .catch(console.error)
+        .then(c => setImageUrl(URL.createObjectURL(new Blob([c]))))
+        .finally(() => setLoading(false))
     }
-    // eslint-disable-next-line
-  }, [contents])
+  }, [contents, contentType])
+
   const classes = useStyles()
   const { desktop } = useThemeSwitcher()
 
   return (
     <div className={classes.root}>
-      <TransformWrapper
-        options={{
-          limitToBounds: true,
-          limitToWrapper: true,
-          minScale: 0.2
-        }}
-      >
-        {
+      {loading
+        ? <Loading
+          size={50}
+          type='inherit'
+        />
+        : <TransformWrapper
+          options={{
+            limitToBounds: true,
+            limitToWrapper: true,
+            minScale: 0.2
+          }}
+        >
+          {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
-          ({ zoomIn, zoomOut, resetTransform }) => (
-            <>
-              {desktop && (
-                <div className={classes.controlsContainer}>
-                  <Button
-                    onClick={zoomIn}
-                    data-cy="button-zoom-in"
-                  >
-                    <ZoomInIcon />
-                  </Button>
-                  <Button
-                    onClick={zoomOut}
-                    data-cy="button-zoom-out"
-                  >
-                    <ZoomOutIcon />
-                  </Button>
-                  <Button
-                    onClick={resetTransform}
-                    data-cy="button-full-screen"
-                  >
-                    <FullscreenIcon />
-                  </Button>
-                </div>
-              )}
-              <TransformComponent>
-                <img
-                  src={imageUrl}
-                  alt=""
-                  className={classes.root}
-                />
-              </TransformComponent>
-            </>
-          )
-        }
-      </TransformWrapper>
+            ({ zoomIn, zoomOut, resetTransform }) => (
+              <>
+                {desktop && (
+                  <div className={classes.controlsContainer}>
+                    <Button
+                      onClick={zoomIn}
+                      data-cy="button-zoom-in"
+                    >
+                      <ZoomInIcon />
+                    </Button>
+                    <Button
+                      onClick={zoomOut}
+                      data-cy="button-zoom-out"
+                    >
+                      <ZoomOutIcon />
+                    </Button>
+                    <Button
+                      onClick={resetTransform}
+                      data-cy="button-full-screen"
+                    >
+                      <FullscreenIcon />
+                    </Button>
+                  </div>
+                )}
+                <TransformComponent>
+                  <img
+                    src={imageUrl}
+                    alt=""
+                    className={classes.root}
+                    onLoad={() => imageUrl && URL.revokeObjectURL(imageUrl)} />
+                </TransformComponent>
+              </>
+            )
+          }
+        </TransformWrapper>
+      }
     </div>
   )
 }

packages/files-ui/src/Utils/contentTypeGuesser.ts

@@ -1,15 +1,16 @@
 const guessContentType = (fileName: string) => {
   const { length, [length - 1]: ext } = fileName.split(".")
 
-  switch (ext) {
+  switch (ext.toLowerCase()) {
     case "pdf":
       return "application/pdf"
     case "jpg":
     case "jpeg":
     case "png":
     case "gif":
     case "bmp":
-      return `image/${ext}`
+    case "heic":
+      return `image/${ext.toLowerCase()}`
     case "mp3":
     case "m4a":
       return `audio/${ext}`

packages/files-ui/src/types.d.ts

@@ -0,0 +1 @@
+declare module "heic-convert";