refactor: pause video when click on logs

src/components/video-player-section.tsx

@@ -44,6 +44,7 @@ export default function VideoPlayerSection({
   projectId,
 }: VideoPlayerSectionProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const shouldPauseAfterSeekRef = useRef(false);
   const sortedLogs = useMemo(
     () =>
       [...(data.logs || [])].sort(
@@ -66,9 +67,18 @@ export default function VideoPlayerSection({
     const video = videoRef.current;
     if (!video) return;
 
+    shouldPauseAfterSeekRef.current = true;
+    video.pause();
     video.currentTime = log.timestamp_seconds;
     setActiveLog(log);
-    void video.play();
+  };
+
+  const handleSeeked = () => {
+    const video = videoRef.current;
+    if (!video || !shouldPauseAfterSeekRef.current) return;
+
+    shouldPauseAfterSeekRef.current = false;
+    video.pause();
   };
 
   const handleTimeUpdate = () => {
@@ -153,6 +163,7 @@ export default function VideoPlayerSection({
                     controls
                     preload="metadata"
                     onTimeUpdate={handleTimeUpdate}
+                    onSeeked={handleSeeked}
                     className="block w-full aspect-video"
                   />
                 ) : (

src/components/video/detection-logs.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef } from 'react';
 import { Activity, Film, MapPin } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -21,6 +22,15 @@ const formatVideoTime = (seconds: number) => {
 };
 
 const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
+  const activeLogRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    activeLogRef.current?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+    });
+  }, [activeLogId]);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -50,6 +60,7 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
               return (
                 <button
                   key={`${log.id}-${log.frame}`}
+                  ref={isActive ? activeLogRef : null}
                   type="button"
                   onClick={() => onSeek(log)}
                   className={cn(