feat: introduce custom video player for video analysis

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}