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 && (