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

fix: video player drag and fastforward

Browse Source
This commit is contained in:
Tristan Yang
2022-12-26 17:24:52 +08:00
parent ebbf317133
commit 5b1e7a4c12
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/FileMessage/VideoMessage.tsx
+6 -2
View File
@@ -1,4 +1,4 @@
import { useState } from 'react'; import { useRef, useState } 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,12 +11,16 @@ 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 [playing, setPlaying] = useState(false);
const _size = formatBytes(size); const _size = formatBytes(size);
const handlePlaying = () => { const handlePlaying = () => {
setPlaying(true); setPlaying(true);
}; };
const handlePause = () => { const handlePause = () => {
if (videoRef && videoRef.current) {
if (videoRef.current.seeking) return;
}
setPlaying(false); setPlaying(false);
}; };
return ( return (
@@ -36,7 +40,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
</div> </div>
</> </>
} }
<video onPlaying={handlePlaying} onPause={handlePause} src={url} controls className="absolute left-0 top-0 w-full h-full object-cover z-10" /> <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> </div>
); );
}; };