ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: video msg

Browse Source
This commit is contained in:
Tristan Yang
2022-12-28 17:27:46 +08:00
parent bd12aa0e4d
commit def768b4c4
1 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/FileMessage/VideoMessage.tsx
+22 -25
View File
@@ -1,4 +1,4 @@
import { useRef, useState } from 'react'; import { SyntheticEvent } from 'react';
import { formatBytes } from '../../utils'; import { formatBytes } from '../../utils';
import IconDownload from "../../../assets/icons/download.svg"; import IconDownload from "../../../assets/icons/download.svg";
import IconVideo from "../../../assets/icons/file.video.svg"; import IconVideo from "../../../assets/icons/file.video.svg";
@@ -11,36 +11,33 @@ type Props = {
} }
const VideoMessage = ({ url, name, size, download }: Props) => { const VideoMessage = ({ url, name, size, download }: Props) => {
const videoRef = useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = useState(false);
const _size = formatBytes(size); const _size = formatBytes(size);
const handlePlaying = () => { const handlePlay = (evt: SyntheticEvent<HTMLVideoElement>) => {
setPlaying(true); const infoEle = evt.currentTarget.previousSibling;
}; if (infoEle) {
const handlePause = () => { (infoEle as HTMLDivElement).classList.add("hidden");
if (videoRef && videoRef.current) { }
if (videoRef.current.seeking) return; };
const handlePause = (evt: SyntheticEvent<HTMLVideoElement>) => {
const infoEle = evt.currentTarget.previousSibling;
if (infoEle) {
(infoEle as HTMLDivElement).classList.remove("hidden");
} }
setPlaying(false);
}; };
return ( return (
<div className='w-96 h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'> <div className='w-96 h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
{!playing && <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="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div> <div className="flex gap-2 ">
<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"> <IconVideo className="w-9 h-auto" />
<div className="flex gap-2 "> <div className="flex flex-col gap-1 text-sm text-white">
<IconVideo className="w-9 h-auto" /> <span title={name} className='font-bold whitespace-nowrap text-ellipsis w-[240px] overflow-hidden'>{name}</span>
<div className="flex flex-col gap-1 text-sm text-white"> <span>{_size}</span>
<span title={name} className='font-bold whitespace-nowrap text-ellipsis w-[240px] overflow-hidden'>{name}</span>
<span>{_size}</span>
</div>
</div>
<a href={download} className="mt-2"><IconDownload className="fill-white" /></a>
</div> </div>
</> </div>
} <a href={download} className="mt-2"><IconDownload className="fill-white" /></a>
<video ref={videoRef} onPlaying={handlePlaying} onPause={handlePause} src={url} controls className="absolute left-0 top-0 w-full h-full object-cover z-10" /> </div>
<video onPlay={handlePlay} onPause={handlePause} src={url} controls className="absolute left-0 top-0 w-full h-full object-cover z-10" />
</div> </div>
); );
}; };