From fde88f2dc75d2a3553ce1d128270476904006057 Mon Sep 17 00:00:00 2001
From: Suman991 <sumanmoni27@gmail.com>
Date: Fri, 30 Jan 2026 16:14:15 +0530
Subject: [PATCH] Interactive logs panel

---
 components/video-player-section.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/video-player-section.tsx b/components/video-player-section.tsx
index a137dd7..d88aa3b 100644
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx
@@ -170,6 +170,19 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
     return `${minutes}:${secs.toString().padStart(2, '0')}`
   }, [])
 
+  // Function to seek video to a specific frame
+  const seekToFrame = useCallback((frame: number) => {
+    const video = videoRef.current
+    if (!video) return
+    
+    // Calculate time from frame number
+    const time = frame / data.video_info.fps
+    
+    // Set video currentTime (this will trigger seeked event)
+    video.currentTime = time
+    
+    console.log(`[SeekToFrame] Jumping to frame ${frame} at ${time.toFixed(2)}s`)
+  }, [data.video_info.fps])
 
   // Build optimized frame detection map
   useEffect(() => {
@@ -596,7 +609,8 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
                     logs.map((log, index) => (
                       <div
                         key={`${log.frame}-${index}`}
-                        className={`text-xs p-3 bg-card rounded-md border-l-2 ${
+                        onClick={() => seekToFrame(log.frame)}
+                        className={`text-xs p-3 bg-card rounded-md border-l-2 cursor-pointer hover:bg-accent/50 transition-colors ${
                           isPothole ? "border-red-500" : "border-blue-500"
                         }`}
                       >