feat: introduce custom video player for video analysis

package-lock.json

@@ -23,6 +23,7 @@
         "@tanstack/react-query-devtools": "^5.101.0",
         "@tanstack/react-table": "^8.21.3",
         "@tanstack/react-virtual": "^3.14.3",
+        "@vidstack/react": "^1.15.6",
         "axios": "^1.13.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -3394,7 +3395,6 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3961,6 +3961,23 @@
         "win32"
       ]
     },
+    "node_modules/@vidstack/react": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.15.6.tgz",
+      "integrity": "sha512-hO7cLld5yfxCdDnDCYqh5aS7JxmHfsmX43PmKBJWzDTwK40P3hh5qAdDQzl3qDtEJLYjuo3Sv+kr6tt/VRtJzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.10",
+        "media-captions": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -7180,6 +7197,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-captions": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz",
+      "integrity": "sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "@tanstack/react-query-devtools": "^5.101.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.3",
+    "@vidstack/react": "^1.15.6",
     "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/app/globals.css

@@ -144,3 +144,12 @@
     scrollbar-gutter: stable;
   }
 }
+
+.detection-video-player .vds-slider-preview {
+  display: none;
+}
+
+.detection-video-player
+  .vds-slider-preview:has(.vds-slider-thumbnail img[src^='blob:']) {
+  display: flex;
+}

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 import { Geist_Mono, Poppins } from 'next/font/google';
+import '@vidstack/react/player/styles/default/theme.css';
+import '@vidstack/react/player/styles/default/layouts/video.css';
 import './globals.css';
 import { ThemeProvider } from '@/providers/ThemeProvider';
 import AppInitializer from '@/providers/AppInitializer';

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,14 +23,9 @@ type VideoPlayerSectionProps = {
 };
 
 export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const {
-    activeLog,
-    sortedLogs,
-    handleSeek,
-    handleSeeked,
-    handleTimeUpdate,
-  } = useDetectionPlayback({
+  const videoRef = useRef<MediaPlayerInstance>(null);
+  const { activeLog, sortedLogs, handleSeek, handleSeeked, handleTimeUpdate } =
+    useDetectionPlayback({
       logs: data.logs,
       videoRef,
     });
@@ -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}