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%)`