File size: 7,046 Bytes
dea9ad9 | 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | import { useEffect, useState } from "react";
import { ArrowLeft, Film, Play, Download, Trash2 } from "lucide-react";
interface FilmItem {
id: string;
render_number: number;
final_video_url: string | null;
created_at: string;
status: string;
}
interface Project {
id: string;
title: string;
aspect_ratio: string;
}
interface ProjectFilmsViewProps {
projectId: string;
onBack: () => void;
}
export function ProjectFilmsView({ projectId, onBack }: ProjectFilmsViewProps) {
const [project, setProject] = useState<Project | null>(null);
const [films, setFilms] = useState<FilmItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
async function load() {
setLoading(true);
setError(null);
try {
const [projectRes, filmRes] = await Promise.all([
fetch(`/api/projects/${projectId}`),
fetch(`/api/projects/${projectId}/render`),
]);
if (!projectRes.ok) throw new Error(`Project ${projectRes.status}`);
if (!filmRes.ok) throw new Error(`Films ${filmRes.status}`);
const projectData = await projectRes.json();
const filmData = await filmRes.json();
setProject(projectData.project);
setFilms(filmData.renders || []);
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to load");
} finally {
setLoading(false);
}
}
useEffect(() => {
load();
}, [projectId]);
async function deleteFilm(filmId: string) {
try {
const res = await fetch(`/api/projects/${projectId}/renders/${filmId}`, { method: "DELETE" });
if (!res.ok) throw new Error("Delete failed");
setFilms((prev) => prev.filter((f) => f.id !== filmId));
} catch (e) {
setError(e instanceof Error ? e.message : "Delete failed");
}
}
if (loading) {
return (
<div className="h-full flex items-center justify-center bg-black">
<p className="text-sm text-gray-500">Loading films…</p>
</div>
);
}
if (error) {
return (
<div className="h-full flex items-center justify-center bg-black">
<p className="text-sm text-red-400">{error}</p>
</div>
);
}
const ar = project?.aspect_ratio ?? "9:16";
const aspectClass = ar === "16:9" ? "aspect-[16/9]" : ar === "1:1" ? "aspect-square" : "aspect-[9/16]";
const gridClass = ar === "16:9"
? "grid gap-6 sm:grid-cols-2 max-w-4xl mx-auto"
: ar === "1:1"
? "grid gap-4 sm:grid-cols-2 lg:grid-cols-3 max-w-3xl mx-auto"
: "grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 max-w-3xl mx-auto";
return (
<div className="h-full flex flex-col bg-black">
{/* Top bar */}
<div className="flex items-center gap-3 px-5 py-2.5 border-b border-gray-800/60 bg-gray-950/60 flex-shrink-0">
<button
onClick={onBack}
className="inline-flex items-center gap-1.5 rounded-xl border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-gray-700 px-3 py-1.5 text-xs text-gray-400 hover:text-gray-200 transition"
>
<ArrowLeft className="w-3.5 h-3.5" /> Back to project
</button>
<div>
<p className="text-[10px] uppercase tracking-[0.22em] text-rose-400/70">Films</p>
<h1 className="text-base font-semibold tracking-tight text-gray-100">{project?.title}</h1>
</div>
<span className="ml-auto text-[11px] text-gray-500 font-mono">{films.length} film{films.length !== 1 ? "s" : ""}</span>
</div>
{/* Main */}
<div className="flex-1 overflow-y-auto p-6">
{films.length === 0 ? (
<div className="text-center py-20">
<Film className="w-8 h-8 text-gray-700 mx-auto mb-3" />
<p className="text-sm text-gray-500">No films yet.</p>
<p className="text-xs text-gray-600 mt-1">Go back and hit Re-render to create one.</p>
</div>
) : (
<div className={gridClass}>
{films.map((f) => (
<div
key={f.id}
className="rounded-2xl border border-gray-800 bg-gray-900/40 overflow-hidden hover:border-gray-700 transition"
>
<div className={`${aspectClass} bg-black relative`}>
{f.final_video_url ? (
<video
src={f.final_video_url}
className="w-full h-full object-contain"
controls
preload="metadata"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-700">
<Film className="w-8 h-8" />
</div>
)}
<span className="absolute top-2 left-2 rounded-md bg-black/70 px-1.5 py-0.5 text-[10px] font-mono text-gray-200">
#{f.render_number}
</span>
</div>
<div className="p-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-[11px] text-gray-400">{new Date(f.created_at).toLocaleString()}</span>
<span className={`text-[10px] uppercase px-1.5 py-0.5 rounded ${f.status === "completed" ? "bg-emerald-900/40 text-emerald-400" : "bg-amber-900/40 text-amber-400"}`}>
{f.status}
</span>
</div>
<div className="flex gap-2">
<a
href={f.final_video_url || "#"}
target="_blank"
rel="noopener noreferrer"
className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-600/10 hover:bg-emerald-600/20 px-2 py-1.5 text-[11px] text-emerald-300 transition"
>
<Play className="w-3 h-3" /> Watch
</a>
<a
href={f.final_video_url || "#"}
download
className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/60 hover:bg-gray-800 px-2 py-1.5 text-[11px] text-gray-300 transition"
>
<Download className="w-3 h-3" /> Download
</a>
<button
onClick={() => deleteFilm(f.id)}
className="inline-flex items-center justify-center gap-1 rounded-lg border border-gray-800 hover:bg-red-900/30 hover:border-red-800/50 px-2 py-1.5 text-[11px] text-gray-600 hover:text-red-400 transition"
title="Delete film"
>
<Trash2 className="w-3 h-3" />
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
</div>
);
}
|