feat: vod display (#391)

* feat: add preview for all html5 media types + alignments for bee dashboard compatibility

* fix: make the media check more strict

---------

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

Author: LevilkTheReal

src/components/AssetPreview.tsx

@@ -1,5 +1,5 @@
 import { Box, Grid, Typography } from '@material-ui/core'
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
 import { File, Folder, Monitor } from 'react-feather'
 import { AssetIcon } from './AssetIcon'
 import { FitImage } from './FitImage'
@@ -8,6 +8,7 @@ import { shortenHash } from '../utils/hash'
 import { PREVIEW_DIMENSIONS } from '../constants'
 
 import text from '../translations'
+import { FitVideo } from './FitVideo'
 
 interface Props {
   assetName?: string
@@ -17,24 +18,45 @@ interface Props {
 
 // TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
 
-export function AssetPreview({ previewUri, metadata }: Props): ReactElement {
-  let previewComponent = <File />
-  let type = mimeToKind(metadata?.type)
+/* eslint-disable react/display-name */
+const getPreviewComponent = (previewUri?: string, metadata?: Metadata) => {
+  if (metadata?.isVideo) {
+    return () => <FitVideo src={previewUri} />
+  }
+
+  if (metadata?.isImage) {
+    return () => <FitImage alt="Upload Preview" src={previewUri} />
+  }
 
   if (metadata?.isWebsite) {
-    previewComponent = <Monitor />
-    type = text.uploadFile.headerWebsite
-  } else if (metadata?.type === 'folder') {
-    previewComponent = <Folder />
-    type = text.uploadFile.headerFolder
+    return () => <AssetIcon icon={<Monitor />} />
   }
 
+  if (metadata?.type === 'folder') {
+    return () => <AssetIcon icon={<Folder />} />
+  }
+
+  return () => <AssetIcon icon={<File />} />
+}
+
+const getType = (metadata?: Metadata) => {
+  if (metadata?.isWebsite) return text.uploadFile.headerWebsite
+
+  if (metadata?.type === 'folder') return text.uploadFile.headerFolder
+
+  return mimeToKind(metadata?.type)
+}
+
+export function AssetPreview({ previewUri, metadata }: Props): ReactElement {
+  const PreviewAssetComponent = useMemo(() => getPreviewComponent(previewUri, metadata), [metadata, previewUri])
+  const type = useMemo(() => getType(metadata), [metadata])
+
   return (
     <Box mb={0.25}>
       <Box bgcolor="background.paper">
         <Grid container direction="row">
           <div style={{ width: PREVIEW_DIMENSIONS.maxWidth, height: PREVIEW_DIMENSIONS.maxHeight }}>
-            {previewUri ? <FitImage alt="Upload Preview" src={previewUri} /> : <AssetIcon icon={previewComponent} />}
+            <PreviewAssetComponent />
           </div>
           <Box p={2} textAlign="left">
             {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}

src/components/FitVideo.tsx

@@ -0,0 +1,22 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    video: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'scale-down',
+    },
+  }),
+)
+
+interface VideoProps {
+  src: string | undefined
+}
+
+export function FitVideo(props: VideoProps): ReactElement {
+  const classes = useStyles()
+
+  return <video className={classes.video} src={props.src} controls />
+}

src/constants.ts

@@ -5,8 +5,7 @@ export const POSTAGE_STAMP =
   (process.env.REACT_APP_POSTAGE_STAMP as Reference | undefined) ||
   ('0000000000000000000000000000000000000000000000000000000000000000' as Reference)
 
-export const META_FILE_NAME = '.swarmgatewaymeta.json'
-export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
+export const META_FILE_NAME = 'metadata'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
 
 const url = window.location.origin

src/pages/Share/Upload.tsx

@@ -56,7 +56,7 @@ const SharePage = ({
 
   if (metadata?.isWebsite) header = text.uploadFile.headerWebsite
 
-  const reachedSizeLimit = Boolean(metadata && metadata?.size > UPLOAD_SIZE_LIMIT)
+  const reachedSizeLimit = Boolean(metadata?.size && metadata.size > UPLOAD_SIZE_LIMIT)
 
   return (
     <Layout

src/pages/Share/index.tsx

@@ -14,33 +14,43 @@ export default function ShareGeneral(): ReactElement {
   const [uploadReference, setUploadReference] = useState('')
   const [isUploadingFile, setIsUploadingFile] = useState<boolean>(false)
   const [uploadError, setUploadError] = useState<boolean>(false)
-  const [preview, setPreview] = useState<string | undefined>(undefined)
+  const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
   const [previewBlob, setPreviewBlob] = useState<Blob | undefined>(undefined)
   const [metadata, setMetadata] = useState<Metadata | undefined>()
   const { upload } = useContext(Context)
 
   useEffect(() => {
-    setMetadata(getMetadata(files))
+    const metadata = getMetadata(files)
+    setMetadata(metadata)
 
-    if (preview) {
-      URL.revokeObjectURL(preview) // Clear the preview from memory
-      setPreview(undefined)
+    if (previewUri) {
+      URL.revokeObjectURL(previewUri) // Clear the preview from memory
+      setPreviewUri(undefined)
       setPreviewBlob(undefined)
     }
 
-    if (files.length !== 1 || !files[0].type.startsWith('image')) return
+    if (files.length !== 1) return
 
-    resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
-      setPreview(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory
-      setPreviewBlob(blob)
-    })
+    if (metadata.isVideo) {
+      const videoFile = files[0]
+      const videoBlob = new Blob([videoFile], { type: videoFile.type })
+      setPreviewUri(URL.createObjectURL(videoBlob))
+      setPreviewBlob(videoBlob)
+    }
+
+    if (metadata.isImage) {
+      resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
+        setPreviewUri(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory
+        setPreviewBlob(blob)
+      })
+    }
 
     return () => {
-      if (preview) {
-        URL.revokeObjectURL(preview)
+      if (previewUri) {
+        URL.revokeObjectURL(previewUri)
       }
     }
-  }, [files]) //eslint-disable-line react-hooks/exhaustive-deps
+  }, [files]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const uploadFile = () => {
     if (files.length === 0 || !metadata) return
@@ -67,7 +77,7 @@ export default function ShareGeneral(): ReactElement {
       uploadError={uploadError}
       setFiles={setFiles}
       metadata={metadata}
-      preview={preview}
+      preview={previewUri}
       files={files}
       uploadFile={uploadFile}
       isUploadingFile={isUploadingFile}

src/providers/bee.tsx

@@ -3,7 +3,7 @@ import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import { createContext, ReactChild, ReactElement } from 'react'
 
-import { BEE_HOSTS, META_FILE_NAME, POSTAGE_STAMP, PREVIEW_FILE_NAME } from '../constants'
+import { BEE_HOSTS, META_FILE_NAME, POSTAGE_STAMP } from '../constants'
 import { detectIndexHtml } from '../utils/file'
 import { ManifestJs } from '../utils/manifest'
 import { packageFile } from '../utils/SwarmFile'
@@ -45,37 +45,21 @@ function hashToIndex(hash: Reference | string) {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const upload = async (files: SwarmFile[], metadata: Metadata, preview?: Blob) => {
+  const upload = async (files: SwarmFile[], metadata: Metadata) => {
     const fls = files.map(packageFile) // Apart from packaging, this is needed to not modify the original files array as it can trigger effects
     let indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(files) || undefined
 
     // TODO: Remove once this is fixed in bee-js https://github.com/ethersphere/bee-js/issues/531
     if (indexDocument) indexDocument = unescape(encodeURIComponent(indexDocument))
-    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 lastModified = files[0].lastModified
     fls.push(
-      new File([JSON.stringify(mtd)], META_FILE_NAME, {
+      new File([JSON.stringify(metadata)], META_FILE_NAME, {
         type: 'application/json',
         lastModified,
       }),
     )
 
-    if (preview) {
-      const previewFile = new File([preview], PREVIEW_FILE_NAME, {
-        lastModified,
-      })
-      fls.push(previewFile)
-    }
-
     const { reference } = await randomBee.uploadFiles(POSTAGE_STAMP, fls, { indexDocument })
     const hashIndex = hashToIndex(reference)
 
@@ -110,51 +94,48 @@ export function Provider({ children }: Props): ReactElement {
     preview?: string
     entries: Record<string, string>
   }> => {
-    let metadata: Metadata | undefined = { size: 0, type: 'unknown', name: hash, isWebsite: false }
+    let metadata: Metadata | undefined
     let entries: Record<string, string> = {}
-    let preview
+    let indexDocument: string | null = null
+    let preview: string | undefined
 
     const hashIndex = hashToIndex(hash)
     const bee = new Bee(BEE_HOSTS[hashIndex])
 
-    try {
-      const mtdt = await bee.downloadFile(hash, META_FILE_NAME)
-      metadata = { ...metadata, ...(JSON.parse(mtdt.data.text()) as Metadata) }
-    } catch (e) {} // eslint-disable-line no-empty
-
     try {
       const manifestJs = new ManifestJs(bee)
       const isManifest = await manifestJs.isManifest(hash)
 
       if (!isManifest) throw Error('The specified hash does not contain valid content.')
-      entries = await manifestJs.getHashes(hash)
-
-      const indexDocument = await manifestJs.getIndexDocumentPath(hash)
-
-      metadata.isWebsite = Boolean(indexDocument && /.*\.html?$/i.test(indexDocument)) // only html documents can be websites
 
-      preview = getPreview(entries, hash)
-
-      // Erase the files added by the gateway
-      delete entries[META_FILE_NAME]
-      delete entries[PREVIEW_FILE_NAME]
-
-      metadata.count = Object.keys(entries).length
-
-      if (metadata.count > 1) metadata.type = 'folder'
+      entries = await manifestJs.getHashes(hash, { exclude: [META_FILE_NAME] })
+      indexDocument = await manifestJs.getIndexDocumentPath(hash)
     } catch (e) {} // eslint-disable-line no-empty
 
-    metadata.hash = hash
-
-    return { metadata, preview, entries }
-  }
+    try {
+      const remoteMetadata = await bee.downloadFile(hash, META_FILE_NAME)
+      const formattedMetadata = JSON.parse(remoteMetadata.data.text()) as Metadata
 
-  const getPreview = (entries: Record<string, string>, hash: Reference | string): string | undefined => {
-    if (!entries[PREVIEW_FILE_NAME]) return
+      if (formattedMetadata.isVideo || formattedMetadata.isImage) {
+        preview = `${BEE_HOSTS[hashIndex]}/bzz/${hash}`
+      }
 
-    const hashIndex = hashToIndex(hash)
+      metadata = { ...formattedMetadata, hash }
+    } catch (e) {
+      const count = Object.keys(entries).length
+      metadata = {
+        hash,
+        type: count > 1 ? 'folder' : 'unknown',
+        name: hash,
+        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
+      }
+    }
 
-    return `${BEE_HOSTS[hashIndex]}/bzz/${hash}/${PREVIEW_FILE_NAME}`
+    return { metadata, preview, entries }
   }
 
   const getChunk = (hash: Reference | string): Promise<Data> => {

src/react-app-env.d.ts

@@ -1,16 +1,18 @@
 /// <reference types="react-scripts" />
 
 interface SwarmMetadata {
-  size: number
+  size?: number
   name: string
   type?: string
 }
 
 interface Metadata extends SwarmMetadata {
   type: string
-  isWebsite: boolean
   count?: number
   hash?: string
+  isWebsite?: boolean
+  isVideo?: boolean
+  isImage?: boolean
 }
 
 type FilePath = File & { path?: string; fullPath?: string }

src/utils/file.ts

@@ -1,5 +1,7 @@
 import { DragEvent } from 'react'
 import { convertSwarmFile } from './SwarmFile'
+import { isSupportedVideoType } from './video'
+import { isSupportedImageType } from './image'
 
 const indexHtmls = ['index.html', 'index.htm']
 
@@ -31,12 +33,14 @@ export function detectIndexHtml(files: SwarmFile[]): string | false {
 
 export function getMetadata(files: SwarmFile[]): Metadata {
   const size = files.reduce((total, item) => total + item.size, 0)
-  const isWebsite = Boolean(detectIndexHtml(files))
   const name = getAssetNameFromFiles(files)
   const type = files.length === 1 ? files[0].type : 'folder'
   const count = files.length
+  const isWebsite = Boolean(detectIndexHtml(files))
+  const isVideo = isSupportedVideoType(type)
+  const isImage = isSupportedImageType(type)
 
-  return { size, name, type, isWebsite, count }
+  return { size, name, type, isWebsite, count, isVideo, isImage }
 }
 
 export function getAssetNameFromFiles(files: SwarmFile[]): string {

src/utils/image.ts

@@ -25,6 +25,28 @@ export function getDimensions(imgWidth: number, imgHeight: number, maxWidth?: nu
   return { width: imgWidth / ratio, height: imgHeight / ratio }
 }
 
+function getAllowedTypes(): string[] {
+  return [
+    'image/bmp',
+    'image/gif',
+    'image/vnd.microsoft.icon',
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml',
+    'image/tiff',
+    'image/webp',
+  ]
+}
+
+/**
+ * Check if the image type is supported
+ *
+ * @param type Image MIME type
+ *
+ * @returns True if the type is supported, false otherwise
+ */
+export const isSupportedImageType = (type: string): boolean => getAllowedTypes().includes(type)
+
 /**
  * Resize image passed to fit in the bounding box defined with maxWidth and maxHeight.
  * Note that one or both of the bounding box dimensions may be omitted
@@ -37,16 +59,7 @@ export function getDimensions(imgWidth: number, imgHeight: number, maxWidth?: nu
  */
 export function resize(file: File, maxWidth?: number, maxHeight?: number): Promise<Blob> {
   return new Promise((resolve, reject) => {
-    const allowedTypes = [
-      'image/bmp',
-      'image/gif',
-      'image/vnd.microsoft.icon',
-      'image/jpeg',
-      'image/png',
-      'image/svg+xml',
-      'image/tiff',
-      'image/webp',
-    ]
+    const allowedTypes = getAllowedTypes()
 
     if (!file.size || !file.type || !allowedTypes.includes(file.type)) return reject('File not supported!')