feat(video): base of video refactoring

src/app/(modules)/results/[videoId]/page.tsx

@@ -1,74 +1,56 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
 import VideoPlayerSection from '@/components/video-player-section';
 import { PageHeader } from '@/components/page-header';
-import { sessionService, videoService } from '@/services/api';
-import { SessionContext, DetectionData, DetectionType } from '@/types';
-import { getVideoFile, clearVideoFile } from '@/lib/video-storage';
+import { sessionService } from '@/services/api';
+import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
+import { clearVideoFile } from '@/lib/video-storage';
 import { ROUTES } from '@/utils/routes';
 import { Card } from '@/components/ui/card';
 import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
+import { useVideoResultsQuery } from '../hooks/useVideoResults';
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
+const inferDetectionType = (data: CompletedVideoResult): DetectionType => {
+  if (data.detection_mode) return data.detection_mode as DetectionType;
+
+  const signboards = data.summary?.unique_signboards || 0;
+  const potholes = data.summary?.unique_potholes || 0;
+
+  if (signboards > 0 && potholes > 0) return 'pot-sign-detection';
+  if (signboards > 0) return 'sign-board-detection';
+  return 'pothole-detection';
+};
 
 export default function VideoResultsPage() {
   const router = useRouter();
   const { videoId } = useParams() as { videoId: string };
   const [session, setSession] = useState<SessionContext | null>(null);
-  const [detectionData, setDetectionData] = useState<DetectionData | null>(
-    null,
+
+  const {
+    data: detectionData,
+    isLoading,
+    isError,
+    error: queryError,
+  } = useVideoResultsQuery(videoId);
+
+  const detectionType = useMemo<DetectionType>(
+    () => (detectionData ? inferDetectionType(detectionData) : 'pothole-detection'),
+    [detectionData],
   );
-  const [detectionType, setDetectionType] =
-    useState<DetectionType>('pothole-detection');
-  const [videoFile, setVideoFile] = useState<File | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+
+  const error = isError
+    ? queryError instanceof Error
+      ? queryError.message
+      : 'Failed to load results'
+    : null;
 
   useEffect(() => {
-    const storedSession = sessionService.loadSession();
-    setSession(storedSession);
-
-    const fetchResults = async () => {
-      try {
-        // Fetch detection data from backend
-        const data = await videoService.getVideoResults(videoId);
-        setDetectionData(data as any);
-
-        // Try to infer detection type from results if possible
-        if (data.detection_mode) {
-          setDetectionType(data.detection_mode);
-        } else if (
-          data.summary?.unique_signboards !== undefined &&
-          data.summary?.unique_signboards > 0
-        ) {
-          setDetectionType('sign-board-detection');
-        } else if (
-          data.summary?.unique_potholes !== undefined &&
-          data.summary?.unique_potholes > 0
-        ) {
-          setDetectionType('pothole-detection');
-        }
-
-        // Retrieve video file from IndexedDB
-        const storedVideoFile = await getVideoFile(videoId);
-        if (storedVideoFile) {
-          setVideoFile(storedVideoFile);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load results');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    if (videoId) {
-      fetchResults();
-    }
-  }, [videoId]);
+    setSession(sessionService.loadSession());
+  }, []);
 
   const handleNewAnalysis = async () => {
     if (videoId) {
@@ -188,7 +170,6 @@ export default function VideoResultsPage() {
             <VideoPlayerSection
               data={detectionData}
               videoId={videoId}
-              videoFile={videoFile}
               detectionType={detectionType}
               projectId={session?.projectId || undefined}
             />