fix(files): avoid duplicated fetch during preview (#2254)

Closes #2217

Author: lidel

public/locales/en/files.json

@@ -101,7 +101,7 @@
       "paragraph3": "Pro tip: drag and drop a file from any other page of the Web UI to add them to the root of your MFS."
     }
   },
-  "loadMore": "Load more",
+  "previewLimitReached": "This preview is limited to 10 KiB. Click the download button to access the full file.",
   "previousFolder": "Go back to previous folder",
   "fileLabel": "Select {type} {name} with size: {size}",
   "hashUnavailable": "hash unavailable",

src/bundles/files/actions.js

@@ -214,7 +214,13 @@ const actions = () => ({
           ...fileFromStats({ ...stats, path }),
           fetched: time,
           type: 'file',
-          read: () => ipfs.cat(stats.cid),
+          /**
+          * Reads a portion of data from IPFS.
+          * @param {number} offset - The starting point to read from.
+          * @param {number} length - The number of bytes to read.
+          * @returns {AsyncIterable<Uint8Array>} An async generator that yields the data read from IPFS.
+          */
+          read: (offset, length) => ipfs.cat(stats.cid, { offset, length }),
           name: path.split('/').pop(),
           size: stats.size,
           cid: stats.cid

src/files/file-preview/FilePreview.js

@@ -11,6 +11,8 @@ import { useDrag } from 'react-dnd'
 import { toString as fromUint8ArrayToString } from 'uint8arrays'
 import Button from '../../components/button/Button.js'
 
+const maxPlainTextPreview = 1024 * 10 // only preview small part of huge files
+
 const Drag = ({ name, size, cid, path, children }) => {
   const [, drag] = useDrag({
     item: { name, size, cid, path, type: 'FILE' }
@@ -29,7 +31,11 @@ const Preview = (props) => {
   const type = typeFromExt(name)
 
   const loadContent = useCallback(async () => {
-    const readBuffer = buffer || await read()
+    if (['audio', 'video', 'pdf', 'image'].includes(type)) {
+      // noop, we dont need to read() preview for these because we embed them on page
+      return
+    }
+    const readBuffer = buffer || await read(0, maxPlainTextPreview)
     if (!buffer) {
       setBuffer(readBuffer)
     }
@@ -44,7 +50,7 @@ const Preview = (props) => {
     const hasMore = !done && new TextEncoder().encode(currentContent).length < size
 
     setHasMoreContent(hasMore)
-  }, [buffer, content, read, size])
+  }, [buffer, content, read, size, type])
 
   useEffect(() => {
     loadContent()
@@ -102,21 +108,20 @@ const Preview = (props) => {
               : <Trans i18nKey='openWithLocalAndPublicGateway' t={t}>
           Try opening it instead with your <a href={src} download target='_blank' rel='noopener noreferrer' className='link blue'>local gateway</a> or <a href={srcPublic} download target='_blank' rel='noopener noreferrer' className='link blue'>public gateway</a>.
               </Trans>
-
             }
-
           </p>
         </div>
       )
 
-      if (size > 1024 * 1024 * 4) {
-        return cantPreview
-      }
-
       if (content === null) {
         return <ComponentLoader />
       }
 
+      // a precaution to not render too much, in case we overread
+      if (content.length > maxPlainTextPreview) {
+        return cantPreview
+      }
+
       if (isBinary(name, content)) {
         return cantPreview
       }
@@ -126,12 +131,12 @@ const Preview = (props) => {
           {content}
         </pre>
         { hasMoreContent && <div className="w-100 flex items-center justify-center">
-          <Button onClick={ loadContent }>
-            { t('loadMore')}
-          </Button>
-          <Button className="mh2" onClick={ onDownload }>
+          <p><Trans i18nKey='previewLimitReached' t={t}>This preview is limited to 10 KiB. Click the download button to access the full file.</Trans></p>
+          <p>
+          <Button className="mh2 lh-copy bn justify-center flex " onClick={ onDownload }>
             { t('app:actions.download')}
           </Button>
+          </p>
         </div>}
       </>
     }