refactor(results): support class-based detection summaries

This commit is contained in:
2026-06-26 14:55:29 +05:30
parent 8a080cb051
commit 57461a05f2
10 changed files with 193 additions and 333 deletions

View File

@@ -1,27 +1,13 @@
'use client';
import { useMemo } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { ArrowLeft, TrendingUp } from 'lucide-react';
import VideoPlayerSection from '@/components/videoPlayerSection';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { CompletedVideoResult, DetectionType } from '@/types';
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
import { useVideoResultsQuery } from '../hooks/useVideoResults';
import { VideoResultsSkeleton } from './components/VideoResultsSkeleton';
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 };
@@ -33,30 +19,19 @@ export default function VideoResultsPage() {
error: queryError,
} = useVideoResultsQuery(videoId);
const detectionType = useMemo<DetectionType>(
() =>
detectionData ? inferDetectionType(detectionData) : 'pothole-detection',
[detectionData],
);
const error = isError
? queryError instanceof Error
? queryError.message
: 'Failed to load results'
: null;
const getTitle = () => {
const config = getDetectionModeConfig(detectionType);
return `${config.label} Results`;
};
if (isLoading) {
return <VideoResultsSkeleton />;
}
if (error) {
return (
<div className="min-h-[60vh] flex items-center justify-center">
<div className="flex min-h-[60vh] items-center justify-center">
<p className="text-sm text-destructive">{error}</p>
</div>
);
@@ -65,7 +40,7 @@ export default function VideoResultsPage() {
return (
<div className="space-y-8">
<PageHeader
title={'Detection Results'}
title="Detection Results"
description={`Video ID: ${videoId}`}
icon={TrendingUp}
actions={