feat(results): add live annotation overlay on raw video playback

src/components/videoPlayerSection.tsx

@@ -1,36 +1,60 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import { ImageIcon } from 'lucide-react';
+import { useRef } from 'react';
+import type { MediaPlayerInstance } from '@vidstack/react';
+import { Film } from 'lucide-react';
+
+import { useProtectedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
+import type { CompletedVideoResult } from '@/types';
+
+import DetectionLocationMap from './map/detectionLocationMap';
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card';
-import { CompletedVideoResult } from '@/types';
-import DetectionLocationMap from './map/detectionLocationMap';
+} from './ui/card';
 import AnnotatedDetectionImage from './video/annotatedDetectionImage';
+import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
 import CurrentDetectionBar from './video/currentDetectionBar';
 import DetectionLogs from './video/detectionLogs';
 import ResultStatsGrid from './video/resultStatsGrid';
+import { useVideoAnnotationPlayback } from './video/useVideoAnnotationPlayback';
 
 type VideoPlayerSectionProps = {
   data: CompletedVideoResult;
 };
 
 export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
-  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];
+  const videoRef = useRef<MediaPlayerInstance | null>(null);
+  const {
+    activeLog,
+    handleSeek,
+    handleSeeked,
+    handleTimeUpdate,
+    handleVideoFrame,
+    sortedLogs,
+    visibleDetections,
+  } = useVideoAnnotationPlayback({
+    videoId: data.video_id,
+    logs: data.logs,
+    fps: data.summary.fps,
+    videoRef,
+  });
+  const {
+    videoUrl,
+    isLoading: isVideoLoading,
+    isError: isVideoError,
+    refetch: refetchVideo,
+  } = useProtectedVideoQuery(data.raw_video_url);
+  const mediaAspectRatio =
+    data.summary.video_width > 0 && data.summary.video_height > 0
+      ? `${data.summary.video_width} / ${data.summary.video_height}`
+      : '16 / 9';
+  const activeMapLabel = activeLog
+    ? `${activeLog.detection.display_name} - Frame ${activeLog.frame.number}`
+    : 'Detection';
 
   return (
     <div className="space-y-6">
@@ -38,14 +62,15 @@ 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">
-              <ImageIcon className="h-5 w-5 text-primary" />
+              <Film className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle className="text-lg font-bold">
-                Detection Preview
+                Detection Playback
               </CardTitle>
               <CardDescription className="text-xs">
-                Selected detection image with its bounding box
+                Raw video with frontend annotation overlay and selected
+                detection location
               </CardDescription>
             </div>
           </div>
@@ -53,17 +78,48 @@ 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">
-              <AnnotatedDetectionImage
-                detection={activeLog}
-                videoWidth={data.summary.video_width}
-                videoHeight={data.summary.video_height}
-              />
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-muted-foreground">
+                  Detection Video
+                </p>
+                <AnnotatedVideoPlayer
+                  videoRef={videoRef}
+                  logs={sortedLogs}
+                  visibleDetections={visibleDetections}
+                  videoWidth={data.summary.video_width}
+                  videoHeight={data.summary.video_height}
+                  videoUrl={videoUrl}
+                  isLoading={isVideoLoading}
+                  isError={isVideoError}
+                  onRetry={() => void refetchVideo()}
+                  onTimeUpdate={handleTimeUpdate}
+                  onVideoFrame={handleVideoFrame}
+                  onSeeked={handleSeeked}
+                />
+              </div>
 
-              <DetectionLocationMap
-                latitude={activeLog?.location.latitude ?? null}
-                longitude={activeLog?.location.longitude ?? null}
-                label={activeLog?.detection.display_name ?? 'Detection'}
-              />
+              <div className="grid gap-4 xl:grid-cols-[minmax(0,1.65fr)_minmax(280px,1fr)]">
+                <div className="space-y-2">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    Annotated Image
+                  </p>
+                  <AnnotatedDetectionImage
+                    detection={activeLog}
+                    videoWidth={data.summary.video_width}
+                    videoHeight={data.summary.video_height}
+                  />
+                </div>
+
+                <DetectionLocationMap
+                  latitude={activeLog?.location.latitude ?? null}
+                  longitude={activeLog?.location.longitude ?? null}
+                  label={activeMapLabel}
+                  title="Location on Map"
+                  variant="plain"
+                  aspectRatio={mediaAspectRatio}
+                  showCoordinates={false}
+                />
+              </div>
 
               <CurrentDetectionBar activeLog={activeLog} data={data} />
             </div>
@@ -71,7 +127,7 @@ export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
             <DetectionLogs
               logs={sortedLogs}
               activeLogId={activeLog?.id}
-              onSelect={(log) => setSelectedLogId(log.id)}
+              onSelect={handleSeek}
             />
           </div>