File size: 1,712 Bytes
ef4c36f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | "use client";
import { Download, Loader2 } from "lucide-react";
import type { RenderProgress } from "@/types";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
interface ExportProgressProps {
progress: RenderProgress | null;
downloadUrl?: string;
filename?: string;
rendering: boolean;
onStartRender: () => void;
}
export function ExportProgress({
progress,
downloadUrl,
filename,
rendering,
onStartRender,
}: ExportProgressProps) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{rendering ? <Loader2 className="h-5 w-5 animate-spin" /> : null}
Export Video
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{!rendering && !downloadUrl && (
<Button className="w-full" onClick={onStartRender}>Start Render</Button>
)}
{rendering && progress && (
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="capitalize">{progress.stage}...</span>
<span>{Math.round(progress.percent)}%</span>
</div>
<Progress value={progress.percent} />
<p className="text-sm text-zinc-500">{progress.message}</p>
</div>
)}
{downloadUrl && (
<Button asChild className="w-full">
<a href={downloadUrl} download={filename}>
<Download className="h-4 w-4" /> Download MP4
</a>
</Button>
)}
</CardContent>
</Card>
);
}
|