refactor video results playback and management form UX
This commit is contained in:
@@ -3,8 +3,8 @@
|
|||||||
import { useState, useEffect, useMemo } from 'react';
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
import { useRouter, useParams } from 'next/navigation';
|
import { useRouter, useParams } from 'next/navigation';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
|
import { Loader2, TrendingUp } from 'lucide-react';
|
||||||
import VideoPlayerSection from '@/components/video-player-section';
|
import VideoPlayerSection from '@/components/videoPlayerSection';
|
||||||
import { PageHeader } from '@/components/page-header';
|
import { PageHeader } from '@/components/page-header';
|
||||||
import { sessionService } from '@/services/api';
|
import { sessionService } from '@/services/api';
|
||||||
import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
|
import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
|
||||||
@@ -113,59 +113,6 @@ export default function VideoResultsPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{session && (
|
|
||||||
<div className="mb-6">
|
|
||||||
<Card className="p-0 border shadow-sm overflow-hidden">
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between py-4 px-6 gap-6 bg-card">
|
|
||||||
<div className="flex flex-wrap items-center gap-x-12 gap-y-4">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
|
||||||
Project
|
|
||||||
</span>
|
|
||||||
<span className="text-base font-bold leading-tight">
|
|
||||||
{session.projectName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col border-l pl-12 border-border/60">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
|
||||||
Package
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-semibold text-muted-foreground leading-tight">
|
|
||||||
{session.packageName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col border-l pl-12 border-border/60">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
|
||||||
Segment
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
|
|
||||||
{session.chainageName}
|
|
||||||
{session.chainageDirection && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
|
|
||||||
{session.chainageDirection === 'UP' ? (
|
|
||||||
<ArrowUp className="h-2.5 w-2.5" />
|
|
||||||
) : (
|
|
||||||
<ArrowDown className="h-2.5 w-2.5" />
|
|
||||||
)}
|
|
||||||
{session.chainageDirection}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
onClick={handleNewAnalysis}
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="font-semibold px-6 shrink-0 h-9"
|
|
||||||
>
|
|
||||||
Start New Analysis
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{detectionData && (
|
{detectionData && (
|
||||||
<VideoPlayerSection
|
<VideoPlayerSection
|
||||||
data={detectionData}
|
data={detectionData}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
'use client';
|
"use client"
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from "react"
|
||||||
import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
|
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
function ScrollArea({
|
function ScrollArea({
|
||||||
className,
|
className,
|
||||||
@@ -13,24 +13,24 @@ function ScrollArea({
|
|||||||
return (
|
return (
|
||||||
<ScrollAreaPrimitive.Root
|
<ScrollAreaPrimitive.Root
|
||||||
data-slot="scroll-area"
|
data-slot="scroll-area"
|
||||||
className={cn('relative', className)}
|
className={cn("relative", className)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<ScrollAreaPrimitive.Viewport
|
<ScrollAreaPrimitive.Viewport
|
||||||
data-slot="scroll-area-viewport"
|
data-slot="scroll-area-viewport"
|
||||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-none"
|
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ScrollAreaPrimitive.Viewport>
|
</ScrollAreaPrimitive.Viewport>
|
||||||
<ScrollBar />
|
<ScrollBar />
|
||||||
<ScrollAreaPrimitive.Corner />
|
<ScrollAreaPrimitive.Corner />
|
||||||
</ScrollAreaPrimitive.Root>
|
</ScrollAreaPrimitive.Root>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ScrollBar({
|
function ScrollBar({
|
||||||
className,
|
className,
|
||||||
orientation = 'vertical',
|
orientation = "vertical",
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||||
return (
|
return (
|
||||||
@@ -38,12 +38,12 @@ function ScrollBar({
|
|||||||
data-slot="scroll-area-scrollbar"
|
data-slot="scroll-area-scrollbar"
|
||||||
orientation={orientation}
|
orientation={orientation}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex touch-none p-px transition-colors select-none',
|
"flex touch-none p-px transition-colors select-none",
|
||||||
orientation === 'vertical' &&
|
orientation === "vertical" &&
|
||||||
'h-full w-2.5 border-l border-l-transparent',
|
"h-full w-2.5 border-l border-l-transparent",
|
||||||
orientation === 'horizontal' &&
|
orientation === "horizontal" &&
|
||||||
'h-2.5 flex-col border-t border-t-transparent',
|
"h-2.5 flex-col border-t border-t-transparent",
|
||||||
className,
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
@@ -52,7 +52,7 @@ function ScrollBar({
|
|||||||
className="relative flex-1 rounded-full bg-border"
|
className="relative flex-1 rounded-full bg-border"
|
||||||
/>
|
/>
|
||||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { ScrollArea, ScrollBar };
|
export { ScrollArea, ScrollBar }
|
||||||
|
|||||||
@@ -1,292 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useMemo, useRef, useState } from 'react';
|
|
||||||
import {
|
|
||||||
Activity,
|
|
||||||
AlertTriangle,
|
|
||||||
Clock,
|
|
||||||
Film,
|
|
||||||
Gauge,
|
|
||||||
Loader2,
|
|
||||||
MapPin,
|
|
||||||
SignpostBig,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/components/ui/card';
|
|
||||||
import { CompletedVideoResult, DetectionResultLog } from '@/types';
|
|
||||||
import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
|
|
||||||
import DetectionLogs from './video/detection-logs';
|
|
||||||
import DetailedSummarySection from './video/detailed-summary-section';
|
|
||||||
|
|
||||||
type VideoPlayerSectionProps = {
|
|
||||||
data: CompletedVideoResult;
|
|
||||||
videoId: string;
|
|
||||||
detectionType: string;
|
|
||||||
projectId?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDuration = (seconds: number) => {
|
|
||||||
const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
|
|
||||||
const minutes = Math.floor(safeSeconds / 60);
|
|
||||||
const secs = Math.floor(safeSeconds % 60);
|
|
||||||
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function VideoPlayerSection({
|
|
||||||
data,
|
|
||||||
videoId,
|
|
||||||
detectionType,
|
|
||||||
projectId,
|
|
||||||
}: VideoPlayerSectionProps) {
|
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
|
||||||
const shouldPauseAfterSeekRef = useRef(false);
|
|
||||||
const sortedLogs = useMemo(
|
|
||||||
() =>
|
|
||||||
[...(data.logs || [])].sort(
|
|
||||||
(a, b) => a.timestamp_seconds - b.timestamp_seconds,
|
|
||||||
),
|
|
||||||
[data.logs],
|
|
||||||
);
|
|
||||||
const [activeLog, setActiveLog] = useState<DetectionResultLog | undefined>(
|
|
||||||
sortedLogs[0],
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
videoUrl,
|
|
||||||
isLoading: isVideoLoading,
|
|
||||||
isError: isVideoError,
|
|
||||||
refetch: refetchVideo,
|
|
||||||
} = useAnnotatedVideoQuery(data.annotated_video_url);
|
|
||||||
|
|
||||||
const handleSeek = (log: DetectionResultLog) => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
shouldPauseAfterSeekRef.current = true;
|
|
||||||
video.pause();
|
|
||||||
video.currentTime = log.timestamp_seconds;
|
|
||||||
setActiveLog(log);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSeeked = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video || !shouldPauseAfterSeekRef.current) return;
|
|
||||||
|
|
||||||
shouldPauseAfterSeekRef.current = false;
|
|
||||||
video.pause();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTimeUpdate = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video || sortedLogs.length === 0) return;
|
|
||||||
|
|
||||||
const currentLog = sortedLogs.findLast(
|
|
||||||
(log) => log.timestamp_seconds <= video.currentTime,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (currentLog && currentLog.id !== activeLog?.id) {
|
|
||||||
setActiveLog(currentLog);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const currentCounts = activeLog?.cumulative_counts || data.summary;
|
|
||||||
|
|
||||||
const stats = [
|
|
||||||
{
|
|
||||||
label: 'Total Detections',
|
|
||||||
value: data.summary.total_detections || 0,
|
|
||||||
icon: Activity,
|
|
||||||
color: 'text-green-500',
|
|
||||||
bgColor: 'bg-green-500/10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Potholes',
|
|
||||||
value: data.summary.unique_potholes || 0,
|
|
||||||
icon: AlertTriangle,
|
|
||||||
color: 'text-orange-500',
|
|
||||||
bgColor: 'bg-orange-500/10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Signboards',
|
|
||||||
value: data.summary.unique_signboards || 0,
|
|
||||||
icon: SignpostBig,
|
|
||||||
color: 'text-blue-500',
|
|
||||||
bgColor: 'bg-blue-500/10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'FPS',
|
|
||||||
value: data.fps.toFixed(1),
|
|
||||||
icon: Gauge,
|
|
||||||
color: 'text-purple-500',
|
|
||||||
bgColor: 'bg-purple-500/10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Duration',
|
|
||||||
value: formatDuration(data.duration_seconds),
|
|
||||||
icon: Clock,
|
|
||||||
color: 'text-cyan-500',
|
|
||||||
bgColor: 'bg-cyan-500/10',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
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">
|
|
||||||
<div className="relative overflow-hidden rounded-lg border bg-black">
|
|
||||||
{videoUrl ? (
|
|
||||||
<video
|
|
||||||
ref={videoRef}
|
|
||||||
src={videoUrl}
|
|
||||||
controls
|
|
||||||
preload="metadata"
|
|
||||||
onTimeUpdate={handleTimeUpdate}
|
|
||||||
onSeeked={handleSeeked}
|
|
||||||
className="block w-full aspect-video"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
|
|
||||||
{isVideoError ? (
|
|
||||||
<>
|
|
||||||
<AlertTriangle className="h-7 w-7 text-destructive" />
|
|
||||||
<p className="text-sm font-medium text-destructive">
|
|
||||||
Failed to load the annotated video.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => void refetchVideo()}
|
|
||||||
className="text-xs font-semibold uppercase tracking-wider text-primary hover:underline"
|
|
||||||
>
|
|
||||||
Retry
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-7 w-7 animate-spin text-primary" />
|
|
||||||
<p className="text-xs font-medium uppercase tracking-widest">
|
|
||||||
{isVideoLoading
|
|
||||||
? 'Loading annotated video...'
|
|
||||||
: 'Preparing video...'}
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
||||||
{stats.map((stat) => {
|
|
||||||
const Icon = stat.icon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={stat.label}
|
|
||||||
className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
|
|
||||||
>
|
|
||||||
<div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
|
|
||||||
<Icon className={`h-5 w-5 ${stat.color}`} />
|
|
||||||
</div>
|
|
||||||
<div className={`text-xl font-bold ${stat.color}`}>
|
|
||||||
{stat.value}
|
|
||||||
</div>
|
|
||||||
<div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
|
|
||||||
{stat.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
|
|
||||||
<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
|
|
||||||
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
|
||||||
<span className="text-[11px] font-bold uppercase tracking-tight text-orange-500">
|
|
||||||
Potholes:
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-bold text-orange-500">
|
|
||||||
{currentCounts.unique_potholes || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
|
||||||
<span className="text-[11px] font-bold uppercase tracking-tight text-blue-500">
|
|
||||||
Signboards:
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-bold text-blue-500">
|
|
||||||
{currentCounts.unique_signboards || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
|
||||||
<span className="text-[11px] font-bold uppercase tracking-tight text-green-500">
|
|
||||||
Total:
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-bold text-green-500">
|
|
||||||
{currentCounts.total_detections || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeLog && (
|
|
||||||
<div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
|
||||||
Frame:
|
|
||||||
</span>
|
|
||||||
<span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
|
|
||||||
{activeLog.frame}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{typeof activeLog.latitude === 'number' &&
|
|
||||||
typeof activeLog.longitude === 'number' && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<MapPin className="h-3.5 w-3.5 text-muted-foreground" />
|
|
||||||
<span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
|
|
||||||
{activeLog.latitude.toFixed(7)},{' '}
|
|
||||||
{activeLog.longitude.toFixed(7)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DetectionLogs
|
|
||||||
logs={sortedLogs}
|
|
||||||
activeLogId={activeLog?.id}
|
|
||||||
onSeek={handleSeek}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<DetailedSummarySection
|
|
||||||
projectId={projectId || ''}
|
|
||||||
videoId={videoId}
|
|
||||||
show={Boolean(projectId)}
|
|
||||||
detectionType={detectionType}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
65
src/components/video/annotatedVideoPlayer.tsx
Normal file
65
src/components/video/annotatedVideoPlayer.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RefObject } from 'react';
|
||||||
|
import { AlertTriangle, Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
interface AnnotatedVideoPlayerProps {
|
||||||
|
videoRef: RefObject<HTMLVideoElement | null>;
|
||||||
|
videoUrl: string | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
isError: boolean;
|
||||||
|
onRetry: () => void;
|
||||||
|
onTimeUpdate: () => void;
|
||||||
|
onSeeked: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AnnotatedVideoPlayer({
|
||||||
|
videoRef,
|
||||||
|
videoUrl,
|
||||||
|
isLoading,
|
||||||
|
isError,
|
||||||
|
onRetry,
|
||||||
|
onTimeUpdate,
|
||||||
|
onSeeked,
|
||||||
|
}: AnnotatedVideoPlayerProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden rounded-lg border bg-black">
|
||||||
|
{videoUrl ? (
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src={videoUrl}
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
onTimeUpdate={onTimeUpdate}
|
||||||
|
onSeeked={onSeeked}
|
||||||
|
className="block w-full aspect-video"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
|
||||||
|
{isError ? (
|
||||||
|
<>
|
||||||
|
<AlertTriangle className="h-7 w-7 text-destructive" />
|
||||||
|
<p className="text-sm font-medium text-destructive">
|
||||||
|
Failed to load the annotated video.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onRetry}
|
||||||
|
className="text-xs font-semibold uppercase tracking-wider text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-7 w-7 animate-spin text-primary" />
|
||||||
|
<p className="text-xs font-medium uppercase tracking-widest">
|
||||||
|
{isLoading ? 'Loading annotated video...' : 'Preparing video...'}
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
src/components/video/currentDetectionBar.tsx
Normal file
70
src/components/video/currentDetectionBar.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { MapPin } from 'lucide-react';
|
||||||
|
import { CompletedVideoResult, DetectionResultLog } from '@/types';
|
||||||
|
|
||||||
|
interface CurrentDetectionBarProps {
|
||||||
|
activeLog?: DetectionResultLog;
|
||||||
|
summary: CompletedVideoResult['summary'];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CurrentDetectionBar({
|
||||||
|
activeLog,
|
||||||
|
summary,
|
||||||
|
}: CurrentDetectionBarProps) {
|
||||||
|
const currentCounts = activeLog?.cumulative_counts || summary;
|
||||||
|
const countItems = [
|
||||||
|
{
|
||||||
|
label: 'Potholes',
|
||||||
|
value: currentCounts.unique_potholes || 0,
|
||||||
|
className: 'text-orange-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Signboards',
|
||||||
|
value: currentCounts.unique_signboards || 0,
|
||||||
|
className: 'text-blue-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Total',
|
||||||
|
value: currentCounts.total_detections || 0,
|
||||||
|
className: 'text-green-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const latitude = activeLog?.latitude;
|
||||||
|
const longitude = activeLog?.longitude;
|
||||||
|
const coordinates =
|
||||||
|
typeof latitude === 'number' && typeof longitude === 'number'
|
||||||
|
? `${latitude.toFixed(7)}, ${longitude.toFixed(7)}`
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border bg-card px-4 py-3">
|
||||||
|
{coordinates && (
|
||||||
|
<div className="mb-3 flex justify-end">
|
||||||
|
<div className="flex max-w-full items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5">
|
||||||
|
<MapPin className="size-3.5 shrink-0 text-muted-foreground" />
|
||||||
|
<span className="truncate font-mono text-xs font-semibold text-foreground">
|
||||||
|
{coordinates}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||||
|
{countItems.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.label}
|
||||||
|
className="flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-4 py-2"
|
||||||
|
>
|
||||||
|
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
|
||||||
|
{item.label}
|
||||||
|
</p>
|
||||||
|
<p className={`text-2xl font-bold leading-none ${item.className}`}>
|
||||||
|
{item.value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,244 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { Map as MapIcon, Activity } from 'lucide-react';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/components/ui/card';
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { ChainageSummaryData } from '@/types';
|
|
||||||
import { projectSummaryService } from '@/services/api';
|
|
||||||
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
|
|
||||||
|
|
||||||
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
|
|
||||||
const MapModal = dynamic(() => import('@/components/map-modal'), {
|
|
||||||
ssr: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
interface DetailedSummarySectionProps {
|
|
||||||
projectId: string;
|
|
||||||
videoId: string;
|
|
||||||
show: boolean;
|
|
||||||
detectionType: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DetailedSummarySection = ({
|
|
||||||
projectId,
|
|
||||||
videoId,
|
|
||||||
show,
|
|
||||||
detectionType,
|
|
||||||
}: DetailedSummarySectionProps) => {
|
|
||||||
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [showMap, setShowMap] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!show || !videoId || !projectId) return;
|
|
||||||
|
|
||||||
const fetchSummary = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const data =
|
|
||||||
await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
|
|
||||||
projectId,
|
|
||||||
videoId,
|
|
||||||
);
|
|
||||||
setSummaryData(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to fetch summary:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchSummary();
|
|
||||||
}, [show, videoId, projectId]);
|
|
||||||
|
|
||||||
if (!show || loading || !summaryData) return null;
|
|
||||||
|
|
||||||
const modeConfig = getDetectionModeConfig(detectionType);
|
|
||||||
|
|
||||||
// Flatten all detections for the scrollable list
|
|
||||||
const allDetections: Array<{
|
|
||||||
detection: any;
|
|
||||||
chainageName: string;
|
|
||||||
packageName: string;
|
|
||||||
}> = [];
|
|
||||||
|
|
||||||
Object.entries(summaryData.packages || {}).forEach(
|
|
||||||
([packageName, packageData]) => {
|
|
||||||
Object.entries(packageData?.chainages || {}).forEach(
|
|
||||||
([chainageName, chainageData]) => {
|
|
||||||
chainageData?.detections?.forEach((detection) => {
|
|
||||||
allDetections.push({ detection, chainageName, packageName });
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
|
||||||
<Card className="flex flex-col lg:col-span-2 overflow-hidden">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded bg-secondary">
|
|
||||||
<MapIcon className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardTitle className="text-base font-bold">Segments</CardTitle>
|
|
||||||
<CardDescription className="text-xs">
|
|
||||||
{modeConfig.label} detected
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowMap(true)}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<MapIcon className="h-4 w-4" />
|
|
||||||
Map
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 p-0 overflow-hidden">
|
|
||||||
<ScrollArea className="h-[300px] p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Project Info */}
|
|
||||||
<div className="pb-3 border-b">
|
|
||||||
<div className="flex flex-col mb-2">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
||||||
Project
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-bold">
|
|
||||||
{summaryData.project.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{summaryData.project.corridor_name && (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
||||||
Corridor
|
|
||||||
</span>
|
|
||||||
<span className="text-xs font-semibold text-muted-foreground">
|
|
||||||
{summaryData.project.corridor_name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Packages and Chainages */}
|
|
||||||
{Object.entries(summaryData.packages).map(
|
|
||||||
([packageName, packageData]) => (
|
|
||||||
<div key={packageData.package_id} className="space-y-2">
|
|
||||||
<div className="text-xs font-bold text-muted-foreground truncate">
|
|
||||||
{packageName}
|
|
||||||
</div>
|
|
||||||
<div className="pl-2 space-y-2 border-l-2 border-muted">
|
|
||||||
{Object.entries(packageData.chainages).map(
|
|
||||||
([chainageName, chainageData]) => (
|
|
||||||
<div
|
|
||||||
key={chainageData.chainage_id}
|
|
||||||
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
|
|
||||||
>
|
|
||||||
<div className="font-semibold truncate">
|
|
||||||
{chainageName}
|
|
||||||
</div>
|
|
||||||
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
|
|
||||||
{chainageData.detection_count}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="flex flex-col lg:col-span-3 overflow-hidden">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded bg-secondary">
|
|
||||||
<Activity className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardTitle className="text-base font-bold">
|
|
||||||
All Detections
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription className="text-xs">
|
|
||||||
Complete list with GPS coordinates
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 p-0 overflow-hidden">
|
|
||||||
<ScrollArea className="h-[300px] p-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
{allDetections.map(({ detection, chainageName }, idx) => (
|
|
||||||
<div
|
|
||||||
key={`${detection.id}-${idx}`}
|
|
||||||
className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="font-bold">
|
|
||||||
{(detection.class || detection.type || '').replace(
|
|
||||||
/_/g,
|
|
||||||
' ',
|
|
||||||
)}{' '}
|
|
||||||
#{detection.id}
|
|
||||||
</span>
|
|
||||||
<Badge variant="outline" className="text-[10px] font-mono">
|
|
||||||
Frame {detection.frame_number}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
|
|
||||||
<div className="truncate">
|
|
||||||
Segment:{' '}
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{chainageName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Confidence:{' '}
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{(detection.confidence * 100).toFixed(1)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
|
|
||||||
GPS: {detection.latitude}, {detection.longitude}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Map Modal */}
|
|
||||||
<MapModal
|
|
||||||
open={showMap}
|
|
||||||
onClose={() => setShowMap(false)}
|
|
||||||
detections={allDetections.map(({ detection }) => detection)}
|
|
||||||
detectionType={detectionType}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailedSummarySection;
|
|
||||||
321
src/components/video/detailedSummarySection.tsx
Normal file
321
src/components/video/detailedSummarySection.tsx
Normal file
@@ -0,0 +1,321 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import { Map as MapIcon, Activity } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/components/ui/card';
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { ChainageSummaryData, DetectionResultLog } from '@/types';
|
||||||
|
import { projectSummaryService } from '@/services/api';
|
||||||
|
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
|
||||||
|
|
||||||
|
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
|
||||||
|
const MapModal = dynamic(() => import('@/components/map-modal'), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
interface DetailedSummarySectionProps {
|
||||||
|
projectId: string;
|
||||||
|
videoId: string;
|
||||||
|
detectionType: string;
|
||||||
|
logs: DetectionResultLog[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type DisplayDetection = {
|
||||||
|
id: string | number;
|
||||||
|
type: string;
|
||||||
|
class?: string;
|
||||||
|
confidence?: number;
|
||||||
|
latitude?: number | null;
|
||||||
|
longitude?: number | null;
|
||||||
|
frame_number: number;
|
||||||
|
timestamp_ms?: number;
|
||||||
|
chainageName?: string;
|
||||||
|
packageName?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DetailedSummarySection = ({
|
||||||
|
projectId,
|
||||||
|
videoId,
|
||||||
|
detectionType,
|
||||||
|
logs,
|
||||||
|
}: DetailedSummarySectionProps) => {
|
||||||
|
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showMap, setShowMap] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!videoId || !projectId) {
|
||||||
|
setSummaryData(null);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchSummary = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data =
|
||||||
|
await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
|
||||||
|
projectId,
|
||||||
|
videoId,
|
||||||
|
);
|
||||||
|
setSummaryData(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch summary:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSummary();
|
||||||
|
}, [videoId, projectId]);
|
||||||
|
|
||||||
|
if (!videoId) return null;
|
||||||
|
|
||||||
|
const modeConfig = getDetectionModeConfig(detectionType);
|
||||||
|
|
||||||
|
// Flatten all detections for the scrollable list
|
||||||
|
const summaryDetections: DisplayDetection[] = [];
|
||||||
|
|
||||||
|
Object.entries(summaryData?.packages || {}).forEach(
|
||||||
|
([packageName, packageData]) => {
|
||||||
|
Object.entries(packageData?.chainages || {}).forEach(
|
||||||
|
([chainageName, chainageData]) => {
|
||||||
|
chainageData?.detections?.forEach((detection) => {
|
||||||
|
summaryDetections.push({
|
||||||
|
...detection,
|
||||||
|
chainageName,
|
||||||
|
packageName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const logDetections: DisplayDetection[] = logs.map((log) => ({
|
||||||
|
id: log.id,
|
||||||
|
type: log.type,
|
||||||
|
class: log.label || log.type,
|
||||||
|
confidence: log.confidence,
|
||||||
|
latitude: log.latitude,
|
||||||
|
longitude: log.longitude,
|
||||||
|
frame_number: log.frame,
|
||||||
|
timestamp_ms: Math.round(log.timestamp_seconds * 1000),
|
||||||
|
}));
|
||||||
|
const allDetections = summaryDetections.length
|
||||||
|
? summaryDetections
|
||||||
|
: logDetections;
|
||||||
|
const mapDetections = allDetections
|
||||||
|
.filter(
|
||||||
|
(detection) =>
|
||||||
|
typeof detection.latitude === 'number' &&
|
||||||
|
typeof detection.longitude === 'number',
|
||||||
|
)
|
||||||
|
.map((detection, index) => ({
|
||||||
|
id:
|
||||||
|
typeof detection.id === 'number'
|
||||||
|
? detection.id
|
||||||
|
: Number.parseInt(detection.id.replace(/\D/g, ''), 10) || index + 1,
|
||||||
|
type: detection.type,
|
||||||
|
class: detection.class || detection.type,
|
||||||
|
confidence: detection.confidence || 0,
|
||||||
|
latitude: detection.latitude as number,
|
||||||
|
longitude: detection.longitude as number,
|
||||||
|
frame_number: detection.frame_number,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
||||||
|
<Card className="flex flex-col lg:col-span-2 overflow-hidden">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded bg-secondary">
|
||||||
|
<MapIcon className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base font-bold">Segments</CardTitle>
|
||||||
|
<CardDescription className="text-xs">
|
||||||
|
{modeConfig.label} detected
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setShowMap(true)}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<MapIcon className="h-4 w-4" />
|
||||||
|
Map
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex-1 p-0 overflow-hidden">
|
||||||
|
<ScrollArea className="h-[300px]">
|
||||||
|
<div className="space-y-4 p-4">
|
||||||
|
{loading ? (
|
||||||
|
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
||||||
|
Loading segment summary...
|
||||||
|
</div>
|
||||||
|
) : summaryData ? (
|
||||||
|
<>
|
||||||
|
{/* Project Info */}
|
||||||
|
<div className="pb-3 border-b">
|
||||||
|
<div className="flex flex-col mb-2">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Project
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold">
|
||||||
|
{summaryData.project.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{summaryData.project.corridor_name && (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Corridor
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-semibold text-muted-foreground">
|
||||||
|
{summaryData.project.corridor_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Packages and Chainages */}
|
||||||
|
{Object.entries(summaryData.packages).map(
|
||||||
|
([packageName, packageData]) => (
|
||||||
|
<div key={packageData.package_id} className="space-y-2">
|
||||||
|
<div className="text-xs font-bold text-muted-foreground truncate">
|
||||||
|
{packageName}
|
||||||
|
</div>
|
||||||
|
<div className="pl-2 space-y-2 border-l-2 border-muted">
|
||||||
|
{Object.entries(packageData.chainages).map(
|
||||||
|
([chainageName, chainageData]) => (
|
||||||
|
<div
|
||||||
|
key={chainageData.chainage_id}
|
||||||
|
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
|
||||||
|
>
|
||||||
|
<div className="font-semibold truncate">
|
||||||
|
{chainageName}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
|
||||||
|
{chainageData.detection_count}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
||||||
|
Segment summary is not available for this result.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="flex flex-col lg:col-span-3 overflow-hidden">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded bg-secondary">
|
||||||
|
<Activity className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base font-bold">
|
||||||
|
All Detections
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-xs">
|
||||||
|
Complete list with GPS coordinates
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex-1 p-0 overflow-hidden">
|
||||||
|
<ScrollArea className="h-[300px]">
|
||||||
|
<div className="space-y-2 p-4">
|
||||||
|
{allDetections.length === 0 ? (
|
||||||
|
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
||||||
|
No detailed detections available.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
allDetections.map((detection, idx) => (
|
||||||
|
<div
|
||||||
|
key={`${detection.id}-${idx}`}
|
||||||
|
className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="font-bold">
|
||||||
|
{(detection.class || detection.type || '').replace(
|
||||||
|
/_/g,
|
||||||
|
' ',
|
||||||
|
)}{' '}
|
||||||
|
#{detection.id}
|
||||||
|
</span>
|
||||||
|
<Badge variant="outline" className="text-[10px] font-mono">
|
||||||
|
Frame {detection.frame_number}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
|
||||||
|
{detection.chainageName && (
|
||||||
|
<div className="truncate">
|
||||||
|
Segment:{' '}
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
{detection.chainageName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{typeof detection.confidence === 'number' && (
|
||||||
|
<div>
|
||||||
|
Confidence:{' '}
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
{(detection.confidence * 100).toFixed(1)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{typeof detection.latitude === 'number' &&
|
||||||
|
typeof detection.longitude === 'number' ? (
|
||||||
|
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
|
||||||
|
GPS: {detection.latitude}, {detection.longitude}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border text-muted-foreground">
|
||||||
|
GPS: Not available
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Map Modal */}
|
||||||
|
<MapModal
|
||||||
|
open={showMap}
|
||||||
|
onClose={() => setShowMap(false)}
|
||||||
|
detections={mapDetections}
|
||||||
|
detectionType={detectionType}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DetailedSummarySection;
|
||||||
@@ -38,12 +38,9 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
|
|||||||
<Activity className="h-4 w-4" />
|
<Activity className="h-4 w-4" />
|
||||||
Detection Logs
|
Detection Logs
|
||||||
</h4>
|
</h4>
|
||||||
<Badge variant="secondary" className="text-[10px] font-bold uppercase">
|
|
||||||
Backend Logs
|
|
||||||
</Badge>
|
|
||||||
</div>
|
</div>
|
||||||
<ScrollArea className="h-[430px] rounded-lg border bg-muted/20 p-4">
|
<ScrollArea className="h-107.5 rounded-lg border bg-muted/20">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3 p-4">
|
||||||
{logs.length === 0 ? (
|
{logs.length === 0 ? (
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||||
<Film className="h-8 w-8 mb-2 opacity-20" />
|
<Film className="h-8 w-8 mb-2 opacity-20" />
|
||||||
@@ -64,8 +61,8 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => onSeek(log)}
|
onClick={() => onSeek(log)}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full text-left p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer',
|
'w-full rounded-md border bg-card p-4 text-left transition-colors hover:border-primary',
|
||||||
isActive && 'border-primary ring-1 ring-primary/30',
|
isActive && 'border-primary bg-primary/5',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between gap-4 mb-3">
|
<div className="flex items-start justify-between gap-4 mb-3">
|
||||||
86
src/components/video/resultStatsGrid.tsx
Normal file
86
src/components/video/resultStatsGrid.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Activity,
|
||||||
|
AlertTriangle,
|
||||||
|
Clock,
|
||||||
|
Gauge,
|
||||||
|
SignpostBig,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { CompletedVideoResult } from '@/types';
|
||||||
|
|
||||||
|
const formatDuration = (seconds: number) => {
|
||||||
|
const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
|
||||||
|
const minutes = Math.floor(safeSeconds / 60);
|
||||||
|
const secs = Math.floor(safeSeconds % 60);
|
||||||
|
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ResultStatsGridProps {
|
||||||
|
data: CompletedVideoResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
label: 'Total Detections',
|
||||||
|
value: data.summary.total_detections || 0,
|
||||||
|
icon: Activity,
|
||||||
|
color: 'text-green-500',
|
||||||
|
bgColor: 'bg-green-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Potholes',
|
||||||
|
value: data.summary.unique_potholes || 0,
|
||||||
|
icon: AlertTriangle,
|
||||||
|
color: 'text-orange-500',
|
||||||
|
bgColor: 'bg-orange-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Signboards',
|
||||||
|
value: data.summary.unique_signboards || 0,
|
||||||
|
icon: SignpostBig,
|
||||||
|
color: 'text-blue-500',
|
||||||
|
bgColor: 'bg-blue-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'FPS',
|
||||||
|
value: data.fps.toFixed(1),
|
||||||
|
icon: Gauge,
|
||||||
|
color: 'text-purple-500',
|
||||||
|
bgColor: 'bg-purple-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Duration',
|
||||||
|
value: formatDuration(data.duration_seconds),
|
||||||
|
icon: Clock,
|
||||||
|
color: 'text-cyan-500',
|
||||||
|
bgColor: 'bg-cyan-500/10',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||||
|
{stats.map((stat) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={stat.label}
|
||||||
|
className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
|
||||||
|
>
|
||||||
|
<div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
|
||||||
|
<Icon className={`h-5 w-5 ${stat.color}`} />
|
||||||
|
</div>
|
||||||
|
<div className={`text-xl font-bold ${stat.color}`}>
|
||||||
|
{stat.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
|
||||||
|
{stat.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
src/components/video/useDetectionPlayback.ts
Normal file
62
src/components/video/useDetectionPlayback.ts
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RefObject, useMemo, useRef, useState } from 'react';
|
||||||
|
import { CompletedVideoResult, DetectionResultLog } from '@/types';
|
||||||
|
|
||||||
|
interface UseDetectionPlaybackParams {
|
||||||
|
logs: CompletedVideoResult['logs'];
|
||||||
|
videoRef: RefObject<HTMLVideoElement | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDetectionPlayback({
|
||||||
|
logs,
|
||||||
|
videoRef,
|
||||||
|
}: UseDetectionPlaybackParams) {
|
||||||
|
const shouldPauseAfterSeekRef = useRef(false);
|
||||||
|
const sortedLogs = useMemo(
|
||||||
|
() => [...(logs || [])].sort((a, b) => a.timestamp_seconds - b.timestamp_seconds),
|
||||||
|
[logs],
|
||||||
|
);
|
||||||
|
const [activeLog, setActiveLog] = useState<DetectionResultLog | undefined>(
|
||||||
|
sortedLogs[0],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSeek = (log: DetectionResultLog) => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (!video) return;
|
||||||
|
|
||||||
|
shouldPauseAfterSeekRef.current = true;
|
||||||
|
video.pause();
|
||||||
|
video.currentTime = log.timestamp_seconds;
|
||||||
|
setActiveLog(log);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSeeked = () => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (!video || !shouldPauseAfterSeekRef.current) return;
|
||||||
|
|
||||||
|
shouldPauseAfterSeekRef.current = false;
|
||||||
|
video.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTimeUpdate = () => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (!video || sortedLogs.length === 0) return;
|
||||||
|
|
||||||
|
const currentLog = sortedLogs.findLast(
|
||||||
|
(log) => log.timestamp_seconds <= video.currentTime,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (currentLog && currentLog.id !== activeLog?.id) {
|
||||||
|
setActiveLog(currentLog);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeLog,
|
||||||
|
sortedLogs,
|
||||||
|
handleSeek,
|
||||||
|
handleSeeked,
|
||||||
|
handleTimeUpdate,
|
||||||
|
};
|
||||||
|
}
|
||||||
108
src/components/videoPlayerSection.tsx
Normal file
108
src/components/videoPlayerSection.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user