nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

a better abstraction of download buttons

Browse Source
This commit is contained in:
spencerwooo
2021-12-29 15:23:47 +08:00
parent 0613e035b2
commit 5bc8fc4a67
14 changed files with 161 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/previews/VideoPreview.tsx
+37 -44
View File
@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import toast, { Toaster } from 'react-hot-toast'
import { getBaseUrl } from '../../utils/getBaseUrl'
import { DownloadButton } from '../DownloadBtnGtoup'
const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
const { asPath } = useRouter()
@@ -25,56 +26,48 @@ const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
/>
</div>
<div className="flex flex-wrap justify-center mt-4 space-x-2">
<div className="flex flex-wrap justify-center mt-4 gap-2">
<Toaster />
<a
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={file['@microsoft.graph.downloadUrl']}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon="file-download" />
<span>Download</span>
</a>
<button
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => {
<DownloadButton
onClickCallback={() => window.open(file['@microsoft.graph.downloadUrl'])}
btnColor="blue"
btnText="Download"
btnIcon="file-download"
/>
<DownloadButton
onClickCallback={() =>
window.open(`/api/proxy?url=${encodeURIComponent(file['@microsoft.graph.downloadUrl'])}`)
}
btnColor="pink"
btnText="Proxy download"
btnIcon="download"
/>
<DownloadButton
onClickCallback={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.')
}}
>
<FontAwesomeIcon icon="copy" />
<span>Copy direct link</span>
</button>
btnColor="yellow"
btnText="Copy direct link"
btnIcon="copy"
/>
<a
className="focus:outline-none focus:ring focus:ring-gray-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
>
<Image src="/players/iina.png" alt="iina" width="28" height="28" />
<span>IINA</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
>
<Image src="/players/vlc.png" alt="vlc" width="28" height="28" />
<span>VLC</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-yellow-100 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
>
<Image src="/players/potplayer.png" alt="potplayer" width="28" height="28" />
<span>PotPlayer</span>
</a>
<DownloadButton
onClickCallback={() => window.open(`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`)}
btnText="IINA"
btnImage="/players/iina.png"
/>
<DownloadButton
onClickCallback={() => window.open(`vlc://${file['@microsoft.graph.downloadUrl']}`)}
btnText="VLC"
btnImage="/players/vlc.png"
/>
<DownloadButton
onClickCallback={() => window.open(`potplayer://${file['@microsoft.graph.downloadUrl']}`)}
btnText="PotPlayer"
btnImage="/players/potplayer.png"
/>
</div>
</>
)