diff --git a/components/FileListing.tsx b/components/FileListing.tsx index 4b0b89b..4aef5a6 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -1,5 +1,6 @@ import axios from 'axios' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import toast, { Toaster } from 'react-hot-toast' import { ParsedUrlQuery } from 'querystring' import { FunctionComponent, useState } from 'react' @@ -142,6 +143,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
Last Modified
Size
+ {imagesInFolder.length !== 0 && ( = ({ query }) = drag={false} rotatable={false} noClose={true} + scalable={false} + zoomSpeed={0.5} downloadable={true} downloadInNewWindow={true} onMaskClick={() => { setImageViewerVisibility(false) }} + customToolbar={toolbars => { + return toolbars.concat([ + { + key: 'copy', + render: , + onClick: i => { + navigator.clipboard.writeText(i.downloadUrl ? i.downloadUrl : '') + toast.success('Copied to clipboard.') + }, + }, + ]) + }} /> )} @@ -187,13 +203,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) = if (hasKey(extensions, fileExtension)) { switch (extensions[fileExtension]) { case preview.image: - return ( -
-
-
{downloadUrl}
-
-
- ) + router.push(downloadUrl) + return <> case preview.text: return diff --git a/package-lock.json b/package-lock.json index 55483b0..4b263fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,9 @@ "next": "11.0.0", "prismjs": "^1.23.0", "react": "17.0.2", + "react-copy-to-clipboard": "^5.0.3", "react-dom": "17.0.2", + "react-hot-toast": "^2.0.0", "react-markdown": "^6.0.2", "react-pdf": "^5.3.0", "react-player": "^2.9.0", @@ -30,6 +32,7 @@ "devDependencies": { "@types/prismjs": "^1.16.5", "@types/react": "17.0.11", + "@types/react-copy-to-clipboard": "^5.0.0", "@types/react-dom": "^17.0.8", "@types/react-pdf": "^5.0.4", "@types/react-syntax-highlighter": "^13.5.1", @@ -505,6 +508,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-copy-to-clipboard": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz", + "integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-dom": { "version": "17.0.8", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz", @@ -1613,6 +1625,14 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, + "node_modules/copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, "node_modules/core-js-pure": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz", @@ -5694,6 +5714,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-copy-to-clipboard": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz", + "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==", + "dependencies": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -5712,6 +5744,35 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" }, + "node_modules/react-hot-toast": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz", + "integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==", + "dependencies": { + "goober": "^2.0.35" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/react-hot-toast/node_modules/csstype": { + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", + "peer": true + }, + "node_modules/react-hot-toast/node_modules/goober": { + "version": "2.0.38", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz", + "integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==", + "peerDependencies": { + "csstype": "^2.6.2" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -7030,6 +7091,11 @@ "node": ">=8.0" } }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "node_modules/toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", @@ -8025,6 +8091,15 @@ "csstype": "^3.0.2" } }, + "@types/react-copy-to-clipboard": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz", + "integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-dom": { "version": "17.0.8", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz", @@ -8903,6 +8978,14 @@ } } }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "core-js-pure": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz", @@ -11969,6 +12052,15 @@ "object-assign": "^4.1.1" } }, + "react-copy-to-clipboard": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz", + "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==", + "requires": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + } + }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -11984,6 +12076,28 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" }, + "react-hot-toast": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz", + "integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==", + "requires": { + "goober": "^2.0.35" + }, + "dependencies": { + "csstype": { + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", + "peer": true + }, + "goober": { + "version": "2.0.38", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz", + "integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==", + "requires": {} + } + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -12997,6 +13111,11 @@ "is-number": "^7.0.0" } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", diff --git a/package.json b/package.json index e9842ef..a8364c5 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "next": "11.0.0", "prismjs": "^1.23.0", "react": "17.0.2", + "react-copy-to-clipboard": "^5.0.3", "react-dom": "17.0.2", + "react-hot-toast": "^2.0.0", "react-markdown": "^6.0.2", "react-pdf": "^5.3.0", "react-player": "^2.9.0", @@ -32,6 +34,7 @@ "devDependencies": { "@types/prismjs": "^1.16.5", "@types/react": "17.0.11", + "@types/react-copy-to-clipboard": "^5.0.0", "@types/react-dom": "^17.0.8", "@types/react-pdf": "^5.0.4", "@types/react-syntax-highlighter": "^13.5.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 1a198ef..e4d2cc8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,6 +14,7 @@ import { faFileAlt, faFile, faFolder, + faCopy } from '@fortawesome/free-regular-svg-icons' import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons' import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons' @@ -38,7 +39,8 @@ library.add( faMusic, faArrowLeft, faArrowRight, - faFileDownload + faFileDownload, + faCopy ) function MyApp({ Component, pageProps }: AppProps) {