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/providers/File.tsx

@@ -41,7 +41,8 @@ export function Provider({ children }: Props): ReactElement {
   const [previewBlob, setPreviewBlob] = useState<Blob | undefined>(undefined)
 
   useEffect(() => {
-    setMetadata(getMetadata(files))
+    const metadata = getMetadata(files)
+    setMetadata(metadata)
 
     if (previewUri) {
       URL.revokeObjectURL(previewUri) // Clear the preview from memory
@@ -49,12 +50,21 @@ export function Provider({ children }: Props): ReactElement {
       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 => {
-      setPreviewUri(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 (previewUri) {