twotalesanimation
381 lines
14 KiB
TypeScript
381 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { Video, Upload, X, Plus, Pencil, Trash2, Film } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { addFootagePlate, removeFootagePlate, renameFootagePlate } from "@/actions/shots";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Plate {
|
|
id: string;
|
|
label: string;
|
|
fileUrl: string;
|
|
fileKey: string;
|
|
fileName: string;
|
|
fileSize: bigint | string | null;
|
|
sortOrder: number;
|
|
createdAt: Date;
|
|
}
|
|
|
|
interface FootageViewerProps {
|
|
shot: {
|
|
id: string;
|
|
shotCode: string;
|
|
footagePlates: Plate[];
|
|
};
|
|
canManage: boolean;
|
|
onSaved?: () => void;
|
|
}
|
|
|
|
function uploadViaXhr(
|
|
file: File,
|
|
onProgress: (fraction: number) => void
|
|
): Promise<{ url: string; key: string }> {
|
|
return new Promise((resolve, reject) => {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/api/upload/local");
|
|
|
|
xhr.upload.addEventListener("progress", (e) => {
|
|
if (e.lengthComputable) onProgress(e.loaded / e.total);
|
|
});
|
|
|
|
xhr.addEventListener("load", () => {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
try {
|
|
const json = JSON.parse(xhr.responseText);
|
|
if (json.url) resolve({ url: json.url, key: json.key ?? "" });
|
|
else reject(new Error(json.error ?? "Upload failed"));
|
|
} catch {
|
|
reject(new Error("Invalid server response"));
|
|
}
|
|
} else {
|
|
try {
|
|
const json = JSON.parse(xhr.responseText);
|
|
reject(new Error(json.error ?? `HTTP ${xhr.status}`));
|
|
} catch {
|
|
reject(new Error(`HTTP ${xhr.status}`));
|
|
}
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener("error", () => reject(new Error("Network error")));
|
|
xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
|
|
xhr.send(formData);
|
|
});
|
|
}
|
|
|
|
function formatSize(size: bigint | string | null): string {
|
|
if (size == null) return "";
|
|
const n = typeof size === "string" ? parseInt(size, 10) : Number(size);
|
|
if (isNaN(n)) return "";
|
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
|
|
return `${(n / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps) {
|
|
const { toast } = useToast();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [plates, setPlates] = useState<Plate[]>(shot.footagePlates ?? []);
|
|
const [selectedId, setSelectedId] = useState<string | null>(
|
|
(shot.footagePlates ?? [])[0]?.id ?? null
|
|
);
|
|
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
|
const [pendingLabel, setPendingLabel] = useState("");
|
|
const [uploading, setUploading] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [editLabel, setEditLabel] = useState("");
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
|
|
const selectedPlate = plates.find((p) => p.id === selectedId) ?? null;
|
|
|
|
// ── upload new plate ──────────────────────────────────────────────────────
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setPendingFile(file);
|
|
setPendingLabel("");
|
|
e.target.value = "";
|
|
};
|
|
|
|
const handleUpload = async () => {
|
|
if (!pendingFile) return;
|
|
setUploading(true);
|
|
setProgress(0);
|
|
try {
|
|
const { url, key } = await uploadViaXhr(pendingFile, setProgress);
|
|
const result = await addFootagePlate({
|
|
shotId: shot.id,
|
|
fileUrl: url,
|
|
fileKey: key,
|
|
fileName: pendingFile.name,
|
|
fileSize: pendingFile.size,
|
|
label: pendingLabel.trim() || `Plate ${plates.length + 1}`,
|
|
});
|
|
const newPlate = result.plate as Plate;
|
|
const updated = [...plates, newPlate];
|
|
setPlates(updated);
|
|
setSelectedId(newPlate.id);
|
|
setPendingFile(null);
|
|
setPendingLabel("");
|
|
toast({ title: "Footage plate added" });
|
|
onSaved?.();
|
|
} catch (e) {
|
|
toast({
|
|
title: "Upload failed",
|
|
description: e instanceof Error ? e.message : undefined,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setUploading(false);
|
|
setProgress(0);
|
|
}
|
|
};
|
|
|
|
const handleCancelPending = () => {
|
|
setPendingFile(null);
|
|
setPendingLabel("");
|
|
};
|
|
|
|
// ── remove plate ──────────────────────────────────────────────────────────
|
|
const handleRemove = async (plateId: string) => {
|
|
setDeletingId(plateId);
|
|
try {
|
|
await removeFootagePlate(plateId);
|
|
const updated = plates.filter((p) => p.id !== plateId);
|
|
setPlates(updated);
|
|
if (selectedId === plateId) setSelectedId(updated[0]?.id ?? null);
|
|
toast({ title: "Plate removed" });
|
|
onSaved?.();
|
|
} catch (e) {
|
|
toast({
|
|
title: "Failed to remove plate",
|
|
description: e instanceof Error ? e.message : undefined,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
};
|
|
|
|
// ── rename plate ──────────────────────────────────────────────────────────
|
|
const startEdit = (plate: Plate) => {
|
|
setEditingId(plate.id);
|
|
setEditLabel(plate.label);
|
|
};
|
|
|
|
const commitEdit = async (plateId: string) => {
|
|
try {
|
|
await renameFootagePlate(plateId, editLabel);
|
|
setPlates((prev) =>
|
|
prev.map((p) => (p.id === plateId ? { ...p, label: editLabel.trim() } : p))
|
|
);
|
|
onSaved?.();
|
|
} catch (e) {
|
|
toast({
|
|
title: "Failed to rename plate",
|
|
description: e instanceof Error ? e.message : undefined,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setEditingId(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4 max-w-4xl">
|
|
{/* Header */}
|
|
<h3 className="text-sm font-semibold text-zinc-300 flex items-center gap-2">
|
|
<Video className="h-4 w-4 text-amber-500" />
|
|
Footage Plates
|
|
<span className="text-xs font-mono text-zinc-500">{shot.shotCode}</span>
|
|
{plates.length > 0 && (
|
|
<span className="ml-1 text-xs font-mono bg-zinc-800 text-zinc-400 px-1.5 py-0.5 rounded">
|
|
{plates.length}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
|
|
{/* Video player */}
|
|
{selectedPlate ? (
|
|
<div className="relative w-full rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video">
|
|
<video
|
|
key={selectedPlate.fileUrl}
|
|
src={selectedPlate.fileUrl}
|
|
controls
|
|
className="w-full h-full"
|
|
preload="metadata"
|
|
>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
) : (
|
|
!pendingFile && (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center py-20 gap-4 rounded-xl border-2 border-dashed border-zinc-800 text-zinc-500",
|
|
canManage && "hover:border-amber-500/40 cursor-pointer transition-colors"
|
|
)}
|
|
onClick={() => canManage && fileInputRef.current?.click()}
|
|
>
|
|
<Film className="h-12 w-12 opacity-30" />
|
|
<p className="text-sm">No footage plates yet.</p>
|
|
{canManage && <p className="text-xs text-zinc-600">Click to add a video file</p>}
|
|
</div>
|
|
)
|
|
)}
|
|
|
|
{/* Plate list */}
|
|
{plates.length > 0 && (
|
|
<div className="space-y-1">
|
|
{plates.map((plate, i) => (
|
|
<div
|
|
key={plate.id}
|
|
className={cn(
|
|
"flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition-colors group",
|
|
plate.id === selectedId
|
|
? "border-amber-500/40 bg-amber-500/5"
|
|
: "border-zinc-800 bg-zinc-900/50 hover:border-zinc-700"
|
|
)}
|
|
onClick={() => {
|
|
if (editingId !== plate.id) setSelectedId(plate.id);
|
|
}}
|
|
>
|
|
{/* Index badge */}
|
|
<span className="shrink-0 w-5 h-5 rounded text-[10px] font-mono font-bold flex items-center justify-center bg-zinc-800 text-zinc-400">
|
|
{i + 1}
|
|
</span>
|
|
|
|
{/* Label (edit or display) */}
|
|
{editingId === plate.id ? (
|
|
<Input
|
|
autoFocus
|
|
value={editLabel}
|
|
onChange={(e) => setEditLabel(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") commitEdit(plate.id);
|
|
if (e.key === "Escape") setEditingId(null);
|
|
}}
|
|
onBlur={() => commitEdit(plate.id)}
|
|
className="h-6 text-xs py-0 px-2 flex-1"
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
) : (
|
|
<span className="flex-1 text-sm text-zinc-200 truncate">
|
|
{plate.label || `Plate ${i + 1}`}
|
|
</span>
|
|
)}
|
|
|
|
{/* File info */}
|
|
{plate.fileName && (
|
|
<span className="text-xs text-zinc-500 truncate max-w-[140px] hidden sm:block font-mono">
|
|
{plate.fileName}
|
|
</span>
|
|
)}
|
|
{plate.fileSize && (
|
|
<span className="text-xs text-zinc-600 shrink-0">{formatSize(plate.fileSize)}</span>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
{canManage && editingId !== plate.id && (
|
|
<div
|
|
className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
title="Rename plate"
|
|
onClick={() => startEdit(plate)}
|
|
className="p-1 rounded text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors"
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</button>
|
|
<button
|
|
title="Remove plate"
|
|
disabled={deletingId === plate.id}
|
|
onClick={() => handleRemove(plate.id)}
|
|
className="p-1 rounded text-zinc-500 hover:text-red-400 hover:bg-zinc-800 transition-colors disabled:opacity-40"
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Pending file row */}
|
|
{pendingFile && !uploading && (
|
|
<div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-700">
|
|
<Video className="h-5 w-5 text-zinc-400 shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-zinc-300 truncate">{pendingFile.name}</p>
|
|
<p className="text-xs text-zinc-500">{(pendingFile.size / 1024 / 1024).toFixed(1)} MB</p>
|
|
</div>
|
|
<Input
|
|
placeholder="Label (optional)"
|
|
value={pendingLabel}
|
|
onChange={(e) => setPendingLabel(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleUpload()}
|
|
className="w-36 h-7 text-xs py-0"
|
|
/>
|
|
<Button size="sm" onClick={handleUpload}>
|
|
<Upload className="h-3.5 w-3.5 mr-1.5" />
|
|
Upload
|
|
</Button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCancelPending}
|
|
className="text-zinc-500 hover:text-zinc-300"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Upload progress */}
|
|
{uploading && (
|
|
<div className="space-y-2 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
|
|
<div className="flex items-center justify-between text-xs text-zinc-400">
|
|
<span>Uploading footage…</span>
|
|
<span>{Math.round(progress * 100)}%</span>
|
|
</div>
|
|
<div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-amber-500 transition-all duration-200"
|
|
style={{ width: `${progress * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add plate button */}
|
|
{canManage && !pendingFile && !uploading && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
<Plus className="h-3.5 w-3.5 mr-1.5" />
|
|
Add Plate
|
|
</Button>
|
|
)}
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm,video/*"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|