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

src/components/video/annotatedDetectionImage.tsx

@@ -4,7 +4,7 @@ import { AlertTriangle, ImageIcon, Loader2 } from 'lucide-react';
 import Image from 'next/image';
 
 import { useProtectedMediaObjectUrl } from '@/hooks/useProtectedMedia';
-import type { DetectionResultItem } from '@/types';
+import type { BoundingBoxOverlayItem, DetectionResultItem } from '@/types';
 
 import BoundingBoxOverlay from '@/components/annotation/boundingBoxOverlay';
 
@@ -22,6 +22,17 @@ export default function AnnotatedDetectionImage({
   const { objectUrl, isLoading, isError } = useProtectedMediaObjectUrl(
     detection?.detection.context_image_url,
   );
+  const overlayDetections: BoundingBoxOverlayItem[] = detection
+    ? [
+        {
+          id: detection.id,
+          class_name: detection.detection.class_name,
+          display_name: detection.detection.display_name,
+          confidence: detection.detection.confidence,
+          bounding_box: detection.detection.bounding_box,
+        },
+      ]
+    : [];
 
   const aspectRatio =
     videoWidth > 0 && videoHeight > 0
@@ -58,7 +69,7 @@ export default function AnnotatedDetectionImage({
             className="object-contain"
           />
           <BoundingBoxOverlay
-            detections={[detection]}
+            detections={overlayDetections}
             videoWidth={videoWidth}
             videoHeight={videoHeight}
           />