From 7a82e17bbbdb28404cef662c698dc446f0a66c7a Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Wed, 8 Jul 2026 17:24:20 +0530
Subject: [PATCH] feat(results): add live annotation overlay on raw video
 playback

---
 .../results/hooks/useVideoResults.ts          |  21 +-
 .../(modules)/results/queries/videoKeys.ts    |   4 +
 .../TicketClassDetectionPreview.tsx           |   4 +-
 .../components/TicketInlineAnalysisVideo.tsx  |  68 +++++
 .../components/TicketOverviewCard.tsx         |  39 ++-
 .../annotation/boundingBoxOverlay.tsx         |   8 +-
 .../video/annotatedDetectionImage.tsx         |  15 +-
 src/components/video/annotatedVideoPlayer.tsx |  11 +-
 .../video/useVideoAnnotationPlayback.ts       | 242 ++++++++++++++++++
 src/components/videoPlayerSection.tsx         | 114 ++++++---
 src/constants/apiRoutes.ts                    |   2 +
 src/services/api/video.service.ts             |  19 +-
 src/types/detection.ts                        |  50 ++++
 13 files changed, 540 insertions(+), 57 deletions(-)
 create mode 100644 src/app/(modules)/ticket/[ticketId]/components/TicketInlineAnalysisVideo.tsx
 create mode 100644 src/components/video/useVideoAnnotationPlayback.ts

diff --git a/src/app/(modules)/results/hooks/useVideoResults.ts b/src/app/(modules)/results/hooks/useVideoResults.ts
index cbde463..7c74af9 100644
--- a/src/app/(modules)/results/hooks/useVideoResults.ts
+++ b/src/app/(modules)/results/hooks/useVideoResults.ts
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { videoService } from '@/services/api';
+import type { VideoAnnotationFramesParams } from '@/types';
 
 import { videoKeys } from '../queries/videoKeys';
 
@@ -18,6 +19,20 @@ export function useVideoResultsQuery(videoId: string | undefined) {
   });
 }
 
