feat: add file view (#1064)

app/assets/javascripts/Components/FilePreview/FilePreview.tsx

@@ -0,0 +1,81 @@
+import { WebApplication } from '@/Application/Application'
+import { concatenateUint8Arrays } from '@/Utils'
+import { FileItem } from '@standardnotes/snjs'
+import { useEffect, useMemo, useState } from 'react'
+import FilePreviewError from './FilePreviewError'
+import { isFileTypePreviewable } from './isFilePreviewable'
+import PreviewComponent from './PreviewComponent'
+
+type Props = {
+  application: WebApplication
+  file: FileItem
+}
+
+const FilePreview = ({ file, application }: Props) => {
+  const isFilePreviewable = useMemo(() => {
+    return isFileTypePreviewable(file.mimeType)
+  }, [file.mimeType])
+
+  const [isDownloading, setIsDownloading] = useState(true)
+  const [downloadProgress, setDownloadProgress] = useState(0)
+  const [downloadedBytes, setDownloadedBytes] = useState<Uint8Array>()
+
+  useEffect(() => {
+    if (!isFilePreviewable) {
+      setIsDownloading(false)
+      setDownloadProgress(0)
+      setDownloadedBytes(undefined)
+      return
+    }
+
+    const downloadFileForPreview = async () => {
+      if (downloadedBytes) {
+        return
+      }
+
+      setIsDownloading(true)
+
+      try {
+        const chunks: Uint8Array[] = []
+        setDownloadProgress(0)
+        await application.files.downloadFile(file, async (decryptedChunk, progress) => {
+          chunks.push(decryptedChunk)
+          if (progress) {
+            setDownloadProgress(Math.round(progress.percentComplete))
+          }
+        })
+        const finalDecryptedBytes = concatenateUint8Arrays(chunks)
+        setDownloadedBytes(finalDecryptedBytes)
+      } catch (error) {
+        console.error(error)
+      } finally {
+        setIsDownloading(false)
+      }
+    }
+
+    void downloadFileForPreview()
+  }, [application.files, downloadedBytes, file, isFilePreviewable])
+
+  return isDownloading ? (
+    <div className="flex flex-col justify-center items-center flex-grow">
+      <div className="flex items-center">
+        <div className="sk-spinner w-5 h-5 spinner-info mr-3"></div>
+        <div className="text-base font-semibold">{downloadProgress}%</div>
+      </div>
+      <span className="mt-3">Loading file...</span>
+    </div>
+  ) : downloadedBytes ? (
+    <PreviewComponent file={file} bytes={downloadedBytes} />
+  ) : (
+    <FilePreviewError
+      file={file}
+      filesController={application.getViewControllerManager().filesController}
+      tryAgainCallback={() => {
+        setDownloadedBytes(undefined)
+      }}
+      isFilePreviewable={isFilePreviewable}
+    />
+  )
+}
+
+export default FilePreview