feat(results): replace video playback with detection image preview and map

src/components/videoPlayerSection.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useRef } from 'react';
-import { Film } from 'lucide-react';
-import type { MediaPlayerInstance } from '@vidstack/react';
+import { useMemo, useState } from 'react';
+import { ImageIcon } from 'lucide-react';
 import {
   Card,
   CardContent,
@@ -11,30 +10,27 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { CompletedVideoResult } from '@/types';
-import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
-import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
+import DetectionLocationMap from './map/detectionLocationMap';
+import AnnotatedDetectionImage from './video/annotatedDetectionImage';
 import CurrentDetectionBar from './video/currentDetectionBar';
 import DetectionLogs from './video/detectionLogs';
 import ResultStatsGrid from './video/resultStatsGrid';
-import { useDetectionPlayback } from './video/useDetectionPlayback';
 
 type VideoPlayerSectionProps = {
   data: CompletedVideoResult;
 };
 
 export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
-  const videoRef = useRef<MediaPlayerInstance>(null);
-  const { activeLog, sortedLogs, handleSeek, handleSeeked, handleTimeUpdate } =
-    useDetectionPlayback({
-      logs: data.logs,
-      videoRef,
-    });
-  const {
-    videoUrl,
-    isLoading: isVideoLoading,
-    isError: isVideoError,
-    refetch: refetchVideo,
-  } = useAnnotatedVideoQuery(data.processed_video_url || '');
+  const sortedLogs = useMemo(
+    () =>
+      [...data.logs].sort(
+        (a, b) => a.frame.timestamp_seconds - b.frame.timestamp_seconds,
+      ),
+    [data.logs],
+  );
+  const [selectedLogId, setSelectedLogId] = useState(sortedLogs[0]?.id);
+  const activeLog =
+    sortedLogs.find((log) => log.id === selectedLogId) ?? sortedLogs[0];
 
   return (
     <div className="space-y-6">
@@ -42,14 +38,14 @@ export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
         <CardHeader className="border-b pb-4">
           <div className="flex items-center gap-3">
             <div className="rounded bg-secondary p-2">
-              <Film className="h-5 w-5 text-primary" />
+              <ImageIcon className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle className="text-lg font-bold">
-                Detection Playback
+                Detection Preview
               </CardTitle>
               <CardDescription className="text-xs">
-                Annotated video with backend detection logs
+                Selected detection image with its bounding box
               </CardDescription>
             </div>
           </div>
@@ -57,15 +53,16 @@ export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
         <CardContent className="pt-6">
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
             <div className="space-y-6 lg:col-span-2">
-              <AnnotatedVideoPlayer
-                videoRef={videoRef}
-                logs={sortedLogs}
-                videoUrl={videoUrl}
-                isLoading={isVideoLoading}
-                isError={isVideoError}
-                onRetry={() => void refetchVideo()}
-                onTimeUpdate={handleTimeUpdate}
-                onSeeked={handleSeeked}
+              <AnnotatedDetectionImage
+                detection={activeLog}
+                videoWidth={data.summary.video_width}
+                videoHeight={data.summary.video_height}
+              />
+
+              <DetectionLocationMap
+                latitude={activeLog?.location.latitude ?? null}
+                longitude={activeLog?.location.longitude ?? null}
+                label={activeLog?.detection.display_name ?? 'Detection'}
               />
 
               <CurrentDetectionBar activeLog={activeLog} data={data} />
@@ -74,7 +71,7 @@ export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
             <DetectionLogs
               logs={sortedLogs}
               activeLogId={activeLog?.id}
-              onSeek={handleSeek}
+              onSelect={(log) => setSelectedLogId(log.id)}
             />
           </div>