From 5b1e7a4c1223c9c3f1be4de7d8f49f4538f790e5 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 26 Dec 2022 17:24:52 +0800
Subject: [PATCH] fix: video player drag and fastforward

---
 src/common/component/FileMessage/VideoMessage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/common/component/FileMessage/VideoMessage.tsx b/src/common/component/FileMessage/VideoMessage.tsx
index 7c245962..852c3583 100644
--- a/src/common/component/FileMessage/VideoMessage.tsx
+++ b/src/common/component/FileMessage/VideoMessage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { formatBytes } from '../../utils';
 import IconDownload from "../../../assets/icons/download.svg";
 import IconVideo from "../../../assets/icons/file.video.svg";
@@ -11,12 +11,16 @@ type Props = {
 }
 
 const VideoMessage = ({ url, name, size, download }: Props) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
     const _size = formatBytes(size);
     const handlePlaying = () => {
         setPlaying(true);
     };
     const handlePause = () => {
+        if (videoRef && videoRef.current) {
+            if (videoRef.current.seeking) return;
+        }
         setPlaying(false);
     };
     return (
@@ -36,7 +40,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
                     </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>
     );
 };