feat: introduce custom video player for video analysis

src/components/video/annotatedVideoPlayer.tsx

@@ -2,9 +2,22 @@
 
 import { RefObject } from 'react';
 import { AlertTriangle, Loader2 } from 'lucide-react';
+import type { DetectionResultLog } from '@/types';
+import { useDetectionThumbnails } from './useDetectionThumbnails';
+import {
+  MediaPlayer,
+  MediaProvider,
+  Poster,
+  type MediaPlayerInstance,
+} from '@vidstack/react';
+import {
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 
 interface AnnotatedVideoPlayerProps {
-  videoRef: RefObject<HTMLVideoElement | null>;
+  videoRef: RefObject<MediaPlayerInstance | null>;
+  logs: DetectionResultLog[];
   videoUrl: string | null;
   isLoading: boolean;
   isError: boolean;
@@ -15,6 +28,7 @@ interface AnnotatedVideoPlayerProps {
 
 export default function AnnotatedVideoPlayer({
   videoRef,
+  logs,
   videoUrl,
   isLoading,
   isError,
@@ -22,18 +36,30 @@ export default function AnnotatedVideoPlayer({
   onTimeUpdate,
   onSeeked,
 }: AnnotatedVideoPlayerProps) {
+  const thumbnails = useDetectionThumbnails(logs);
+
   return (
     <div className="relative overflow-hidden rounded-lg border bg-black">
       {videoUrl ? (
-        <video
+        <MediaPlayer
           ref={videoRef}
-          src={videoUrl}
-          controls
-          preload="metadata"
+          src={{ src: videoUrl, type: 'video/mp4' }}
+          viewType="video"
+          streamType="on-demand"
+          crossOrigin
+          playsInline
           onTimeUpdate={onTimeUpdate}
           onSeeked={onSeeked}
-          className="block w-full aspect-video"
-        />
+          className="detection-video-player aspect-video w-full"
+        >
+          <MediaProvider>
+            <Poster className="vds-poster" />
+          </MediaProvider>
+          <DefaultVideoLayout
+            thumbnails={thumbnails}
+            icons={defaultLayoutIcons}
+          />
+        </MediaPlayer>
       ) : (
         <div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
           {isError ? (
@@ -54,7 +80,9 @@ export default function AnnotatedVideoPlayer({
             <>
               <Loader2 className="h-7 w-7 animate-spin text-primary" />
               <p className="text-xs">
-                {isLoading ? 'Loading annotated video...' : 'Preparing video...'}
+                {isLoading
+                  ? 'Loading annotated video...'
+                  : 'Preparing video...'}
               </p>
             </>
           )}

src/components/video/useDetectionPlayback.ts

@@ -1,11 +1,12 @@
 'use client';
 
 import { RefObject, useMemo, useRef, useState } from 'react';
+import type { MediaPlayerInstance } from '@vidstack/react';
 import { CompletedVideoResult, DetectionResultLog } from '@/types';
 
 interface UseDetectionPlaybackParams {
   logs: CompletedVideoResult['logs'];
-  videoRef: RefObject<HTMLVideoElement | null>;
+  videoRef: RefObject<MediaPlayerInstance | null>;
 }
 
 export function useDetectionPlayback({

src/components/video/useDetectionThumbnails.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useQueries } from '@tanstack/react-query';
+
+import { protectedMediaService } from '@/services/api';
+import type { DetectionResultLog } from '@/types';
+
+type DetectionThumbnail = {
+  url: string;
+  startTime: number;
+  endTime: number;
+};
+
+const PREVIEW_WINDOW_SECONDS = 0.5;
+
+export function useDetectionThumbnails(logs: DetectionResultLog[]) {
+  const imageUrls = useMemo(
+    () => logs.map((log) => log.detection.context_image_url),
+    [logs],
+  );
+
+  const blobs = useQueries({
+    queries: imageUrls.map((url) => ({
+      queryKey: ['protected-media', url],
+      queryFn: () => protectedMediaService.getBlob(url),
+      enabled: Boolean(url),
+      staleTime: Infinity,
+      gcTime: 1000 * 60 * 30,
+    })),
+    combine: (results) => results.map((result) => result.data),
+  });
+
+  const [objectUrls, setObjectUrls] = useState<Array<string | null>>([]);
+
+  useEffect(() => {
+    const nextUrls = blobs.map((blob) =>
+      blob ? URL.createObjectURL(blob) : null,
+    );
+    setObjectUrls(nextUrls);
+
+    return () => {
+      nextUrls.forEach((url) => {
+        if (url) URL.revokeObjectURL(url);
+      });
+    };
+  }, [blobs]);
+
+  return useMemo<DetectionThumbnail[]>(
+    () =>
+      logs.flatMap((log, index) => {
+        const url = objectUrls[index];
+        if (!url) return [];
+
+        const timestamp = log.frame.timestamp_seconds;
+        return [
+          {
+            url,
+            startTime: Math.max(0, timestamp - PREVIEW_WINDOW_SECONDS),
+            endTime: timestamp + PREVIEW_WINDOW_SECONDS,
+          },
+        ];
+      }),
+    [logs, objectUrls],
+  );
+}

src/components/videoPlayerSection.tsx

@@ -2,6 +2,7 @@
 
 import { useRef } from 'react';
 import { Film } from 'lucide-react';
+import type { MediaPlayerInstance } from '@vidstack/react';
 import {
   Card,
   CardContent,
@@ -22,17 +23,12 @@ type VideoPlayerSectionProps = {
 };
 
 export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const {
-    activeLog,
-    sortedLogs,
-    handleSeek,
-    handleSeeked,
-    handleTimeUpdate,
-  } = useDetectionPlayback({
-    logs: data.logs,
-    videoRef,
-  });
+  const videoRef = useRef<MediaPlayerInstance>(null);
+  const { activeLog, sortedLogs, handleSeek, handleSeeked, handleTimeUpdate } =
+    useDetectionPlayback({
+      logs: data.logs,
+      videoRef,
+    });
   const {
     videoUrl,
     isLoading: isVideoLoading,
@@ -63,6 +59,7 @@ export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
             <div className="space-y-6 lg:col-span-2">
               <AnnotatedVideoPlayer
                 videoRef={videoRef}
+                logs={sortedLogs}
                 videoUrl={videoUrl}
                 isLoading={isVideoLoading}
                 isError={isVideoError}