feat(video): base of video refactoring

src/components/video/detection-logs.tsx

@@ -1,17 +1,26 @@
 'use client';
 
-import { Activity, Film } from 'lucide-react';
+import { Activity, Film, MapPin } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { DetectionLogEntry } from '@/types';
+import { DetectionResultLog } from '@/types';
 import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
+import { cn } from '@/lib/utils';
 
 interface DetectionLogsProps {
-  logs: DetectionLogEntry[];
-  onSeek: (frame: number) => void;
+  logs: DetectionResultLog[];
+  activeLogId?: string;
+  onSeek: (log: DetectionResultLog) => void;
 }
 
-const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
+const formatVideoTime = (seconds: number) => {
+  const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
+  const minutes = Math.floor(safeSeconds / 60);
+  const secs = Math.floor(safeSeconds % 60);
+  return `${minutes}:${secs.toString().padStart(2, '0')}`;
+};
+
+const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -20,7 +29,7 @@ const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
           Detection Logs
         </h4>
         <Badge variant="secondary" className="text-[10px] font-bold uppercase">
-          Live Logs
+          Backend Logs
         </Badge>
       </div>
       <ScrollArea className="h-[430px] rounded-lg border bg-muted/20 p-4">
@@ -28,55 +37,62 @@ const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
           {logs.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
               <Film className="h-8 w-8 mb-2 opacity-20" />
-              <p className="text-xs">Playback to see logs</p>
+              <p className="text-xs">No detections found</p>
             </div>
           ) : (
-            logs.map((log, i) => (
-              <div
-                key={`${log.frame}-${i}`}
-                onClick={() => onSeek(log.frame)}
-                className="p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer group"
-              >
-                <div className="flex items-center justify-between mb-3">
-                  <span className="text-sm font-bold">Frame: {log.frame}</span>
-                  <span className="text-xs text-muted-foreground/80">
-                    {log.videoTime}
-                  </span>
-                </div>
-                <div className="space-y-4">
-                  {log.detections.map((d, j) => {
-                    const typeId = (d.type || '').toLowerCase();
-                    const typeConfig = DETECTION_TYPES[typeId];
-                    const label = typeConfig
-                      ? typeConfig.label
-                      : typeId.replace(/_/g, ' ');
+            logs.map((log) => {
+              const typeId = (log.type || '').toLowerCase();
+              const typeConfig = DETECTION_TYPES[typeId];
+              const label =
+                log.label || typeConfig?.label || typeId.replace(/_/g, ' ');
+              const isActive = activeLogId === log.id;
 
-                    return (
-                      <div key={`${d.id}-${j}`} className="space-y-1">
-                        <div className="text-[13px] font-bold">
-                          {label} ID: {d.id} | Confidence:{' '}
-                          {(d.confidence * 100).toFixed(1)}%
-                        </div>
-                        {d.bbox && (
-                          <div className="text-[12px] text-muted-foreground/80 font-medium">
-                            Coordinates: ({Math.round(d.bbox.x1)},{' '}
-                            {Math.round(d.bbox.y1)}){' '}
-                            <span className="text-muted-foreground/40">→</span>{' '}
-                            ({Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
-                          </div>
-                        )}
-                        {d.latitude && (
-                          <div className="text-[12px] text-muted-foreground/80 font-medium">
-                            GPS: {d.latitude.toFixed(8)},{' '}
-                            {d.longitude?.toFixed(8)}
-                          </div>
-                        )}
+              return (
+                <button
+                  key={`${log.id}-${log.frame}`}
+                  type="button"
+                  onClick={() => onSeek(log)}
+                  className={cn(
+                    'w-full text-left p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer',
+                    isActive && 'border-primary ring-1 ring-primary/30',
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-4 mb-3">
+                    <div>
+                      <div className="text-[13px] font-bold">
+                        {label} ID: {log.id}
                       </div>
-                    );
-                  })}
-                </div>
-              </div>
-            ))
+                      <div className="text-[11px] text-muted-foreground font-medium">
+                        Frame {log.frame}
+                      </div>
+                    </div>
+                    <div className="text-right shrink-0">
+                      <div className="text-xs font-bold">
+                        {formatVideoTime(log.timestamp_seconds)}
+                      </div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {log.timestamp_seconds.toFixed(2)}s
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2 text-[12px] text-muted-foreground/90 font-medium">
+                    {typeof log.confidence === 'number' && (
+                      <div>Confidence: {(log.confidence * 100).toFixed(1)}%</div>
+                    )}
+                    {typeof log.latitude === 'number' &&
+                      typeof log.longitude === 'number' && (
+                        <div className="flex items-center gap-1.5">
+                          <MapPin className="h-3 w-3" />
+                          <span>
+                            {log.latitude.toFixed(8)}, {log.longitude.toFixed(8)}
+                          </span>
+                        </div>
+                      )}
+                  </div>
+                </button>
+              );
+            })
           )}
         </div>
       </ScrollArea>

src/components/video/detection-stats-bar.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { DetectionCounts } from '@/types';
-import { getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
-
-interface DetectionStatsBarProps {
-  currentFrameCounts: DetectionCounts;
-  currentFrame: number;
-  lastDetectedLat: number | null;
-  lastDetectedLng: number | null;
-  detectionMode?: string;
-}
-
-const DetectionStatsBar = memo(
-  ({
-    currentFrameCounts,
-    currentFrame,
-    lastDetectedLat,
-    lastDetectedLng,
-    detectionMode,
-  }: DetectionStatsBarProps) => {
-    const enabledTypes = getEnabledDetectionTypes(detectionMode);
-
-    return (
-      <div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
-        <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
-          {enabledTypes.map((type) => (
-            <div
-              key={type.id}
-              className="flex items-center gap-1.5 whitespace-nowrap"
-            >
-              <span
-                className="text-[11px] font-bold uppercase tracking-tight"
-                style={{ color: type.color }}
-              >
-                {type.label}:
-              </span>
-              <span className="text-sm font-bold" style={{ color: type.color }}>
-                {(currentFrameCounts as any)[type.frameCountKey] || 0}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">
-          <div className="flex items-center gap-2">
-            <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-              FRAME:
-            </span>
-            <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
-              {currentFrame}
-            </span>
-          </div>
-          {lastDetectedLat && (
-            <>
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-                  LAT:
-                </span>
-                <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
-                  {lastDetectedLat.toFixed(7)}
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-                  LNG:
-                </span>
-                <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
-                  {lastDetectedLng?.toFixed(7)}
-                </span>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-DetectionStatsBar.displayName = 'DetectionStatsBar';
-
-export default DetectionStatsBar;

src/components/video/summary-section.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import {
-  Target,
-  SignpostBig,
-  AlertTriangle,
-  Activity,
-  Gauge,
-  Monitor,
-  Film,
-} from 'lucide-react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { DetectionData } from '@/types';
-import { cn } from '@/lib/utils';
-import {
-  getDetectionModeConfig,
-  getEnabledDetectionTypes,
-} from '@/constants/detectionModeConfig';
-
-interface SummarySectionProps {
-  data: DetectionData;
-  show: boolean;
-  detectionType: string;
-}
-
-const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
-  if (!show) return null;
-
-  const detectionMode = data.detection_mode || detectionType;
-  const modeConfig = getDetectionModeConfig(detectionMode);
-  const enabledTypes = getEnabledDetectionTypes(detectionMode);
-
-  const detectionStats = enabledTypes.map((type) => ({
-    label: type.label,
-    value: (data.summary as any)[type.countKey] || 0,
-    icon: type.id.includes('sign')
-      ? SignpostBig
-      : type.id.includes('culvert')
-        ? Target
-        : AlertTriangle,
-    color: `text-[${type.color}]`,
-    customColor: type.color,
-    bgColor: 'bg-muted/30',
-  }));
-
-  const globalStats = [
-    {
-      label: 'Rate',
-      value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
-      icon: Activity,
-      color: 'text-green-500',
-      bgColor: 'bg-green-500/10',
-    },
-    {
-      label: 'Video FPS',
-      value: (data.video_info.fps || 0).toFixed(1),
-      icon: Gauge,
-      color: 'text-orange-500',
-      bgColor: 'bg-orange-500/10',
-    },
-    {
-      label: 'Resolution',
-      value: `${data.video_info.width}×${data.video_info.height}`,
-      icon: Monitor,
-      color: 'text-blue-500',
-      bgColor: 'bg-blue-500/10',
-    },
-    {
-      label: 'Total Frames',
-      value: data.summary.total_frames || data.video_info.total_frames,
-      icon: Film,
-      color: 'text-purple-500',
-      bgColor: 'bg-purple-500/10',
-    },
-  ];
-
-  const stats = [...detectionStats, ...globalStats];
-
-  return (
-    <Card className="overflow-hidden">
-      <CardHeader className="pb-4">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded bg-secondary">
-            <Activity className="h-5 w-5 text-primary" />
-          </div>
-          <div>
-            <CardTitle className="text-base font-bold">Quick Stats</CardTitle>
-            <CardDescription className="text-xs">
-              Detection analysis overview
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-          {stats.map((stat) => {
-            const Icon = stat.icon;
-            return (
-              <div
-                key={stat.label}
-                className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
-              >
-                <div className={cn('p-2 rounded-md mb-2', stat.bgColor)}>
-                  <Icon
-                    className={cn('h-5 w-5', stat.color)}
-                    style={
-                      (stat as any).customColor
-                        ? { color: (stat as any).customColor }
-                        : {}
-                    }
-                  />
-                </div>
-                <div
-                  className={cn('text-xl font-bold', stat.color)}
-                  style={
-                    (stat as any).customColor
-                      ? { color: (stat as any).customColor }
-                      : {}
-                  }
-                >
-                  {stat.value}
-                </div>
-                <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
-                  {stat.label}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default SummarySection;

src/components/video/video-canvas-player.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import {
-  useRef,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-  useCallback,
-} from 'react';
-import { Badge } from '@/components/ui/badge';
-import { drawBoundingBoxes } from '@/utils/canvas-drawing';
-
-interface VideoCanvasPlayerProps {
-  videoRef: React.RefObject<HTMLVideoElement | null>;
-  canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  videoUrl: string;
-  videoWidth: number;
-  videoHeight: number;
-  videoError: string | null;
-  onLoadedData: () => void;
-  onEnded: () => void;
-  onSeeked: () => void;
-  currentDetections: any[];
-}
-
-export interface VideoCanvasPlayerRef {
-  resize: () => void;
-  drawDetections: (detections: any[]) => void;
-}
-
-const VideoCanvasPlayer = forwardRef<
-  VideoCanvasPlayerRef,
-  VideoCanvasPlayerProps
->(
-  (
-    {
-      videoRef,
-      canvasRef,
-      videoUrl,
-      videoWidth,
-      videoHeight,
-      videoError,
-      onLoadedData,
-      onEnded,
-      onSeeked,
-      currentDetections,
-    },
-    ref,
-  ) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const detectionsRef = useRef(currentDetections);
-    useEffect(() => {
-      detectionsRef.current = currentDetections;
-    }, [currentDetections]);
-
-    const resize = useCallback(() => {
-      if (!videoRef.current || !canvasRef.current) return;
-      const rect = videoRef.current.getBoundingClientRect();
-      canvasRef.current.width = rect.width;
-      canvasRef.current.height = rect.height;
-
-      // Draw immediately on resize
-      const ctx = canvasRef.current.getContext('2d');
-      if (ctx) {
-        drawBoundingBoxes(
-          ctx,
-          detectionsRef.current,
-          canvasRef.current.width,
-          canvasRef.current.height,
-          videoWidth,
-          videoHeight,
-        );
-      }
-    }, [videoRef, canvasRef, videoWidth, videoHeight]);
-
-    useImperativeHandle(ref, () => ({
-      resize,
-      drawDetections: (detections) => {
-        if (!canvasRef.current) return;
-        const ctx = canvasRef.current.getContext('2d');
-        if (ctx) {
-          drawBoundingBoxes(
-            ctx,
-            detections,
-            canvasRef.current.width,
-            canvasRef.current.height,
-            videoWidth,
-            videoHeight,
-          );
-        }
-      },
-    }));
-
-    useEffect(() => {
-      if (!containerRef.current) return;
-
-      const observer = new ResizeObserver(() => {
-        resize();
-      });
-
-      observer.observe(containerRef.current);
-
-      return () => observer.disconnect();
-    }, [resize]);
-    // Reacting to detections to ensure correct draw on resize
-
-    return (
-      <div className="space-y-6">
-        {videoError && (
-          <Badge variant="destructive" className="mb-4">
-            {videoError}
-          </Badge>
-        )}
-        <div
-          ref={containerRef}
-          className="relative bg-black rounded-lg overflow-hidden border shadow-inner"
-          style={{ aspectRatio: `${videoWidth}/${videoHeight}` }}
-        >
-          <video
-            ref={videoRef}
-            src={videoUrl}
-            controls
-            className="w-full h-full"
-            onLoadedData={onLoadedData}
-            onEnded={onEnded}
-            onSeeked={onSeeked}
-          />
-          <canvas
-            ref={canvasRef}
-            className="absolute top-0 left-0 pointer-events-none w-full h-full"
-          />
-        </div>
-      </div>
-    );
-  },
-);
-
-VideoCanvasPlayer.displayName = 'VideoCanvasPlayer';
-
-export default VideoCanvasPlayer;