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 (
-
- )
+ 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) {