refactor: pause video when click on logs

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(