Merge branch 'main' into readable-path

components/previews/VideoPreview.tsx

@@ -3,12 +3,15 @@ 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 { getReadablePath } from '../../utils/getReadablePath'
+import { DownloadButton } from '../DownloadBtnGtoup'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
 
 const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   const { asPath } = useRouter()
@@ -20,21 +23,49 @@ 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>