From 2ea2db2ceeb19213b3cbc2b4085c8be5b8845e11 Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Thu, 24 Jun 2021 14:54:59 +0100 Subject: [PATCH] add video and audio player preview --- components/FileListing.tsx | 27 ++++++++++- components/previews/AudioPreview.tsx | 17 +++++++ components/previews/VideoPreview.tsx | 19 ++++++++ package-lock.json | 71 ++++++++++++++++++++++++++++ package.json | 1 + utils/getFileIcon.ts | 8 ++++ 6 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 components/previews/AudioPreview.tsx create mode 100644 components/previews/VideoPreview.tsx diff --git a/components/FileListing.tsx b/components/FileListing.tsx index 67b9b9b..b5d9ac8 100644 --- a/components/FileListing.tsx +++ b/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 }) = ) + case preview.text: + return
text
+ + case preview.code: + return
code
+ + case preview.markdown: + return
markdown
+ + case preview.video: + return + case preview.audio: + return + + case preview.pdf: + return
pdf
+ default: return
{fileName}
} diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx new file mode 100644 index 0000000..e07deab --- /dev/null +++ b/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 ( +
+
{file.name}
+ +
+ ) +} diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx new file mode 100644 index 0000000..7c10f23 --- /dev/null +++ b/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 ( +
+
+ +
+
+ ) +} diff --git a/package-lock.json b/package-lock.json index 7b62d29..418fef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f7c9394..14facbb 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/utils/getFileIcon.ts b/utils/getFileIcon.ts index e181366..1f9ac66 100644 --- a/utils/getFileIcon.ts +++ b/utils/getFileIcon.ts @@ -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,