Skip to content

Commit

Permalink
fix: avoid duplicated fetch during preview
Browse files Browse the repository at this point in the history
Closes #2217
  • Loading branch information
lidel committed Aug 31, 2024
1 parent b9f622d commit a6170ce
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 14 deletions.
2 changes: 1 addition & 1 deletion public/locales/en/files.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/bundles/files/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const actions = () => ({
...fileFromStats({ ...stats, path }),
fetched: time,
type: 'file',
read: () => ipfs.cat(stats.cid),
read: (offset, length) => ipfs.cat(stats.cid, { offset, length }),

Check failure on line 217 in src/bundles/files/actions.js

View workflow job for this annotation

GitHub Actions / typecheck / typecheck

Parameter 'offset' implicitly has an 'any' type.

Check failure on line 217 in src/bundles/files/actions.js

View workflow job for this annotation

GitHub Actions / typecheck / typecheck

Parameter 'length' implicitly has an 'any' type.
name: path.split('/').pop(),
size: stats.size,
cid: stats.cid
Expand Down
29 changes: 17 additions & 12 deletions src/files/file-preview/FilePreview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
Expand All @@ -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 embedd them on page
return
}
const readBuffer = buffer || await read(0, maxPlainTextPreview)
if (!buffer) {
setBuffer(readBuffer)
}
Expand All @@ -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()
Expand Down Expand Up @@ -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
}
Expand All @@ -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>}
</>
}
Expand Down

0 comments on commit a6170ce

Please sign in to comment.