2022-02-02 08:41:30 +00:00
|
|
|
import type { OdFileObject } from '../../types'
|
2022-02-12 14:09:54 +00:00
|
|
|
import { useState } from 'react'
|
2021-08-15 20:26:08 +00:00
|
|
|
import { useRouter } from 'next/router'
|
2021-08-23 14:02:06 +00:00
|
|
|
import { useClipboard } from 'use-clipboard-copy'
|
2022-02-02 13:36:12 +00:00
|
|
|
import DPlayer from 'react-dplayer'
|
2021-12-29 09:08:10 +00:00
|
|
|
import toast from 'react-hot-toast'
|
2022-02-06 12:34:03 +00:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-02-06 17:51:28 +00:00
|
|
|
import { useAsync } from 'react-async-hook'
|
2021-06-24 13:54:59 +00:00
|
|
|
|
2021-12-17 15:16:18 +00:00
|
|
|
import { getBaseUrl } from '../../utils/getBaseUrl'
|
2022-02-02 14:08:14 +00:00
|
|
|
import { getExtension } from '../../utils/getFileIcon'
|
2022-02-07 18:54:48 +00:00
|
|
|
import { getReadablePath } from '../../utils/getReadablePath'
|
2021-12-29 07:23:47 +00:00
|
|
|
import { DownloadButton } from '../DownloadBtnGtoup'
|
2022-01-06 08:34:16 +00:00
|
|
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
2022-02-06 17:51:28 +00:00
|
|
|
import FourOhFour from '../FourOhFour'
|
|
|
|
import Loading from '../Loading'
|
2022-02-12 14:09:54 +00:00
|
|
|
import CustomEmbedLinkMenu from '../CustomEmbedLinkMenu'
|
2021-06-25 14:15:00 +00:00
|
|
|
|
2022-01-16 12:19:52 +00:00
|
|
|
const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
|
2021-08-15 20:26:08 +00:00
|
|
|
const { asPath } = useRouter()
|
2021-08-23 14:02:06 +00:00
|
|
|
const clipboard = useClipboard()
|
2021-08-15 20:26:08 +00:00
|
|
|
|
2022-02-12 14:09:54 +00:00
|
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
2022-02-06 12:34:03 +00:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2022-02-02 13:36:12 +00:00
|
|
|
// OneDrive generates thumbnails for its video files, we pick the thumbnail with the highest resolution
|
2022-02-10 02:47:58 +00:00
|
|
|
const thumbnail = `/api/thumbnail?path=${asPath}&size=large`
|
2022-02-02 13:36:12 +00:00
|
|
|
|
2022-02-02 14:08:14 +00:00
|
|
|
// We assume subtitle files are beside the video with the same name, only webvtt '.vtt' files are supported
|
2022-02-10 16:13:03 +00:00
|
|
|
const subtitle = `/api?path=${asPath.substring(0, asPath.lastIndexOf('.'))}.vtt&raw=true`
|
2022-02-02 14:08:14 +00:00
|
|
|
|
2022-02-06 17:51:28 +00:00
|
|
|
const isFlv = getExtension(file.name) === 'flv'
|
2022-02-08 08:13:54 +00:00
|
|
|
const {
|
|
|
|
loading,
|
|
|
|
error,
|
2022-02-12 11:53:20 +00:00
|
|
|
result: mpegts,
|
2022-02-08 08:13:54 +00:00
|
|
|
} = useAsync(async () => {
|
2022-02-06 17:51:28 +00:00
|
|
|
if (isFlv) {
|
2022-02-12 11:53:20 +00:00
|
|
|
return (await import('mpegts.js')).default
|
2022-02-06 17:51:28 +00:00
|
|
|
}
|
|
|
|
}, [isFlv])
|
|
|
|
|
2021-06-24 13:54:59 +00:00
|
|
|
return (
|
2021-06-25 14:15:00 +00:00
|
|
|
<>
|
2022-02-12 14:09:54 +00:00
|
|
|
<CustomEmbedLinkMenu path={getReadablePath(asPath)} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
|
2022-01-06 08:34:16 +00:00
|
|
|
<PreviewContainer>
|
2022-02-06 17:51:28 +00:00
|
|
|
{error ? (
|
|
|
|
<FourOhFour errorMsg={error.message} />
|
|
|
|
) : loading && isFlv ? (
|
2022-02-08 11:29:01 +00:00
|
|
|
<Loading loadingText={t('Loading FLV extension...')} />
|
2022-02-06 17:51:28 +00:00
|
|
|
) : (
|
|
|
|
<DPlayer
|
|
|
|
className="aspect-video"
|
|
|
|
options={{
|
|
|
|
volume: 1.0,
|
|
|
|
lang: 'en',
|
|
|
|
video: {
|
|
|
|
url: file['@microsoft.graph.downloadUrl'],
|
|
|
|
pic: thumbnail,
|
|
|
|
type: isFlv ? 'customFlv' : 'auto',
|
|
|
|
customType: {
|
|
|
|
customFlv: (video: HTMLVideoElement) => {
|
2022-02-12 11:53:20 +00:00
|
|
|
const flvPlayer = mpegts!.createPlayer({
|
2022-02-06 17:51:28 +00:00
|
|
|
type: 'flv',
|
2022-02-08 08:13:54 +00:00
|
|
|
url: video.src,
|
2022-02-06 17:51:28 +00:00
|
|
|
})
|
|
|
|
flvPlayer.attachMediaElement(video)
|
|
|
|
flvPlayer.load()
|
2022-02-08 08:13:54 +00:00
|
|
|
},
|
|
|
|
},
|
2022-02-06 17:51:28 +00:00
|
|
|
},
|
2022-02-08 08:13:54 +00:00
|
|
|
subtitle: { url: subtitle },
|
2022-02-06 17:51:28 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
2022-01-06 08:34:16 +00:00
|
|
|
</PreviewContainer>
|
2021-08-15 20:26:08 +00:00
|
|
|
|
2022-01-06 08:34:16 +00:00
|
|
|
<DownloadBtnContainer>
|
|
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
|
|
<DownloadButton
|
|
|
|
onClickCallback={() => window.open(file['@microsoft.graph.downloadUrl'])}
|
|
|
|
btnColor="blue"
|
2022-02-06 12:34:03 +00:00
|
|
|
btnText={t('Download')}
|
2022-01-06 08:34:16 +00:00
|
|
|
btnIcon="file-download"
|
|
|
|
/>
|
2022-01-15 13:37:06 +00:00
|
|
|
{/* <DownloadButton
|
2022-01-06 08:34:16 +00:00
|
|
|
onClickCallback={() =>
|
|
|
|
window.open(`/api/proxy?url=${encodeURIComponent(file['@microsoft.graph.downloadUrl'])}`)
|
|
|
|
}
|
|
|
|
btnColor="teal"
|
2022-02-06 12:34:03 +00:00
|
|
|
btnText={t('Proxy download')}
|
2022-01-06 08:34:16 +00:00
|
|
|
btnIcon="download"
|
2022-01-15 13:37:06 +00:00
|
|
|
/> */}
|
2022-01-06 08:34:16 +00:00
|
|
|
<DownloadButton
|
|
|
|
onClickCallback={() => {
|
2022-02-07 18:54:48 +00:00
|
|
|
clipboard.copy(`${getBaseUrl()}/api?path=${getReadablePath(asPath)}&raw=true`)
|
2022-02-06 12:34:03 +00:00
|
|
|
toast.success(t('Copied direct link to clipboard.'))
|
2022-01-06 08:34:16 +00:00
|
|
|
}}
|
|
|
|
btnColor="pink"
|
2022-02-06 12:34:03 +00:00
|
|
|
btnText={t('Copy direct link')}
|
2022-01-06 08:34:16 +00:00
|
|
|
btnIcon="copy"
|
|
|
|
/>
|
2022-02-12 14:09:54 +00:00
|
|
|
<DownloadButton
|
|
|
|
onClickCallback={() => setMenuOpen(true)}
|
|
|
|
btnColor="teal"
|
|
|
|
btnText={t('Customise link')}
|
|
|
|
btnIcon="pen"
|
|
|
|
/>
|
2021-08-15 20:26:08 +00:00
|
|
|
|
2022-01-06 08:34:16 +00:00
|
|
|
<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>
|
|
|
|
</DownloadBtnContainer>
|
2021-06-25 14:15:00 +00:00
|
|
|
</>
|
2021-06-24 13:54:59 +00:00
|
|
|
)
|
|
|
|
}
|
2021-12-17 15:16:18 +00:00
|
|
|
|
|
|
|
export default VideoPreview
|