feat: vod display (#686)

* feat: preview for html5 supported videos

* fix: handle out of limit tags

* feat: support preview on the donwload screen

* refactor: rework meta and preview handling to be more general

* fix: missing meta

* fix: do not allow maybe or probably types

* fix: make the media check more strict

---------

Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>

src/pages/files/AssetPreview.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
 import File from 'remixicon-react/FileLineIcon'
 import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
@@ -8,35 +8,52 @@ import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
 import { shortenHash } from '../../utils/hash'
 import { AssetIcon } from './AssetIcon'
+import { FitVideo } from '../../components/FitVideo'
 
 interface Props {
   previewUri?: string
   metadata?: Metadata
 }
 
-// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
+/* eslint-disable react/display-name */
+const getPreviewComponent = (previewUri?: string, metadata?: Metadata) => {
+  if (metadata?.isVideo) {
+    return () => <FitVideo src={previewUri} maxWidth="250px" maxHeight="175px" />
+  }
 
-export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
-  let previewComponent = <File />
-  let type = metadata?.type
+  if (metadata?.isImage) {
+    return () => <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
+  }
 
   if (metadata?.isWebsite) {
-    previewComponent = <Web />
-    type = 'Website'
-  } else if (metadata?.type === 'folder') {
-    previewComponent = <Folder />
-    type = 'Folder'
+    return () => <AssetIcon icon={<Web />} />
   }
 
+  if (metadata?.type === 'folder') {
+    return () => <AssetIcon icon={<Folder />} />
+  }
+
+  return () => <AssetIcon icon={<File />} />
+}
+
+const getType = (metadata?: Metadata) => {
+  if (metadata?.isWebsite) return 'Website'
+
+  if (metadata?.type === 'folder') return 'Folder'
+
+  return metadata?.type
+}
+
+// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
+export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
+  const PreviewAssetComponent = useMemo(() => getPreviewComponent(previewUri, metadata), [metadata, previewUri])
+  const type = useMemo(() => getType(metadata), [metadata])
+
   return (
     <Box mb={4}>
       <Box bgcolor="background.paper">
         <Grid container direction="row">
-          {previewUri ? (
-            <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
-          ) : (
-            <AssetIcon icon={previewComponent} />
-          )}
+          <PreviewAssetComponent />
           <Box p={2}>
             {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
             {metadata?.name && metadata?.name !== metadata?.hash && (

src/pages/files/AssetSyncing.tsx

@@ -3,6 +3,7 @@ import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
 import { DocumentationText } from '../../components/DocumentationText'
 import { LinearProgressWithLabel } from '../../components/ProgressBar'
+import { Tag } from '@ethersphere/bee-js'
 
 interface Props {
   reference: string
@@ -16,12 +17,20 @@ export function AssetSyncing({ reference }: Props): ReactElement {
   const [syncProgress, setSyncProgress] = useState<number>(0)
 
   const syncCheck = async () => {
-    if (!beeApi) {
-      return
-    }
+    if (!beeApi) return
 
-    const tags = await beeApi.getAllTags()
-    const tag = tags.find(t => t.address === reference)
+    let allTags: Tag[] = []
+    let offset = 0
+    const limit = 1000
+    let tagsBatch
+
+    do {
+      tagsBatch = await beeApi.getAllTags({ limit, offset })
+      allTags = allTags.concat(tagsBatch)
+      offset += limit
+    } while (tagsBatch.length === limit) // Continue if the batch is full, stop if fewer than the limit
+
+    const tag = allTags.find(t => t.address === reference)
 
     if (tag) {
       const progress = ((tag.seen + tag.synced) / tag.split) * 100
@@ -51,8 +60,6 @@ export function AssetSyncing({ reference }: Props): ReactElement {
           There are instances when it seems that the content isn't synchronized, despite being already available.
           To ensure it's not due to invalid synchronization data,
           verify availability from at least 70% using one of the stewardship endpoints.
-          
-          TODO: is 70 a good number?
     */
     if (beeApi && !isRetrieveChecking && syncProgress > 10 && syncProgress < 100) {
       // It's a long running task make sure only one run occurs at a time.

src/pages/files/Share.tsx

@@ -7,7 +7,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
+import { META_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
@@ -50,38 +50,35 @@ export function Share(): ReactElement {
 
       return
     }
-    const entries = await manifestJs.getHashes(reference)
+
+    const entries = await manifestJs.getHashes(reference, { exclude: [META_FILE_NAME] })
+    setSwarmEntries(entries)
+
     const indexDocument = await manifestJs.getIndexDocumentPath(reference)
     setIndexDocument(indexDocument)
 
-    const previewFile = entries[PREVIEW_FILE_NAME]
-
-    delete entries[META_FILE_NAME]
-    delete entries[PREVIEW_FILE_NAME]
-    setSwarmEntries(entries)
-
-    const count = Object.keys(entries).length
-
-    let metadata: Metadata | undefined = {
-      hash,
-      size: 0,
-      type: count > 1 ? 'folder' : 'unknown',
-      name: reference,
-      isWebsite: Boolean(indexDocument) && count > 1,
-      count,
-    }
-
     try {
-      const mtdt = await beeApi.downloadFile(reference, META_FILE_NAME)
-      const remoteMetadata = mtdt.data.text()
-      metadata = { ...metadata, ...(JSON.parse(remoteMetadata) as Metadata) }
-    } catch (e) {} // eslint-disable-line no-empty
+      const remoteMetadata = await beeApi.downloadFile(reference, META_FILE_NAME)
+      const formattedMetadata = JSON.parse(remoteMetadata.data.text()) as Metadata
 
-    if (previewFile) {
-      setPreview(`${apiUrl}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+      if (formattedMetadata.isVideo || formattedMetadata.isImage) {
+        setPreview(`${apiUrl}/bzz/${reference}`)
+      }
+      setMetadata({ ...formattedMetadata, hash })
+    } catch (e) {
+      // if metadata is not available or invalid go with the default one
+      const count = Object.keys(entries).length
+      setMetadata({
+        hash,
+        type: count > 1 ? 'folder' : 'unknown',
+        name: reference,
+        count,
+        isWebsite: Boolean(indexDocument && /.*\.html?$/i.test(indexDocument)),
+        isVideo: Boolean(indexDocument && /.*\.(mp4|webm|ogg|mp3|ogg|wav)$/i.test(indexDocument)),
+        isImage: Boolean(indexDocument && /.*\.(jpg|jpeg|png|gif|webp|svg)$/i.test(indexDocument)),
+        // naive assumption based on indexDocument, we don't want to donwload the whole manifest
+      })
     }
-
-    setMetadata(metadata)
   }
 
   function onOpen() {

src/pages/files/Upload.tsx

@@ -6,7 +6,7 @@ import { DocumentationText } from '../../components/DocumentationText'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
+import { META_FILE_NAME } from '../../constants'
 import { Context as BeeContext, CheckState } from '../../providers/Bee'
 import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
@@ -33,7 +33,7 @@ export function Upload(): ReactElement {
 
   const { stamps, refresh } = useContext(StampsContext)
   const { beeApi } = useContext(SettingsContext)
-  const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
+  const { files, setFiles, uploadOrigin, metadata, previewUri } = useContext(FileContext)
   const { identities, setIdentities } = useContext(IdentityContext)
   const { status } = useContext(BeeContext)
 
@@ -98,31 +98,15 @@ export function Upload(): ReactElement {
         }
       }
     }
+
     const lastModified = files[0].lastModified
 
-    // We want to store only some metadata
-    const mtd: SwarmMetadata = {
-      name: metadata.name,
-      size: metadata.size,
-    }
-
-    // Type of the file only makes sense for a single file
-    if (files.length === 1) mtd.type = metadata.type
-
-    const metafile = new File([JSON.stringify(mtd)], META_FILE_NAME, {
+    const metafile = new File([JSON.stringify(metadata)], META_FILE_NAME, {
       type: 'application/json',
       lastModified,
     })
     fls.push(packageFile(metafile))
 
-    if (previewBlob) {
-      const previewFile = new File([previewBlob], PREVIEW_FILE_NAME, {
-        type: 'image/jpeg',
-        lastModified,
-      })
-      fls.push(packageFile(previewFile))
-    }
-
     setUploading(true)
 
     await waitUntilStampUsable(stamp.batchID, beeApi)