clipboard implemented with react hooks, fix #58

components/DownloadBtn.tsx

@@ -2,11 +2,13 @@ import { FunctionComponent } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import { useRouter } from 'next/router'
+import { useClipboard } from 'use-clipboard-copy'
 
 import { getBaseUrl } from '../utils/tools'
 
 const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
   const { asPath } = useRouter()
+  const clipboard = useClipboard()
 
   return (
     <div className="flex flex-wrap space-x-2 justify-center">
@@ -23,7 +25,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
       <button
         className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
         onClick={() => {
-          navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+          clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
           toast.success('Copied direct link to clipboard.')
         }}
       >

components/FileListing.tsx

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import emojiRegex from 'emoji-regex'
+import { useClipboard } from 'use-clipboard-copy'
 
 import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
@@ -105,6 +106,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
   const [activeImageIdx, setActiveImageIdx] = useState(0)
 
   const router = useRouter()
+  const clipboard = useClipboard()
 
   const path = queryToPath(query)
 
@@ -204,9 +206,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                   key: 'copy',
                   render: <FontAwesomeIcon icon="copy" />,
                   onClick: i => {
-                    navigator.clipboard.writeText(
-                      i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : ''
-                    )
+                    clipboard.copy(i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : '')
                     toast.success('Copied image permanent link to clipboard.')
                   },
                 },
@@ -225,7 +225,6 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 setActiveImageIdx(imageIndexDict[c.id])
                 setImageViewerVisibility(true)
               } else {
-                console.log(path)
                 router.push(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
               }
             }}

components/previews/VideoPreview.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
+import { useClipboard } from 'use-clipboard-copy'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 
@@ -9,6 +10,7 @@ import { getBaseUrl } from '../../utils/tools'
 
 export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const { asPath } = useRouter()
+  const clipboard = useClipboard()
 
   return (
     <>
@@ -40,7 +42,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         <button
           className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
           onClick={() => {
-            navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+            clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
             toast.success('Copied direct link to clipboard.')
           }}
         >