Tristan Yang
67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
import { SyntheticEvent, useState } from 'react';
|
|
import { Orbit } from "@uiball/loaders";
|
|
import { formatBytes } from '../../utils';
|
|
import IconDownload from "../../../assets/icons/download.svg";
|
|
import IconVideo from "../../../assets/icons/file.video.svg";
|
|
// import clsx from 'clsx';
|
|
|
|
type Props = {
|
|
url: string,
|
|
name: string,
|
|
size: number,
|
|
download: string
|
|
}
|
|
|
|
const VideoMessage = ({ url, name, size, download }: Props) => {
|
|
const [canPlay, setCanPlay] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const _size = formatBytes(size);
|
|
const handlePlay = (evt: SyntheticEvent<HTMLVideoElement>) => {
|
|
const infoEle = evt.currentTarget.previousSibling;
|
|
if (infoEle) {
|
|
(infoEle as HTMLDivElement).classList.add("hidden");
|
|
}
|
|
};
|
|
const handlePause = (evt: SyntheticEvent<HTMLVideoElement>) => {
|
|
const infoEle = evt.currentTarget.previousSibling;
|
|
if (infoEle) {
|
|
(infoEle as HTMLDivElement).classList.remove("hidden");
|
|
}
|
|
};
|
|
const handleCanPlay = () => {
|
|
setCanPlay(true);
|
|
};
|
|
const handleError = () => {
|
|
setCanPlay(false);
|
|
setError(true);
|
|
};
|
|
const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
|
|
return (
|
|
<div className='w-60 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 dark:border-gray-700 overflow-hidden group'>
|
|
<div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
|
|
<div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
|
|
<div className="flex gap-2 ">
|
|
<IconVideo className="hidden md:block w-9 h-auto" />
|
|
<div className="flex flex-col gap-1 text-sm text-white">
|
|
<span title={name} className='font-bold w-56 md:w-[240px] truncate'>{name}</span>
|
|
<span>{_size}</span>
|
|
</div>
|
|
</div>
|
|
<a href={download} className="hidden md:block mt-2"><IconDownload className="fill-white" /></a>
|
|
</div>
|
|
{!canPlay ?
|
|
<div className={tipClass}>
|
|
<Orbit color='#fff' />
|
|
</div> :
|
|
(error ?
|
|
<span className={`${tipClass} text-red-500`}>Error</span> :
|
|
null)
|
|
}
|
|
<video onPlay={handlePlay} onError={handleError} onCanPlay={handleCanPlay} onPause={handlePause} controls={canPlay} className="absolute left-0 top-0 w-full h-full object-cover z-10">
|
|
<source src={url} type="video/mp4"></source>
|
|
</video>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoMessage; |