Sync from GitHub via hub-sync

src/components/simple-videos-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback } from "react";
 import { useTime } from "../context/time-context";
 import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
 import type { VideoInfo } from "@/types";
@@ -10,6 +10,8 @@ const THRESHOLDS = {
   VIDEO_SEGMENT_BOUNDARY: 0.05,
 };
 
+const VIDEO_READY_TIMEOUT_MS = 10_000;
+
 type VideoPlayerProps = {
   videosInfo: VideoInfo[];
   onVideosReady?: () => void;
@@ -28,8 +30,10 @@ export const SimpleVideosPlayer = ({
   const [showHiddenMenu, setShowHiddenMenu] = React.useState(false);
   const [videosReady, setVideosReady] = React.useState(false);
 
+  const hiddenSet = React.useMemo(() => new Set(hiddenVideos), [hiddenVideos]);
+
   const firstVisibleIdx = videosInfo.findIndex(
-    (video) => !hiddenVideos.includes(video.filename),
+    (video) => !hiddenSet.has(video.filename),
   );
 
   // Tracks the last time value set by the primary video's onTimeUpdate.
@@ -41,24 +45,31 @@ export const SimpleVideosPlayer = ({
     videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
   }, [videosInfo.length]);
 
-  // Handle videos ready
+  // Handle videos ready — with a timeout fallback so the UI never hangs
+  // if a video fails to reach canplaythrough (e.g. network stall).
   useEffect(() => {
     let readyCount = 0;
+    let resolved = false;
+
+    const markReady = () => {
+      if (resolved) return;
+      resolved = true;
+      setVideosReady(true);
+      onVideosReady?.();
+      setIsPlaying(true);
+    };
 
     const checkReady = () => {
       readyCount++;
-      if (readyCount === videosInfo.length && onVideosReady) {
-        setVideosReady(true);
-        onVideosReady();
-        setIsPlaying(true);
-      }
+      if (readyCount >= videosInfo.length) markReady();
     };
 
+    const timeout = setTimeout(markReady, VIDEO_READY_TIMEOUT_MS);
+
     videoRefs.current.forEach((video, index) => {
       if (video) {
         const info = videosInfo[index];
 
-        // Setup segment boundaries
         if (info.isSegmented) {
           const handleTimeUpdate = () => {
             const segmentEnd = info.segmentEnd || video.duration;
@@ -69,7 +80,6 @@ export const SimpleVideosPlayer = ({
               segmentEnd - THRESHOLDS.VIDEO_SEGMENT_BOUNDARY
             ) {
               video.currentTime = segmentStart;
-              // Also update the global time to reset to start
               if (index === firstVisibleIdx) {
                 setCurrentTime(0);
               }
@@ -89,7 +99,6 @@ export const SimpleVideosPlayer = ({
             video.removeEventListener("loadeddata", handleLoadedData);
           });
         } else {
-          // For non-segmented videos, handle end of video
           const handleEnded = () => {
             video.currentTime = 0;
             if (index === firstVisibleIdx) {
@@ -108,6 +117,7 @@ export const SimpleVideosPlayer = ({
     });
 
     return () => {
+      clearTimeout(timeout);
       videoRefs.current.forEach((video) => {
         if (!video) return;
         const cleanup = videoEventCleanup.get(video);
@@ -125,24 +135,23 @@ export const SimpleVideosPlayer = ({
     setCurrentTime,
   ]);
 
-  // Handle play/pause
+  // Handle play/pause — skip hidden videos
   useEffect(() => {
     if (!videosReady) return;
 
     videoRefs.current.forEach((video, idx) => {
-      if (video && !hiddenVideos.includes(videosInfo[idx].filename)) {
-        if (isPlaying) {
-          video.play().catch((e) => {
-            if (e.name !== "AbortError") {
-              console.error("Error playing video");
-            }
-          });
-        } else {
-          video.pause();
-        }
+      if (!video || hiddenSet.has(videosInfo[idx].filename)) return;
+      if (isPlaying) {
+        video.play().catch((e) => {
+          if (e.name !== "AbortError") {
+            console.error("Error playing video");
+          }
+        });
+      } else {
+        video.pause();
       }
     });
-  }, [isPlaying, videosReady, hiddenVideos, videosInfo]);
+  }, [isPlaying, videosReady, hiddenSet, videosInfo]);
 
   // Sync all video times when currentTime changes.
   // For the primary video, only seek when the change came from an external source
@@ -155,9 +164,7 @@ export const SimpleVideosPlayer = ({
 
     videoRefs.current.forEach((video, index) => {
       if (!video) return;
-      if (hiddenVideos.includes(videosInfo[index].filename)) return;
-
-      // Skip the primary video unless the time was changed externally
+      if (hiddenSet.has(videosInfo[index].filename)) return;
       if (index === firstVisibleIdx && !isExternalSeek) return;
 
       const info = videosInfo[index];
@@ -166,27 +173,33 @@ export const SimpleVideosPlayer = ({
         targetTime = (info.segmentStart || 0) + currentTime;
       }
 
-      if (Math.abs(video.currentTime - targetTime) > 0.2) {
+      if (
+        Math.abs(video.currentTime - targetTime) >
+        THRESHOLDS.VIDEO_SYNC_TOLERANCE
+      ) {
         video.currentTime = targetTime;
       }
     });
-  }, [currentTime, videosInfo, videosReady, hiddenVideos, firstVisibleIdx]);
+  }, [currentTime, videosInfo, videosReady, hiddenSet, firstVisibleIdx]);
 
-  // Handle time update from first visible video
-  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
-    const video = e.target as HTMLVideoElement;
-    const videoIndex = videoRefs.current.findIndex((ref) => ref === video);
-    const info = videosInfo[videoIndex];
+  // Stable per-index timeupdate handlers avoid findIndex scan on every event
+  const makeTimeUpdateHandler = useCallback(
+    (index: number) => {
+      return () => {
+        const video = videoRefs.current[index];
+        const info = videosInfo[index];
+        if (!video || !info) return;
 
-    if (info) {
-      let globalTime = video.currentTime;
-      if (info.isSegmented) {
-        globalTime = video.currentTime - (info.segmentStart || 0);
-      }
-      lastVideoTimeRef.current = globalTime;
-      setCurrentTime(globalTime);
-    }
-  };
+        let globalTime = video.currentTime;
+        if (info.isSegmented) {
+          globalTime = video.currentTime - (info.segmentStart || 0);
+        }
+        lastVideoTimeRef.current = globalTime;
+        setCurrentTime(globalTime);
+      };
+    },
+    [videosInfo, setCurrentTime],
+  );
 
   // Handle play click for segmented videos
   const handlePlay = (video: HTMLVideoElement, info: VideoInfo) => {
@@ -289,8 +302,11 @@ export const SimpleVideosPlayer = ({
                 }`}
                 muted
                 preload="auto"
+                crossOrigin="anonymous"
                 onPlay={(e) => handlePlay(e.currentTarget, info)}
-                onTimeUpdate={isFirstVisible ? handleTimeUpdate : undefined}
+                onTimeUpdate={
+                  isFirstVisible ? makeTimeUpdateHandler(idx) : undefined
+                }
               >
                 <source src={info.url} type="video/mp4" />
                 Your browser does not support the video tag.

src/components/videos-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import { useTime } from "../context/time-context";
 import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
 import type { VideoInfo } from "@/types";
@@ -13,24 +13,25 @@ type VideoPlayerProps = {
 const videoCleanupHandlers = new WeakMap<HTMLVideoElement, () => void>();
 const videoReadyHandlers = new WeakMap<HTMLVideoElement, EventListener>();
 
+const VIDEO_SYNC_TOLERANCE = 0.2;
+
 export const VideosPlayer = ({
   videosInfo,
   onVideosReady,
 }: VideoPlayerProps) => {
   const { currentTime, setCurrentTime, isPlaying, setIsPlaying } = useTime();
   const videoRefs = useRef<HTMLVideoElement[]>([]);
-  // Hidden/enlarged state and hidden menu
   const [hiddenVideos, setHiddenVideos] = useState<string[]>([]);
-  // Find the index of the first visible (not hidden) video
+
+  const hiddenSet = useMemo(() => new Set(hiddenVideos), [hiddenVideos]);
+
   const firstVisibleIdx = videosInfo.findIndex(
-    (video) => !hiddenVideos.includes(video.filename),
+    (video) => !hiddenSet.has(video.filename),
   );
-  // Count of visible videos
   const visibleCount = videosInfo.filter(
-    (video) => !hiddenVideos.includes(video.filename),
+    (video) => !hiddenSet.has(video.filename),
   ).length;
   const [enlargedVideo, setEnlargedVideo] = useState<string | null>(null);
-  // Track previous hiddenVideos for comparison
   const prevHiddenVideosRef = useRef<string[]>([]);
   const videoContainerRefs = useRef<Record<string, HTMLDivElement | null>>({});
   const [showHiddenMenu, setShowHiddenMenu] = useState(false);
@@ -47,16 +48,16 @@ export const VideosPlayer = ({
     videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
   }, [videosInfo]);
 
-  // When videos get unhidden, start playing them if it was playing
+  // When videos get unhidden, sync their time and resume playback
   useEffect(() => {
-    // Find which videos were just unhidden
     const prevHidden = prevHiddenVideosRef.current;
     const newlyUnhidden = prevHidden.filter(
-      (filename) => !hiddenVideos.includes(filename),
+      (filename) => !hiddenSet.has(filename),
     );
     if (newlyUnhidden.length > 0) {
+      const unhiddenNames = new Set(newlyUnhidden);
       videosInfo.forEach((video, idx) => {
-        if (newlyUnhidden.includes(video.filename)) {
+        if (unhiddenNames.has(video.filename)) {
           const ref = videoRefs.current[idx];
           if (ref) {
             ref.currentTime = currentTime;
@@ -68,7 +69,7 @@ export const VideosPlayer = ({
       });
     }
     prevHiddenVideosRef.current = hiddenVideos;
-  }, [hiddenVideos, isPlaying, videosInfo, currentTime]);
+  }, [hiddenVideos, hiddenSet, isPlaying, videosInfo, currentTime]);
 
   // Check video codec support
   useEffect(() => {
@@ -83,18 +84,17 @@ export const VideosPlayer = ({
     checkCodecSupport();
   }, []);
 
-  // Handle play/pause
+  // Handle play/pause — skip hidden videos to avoid wasting decoder time
   useEffect(() => {
-    videoRefs.current.forEach((video) => {
-      if (video) {
-        if (isPlaying) {
-          video.play().catch(() => console.error("Error playing video"));
-        } else {
-          video.pause();
-        }
+    videoRefs.current.forEach((video, idx) => {
+      if (!video || hiddenSet.has(videosInfo[idx]?.filename)) return;
+      if (isPlaying) {
+        video.play().catch(() => console.error("Error playing video"));
+      } else {
+        video.pause();
       }
     });
-  }, [isPlaying]);
+  }, [isPlaying, hiddenSet, videosInfo]);
 
   // Minimize enlarged video on Escape key
   useEffect(() => {
@@ -154,43 +154,45 @@ export const VideosPlayer = ({
 
     videoRefs.current.forEach((video, index) => {
       if (!video) return;
-
-      // Skip the primary video unless the time was changed externally
+      if (hiddenSet.has(videosInfo[index]?.filename)) return;
       if (index === firstVisibleIdx && !isExternalSeek) return;
 
       const videoInfo = videosInfo[index];
       if (videoInfo?.isSegmented) {
         const segmentStart = videoInfo.segmentStart || 0;
         const segmentTime = segmentStart + currentTime;
-        if (Math.abs(video.currentTime - segmentTime) > 0.2) {
+        if (Math.abs(video.currentTime - segmentTime) > VIDEO_SYNC_TOLERANCE) {
           video.currentTime = segmentTime;
         }
       } else {
-        if (Math.abs(video.currentTime - currentTime) > 0.2) {
+        if (Math.abs(video.currentTime - currentTime) > VIDEO_SYNC_TOLERANCE) {
           video.currentTime = currentTime;
         }
       }
     });
-  }, [currentTime, videosInfo, firstVisibleIdx]);
-
-  // Handle time update
-  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
-    const video = e.target as HTMLVideoElement;
-    if (video && video.duration) {
-      const videoIndex = videoRefs.current.findIndex((ref) => ref === video);
-      const videoInfo = videosInfo[videoIndex];
-
-      if (videoInfo?.isSegmented) {
-        const segmentStart = videoInfo.segmentStart || 0;
-        const globalTime = Math.max(0, video.currentTime - segmentStart);
-        lastVideoTimeRef.current = globalTime;
-        setCurrentTime(globalTime);
-      } else {
-        lastVideoTimeRef.current = video.currentTime;
-        setCurrentTime(video.currentTime);
-      }
-    }
-  };
+  }, [currentTime, videosInfo, firstVisibleIdx, hiddenSet]);
+
+  // Stable per-index timeupdate handlers avoid findIndex scan on every event
+  const makeTimeUpdateHandler = useCallback(
+    (index: number) => {
+      return () => {
+        const video = videoRefs.current[index];
+        if (!video || !video.duration) return;
+        const videoInfo = videosInfo[index];
+
+        if (videoInfo?.isSegmented) {
+          const segmentStart = videoInfo.segmentStart || 0;
+          const globalTime = Math.max(0, video.currentTime - segmentStart);
+          lastVideoTimeRef.current = globalTime;
+          setCurrentTime(globalTime);
+        } else {
+          lastVideoTimeRef.current = video.currentTime;
+          setCurrentTime(video.currentTime);
+        }
+      };
+    },
+    [videosInfo, setCurrentTime],
+  );
 
   // Handle video ready and setup segmentation
   useEffect(() => {
@@ -400,9 +402,12 @@ export const VideosPlayer = ({
                 muted
                 loop
                 preload="auto"
+                crossOrigin="anonymous"
                 className={`w-full object-contain ${isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""}`}
                 onTimeUpdate={
-                  idx === firstVisibleIdx ? handleTimeUpdate : undefined
+                  idx === firstVisibleIdx
+                    ? makeTimeUpdateHandler(idx)
+                    : undefined
                 }
                 style={isEnlarged ? { zIndex: 41 } : {}}
               >

src/context/time-context.tsx

@@ -4,9 +4,9 @@ import React, {
   useRef,
   useState,
   useCallback,
+  useEffect,
 } from "react";
 
-// The shape of our context
 type TimeContextType = {
   currentTime: number;
   setCurrentTime: (t: number) => void;
@@ -25,22 +25,56 @@ export const useTime = () => {
   return ctx;
 };
 
+const TIME_RENDER_THROTTLE_MS = 80;
+
 export const TimeProvider: React.FC<{
   children: React.ReactNode;
   duration: number;
 }> = ({ children, duration: initialDuration }) => {
-  const [currentTime, setCurrentTime] = useState(0);
+  const [currentTime, setCurrentTimeState] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [duration, setDuration] = useState(initialDuration);
   const listeners = useRef<Set<(t: number) => void>>(new Set());
 
-  // Call this to update time and notify all listeners
+  // Keep the authoritative time in a ref so subscribers and sync effects
+  // always see the latest value without waiting for a React render cycle.
+  const timeRef = useRef(0);
+  const rafId = useRef<number | null>(null);
+  const lastRenderTime = useRef(0);
+
   const updateTime = useCallback((t: number) => {
-    setCurrentTime(t);
+    timeRef.current = t;
     listeners.current.forEach((fn) => fn(t));
+
+    // Throttle React state updates — during playback, timeupdate fires ~4×/sec
+    // per video. Coalescing into rAF + a minimum interval avoids cascading
+    // re-renders across PlaybackBar, charts, etc.
+    if (rafId.current === null) {
+      rafId.current = requestAnimationFrame(() => {
+        rafId.current = null;
+        const now = performance.now();
+        if (now - lastRenderTime.current >= TIME_RENDER_THROTTLE_MS) {
+          lastRenderTime.current = now;
+          setCurrentTimeState(timeRef.current);
+        }
+      });
+    }
   }, []);
 
-  // Components can subscribe to time changes (for imperative updates)
+  // Flush any pending rAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafId.current !== null) cancelAnimationFrame(rafId.current);
+    };
+  }, []);
+
+  // When playback stops, flush the exact final time so the UI matches
+  useEffect(() => {
+    if (!isPlaying) {
+      setCurrentTimeState(timeRef.current);
+    }
+  }, [isPlaying]);
+
   const subscribe = useCallback((cb: (t: number) => void) => {
     listeners.current.add(cb);
     return () => listeners.current.delete(cb);