twotalesanimation
288 lines
11 KiB
TypeScript
288 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef } from "react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { importShotsFromCsv } from "@/actions/shots";
|
||
import { useToast } from "@/components/ui/use-toast";
|
||
import { Upload, AlertCircle, CheckCircle2, ChevronRight } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface ParsedRow {
|
||
scene: string;
|
||
episode?: string;
|
||
description?: string;
|
||
priority?: string;
|
||
fps?: number;
|
||
frameStart?: number;
|
||
frameEnd?: number;
|
||
}
|
||
|
||
interface ImportShotsDialogProps {
|
||
projectId: string;
|
||
projectType?: "STANDARD" | "EPISODIC";
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onSuccess?: () => void;
|
||
}
|
||
|
||
const TEMPLATE_STANDARD = `scene,description,priority,fps,frameStart,frameEnd
|
||
010,Opening wide shot,NORMAL,24,1001,1100
|
||
020,Close up reaction,NORMAL,24,,
|
||
030,Action sequence,HIGH,24,1001,1250`;
|
||
|
||
const TEMPLATE_EPISODIC = `scene,episode,description,priority,fps,frameStart,frameEnd
|
||
010,EP01,Opening wide shot,NORMAL,24,1001,1100
|
||
020,EP01,Close up reaction,NORMAL,24,,
|
||
010,EP02,Act two opener,HIGH,24,1001,1200`;
|
||
|
||
function parseCsv(raw: string): { rows: ParsedRow[]; parseErrors: string[] } {
|
||
const lines = raw.split(/\r?\n/).map((l) => l.trim()).filter(Boolean);
|
||
if (lines.length < 2) return { rows: [], parseErrors: ["Need at least a header row and one data row"] };
|
||
|
||
const headers = lines[0].split(",").map((h) => h.trim().toLowerCase());
|
||
const sceneIdx = headers.indexOf("scene");
|
||
if (sceneIdx === -1) return { rows: [], parseErrors: ['Missing required "scene" column'] };
|
||
|
||
const idx = (name: string) => {
|
||
const i = headers.indexOf(name);
|
||
return i === -1 ? null : i;
|
||
};
|
||
|
||
const rows: ParsedRow[] = [];
|
||
const parseErrors: string[] = [];
|
||
|
||
for (let i = 1; i < lines.length; i++) {
|
||
const cells = lines[i].split(",").map((c) => c.trim());
|
||
const get = (name: string) => {
|
||
const j = idx(name);
|
||
return j !== null ? cells[j] ?? "" : "";
|
||
};
|
||
|
||
const scene = get("scene");
|
||
if (!scene) { parseErrors.push(`Row ${i + 1}: empty scene — skipped`); continue; }
|
||
|
||
const fpsRaw = get("fps");
|
||
const fsRaw = get("framestart") || get("frameStart");
|
||
const feRaw = get("frameend") || get("frameEnd");
|
||
|
||
rows.push({
|
||
scene,
|
||
episode: get("episode") || undefined,
|
||
description: get("description") || undefined,
|
||
priority: get("priority") || undefined,
|
||
fps: fpsRaw ? Number(fpsRaw) : undefined,
|
||
frameStart: fsRaw ? Number(fsRaw) : undefined,
|
||
frameEnd: feRaw ? Number(feRaw) : undefined,
|
||
});
|
||
}
|
||
|
||
return { rows, parseErrors };
|
||
}
|
||
|
||
export function ImportShotsDialog({
|
||
projectId,
|
||
projectType = "STANDARD",
|
||
open,
|
||
onClose,
|
||
onSuccess,
|
||
}: ImportShotsDialogProps) {
|
||
const { toast } = useToast();
|
||
const [step, setStep] = useState<"input" | "preview">("input");
|
||
const [csvText, setCsvText] = useState("");
|
||
const [parsedRows, setParsedRows] = useState<ParsedRow[]>([]);
|
||
const [parseErrors, setParseErrors] = useState<string[]>([]);
|
||
const [isImporting, setIsImporting] = useState(false);
|
||
const [importResult, setImportResult] = useState<{ created: string[]; errors: string[] } | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = (ev) => setCsvText(ev.target?.result as string ?? "");
|
||
reader.readAsText(file);
|
||
};
|
||
|
||
const handleParse = () => {
|
||
const { rows, parseErrors: errs } = parseCsv(csvText);
|
||
setParsedRows(rows);
|
||
setParseErrors(errs);
|
||
if (rows.length > 0) setStep("preview");
|
||
};
|
||
|
||
const handleImport = async () => {
|
||
setIsImporting(true);
|
||
try {
|
||
const result = await importShotsFromCsv(projectId, parsedRows);
|
||
setImportResult(result);
|
||
if (result.created.length > 0) {
|
||
toast({ title: `${result.created.length} shot${result.created.length === 1 ? "" : "s"} created` });
|
||
onSuccess?.();
|
||
}
|
||
} catch (e) {
|
||
toast({ title: "Import failed", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
|
||
} finally {
|
||
setIsImporting(false);
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setStep("input");
|
||
setCsvText("");
|
||
setParsedRows([]);
|
||
setParseErrors([]);
|
||
setImportResult(null);
|
||
onClose();
|
||
};
|
||
|
||
const template = projectType === "EPISODIC" ? TEMPLATE_EPISODIC : TEMPLATE_STANDARD;
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
|
||
<DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>Import Shots from CSV</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
{importResult ? (
|
||
/* Result screen */
|
||
<div className="space-y-4 py-2">
|
||
{importResult.created.length > 0 && (
|
||
<div className="space-y-1.5">
|
||
<p className="flex items-center gap-2 text-sm font-medium text-emerald-400">
|
||
<CheckCircle2 className="h-4 w-4" />
|
||
{importResult.created.length} shot{importResult.created.length === 1 ? "" : "s"} created
|
||
</p>
|
||
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-3 text-xs font-mono text-zinc-300 max-h-40 overflow-y-auto">
|
||
{importResult.created.map((code) => <div key={code}>{code}</div>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{importResult.errors.length > 0 && (
|
||
<div className="space-y-1.5">
|
||
<p className="flex items-center gap-2 text-sm font-medium text-amber-400">
|
||
<AlertCircle className="h-4 w-4" />
|
||
{importResult.errors.length} warning{importResult.errors.length === 1 ? "" : "s"}
|
||
</p>
|
||
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-3 text-xs text-zinc-400 max-h-32 overflow-y-auto space-y-0.5">
|
||
{importResult.errors.map((e, i) => <div key={i}>{e}</div>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<DialogFooter>
|
||
<Button onClick={handleClose}>Done</Button>
|
||
</DialogFooter>
|
||
</div>
|
||
) : step === "input" ? (
|
||
/* CSV input step */
|
||
<div className="space-y-4 py-2">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-sm text-muted-foreground">
|
||
Paste CSV or upload a file. Required column: <code className="text-xs bg-zinc-800 px-1 rounded">scene</code>.
|
||
{projectType === "EPISODIC" && (
|
||
<> Also required: <code className="text-xs bg-zinc-800 px-1 rounded">episode</code>.</>
|
||
)}
|
||
</p>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
className="gap-1.5 shrink-0"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
>
|
||
<Upload className="h-3.5 w-3.5" />
|
||
Upload file
|
||
</Button>
|
||
<input ref={fileInputRef} type="file" accept=".csv,text/csv" className="hidden" onChange={handleFileUpload} />
|
||
</div>
|
||
|
||
<Textarea
|
||
value={csvText}
|
||
onChange={(e) => setCsvText(e.target.value)}
|
||
className="font-mono text-xs min-h-[180px]"
|
||
placeholder={template}
|
||
spellCheck={false}
|
||
/>
|
||
|
||
{parseErrors.length > 0 && (
|
||
<div className="text-xs text-amber-400 space-y-0.5">
|
||
{parseErrors.map((e, i) => <div key={i} className="flex items-start gap-1.5"><AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />{e}</div>)}
|
||
</div>
|
||
)}
|
||
|
||
<details className="text-xs text-zinc-500 cursor-pointer">
|
||
<summary className="hover:text-zinc-300 transition-colors">CSV format & example</summary>
|
||
<pre className="mt-2 bg-zinc-900 border border-zinc-800 rounded p-3 text-zinc-400 whitespace-pre-wrap">{template}</pre>
|
||
</details>
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={handleClose}>Cancel</Button>
|
||
<Button onClick={handleParse} disabled={!csvText.trim()} className="gap-1.5">
|
||
Parse
|
||
<ChevronRight className="h-4 w-4" />
|
||
</Button>
|
||
</DialogFooter>
|
||
</div>
|
||
) : (
|
||
/* Preview step */
|
||
<div className="space-y-4 py-2">
|
||
<p className="text-sm text-muted-foreground">
|
||
{parsedRows.length} shot{parsedRows.length === 1 ? "" : "s"} ready to import. Review and confirm.
|
||
</p>
|
||
|
||
<div className="rounded-lg border border-zinc-800 overflow-hidden">
|
||
<table className="w-full text-xs">
|
||
<thead className="bg-zinc-900 text-zinc-400">
|
||
<tr>
|
||
<th className="px-3 py-2 text-left font-medium">Scene</th>
|
||
{projectType === "EPISODIC" && <th className="px-3 py-2 text-left font-medium">Episode</th>}
|
||
<th className="px-3 py-2 text-left font-medium">Description</th>
|
||
<th className="px-3 py-2 text-left font-medium">Priority</th>
|
||
<th className="px-3 py-2 text-left font-medium">FPS</th>
|
||
<th className="px-3 py-2 text-left font-medium">Frames</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-zinc-800">
|
||
{parsedRows.map((row, i) => (
|
||
<tr key={i} className={cn("bg-zinc-950", i % 2 === 0 && "bg-zinc-900/30")}>
|
||
<td className="px-3 py-2 font-mono text-zinc-200">{row.scene}</td>
|
||
{projectType === "EPISODIC" && <td className="px-3 py-2 font-mono text-zinc-400">{row.episode ?? "—"}</td>}
|
||
<td className="px-3 py-2 text-zinc-400 truncate max-w-[160px]">{row.description ?? "—"}</td>
|
||
<td className="px-3 py-2 text-zinc-400">{row.priority ?? "NORMAL"}</td>
|
||
<td className="px-3 py-2 text-zinc-400">{row.fps ?? 24}</td>
|
||
<td className="px-3 py-2 text-zinc-400 font-mono">
|
||
{row.frameStart || row.frameEnd ? `${row.frameStart ?? "?"}–${row.frameEnd ?? "?"}` : "—"}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{parseErrors.length > 0 && (
|
||
<div className="text-xs text-amber-400 space-y-0.5">
|
||
{parseErrors.map((e, i) => <div key={i} className="flex items-start gap-1.5"><AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />{e}</div>)}
|
||
</div>
|
||
)}
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setStep("input")}>Back</Button>
|
||
<Button onClick={handleImport} disabled={isImporting || parsedRows.length === 0}>
|
||
{isImporting ? "Importing…" : `Import ${parsedRows.length} Shot${parsedRows.length === 1 ? "" : "s"}`}
|
||
</Button>
|
||
</DialogFooter>
|
||
</div>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|