refactor video results playback and management form UX

2026-06-18 13:22:30 +05:30
parent defb956751
commit af4d7fae97
11 changed files with 734 additions and 614 deletions
--- a/src/components/videoPlayerSection.tsx
+++ b/src/components/videoPlayerSection.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useRef } from 'react';
+import { Film } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { CompletedVideoResult } from '@/types';
+import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
+import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
+import CurrentDetectionBar from './video/currentDetectionBar';
+import DetectionLogs from './video/detectionLogs';
+import DetailedSummarySection from './video/detailedSummarySection';
+import ResultStatsGrid from './video/resultStatsGrid';
+import { useDetectionPlayback } from './video/useDetectionPlayback';
+
+type VideoPlayerSectionProps = {
+  data: CompletedVideoResult;
+  videoId: string;
+  detectionType: string;
+  projectId?: string;
+};
+
+export default function VideoPlayerSection({
+  data,
+  videoId,
+  detectionType,
+  projectId,
+}: VideoPlayerSectionProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const {
+    activeLog,
+    sortedLogs,
+    handleSeek,
+    handleSeeked,
+    handleTimeUpdate,
+  } = useDetectionPlayback({
+    logs: data.logs,
+    videoRef,
+  });
+  const {
+    videoUrl,
+    isLoading: isVideoLoading,
+    isError: isVideoError,
+    refetch: refetchVideo,
+  } = useAnnotatedVideoQuery(data.annotated_video_url);
+
+  return (
+    <div className="space-y-6">
+      <Card className="overflow-hidden">
+        <CardHeader className="pb-4 border-b">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded bg-secondary">
+              <Film className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-lg font-bold">
+                Detection Playback
+              </CardTitle>
+              <CardDescription className="text-xs">
+                Annotated video with backend detection logs
+              </CardDescription>
+            </div>
+          </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">
+              <AnnotatedVideoPlayer
+                videoRef={videoRef}
+                videoUrl={videoUrl}
+                isLoading={isVideoLoading}
+                isError={isVideoError}
+                onRetry={() => void refetchVideo()}
+                onTimeUpdate={handleTimeUpdate}
+                onSeeked={handleSeeked}
+              />
+
+              <ResultStatsGrid data={data} />
+
+              <CurrentDetectionBar
+                activeLog={activeLog}
+                summary={data.summary}
+              />
+            </div>
+
+            <DetectionLogs
+              logs={sortedLogs}
+              activeLogId={activeLog?.id}
+              onSeek={handleSeek}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <DetailedSummarySection
+        projectId={projectId || ''}
+        videoId={videoId}
+        detectionType={detectionType}
+        logs={sortedLogs}
+      />
+    </div>
+  );
+}