58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
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 { useVideoResultsQuery } from '../hooks/useVideoResults';
|
|
import { VideoResultsSkeleton } from './components/VideoResultsSkeleton';
|
|
|
|
export default function VideoResultsPage() {
|
|
const router = useRouter();
|
|
const { videoId } = useParams() as { videoId: string };
|
|
|
|
const {
|
|
data: detectionData,
|
|
isLoading,
|
|
isError,
|
|
error: queryError,
|
|
} = useVideoResultsQuery(videoId);
|
|
|
|
const error = isError
|
|
? queryError instanceof Error
|
|
? queryError.message
|
|
: 'Failed to load results'
|
|
: null;
|
|
|
|
if (isLoading) {
|
|
return <VideoResultsSkeleton />;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex min-h-[60vh] items-center justify-center">
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<PageHeader
|
|
title="Detection Results"
|
|
description={`Video ID: ${videoId}`}
|
|
icon={TrendingUp}
|
|
actions={
|
|
<Button variant="outline" size="sm" onClick={() => router.back()}>
|
|
<ArrowLeft />
|
|
Back
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{detectionData && <VideoPlayerSection data={detectionData} />}
|
|
</div>
|
|
);
|
|
}
|