2022-02-02 08:41:30 +00:00
|
|
|
import type { OdFileObject } from '../../types'
|
2022-01-06 08:34:16 +00:00
|
|
|
import { FC, useState } from 'react'
|
2022-01-16 12:19:52 +00:00
|
|
|
|
2022-02-02 13:36:12 +00:00
|
|
|
import ReactAudioPlayer from 'react-audio-player'
|
2021-06-24 21:32:22 +00:00
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
2022-02-06 12:34:03 +00:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2021-06-24 13:54:59 +00:00
|
|
|
|
2021-12-29 07:23:47 +00:00
|
|
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
2022-01-06 08:34:16 +00:00
|
|
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
2022-02-02 13:36:12 +00:00
|
|
|
import { LoadingIcon } from '../Loading'
|
2021-06-25 14:15:00 +00:00
|
|
|
|
2021-06-25 12:44:14 +00:00
|
|
|
enum PlayerState {
|
|
|
|
Loading,
|
|
|
|
Ready,
|
|
|
|
Playing,
|
|
|
|
Paused,
|
|
|
|
}
|
|
|
|
|
2022-01-16 12:19:52 +00:00
|
|
|
const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
2021-06-25 12:44:14 +00:00
|
|
|
const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
|
|
|
|
|
2022-02-06 12:34:03 +00:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2021-06-24 13:54:59 +00:00
|
|
|
return (
|
2021-06-25 14:15:00 +00:00
|
|
|
<>
|
2022-01-06 08:34:16 +00:00
|
|
|
<PreviewContainer>
|
2022-02-04 08:05:28 +00:00
|
|
|
<div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
|
|
|
|
<div className="flex aspect-square w-full items-center justify-center rounded bg-gray-100 transition-all duration-75 dark:bg-gray-700 md:w-40">
|
2021-06-25 14:15:00 +00:00
|
|
|
{playerStatus === PlayerState.Loading ? (
|
2022-02-04 08:05:28 +00:00
|
|
|
<LoadingIcon className="inline-block h-5 w-5 animate-spin" />
|
2021-06-25 14:15:00 +00:00
|
|
|
) : (
|
|
|
|
<FontAwesomeIcon
|
|
|
|
className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
|
|
|
|
icon="music"
|
|
|
|
size="2x"
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-02-04 08:05:28 +00:00
|
|
|
<div className="flex w-full flex-col space-y-2">
|
2021-06-25 14:15:00 +00:00
|
|
|
<div>{file.name}</div>
|
2021-09-04 14:15:09 +00:00
|
|
|
<div className="pb-4 text-sm text-gray-500">
|
2022-02-06 12:34:03 +00:00
|
|
|
{t('Last modified:') + ' '}
|
2021-06-25 14:15:00 +00:00
|
|
|
{new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
|
|
|
|
dateStyle: 'short',
|
|
|
|
timeStyle: 'short',
|
|
|
|
})}
|
2021-06-25 12:44:14 +00:00
|
|
|
</div>
|
2022-02-02 13:36:12 +00:00
|
|
|
|
|
|
|
<ReactAudioPlayer
|
2022-02-04 08:05:28 +00:00
|
|
|
className="h-11 w-full"
|
2022-02-02 13:36:12 +00:00
|
|
|
src={file['@microsoft.graph.downloadUrl']}
|
2021-06-25 14:15:00 +00:00
|
|
|
controls
|
2022-02-02 13:36:12 +00:00
|
|
|
onCanPlay={() => setPlayerStatus(PlayerState.Ready)}
|
|
|
|
onPlay={() => setPlayerStatus(PlayerState.Playing)}
|
|
|
|
onPause={() => setPlayerStatus(PlayerState.Paused)}
|
2021-06-25 14:15:00 +00:00
|
|
|
onError={() => setPlayerStatus(PlayerState.Paused)}
|
|
|
|
onEnded={() => setPlayerStatus(PlayerState.Paused)}
|
2021-06-25 12:44:14 +00:00
|
|
|
/>
|
2021-06-24 21:32:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-01-06 08:34:16 +00:00
|
|
|
</PreviewContainer>
|
2021-12-29 07:52:18 +00:00
|
|
|
|
2022-01-06 08:34:16 +00:00
|
|
|
<DownloadBtnContainer>
|
2021-12-29 07:23:47 +00:00
|
|
|
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
2022-01-06 08:34:16 +00:00
|
|
|
</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 AudioPreview
|