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>
             </>
           )}