Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -88,6 +88,33 @@ export default function MultiSourceCaptioningView() {
   const webcamStreamRef = useRef<MediaStream | null>(null);
   const { isLoaded, isLoading, error: modelError, runInference } = useVLMContext();
 
+  // Add this useEffect for overlay video synchronization
+  useEffect(() => {
+    const main = videoRef.current;
+    const overlay = overlayVideoRef.current;
+    if (!main || !overlay) return;
+    // Sync play/pause
+    const onPlay = () => { if (overlay.paused) overlay.play(); };
+    const onPause = () => { if (!overlay.paused) overlay.pause(); };
+    // Sync seeking and time
+    const onSeekOrTime = () => {
+      if (Math.abs(main.currentTime - overlay.currentTime) > 0.05) {
+        overlay.currentTime = main.currentTime;
+      }
+    };
+    main.addEventListener('play', onPlay);
+    main.addEventListener('pause', onPause);
+    main.addEventListener('seeked', onSeekOrTime);
+    main.addEventListener('timeupdate', onSeekOrTime);
+    // Clean up
+    return () => {
+      main.removeEventListener('play', onPlay);
+      main.removeEventListener('pause', onPause);
+      main.removeEventListener('seeked', onSeekOrTime);
+      main.removeEventListener('timeupdate', onSeekOrTime);
+    };
+  }, [videoRef, overlayVideoRef, uploadedUrl, videoUrl, mode]);
+
   const processVideoFrame = async () => {
     if (!videoRef.current || !canvasRef.current) return;
     const video = videoRef.current;