80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
import type { UploadVideo } from '@/types';
|
|
|
|
import { formatUploadedAt, getUploadStatus } from './uploadUtils';
|
|
|
|
interface UploadDetailsDialogProps {
|
|
upload: UploadVideo | null;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
export function UploadDetailsDialog({
|
|
upload,
|
|
open,
|
|
onOpenChange,
|
|
}: UploadDetailsDialogProps) {
|
|
const title = upload?.filename ?? 'Upload Details';
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader className="min-w-0 pr-8">
|
|
<DialogTitle className="min-w-0 max-w-full overflow-hidden text-left">
|
|
{upload?.filename ? (
|
|
<TooltipProvider delayDuration={200}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
className="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
|
|
title={title}
|
|
>
|
|
{title}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-80 break-all">
|
|
{title}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
) : (
|
|
title
|
|
)}
|
|
</DialogTitle>
|
|
<DialogDescription>Uploaded video details</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{upload ? (
|
|
<dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-3 text-sm">
|
|
<dt className="text-muted-foreground">Status</dt>
|
|
<dd>
|
|
<Badge className="rounded-full">{getUploadStatus(upload)}</Badge>
|
|
</dd>
|
|
<dt className="text-muted-foreground">Uploaded At</dt>
|
|
<dd>{formatUploadedAt(upload.uploaded_at)}</dd>
|
|
<dt className="text-muted-foreground">Uploaded By</dt>
|
|
<dd>{upload.uploaded_by_email ?? '-'}</dd>
|
|
<dt className="text-muted-foreground">Video ID</dt>
|
|
<dd className="break-all font-mono text-xs">{upload.video_id}</dd>
|
|
</dl>
|
|
) : null}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|