add flv video support

with flv.js which is dynamicly imported

components/previews/VideoPreview.tsx

@@ -3,11 +3,14 @@ import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
 import DPlayer from 'react-dplayer'
 import toast from 'react-hot-toast'
+import { useAsync } from 'react-async-hook'
 
 import { getBaseUrl } from '../../utils/getBaseUrl'
 import { DownloadButton } from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 import { getExtension } from '../../utils/getFileIcon'
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
 
 const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   const { asPath } = useRouter()
@@ -19,21 +22,45 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   // We assume subtitle files are beside the video with the same name, only webvtt '.vtt' files are supported
   const subtitle = `/api?path=${asPath.replace(getExtension(file.name), 'vtt')}&raw=true`
 
+  const isFlv = getExtension(file.name) === 'flv'
+  const { loading, error, result: flvjs } = useAsync(async () => {
+    if (isFlv) {
+      return (await import('flv.js')).default
+    }
+  }, [isFlv])
+
   return (
     <>
       <PreviewContainer>
-        <DPlayer
-          className="aspect-video"
-          options={{
-            volume: 1.0,
-            lang: 'en',
-            video: {
-              url: file['@microsoft.graph.downloadUrl'],
-              pic: thumbnail,
-            },
-            subtitle: { url: subtitle },
-          }}
-        />
+        {error ? (
+          <FourOhFour errorMsg={error.message} />
+        ) : loading && isFlv ? (
+          <Loading loadingText="Loading FLV extension..." />
+        ) : (
+          <DPlayer
+            className="aspect-video"
+            options={{
+              volume: 1.0,
+              lang: 'en',
+              video: {
+                url: file['@microsoft.graph.downloadUrl'],
+                pic: thumbnail,
+                type: isFlv ? 'customFlv' : 'auto',
+                customType: {
+                  customFlv: (video: HTMLVideoElement) => {
+                    const flvPlayer = flvjs!.createPlayer({
+                      type: 'flv',
+                      url: video.src
+                    })
+                    flvPlayer.attachMediaElement(video)
+                    flvPlayer.load()
+                  }
+                }
+              },
+              subtitle: { url: subtitle }
+            }}
+          />
+        )}
       </PreviewContainer>
 
       <DownloadBtnContainer>

package.json

@@ -22,6 +22,7 @@
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
     "emoji-regex": "^10.0.0",
+    "flv.js": "^1.6.2",
     "ioredis": "^4.28.2",
     "jszip": "^3.7.1",
     "next": "^12.0.10",

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   eslint: 8.8.0
   eslint-config-next: 12.0.10
   eslint-config-prettier: ^8.3.0
+  flv.js: ^1.6.2
   ioredis: ^4.28.2
   jszip: ^3.7.1
   next: ^12.0.10
@@ -68,6 +69,7 @@ dependencies:
   cors: 2.8.5
   crypto-js: 4.1.1
   emoji-regex: 10.0.0
+  flv.js: 1.6.2
   ioredis: 4.28.3
   jszip: 3.7.1
   next: 12.0.10_react-dom@17.0.2+react@17.0.2
@@ -1185,6 +1187,10 @@ packages:
       es6-symbol: 3.1.3
     dev: false
 
+  /es6-promise/4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+    dev: false
+
   /es6-symbol/3.1.3:
     resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
     dependencies:
@@ -1539,6 +1545,13 @@ packages:
     resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
     dev: true
 
+  /flv.js/1.6.2:
+    resolution: {integrity: sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==}
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: 2.1.5
+    dev: false
+
   /follow-redirects/1.14.7:
     resolution: {integrity: sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==}
     engines: {node: '>=4.0'}
@@ -3696,6 +3709,10 @@ packages:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
     dev: false
 
+  /webworkify-webpack/2.1.5:
+    resolution: {integrity: sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==}
+    dev: false
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies: