59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { AlertCircle, Loader } from 'lucide-react';
|
|
|
|
import { Progress } from '@/components/ui/progress';
|
|
import type { TicketProcessingProgress } from '../../../hooks/useTicketDetailEvents';
|
|
|
|
import { TicketActionCard } from './TicketActionCard';
|
|
|
|
interface ProcessingTicketActionProps {
|
|
progress: TicketProcessingProgress | null;
|
|
errorMessage: string | null;
|
|
}
|
|
|
|
function getProgressMessage(progress: TicketProcessingProgress | null) {
|
|
if (!progress) return 'Waiting for analysis updates.';
|
|
if (progress.progress >= 95) {
|
|
return progress.message ?? 'Rendering annotated video...';
|
|
}
|
|
return progress.message ?? 'Processing video.';
|
|
}
|
|
|
|
export function ProcessingTicketAction({
|
|
progress,
|
|
errorMessage,
|
|
}: ProcessingTicketActionProps) {
|
|
const progressValue = progress ? progress.progress : 0;
|
|
const hasProgress = Boolean(progress);
|
|
|
|
return (
|
|
<TicketActionCard
|
|
icon={Loader}
|
|
iconClassName="animate-spin"
|
|
title="Analyzing Video"
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between gap-3 text-sm">
|
|
<span className="font-medium text-foreground">
|
|
{getProgressMessage(progress)}
|
|
</span>
|
|
<span className="shrink-0 text-muted-foreground">
|
|
{hasProgress ? `${Math.round(progressValue)}%` : '--'}
|
|
</span>
|
|
</div>
|
|
<Progress value={hasProgress ? progressValue : 0} />
|
|
</div>
|
|
|
|
{errorMessage && (
|
|
<div className="flex gap-2 rounded-md border border-destructive/25 bg-destructive/10 p-3 text-sm text-destructive">
|
|
<AlertCircle className="mt-0.5 size-4 shrink-0" />
|
|
<span>{errorMessage}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TicketActionCard>
|
|
);
|
|
}
|