refactor video results playback and management form UX

2026-06-18 13:22:30 +05:30
parent defb956751
commit af4d7fae97
11 changed files with 734 additions and 614 deletions
--- a/src/components/video/detectionLogs.tsx
+++ b/src/components/video/detectionLogs.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Activity, Film, MapPin } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { DetectionResultLog } from '@/types';
+import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
+import { cn } from '@/lib/utils';
+
+interface DetectionLogsProps {
+  logs: DetectionResultLog[];
+  activeLogId?: string;
+  onSeek: (log: DetectionResultLog) => void;
+}
+
+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) => {
+  const activeLogRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    activeLogRef.current?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+    });
+  }, [activeLogId]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-bold flex items-center gap-2">
+          <Activity className="h-4 w-4" />
+          Detection Logs
+        </h4>
+      </div>
+      <ScrollArea className="h-107.5 rounded-lg border bg-muted/20">
+        <div className="space-y-3 p-4">
+          {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">No detections found</p>
+            </div>
+          ) : (
+            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 (
+                <button
+                  key={`${log.id}-${log.frame}`}
+                  ref={isActive ? activeLogRef : null}
+                  type="button"
+                  onClick={() => onSeek(log)}
+                  className={cn(
+                    'w-full rounded-md border bg-card p-4 text-left transition-colors hover:border-primary',
+                    isActive && 'border-primary bg-primary/5',
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-4 mb-3">
+                    <div>
+                      <div className="text-[13px] font-bold">
+                        {label} ID: {log.id}
+                      </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>
+    </div>
+  );
+};
+
+export default DetectionLogs;