+export function useVideoAnnotationFramesQuery(
+  videoId: string | undefined,
+  params: VideoAnnotationFramesParams,
+) {
+  return useQuery({
+    queryKey: videoKeys.annotationFrames(videoId ?? '', params),
+    queryFn: () =>
+      videoService.getVideoAnnotationFrames(videoId as string, params),
+    enabled: Boolean(videoId),
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+}
+
 /**
  * Download the annotated video through the authenticated axios client and
  * expose a local object URL that the native `<video>` element can play.
@@ -26,10 +41,10 @@ export function useVideoResultsQuery(videoId: string | undefined) {
  * directly is what fixes the 401. The browser cannot attach the Bearer token to
  * a media request, but axios can.
  */
-export function useAnnotatedVideoQuery(url: string | undefined) {
+export function useProtectedVideoQuery(url: string | undefined) {
   const query = useQuery({
     queryKey: videoKeys.annotatedVideo(url ?? ''),
-    queryFn: () => videoService.getAnnotatedVideo(url as string),
+    queryFn: () => videoService.getProtectedVideo(url as string),
     enabled: Boolean(url),
     staleTime: Infinity,
     gcTime: 1000 * 60 * 30,
@@ -59,3 +74,5 @@ export function useAnnotatedVideoQuery(url: string | undefined) {
     refetch: query.refetch,
   };
 }
+
+export const useAnnotatedVideoQuery = useProtectedVideoQuery;
diff --git a/src/app/(modules)/results/queries/videoKeys.ts b/src/app/(modules)/results/queries/videoKeys.ts
index f1d0441..ad2f931 100644
--- a/src/app/(modules)/results/queries/videoKeys.ts
+++ b/src/app/(modules)/results/queries/videoKeys.ts
@@ -2,6 +2,10 @@ export const videoKeys = {
   all: ['videos'] as const,
   results: () => [...videoKeys.all, 'results'] as const,
   result: (videoId: string) => [...videoKeys.results(), videoId] as const,
+  annotationFrames: (
+    videoId: string,
+    params: { start_time_ms: number; end_time_ms: number },
+  ) => [...videoKeys.result(videoId), 'annotation-frames', params] as const,
   annotatedVideos: () => [...videoKeys.all, 'annotated'] as const,
   annotatedVideo: (url: string) =>
     [...videoKeys.annotatedVideos(), url] as const,
diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
index 7a88f48..2de22f1 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx
@@ -184,9 +184,9 @@ export function TicketClassDetectionPreview({
             size="sm"
             onClick={() => setCurrentIndex((index) => Math.max(index - 1, 0))}
             disabled={isPreviousDisabled}
+            aria-label="Previous detection"
           >
             <ChevronLeft className="size-4" />
-            Previous
           </Button>
           <div className="min-w-16 text-center text-sm font-medium text-foreground">
             {detectionCount === 0
@@ -199,8 +199,8 @@ export function TicketClassDetectionPreview({
             size="sm"
             onClick={() => setCurrentIndex((index) => index + 1)}
             disabled={isNextDisabled}
+            aria-label="Next detection"
           >
-            Next
             <ChevronRight className="size-4" />
           </Button>
         </div>
diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketInlineAnalysisVideo.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketInlineAnalysisVideo.tsx
new file mode 100644
index 0000000..c41b55e
--- /dev/null
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketInlineAnalysisVideo.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef } from 'react';
+import type { MediaPlayerInstance } from '@vidstack/react';
+
+import { useProtectedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
+import AnnotatedVideoPlayer from '@/components/video/annotatedVideoPlayer';
+import { useVideoAnnotationPlayback } from '@/components/video/useVideoAnnotationPlayback';
+import type { TicketOverviewDetail } from '@/types';
+
+type TicketInlineAnalysisVideoProps = {
+  ticket: TicketOverviewDetail;
+};
+
+export function TicketInlineAnalysisVideo({
+  ticket,
+}: TicketInlineAnalysisVideoProps) {
+  const videoRef = useRef<MediaPlayerInstance | null>(null);
+  const videoId = ticket.video_id ?? ticket.video?.id ?? undefined;
+  const sourceUrl = ticket.video?.url ?? undefined;
+  const fps = ticket.video_metadata?.fps ?? 0;
+  const videoWidth = ticket.video_metadata?.resolution.width ?? 0;
+  const videoHeight = ticket.video_metadata?.resolution.height ?? 0;
+  const {
+    visibleDetections,
+    handleSeeked,
+    handleTimeUpdate,
+    handleVideoFrame,
+  } = useVideoAnnotationPlayback({
+    videoId,
+    logs: [],
+    fps,
+    videoRef,
+  });
+  const {
+    videoUrl,
+    isLoading: isVideoLoading,
+    isError: isVideoError,
+    refetch: refetchVideo,
+  } = useProtectedVideoQuery(sourceUrl);
+
+  if (!videoId || !sourceUrl) {
+    return (
+      <div className="rounded-lg border border-dashed bg-muted/20 px-4 py-8 text-sm text-muted-foreground">
+        Analysis video is unavailable for this ticket.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <AnnotatedVideoPlayer
+        videoRef={videoRef}
+        logs={[]}
+        visibleDetections={visibleDetections}
+        videoWidth={videoWidth}
+        videoHeight={videoHeight}
+        videoUrl={videoUrl}
+        isLoading={isVideoLoading}
+        isError={isVideoError}
+        onRetry={() => void refetchVideo()}
+        onTimeUpdate={handleTimeUpdate}
+        onVideoFrame={handleVideoFrame}
+        onSeeked={handleSeeked}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(modules)/ticket/[ticketId]/components/TicketOverviewCard.tsx b/src/app/(modules)/ticket/[ticketId]/components/TicketOverviewCard.tsx
index aed7a9d..ea4031e 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/TicketOverviewCard.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/TicketOverviewCard.tsx
@@ -2,7 +2,6 @@
 
 import {
   Activity,
-  ArrowRight,
   CalendarDays,
   Clock3,
   Gauge,
@@ -10,7 +9,7 @@ import {
   Monitor,
   UserRound,
 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 import {
   Card,
@@ -20,12 +19,20 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { getDefectVisual } from '@/constants/defectVisualConfig';
 import { PERMISSIONS } from '@/constants/permissions';
 import { PermissionGuard } from '@/guards';
 import { cn } from '@/lib/utils';
 import type { TicketOverviewDetail } from '@/types';
 import { formatDate } from '@/utils/date';
+import { TicketInlineAnalysisVideo } from './TicketInlineAnalysisVideo';
 
 type IconComponent = React.ComponentType<{ className?: string }>;
 
@@ -105,7 +112,7 @@ export function TicketOverviewCard({
 }: {
   ticket: TicketOverviewDetail;
 }) {
-  const router = useRouter();
+  const [isAnalysisOpen, setIsAnalysisOpen] = useState(false);
   const videoMetadata = ticket.video_metadata;
   const duration =
     typeof videoMetadata?.duration_seconds === 'number'
@@ -125,11 +132,9 @@ export function TicketOverviewCard({
   const uploaderName = ticket.uploader?.name || null;
   const analysisVideoId = ticket.video_id || ticket.video?.id || null;
   const videoName = ticket.video?.name || null;
+  const analysisTitle = videoName || ticket.ticket_name || 'Analysis Video';
   const hasVideoMetrics = Boolean(
-    videoName ||
-    videoMetadata?.fps ||
-    duration ||
-    videoMetadata?.resolution?.label,
+    videoMetadata?.fps || duration || videoMetadata?.resolution?.label,
   );
 
   return (
@@ -178,10 +183,9 @@ export function TicketOverviewCard({
                   variant="ghost"
                   size="sm"
                   className="text-primary hover:bg-primary/10 hover:text-primary"
-                  onClick={() => router.push(`/results/${analysisVideoId}`)}
+                  onClick={() => setIsAnalysisOpen(true)}
                 >
                   View Analysis
-                  <ArrowRight className="size-3.5" />
                 </Button>
               </PermissionGuard>
             </CardAction>
@@ -210,9 +214,6 @@ export function TicketOverviewCard({
           </div>
           {hasVideoMetrics ? (
             <div className="grid gap-3 rounded-lg bg-muted/35 px-4 py-3 text-sm sm:grid-cols-3">
-              {videoName ? (
-                <VideoMetric icon={Monitor} label={videoName} />
-              ) : null}
               {videoMetadata?.fps ? (
                 <VideoMetric icon={Gauge} label={`${videoMetadata.fps} FPS`} />
               ) : null}
@@ -229,6 +230,20 @@ export function TicketOverviewCard({
           ) : null}
         </CardContent>
       </Card>
+
+      <Dialog open={isAnalysisOpen} onOpenChange={setIsAnalysisOpen}>
+        <DialogContent className="gap-3 p-3 sm:max-w-5xl sm:p-4">
+          <DialogHeader className="min-w-0 pr-8">
+            <DialogTitle className="truncate text-left text-base">
+              {analysisTitle}
+            </DialogTitle>
+            <DialogDescription className="truncate text-xs">
+              Video analysis with annotation overlay
+            </DialogDescription>
+          </DialogHeader>
+          <TicketInlineAnalysisVideo ticket={ticket} />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/components/annotation/boundingBoxOverlay.tsx b/src/components/annotation/boundingBoxOverlay.tsx
index 9e4ae5e..54d44df 100644
--- a/src/components/annotation/boundingBoxOverlay.tsx
+++ b/src/components/annotation/boundingBoxOverlay.tsx
@@ -1,8 +1,8 @@
 import { getDefectVisual } from '@/constants/defectVisualConfig';
-import type { DetectionResultItem } from '@/types';
+import type { BoundingBoxOverlayItem } from '@/types';
 
 interface BoundingBoxOverlayProps {
-  detections: DetectionResultItem[];
+  detections: BoundingBoxOverlayItem[];
   videoWidth: number;
   videoHeight: number;
 }
@@ -23,7 +23,7 @@ export default function BoundingBoxOverlay({
       viewBox={`0 0 ${videoWidth} ${videoHeight}`}
       preserveAspectRatio="xMidYMid meet"
     >
-      {detections.map(({ id, detection }) => {
+      {detections.map((detection) => {
         const { bounding_box: box } = detection;
         const color = getDefectVisual(detection.class_name).boundingBoxColor;
         const label = `${detection.display_name} ${(detection.confidence * 100).toFixed(0)}%`;
@@ -31,7 +31,7 @@ export default function BoundingBoxOverlay({
         const labelWidth = Math.max(150, label.length * 17);
 
         return (
-          <g key={id}>
+          <g key={detection.id}>
             <rect
               x={box.x1}
               y={box.y1}
diff --git a/src/components/video/annotatedDetectionImage.tsx b/src/components/video/annotatedDetectionImage.tsx
index bfa0e71..7744851 100644
--- a/src/components/video/annotatedDetectionImage.tsx
+++ b/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}
           />
diff --git a/src/components/video/annotatedVideoPlayer.tsx b/src/components/video/annotatedVideoPlayer.tsx
index a02c96d..542b392 100644
--- a/src/components/video/annotatedVideoPlayer.tsx
+++ b/src/components/video/annotatedVideoPlayer.tsx
@@ -2,7 +2,10 @@
 
 import { RefObject, useEffect } from 'react';
 import { AlertTriangle, Loader2 } from 'lucide-react';
-import type { DetectionResultLog } from '@/types';
+import type {
+  DetectionResultLog,
+  VideoAnnotationFrameDetection,
+} from '@/types';
 import { useDetectionThumbnails } from './useDetectionThumbnails';
 import BoundingBoxOverlay from '@/components/annotation/boundingBoxOverlay';
 import {
@@ -21,7 +24,7 @@ import {
 interface AnnotatedVideoPlayerProps {
   videoRef: RefObject<MediaPlayerInstance | null>;
   logs: DetectionResultLog[];
-  visibleLogs: DetectionResultLog[];
+  visibleDetections: VideoAnnotationFrameDetection[];
   videoWidth: number;
   videoHeight: number;
   videoUrl: string | null;
@@ -60,7 +63,7 @@ function VideoFrameSync({
 export default function AnnotatedVideoPlayer({
   videoRef,
   logs,
-  visibleLogs,
+  visibleDetections,
   videoWidth,
   videoHeight,
   videoUrl,
@@ -92,7 +95,7 @@ export default function AnnotatedVideoPlayer({
           </MediaProvider>
           <VideoFrameSync onVideoFrame={onVideoFrame} />
           <BoundingBoxOverlay
-            detections={visibleLogs}
+            detections={visibleDetections}
             videoWidth={videoWidth}
             videoHeight={videoHeight}
           />
diff --git a/src/components/video/useVideoAnnotationPlayback.ts b/src/components/video/useVideoAnnotationPlayback.ts
new file mode 100644
index 0000000..553eb2a
--- /dev/null
+++ b/src/components/video/useVideoAnnotationPlayback.ts
@@ -0,0 +1,242 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { MediaPlayerInstance } from '@vidstack/react';
+
+import { useVideoAnnotationFramesQuery } from '@/app/(modules)/results/hooks/useVideoResults';
+import { videoKeys } from '@/app/(modules)/results/queries/videoKeys';
+import { videoService } from '@/services/api';
+import type {
+  DetectionResultLog,
+  VideoAnnotationFrameDetection,
+  VideoAnnotationFramesParams,
+  VideoAnnotationFramesResponse,
+} from '@/types';
+
+const ANNOTATION_WINDOW_MS = 30000;
+const ANNOTATION_PREFETCH_THRESHOLD_MS = 5000;
+
+const buildWindowParams = (
+  startTimeMs: number,
+): VideoAnnotationFramesParams => ({
+  start_time_ms: startTimeMs,
+  end_time_ms: startTimeMs + ANNOTATION_WINDOW_MS,
+});
+
+const getWindowStartMs = (currentTimeMs: number) =>
+  Math.floor(Math.max(currentTimeMs, 0) / ANNOTATION_WINDOW_MS) *
+  ANNOTATION_WINDOW_MS;
+
+interface UseVideoAnnotationPlaybackParams {
+  videoId: string | undefined;
+  logs: DetectionResultLog[];
+  fps: number;
+  videoRef: RefObject<MediaPlayerInstance | null>;
+}
+
+export function useVideoAnnotationPlayback({
+  videoId,
+  logs,
+  fps,
+  videoRef,
+}: UseVideoAnnotationPlaybackParams) {
+  const queryClient = useQueryClient();
+  const shouldPauseAfterSeekRef = useRef(false);
+  const visibleDetectionIdsRef = useRef('');
+  const [currentWindowStartMs, setCurrentWindowStartMs] = useState(0);
+  const [activeLog, setActiveLog] = useState<DetectionResultLog | undefined>();
+  const [visibleDetections, setVisibleDetections] = useState<
+    VideoAnnotationFrameDetection[]
+  >([]);
+
+  const sortedLogs = useMemo(
+    () =>
+      [...logs].sort(
+        (a, b) => a.frame.timestamp_seconds - b.frame.timestamp_seconds,
+      ),
+    [logs],
+  );
+  const currentWindowParams = useMemo(
+    () => buildWindowParams(currentWindowStartMs),
+    [currentWindowStartMs],
+  );
+  const annotationFramesQuery = useVideoAnnotationFramesQuery(
+    videoId,
+    currentWindowParams,
+  );
+
+  useEffect(() => {
+    setActiveLog((current) => {
+      if (current && sortedLogs.some((log) => log.id === current.id)) {
+        return current;
+      }
+
+      return sortedLogs[0];
+    });
+  }, [sortedLogs]);
+
+  const prefetchWindow = useCallback(
+    (startTimeMs: number) => {
+      if (!videoId || startTimeMs < 0) return;
+
+      const params = buildWindowParams(startTimeMs);
+
+      void queryClient.prefetchQuery({
+        queryKey: videoKeys.annotationFrames(videoId, params),
+        queryFn: () => videoService.getVideoAnnotationFrames(videoId, params),
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 30,
+      });
+    },
+    [queryClient, videoId],
+  );
+
+  const getWindowData = useCallback(
+    (startTimeMs: number) => {
+      if (!videoId) return undefined;
+
+      const params = buildWindowParams(startTimeMs);
+
+      return (
+        queryClient.getQueryData<VideoAnnotationFramesResponse>(
+          videoKeys.annotationFrames(videoId, params),
+        ) ??
+        (startTimeMs === currentWindowStartMs
+          ? annotationFramesQuery.data
+          : undefined)
+      );
+    },
+    [annotationFramesQuery.data, currentWindowStartMs, queryClient, videoId],
+  );
+
+  const updateActiveLog = useCallback(
+    (currentTimeSeconds: number) => {
+      if (sortedLogs.length === 0) {
+        setActiveLog(undefined);
+        return;
+      }
+
+      const currentLog = sortedLogs.findLast(
+        (log) => log.frame.timestamp_seconds <= currentTimeSeconds,
+      );
+      const nextActiveLog = currentLog ?? sortedLogs[0];
+
+      setActiveLog((previous) =>
+        previous?.id === nextActiveLog.id ? previous : nextActiveLog,
+      );
+    },
+    [sortedLogs],
+  );
+
+  const getVisibleDetections = useCallback(
+    (currentTimeSeconds: number) => {
+      const currentTimeMs = currentTimeSeconds * 1000;
+      const targetWindowStartMs = getWindowStartMs(currentTimeMs);
+
+      if (targetWindowStartMs !== currentWindowStartMs) {
+        setCurrentWindowStartMs(targetWindowStartMs);
+      }
+
+      const windowData = getWindowData(targetWindowStartMs);
+
+      if (!windowData) {
+        return [];
+      }
+
+      if (
+        windowData.window.has_more_after &&
+        currentTimeMs >=
+          windowData.window.end_time_ms - ANNOTATION_PREFETCH_THRESHOLD_MS
+      ) {
+        prefetchWindow(windowData.window.end_time_ms);
+      }
+
+      const frameDurationMs = fps > 0 ? 1000 / fps : 0;
+      const currentFrame = windowData.frames.find((frame) => {
+        const frameEndMs =
+          frame.end_timestamp_ms ?? frame.timestamp_ms + frameDurationMs;
+
+        return (
+          currentTimeMs >= frame.timestamp_ms && currentTimeMs < frameEndMs
+        );
+      });
+
+      return currentFrame?.detections ?? [];
+    },
+    [currentWindowStartMs, fps, getWindowData, prefetchWindow],
+  );
+
+  const updateVisibleDetections = useCallback(
+    (currentTimeSeconds: number) => {
+      const nextDetections = getVisibleDetections(currentTimeSeconds);
+      const nextIds = nextDetections.map((detection) => detection.id).join('|');
+
+      if (nextIds === visibleDetectionIdsRef.current) return;
+
+      visibleDetectionIdsRef.current = nextIds;
+      setVisibleDetections(nextDetections);
+    },
+    [getVisibleDetections],
+  );
+
+  const handleSeek = useCallback(
+    (log: DetectionResultLog) => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      const targetTimeSeconds = log.frame.timestamp_seconds;
+      const targetWindowStartMs = getWindowStartMs(targetTimeSeconds * 1000);
+
+      prefetchWindow(targetWindowStartMs);
+      setCurrentWindowStartMs(targetWindowStartMs);
+      shouldPauseAfterSeekRef.current = true;
+      video.pause();
+      video.currentTime = targetTimeSeconds;
+      setActiveLog(log);
+      updateVisibleDetections(targetTimeSeconds);
+    },
+    [prefetchWindow, updateVisibleDetections, videoRef],
+  );
+
+  const handleSeeked = useCallback(() => {
+    const video = videoRef.current;
+    if (!video || !shouldPauseAfterSeekRef.current) return;
+
+    shouldPauseAfterSeekRef.current = false;
+    video.pause();
+  }, [videoRef]);
+
+  const handleTimeUpdate = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    updateActiveLog(video.currentTime);
+  }, [updateActiveLog, videoRef]);
+
+  const handleVideoFrame = useCallback(
+    (mediaTime: number) => {
+      updateActiveLog(mediaTime);
+      updateVisibleDetections(mediaTime);
+    },
+    [updateActiveLog, updateVisibleDetections],
+  );
+
+  return {
+    activeLog,
+    annotationFramesQuery,
+    handleSeek,
+    handleSeeked,
+    handleTimeUpdate,
+    handleVideoFrame,
+    sortedLogs,
+    visibleDetections,
+  };
+}
diff --git a/src/components/videoPlayerSection.tsx b/src/components/videoPlayerSection.tsx
index 5fc3998..675b85b 100644
--- a/src/components/videoPlayerSection.tsx
+++ b/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>
 
diff --git a/src/constants/apiRoutes.ts b/src/constants/apiRoutes.ts
index 2c8b4b4..b043fd9 100644
--- a/src/constants/apiRoutes.ts
+++ b/src/constants/apiRoutes.ts
@@ -54,6 +54,8 @@ export const API_ROUTES = {
     UPLOAD_EVENTS: (token: string) =>
       `/biz/api/v1/uploads/events?sse_token=${encodeURIComponent(token)}`,
     RESULTS: (id: string) => `/biz/api/v1/results/${id}/completed`,
+    ANNOTATION_FRAMES: (id: string) =>
+      `/biz/api/v1/results/${id}/annotation-frames`,
     DETECTIONS: (id: string) => `/biz/api/v1/results/${id}/detections`,
   },
   TICKETS: {
diff --git a/src/services/api/video.service.ts b/src/services/api/video.service.ts
index 117a7db..7327881 100644
--- a/src/services/api/video.service.ts
+++ b/src/services/api/video.service.ts
@@ -5,6 +5,8 @@ import {
   PaginationParams,
   SseTokenResponse,
   UploadListResponse,
+  VideoAnnotationFramesParams,
+  VideoAnnotationFramesResponse,
   VideoDetectionsParams,
   VideoDetectionsResponse,
 } from '@/types';
@@ -81,15 +83,28 @@ export const videoService = {
     return response.data;
   },
 
+  getVideoAnnotationFrames: async (
+    videoId: string,
+    params: VideoAnnotationFramesParams,
+  ): Promise<VideoAnnotationFramesResponse> => {
+    const response = await axiosClient.get<VideoAnnotationFramesResponse>(
+      API_ROUTES.VIDEOS.ANNOTATION_FRAMES(videoId),
+      {
+        params,
+      },
+    );
+    return response.data;
+  },
+
   /**
-   * Fetch the annotated video as a blob through the authenticated axios client.
+   * Fetch a protected video as a blob through the authenticated axios client.
    *
    * The browser's native `<video src>` request cannot carry the Bearer token,
    * which makes the protected media endpoint respond with 401. Proxying the
    * download through axios attaches the auth header (and benefits from the
    * refresh-on-401 interceptor) so the bytes can be played back locally.
    */
-  getAnnotatedVideo: async (url: string): Promise<Blob> => {
+  getProtectedVideo: async (url: string): Promise<Blob> => {
     const response = await axiosClient.get<Blob>(url, {
       responseType: 'blob',
     });
diff --git a/src/types/detection.ts b/src/types/detection.ts
index 882ed93..a10486b 100644
--- a/src/types/detection.ts
+++ b/src/types/detection.ts
@@ -14,6 +14,14 @@ export type DetectionBoundingBox = {
   height: number;
 };
 
+export type BoundingBoxOverlayItem = {
+  id: string | number;
+  class_name: string;
+  display_name: string;
+  confidence: number;
+  bounding_box: DetectionBoundingBox;
+};
+
 export type DetectionResultItem = {
   id: string;
   detection: {
@@ -66,3 +74,45 @@ export type VideoDetectionsResponse = {
   sort: string;
   items: DetectionResultItem[];
 };
+
+export type VideoAnnotationFramesParams = {
+  start_time_ms: number;
+  end_time_ms: number;
+};
+
+export type VideoAnnotationFrameDetection = BoundingBoxOverlayItem & {
+  location: {
+    latitude: number | null;
+    longitude: number | null;
+  };
+};
+
+export type VideoAnnotationFrame = {
+  frame_number: number;
+  timestamp_ms: number;
+  timestamp_seconds: number;
+  end_timestamp_ms?: number;
+  detections: VideoAnnotationFrameDetection[];
+};
+
+export type VideoAnnotationFramesResponse = {
+  video_id: string;
+  raw_video_url: string;
+  video: {
+    width: number;
+    height: number;
+    fps: number;
+    duration_seconds: number;
+    total_frames: number;
+  };
+  coordinate_format: 'xyxy_pixel' | string;
+  window: {
+    start_time_ms: number;
+    end_time_ms: number;
+    has_more_before: boolean;
+    has_more_after: boolean;
+  };
+  frame_count_in_window: number;
+  detection_count_in_window: number;
+  frames: VideoAnnotationFrame[];
+};