itssoap/onedrive-index
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add video and audio player preview

Browse Source
This commit is contained in:
spencerwooo 2021-06-24 14:54:59 +01:00
parent d437402577
commit 2ea2db2cee
6 changed files with 142 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/FileListing.tsx
View File

@ -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>
}

17
components/previews/AudioPreview.tsx Normal file
View File

@ -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>
)
}

19
components/previews/VideoPreview.tsx Normal file
View File

@ -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>
)
}

71
package-lock.json generated
View File

@ -15,6 +15,7 @@
"next": "11.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-player": "^2.9.0",
"react-viewer": "^3.2.2",
"swr": "^0.5.6"
},
@ -1448,6 +1449,14 @@
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
"dev": true
},
"node_modules/deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/define-properties": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@ -3360,6 +3369,11 @@
"node": ">=4"
}
},
"node_modules/load-script": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
"integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
},
"node_modules/loader-utils": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@ -3471,6 +3485,11 @@
"safe-buffer": "^5.1.2"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -4635,11 +4654,31 @@
"react": "17.0.2"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-player": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
"integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
"dependencies": {
"deepmerge": "^4.0.0",
"load-script": "^1.0.0",
"memoize-one": "^5.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.0.1"
},
"peerDependencies": {
"react": ">=16.6.0"
}
},
"node_modules/react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@ -7061,6 +7100,11 @@
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
"dev": true
},
"deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
},
"define-properties": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@ -8480,6 +8524,11 @@
"strip-bom": "^3.0.0"
}
},
"load-script": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
"integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
},
"loader-utils": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@ -8573,6 +8622,11 @@
"safe-buffer": "^5.1.2"
}
},
"memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -9471,11 +9525,28 @@
"scheduler": "^0.20.2"
}
},
"react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-player": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
"integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
"requires": {
"deepmerge": "^4.0.0",
"load-script": "^1.0.0",
"memoize-one": "^5.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.0.1"
}
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"next": "11.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-player": "^2.9.0",
"react-viewer": "^3.2.2",
"swr": "^0.5.6"
},

8
utils/getFileIcon.ts
View File

@ -37,14 +37,22 @@ const extensions = {
aac: icons.audio,
mp3: icons.audio,
ogg: icons.audio,
flac: icons.audio,
oga: icons.audio,
opus: icons.audio,
avi: icons.video,
flv: icons.video,
mkv: icons.video,
mp4: icons.video,
'7z': icons.archive,
bz2: icons.archive,
xz: icons.archive,
wim: icons.archive,
gz: icons.archive,
rar: icons.archive,
tar: icons.archive,
zip: icons.archive,
css: icons.code,