refactor(results): support class-based detection summaries

src/components/videoPlayerSection.tsx

@@ -21,9 +21,7 @@ type VideoPlayerSectionProps = {
   data: CompletedVideoResult;
 };
 
-export default function VideoPlayerSection({
-  data,
-}: VideoPlayerSectionProps) {
+export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const {
     activeLog,
@@ -45,9 +43,9 @@ export default function VideoPlayerSection({
   return (
     <div className="space-y-6">
       <Card className="overflow-hidden">
-        <CardHeader className="pb-4 border-b">
+        <CardHeader className="border-b pb-4">
           <div className="flex items-center gap-3">
-            <div className="p-2 rounded bg-secondary">
+            <div className="rounded bg-secondary p-2">
               <Film className="h-5 w-5 text-primary" />
             </div>
             <div>
@@ -61,8 +59,8 @@ export default function VideoPlayerSection({
           </div>
         </CardHeader>
         <CardContent className="pt-6">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2 space-y-6">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="space-y-6 lg:col-span-2">
               <AnnotatedVideoPlayer
                 videoRef={videoRef}
                 videoUrl={videoUrl}
@@ -73,10 +71,7 @@ export default function VideoPlayerSection({
                 onSeeked={handleSeeked}
               />
 
-              <CurrentDetectionBar
-                activeLog={activeLog}
-                summary={data.summary}
-              />
+              <CurrentDetectionBar activeLog={activeLog} data={data} />
             </div>
 
             <DetectionLogs
@@ -91,7 +86,6 @@ export default function VideoPlayerSection({
           </div>
         </CardContent>
       </Card>
-
     </div>
   );
 }