From 88bc67a83b07981f23364b3a6d929509db824301 Mon Sep 17 00:00:00 2001
From: qikongjian <your-email@example.com>
Date: Mon, 29 Sep 2025 17:25:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=9C=80=E7=BB=88=E5=89=AA?=
 =?UTF-8?q?=E8=BE=91=E5=A5=BD=E7=9A=84=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=97=B6=E8=BF=9B=E5=BA=A6=E6=9D=A1=E4=B8=8D=E5=8A=A8=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow/media-viewer.tsx | 40 +++++++++++++--------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index b6c30e1..b0de51f 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -296,26 +296,36 @@ export const MediaViewer = React.memo(function MediaViewer({
     }
   }, [volume, isMuted]);
 
-  // 绑定时间更新（同时监听两个 video）
+  // 绑定时间更新（只监听当前活跃的 video）
   useEffect(() => {
-    const mv = mainVideoRef.current;
-    const fv = finalVideoRef.current;
+    const activeRef = activeVideoRef();
+    const activeVideo = activeRef.current;
+    
+    if (!activeVideo) return;
+
     const onTimeUpdate = (e: Event) => {
       const el = e.currentTarget as HTMLVideoElement;
-      setCurrentTime(el.currentTime || 0);
-      if (Number.isFinite(el.duration)) setDuration(el.duration);
+      // 只有当事件来源是当前活跃视频时才更新状态
+      if (el === activeVideo) {
+        setCurrentTime(el.currentTime || 0);
+        if (Number.isFinite(el.duration)) setDuration(el.duration);
+      }
     };
-    mv?.addEventListener('timeupdate', onTimeUpdate);
-    fv?.addEventListener('timeupdate', onTimeUpdate);
-    mv?.addEventListener('loadedmetadata', onTimeUpdate);
-    fv?.addEventListener('loadedmetadata', onTimeUpdate);
+
+    activeVideo.addEventListener('timeupdate', onTimeUpdate);
+    activeVideo.addEventListener('loadedmetadata', onTimeUpdate);
+    
     return () => {
-      mv?.removeEventListener('timeupdate', onTimeUpdate);
-      fv?.removeEventListener('timeupdate', onTimeUpdate);
-      mv?.removeEventListener('loadedmetadata', onTimeUpdate);
-      fv?.removeEventListener('loadedmetadata', onTimeUpdate);
+      activeVideo.removeEventListener('timeupdate', onTimeUpdate);
+      activeVideo.removeEventListener('loadedmetadata', onTimeUpdate);
     };
-  }, []);
+  }, [selectedView, taskObject.currentStage]); // 依赖项包含影响activeVideoRef的状态
+
+  // 当切换视频源时重置进度状态
+  useEffect(() => {
+    setCurrentTime(0);
+    setDuration(0);
+  }, [selectedView, currentSketchIndex, taskObject.currentStage]);
 
   const activeVideoRef = () => {
     // 根据当前阶段选择活跃的 video 引用
@@ -409,7 +419,7 @@ export const MediaViewer = React.memo(function MediaViewer({
               [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
               [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
               [&::-webkit-slider-thumb]:cursor-pointer
-              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full 
+              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full
               [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none"
             style={{
               background: `linear-gradient(to right, white 0%, white ${progressPercent}%, rgba(255,255,255,0.2) ${progressPercent}%, rgba(255,255,255,0.2) 100%)`