refactor: video section

src/hooks/use-cumulative-counts.ts

@@ -0,0 +1,71 @@
+import { useMemo, useCallback } from 'react';
+import { DetectionCounts } from '@/types';
+
+const DEFAULT_COUNTS: DetectionCounts = {
+  defected_sign_board: 0,
+  pothole: 0,
+  road_crack: 0,
+  damaged_road_marking: 0,
+  good_sign_board: 0,
+};
+
+export const useCumulativeCounts = (frames: any[]) => {
+  const result = useMemo(() => {
+    const map = new Map<number, DetectionCounts>();
+    let lastCounts: DetectionCounts = { ...DEFAULT_COUNTS };
+    let indices: number[] = [];
+
+    if (frames && Array.isArray(frames)) {
+      const sortedFrames = [...frames].sort((a, b) => (a.frame_id || 0) - (b.frame_id || 0));
+      sortedFrames.forEach((frameData) => {
+        const frameId = frameData.frame_id;
+        indices.push(frameId);
+        const detections = (frameData as any).detections;
+        if (detections && detections.length > 0) {
+          const frameCounts = detections[0].count || { ...DEFAULT_COUNTS };
+          lastCounts = {
+            defected_sign_board: Math.max(
+              lastCounts.defected_sign_board,
+              frameCounts.defected_sign_board || 0,
+            ),
+            pothole: Math.max(lastCounts.pothole, frameCounts.pothole || 0),
+            road_crack: Math.max(lastCounts.road_crack, frameCounts.road_crack || 0),
+            damaged_road_marking: Math.max(
+              lastCounts.damaged_road_marking,
+              frameCounts.damaged_road_marking || 0,
+            ),
+            good_sign_board: Math.max(lastCounts.good_sign_board, frameCounts.good_sign_board || 0),
+          };
+        }
+        map.set(frameId, { ...lastCounts });
+      });
+    }
+    return { map, indices };
+  }, [frames]);
+
+  const getStickyCounts = useCallback(
+    (frameNumber: number) => {
+      const { map, indices } = result;
+      if (indices.length === 0) return DEFAULT_COUNTS;
+
+      let targetFrameId = -1;
+      let low = 0,
+        high = indices.length - 1;
+
+      while (low <= high) {
+        let mid = Math.floor((low + high) / 2);
+        if (indices[mid] <= frameNumber) {
+          targetFrameId = indices[mid];
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
+      }
+
+      return targetFrameId !== -1 ? map.get(targetFrameId) || DEFAULT_COUNTS : DEFAULT_COUNTS;
+    },
+    [result],
+  );
+
+  return { getStickyCounts, sortedFrameIndices: result.indices };
+};

src/hooks/use-frame-detection-map.ts

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { DetectionData, DetectionType } from '@/types';
+
+export const useFrameDetectionMap = (data: DetectionData, detectionType: DetectionType) => {
+  const frameDetectionMap = useMemo(() => {
+    const map = new Map<number, any[]>();
+    const isCombined = detectionType === 'pot-sign-detection';
+    const isPothole = detectionType === 'pothole-detection' || isCombined;
+    const isSignboard = detectionType === 'sign-board-detection' || isCombined;
+
+    if (data.frames && Array.isArray(data.frames)) {
+      data.frames.forEach((frameData) => {
+        const frameId = frameData.frame_id;
+        const flatDetections = (frameData as any).detections;
+        if (flatDetections && Array.isArray(flatDetections)) {
+          map.set(
+            frameId,
+            flatDetections.map((d: any) => ({
+              ...d,
+              _detType: d.type === 'pothole' ? 'pothole' : 'signboard',
+              pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
+              signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
+            })),
+          );
+        } else {
+          let detections: any[] = [];
+          if (isPothole && (frameData as any).potholes) {
+            detections = [
+              ...detections,
+              ...(frameData as any).potholes.map((p: any) => ({ ...p, _detType: 'pothole' })),
+            ];
+          }
+          if (isSignboard && (frameData as any).signboards) {
+            detections = [
+              ...detections,
+              ...(frameData as any).signboards.map((s: any) => ({ ...s, _detType: 'signboard' })),
+            ];
+          }
+          if (detections.length > 0) map.set(frameId, detections);
+        }
+      });
+    }
+    return map;
+  }, [data, detectionType]);
+
+  const getNearestDetections = (frame: number, sortedFrameIndices: number[], maxSkip = 3) => {
+    const exact = frameDetectionMap.get(frame);
+    if (exact) return exact;
+
+    let low = 0,
+      high = sortedFrameIndices.length - 1,
+      targetIndex = -1;
+
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      if (sortedFrameIndices[mid] <= frame) {
+        targetIndex = sortedFrameIndices[mid];
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+
+    return targetIndex !== -1 && frame - targetIndex <= maxSkip
+      ? frameDetectionMap.get(targetIndex)
+      : undefined;
+  };
+
+  return { frameDetectionMap, getNearestDetections };
+};

src/hooks/use-gps-map.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { DetectionData } from '@/types';
+
+export const useGpsMap = (data: DetectionData) => {
+  const gpsMap = useMemo(() => {
+    const map = new Map<number, { lat: number; lng: number }>();
+    const addItemsToMap = (list?: any[]) => {
+      if (!list || !Array.isArray(list)) return;
+      list.forEach((item) => {
+        const id =
+          (item as any).pothole_id ?? (item as any).signboard_id ?? (item as any).detection_id;
+        if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
+          map.set(id, { lat: item.lat, lng: item.lng });
+        }
+      });
+    };
+    addItemsToMap(data.pothole_list);
+    addItemsToMap(data.signboard_list);
+    addItemsToMap(data.defected_sign_board_list);
+    addItemsToMap(data.road_crack_list);
+    addItemsToMap(data.damaged_road_marking_list);
+    addItemsToMap(data.good_sign_board_list);
+    return map;
+  }, [data]);
+
+  return gpsMap;
+};

src/hooks/use-video-detection-loop.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+export const useVideoDetectionLoop = (
+  videoRef: React.RefObject<HTMLVideoElement | null>,
+  fps: number,
+  onFrameUpdate: (frame: number) => void,
+) => {
+  const lastProcessedFrame = useRef(-1);
+  const animId = useRef<number>(-1);
+
+  useEffect(() => {
+    const update = () => {
+      const video = videoRef.current;
+      if (video && !video.paused) {
+        const frame = Math.round(video.currentTime * fps);
+        if (frame !== lastProcessedFrame.current) {
+          lastProcessedFrame.current = frame;
+          onFrameUpdate(frame);
+        }
+      }
+      animId.current = requestAnimationFrame(update);
+    };
+
+    animId.current = requestAnimationFrame(update);
+
+    return () => {
+      if (animId.current !== -1) {
+        cancelAnimationFrame(animId.current);
+      }
+    };
+  }, [fps, onFrameUpdate, videoRef]);
+
+  return { lastProcessedFrame };
+};