From 96cc4b6f714229eaf57ae8a8081e4d937c7b8eb6 Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Fri, 20 Mar 2026 11:49:12 +0530
Subject: [PATCH] chore: video section issues

---
 src/components/video-player-section.tsx | 37 +++++++++++++++++--------
 src/hooks/use-frame-detection-map.ts    | 14 ++++++----
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/video-player-section.tsx b/src/components/video-player-section.tsx
index 07912fe..d993ee9 100644
--- a/src/components/video-player-section.tsx
+++ b/src/components/video-player-section.tsx
@@ -32,8 +32,9 @@ type LogAction = { type: 'ADD_LOG'; payload: DetectionLogEntry } | { type: 'CLEA
 function logsReducer(state: DetectionLogEntry[], action: LogAction): DetectionLogEntry[] {
   switch (action.type) {
     case 'ADD_LOG':
-      if (state.length > 0 && state[0].frame === action.payload.frame) return state;
-      return [action.payload, ...state].slice(0, MAX_LOGS);
+      // Move to top if already exists, or just add to top
+      const filtered = state.filter((log) => log.frame !== action.payload.frame);
+      return [action.payload, ...filtered].slice(0, MAX_LOGS);
     case 'CLEAR':
       return [];
     default:
@@ -87,7 +88,10 @@ export default function VideoPlayerSection({
 
   // Custom Hooks
   const gpsMap = useGpsMap(data);
-  const { getNearestDetections } = useFrameDetectionMap(data, detectionType);
+  const { getNearestDetections, sortedDetectionIndices } = useFrameDetectionMap(
+    data,
+    detectionType,
+  );
   const { getStickyCounts, sortedFrameIndices } = useCumulativeCounts(data.frames);
 
   // Memoized video URL
@@ -119,10 +123,8 @@ export default function VideoPlayerSection({
       // Frame stats
       setCurrentFrameCounts(counts);
 
-      // Logging logic (throttled/batched by frame ID)
-      if (dets && dets.length > 0 && !loggedFrames.current.has(frame)) {
-        loggedFrames.current.add(frame);
-
+      // Logging logic
+      if (dets && dets.length > 0) {
         const firstDetId = dets[0].pothole_id ?? dets[0].signboard_id ?? dets[0].detection_id;
         const coords = gpsMap.get(firstDetId);
 
@@ -148,7 +150,7 @@ export default function VideoPlayerSection({
         });
       }
     },
-    [data.video_info.fps, getNearestDetections, getStickyCounts, gpsMap, sortedFrameIndices],
+    [data.video_info.fps, getNearestDetections, getStickyCounts, gpsMap, sortedDetectionIndices],
   );
 
   // Playback loop hook
@@ -173,9 +175,20 @@ export default function VideoPlayerSection({
   const handleVideoSeeked = useCallback(() => {
     const video = videoRef.current;
     if (!video) return;
-    const frame = Math.round(video.currentTime * data.video_info.fps);
-    handleFrameUpdate(frame);
-  }, [data.video_info.fps, handleFrameUpdate]);
+
+    const fps = data.video_info.fps || 30;
+    const currentFrame = Math.round(video.currentTime * fps);
+
+    // Snap to the next available frame index that has detections
+    const nextDetectionFrame = sortedDetectionIndices.find((f) => f >= currentFrame);
+
+    if (nextDetectionFrame !== undefined && nextDetectionFrame !== currentFrame) {
+      video.currentTime = nextDetectionFrame / fps;
+      return;
+    }
+
+    handleFrameUpdate(currentFrame);
+  }, [data.video_info.fps, handleFrameUpdate, sortedDetectionIndices]);
 
   const seekToFrame = useCallback(
     (frame: number) => {
@@ -216,7 +229,7 @@ export default function VideoPlayerSection({
                 onLoadedData={handleLoadedData}
                 onEnded={handleVideoEnded}
                 onSeeked={handleVideoSeeked}
-                currentDetections={getNearestDetections(currentFrame, sortedFrameIndices) || []}
+                currentDetections={getNearestDetections(currentFrame, sortedDetectionIndices) || []}
               />
 
               <DetectionStatsBar
diff --git a/src/hooks/use-frame-detection-map.ts b/src/hooks/use-frame-detection-map.ts
index 410f328..2f109b2 100644
--- a/src/hooks/use-frame-detection-map.ts
+++ b/src/hooks/use-frame-detection-map.ts
@@ -69,18 +69,22 @@ export const useFrameDetectionMap = (data: DetectionData, detectionType: string)
     return map;
   }, [data, detectionType]);
 
-  const getNearestDetections = (frame: number, sortedFrameIndices: number[], maxSkip = 3) => {
+  const sortedDetectionIndices = useMemo(() => {
+    return Array.from(frameDetectionMap.keys()).sort((a, b) => a - b);
+  }, [frameDetectionMap]);
+
+  const getNearestDetections = (frame: number, sortedIndices: number[], maxSkip = 3) => {
     const exact = frameDetectionMap.get(frame);
     if (exact) return exact;
 
     let low = 0,
-      high = sortedFrameIndices.length - 1,
+      high = sortedIndices.length - 1,
       targetIndex = -1;
 
     while (low <= high) {
       const mid = Math.floor((low + high) / 2);
-      if (sortedFrameIndices[mid] <= frame) {
-        targetIndex = sortedFrameIndices[mid];
+      if (sortedIndices[mid] <= frame) {
+        targetIndex = sortedIndices[mid];
         low = mid + 1;
       } else {
         high = mid - 1;
@@ -92,5 +96,5 @@ export const useFrameDetectionMap = (data: DetectionData, detectionType: string)
       : undefined;
   };
 
-  return { frameDetectionMap, getNearestDetections };
+  return { frameDetectionMap, getNearestDetections, sortedDetectionIndices };
 };