add video and audio player preview

components/FileListing.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
+import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
 
 import useSWR from 'swr'
 import { useRouter } from 'next/router'
@@ -10,7 +11,8 @@ import dynamic from 'next/dynamic'
 
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
-import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
+import { VideoPreview } from './previews/VideoPreview'
+import { AudioPreview } from './previews/AudioPreview'
 
 // View images as gallery
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -30,6 +32,12 @@ const humanFileSize = (size: number) => {
   return `${formatted} ${'KMGTPEZY'[i - 1]}B`
 }
 
+/**
+ * Convert url query into path string
+ *
+ * @param query Url query property
+ * @returns Path string
+ */
 const queryToPath = (query?: ParsedUrlQuery) => {
   if (query) {
     const { path } = query
@@ -183,6 +191,23 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
             </div>
           )
 
+        case preview.text:
+          return <div>text</div>
+
+        case preview.code:
+          return <div>code</div>
+
+        case preview.markdown:
+          return <div>markdown</div>
+
+        case preview.video:
+          return <VideoPreview file={resp} />
+        case preview.audio:
+          return <AudioPreview file={resp} />
+
+        case preview.pdf:
+          return <div>pdf</div>
+
         default:
           return <div className="bg-white shadow rounded">{fileName}</div>
       }

components/previews/AudioPreview.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react'
+import ReactPlayer from 'react-player'
+
+export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  return (
+    <div className="bg-white rounded shadow p-3 w-full">
+      <div className="text-center mb-6">{file.name}</div>
+      <ReactPlayer
+        url={file['@microsoft.graph.downloadUrl']}
+        controls
+        width="100%"
+        height="48px"
+        config={{ file: { forceAudio: true } }}
+      />
+    </div>
+  )
+}

components/previews/VideoPreview.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react'
+import ReactPlayer from 'react-player'
+
+export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  return (
+    <div className="bg-white rounded shadow p-3">
+      <div className="relative" style={{ paddingTop: '56.25%' }}>
+        <ReactPlayer
+          className="absolute top-0 left-0 w-full h-full"
+          url={file['@microsoft.graph.downloadUrl']}
+          controls
+          width="100%"
+          height="100%"
+          config={{ file: { forceVideo: true } }}
+        />
+      </div>
+    </div>
+  )
+}