multiple plates

components/shots/FootageViewer.tsx

@@ -1,17 +1,29 @@
-"use client";
+"use client";
 
 import { useRef, useState } from "react";
-import { Video, Upload, X } from "lucide-react";
+import { Video, Upload, X, Plus, Pencil, Trash2, Film } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { updateShot } from "@/actions/shots";
+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;
-    originalFootageUrl: string | null;
-    originalFootageKey: string | null;
+    footagePlates: Plate[];
   };
   canManage: boolean;
   onSaved?: () => void;
@@ -57,36 +69,62 @@ function uploadViaXhr(
   });
 }
 
+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 videoRef = useRef<HTMLVideoElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [footageFile, setFootageFile] = useState<File | null>(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 [currentUrl, setCurrentUrl] = useState<string | null>(shot.originalFootageUrl ?? null);
+  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;
-    setFootageFile(file);
+    setPendingFile(file);
+    setPendingLabel("");
     e.target.value = "";
   };
 
   const handleUpload = async () => {
-    if (!footageFile) return;
+    if (!pendingFile) return;
     setUploading(true);
     setProgress(0);
     try {
-      const { url, key } = await uploadViaXhr(footageFile, setProgress);
-      await updateShot({
+      const { url, key } = await uploadViaXhr(pendingFile, setProgress);
+      const result = await addFootagePlate({
         shotId: shot.id,
-        originalFootageUrl: url,
-        originalFootageKey: key || undefined,
+        fileUrl: url,
+        fileKey: key,
+        fileName: pendingFile.name,
+        fileSize: pendingFile.size,
+        label: pendingLabel.trim() || `Plate ${plates.length + 1}`,
       });
-      setCurrentUrl(url);
-      setFootageFile(null);
-      toast({ title: "Footage uploaded" });
+      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({
@@ -100,62 +138,76 @@ export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps)
     }
   };
 
-  const handleRemove = async () => {
+  const handleCancelPending = () => {
+    setPendingFile(null);
+    setPendingLabel("");
+  };
+
+  // ── remove plate ──────────────────────────────────────────────────────────
+  const handleRemove = async (plateId: string) => {
+    setDeletingId(plateId);
     try {
-      await updateShot({ shotId: shot.id, originalFootageUrl: null, originalFootageKey: null });
-      setCurrentUrl(null);
-      setFootageFile(null);
-      toast({ title: "Footage removed" });
+      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 footage",
+        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">
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-zinc-300 flex items-center gap-2">
-          <Video className="h-4 w-4 text-amber-500" />
-          Original Footage
-          <span className="text-xs font-mono text-zinc-500">{shot.shotCode}</span>
-        </h3>
-        {canManage && currentUrl && (
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={uploading}
-            >
-              <Upload className="h-3.5 w-3.5 mr-1.5" />
-              Replace
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-xs text-zinc-500 hover:text-red-400"
-              onClick={handleRemove}
-              disabled={uploading}
-            >
-              <X className="h-3.5 w-3.5 mr-1.5" />
-              Remove
-            </Button>
-          </div>
+      {/* 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>
         )}
-      </div>
+      </h3>
 
       {/* Video player */}
-      {currentUrl && (
+      {selectedPlate ? (
         <div className="relative w-full rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video">
           <video
-            ref={videoRef}
-            src={currentUrl}
+            key={selectedPlate.fileUrl}
+            src={selectedPlate.fileUrl}
             controls
             className="w-full h-full"
             preload="metadata"
@@ -163,37 +215,123 @@ export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps)
             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>
+        )
       )}
 
-      {/* Empty state */}
-      {!currentUrl && !footageFile && (
-        <div
-          className={`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()}
-        >
-          <Video className="h-12 w-12 opacity-30" />
-          <p className="text-sm">No original footage uploaded yet.</p>
-          {canManage && <p className="text-xs text-zinc-600">Click to select a video file</p>}
+      {/* 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 — ready to upload */}
-      {footageFile && !uploading && (
-        <div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
+      {/* 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">{footageFile.name}</p>
-            <p className="text-xs text-zinc-500">{(footageFile.size / 1024 / 1024).toFixed(1)} MB</p>
+            <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={() => setFootageFile(null)}
+            onClick={handleCancelPending}
             className="text-zinc-500 hover:text-zinc-300"
           >
             <X className="h-4 w-4" />
@@ -205,7 +343,7 @@ export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps)
       {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>Uploading footage…</span>
             <span>{Math.round(progress * 100)}%</span>
           </div>
           <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
@@ -217,6 +355,19 @@ export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps)
         </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"

components/shots/ShotSettingsTab.tsx

@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/select";
 import { updateShot } from "@/actions/shots";
 import { useToast } from "@/components/ui/use-toast";
-import { Upload, X, Film, ImageIcon, Video } from "lucide-react";
+import { Upload, X, Film, ImageIcon } from "lucide-react";
 
 const settingsSchema = z.object({
   shotCode: z.string().min(1, "Required").max(120).regex(/^[A-Z0-9_]+$/i, "Alphanumeric and underscores only"),
@@ -54,53 +54,11 @@ interface ShotSettingsTabProps {
     dueDate: Date | string | null;
     artistId: string | null;
     thumbnailUrl: string | null;
-    originalFootageUrl: string | null;
-    originalFootageKey: string | null;
   };
   artists: Artist[];
   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);
-  });
-}
-
 export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps) {
   const { toast } = useToast();
   const [isSaving, setIsSaving] = useState(false);
@@ -109,13 +67,6 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
   const [clearThumbnail, setClearThumbnail] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Footage upload state
-  const [footageFile, setFootageFile] = useState<File | null>(null);
-  const [footageUploading, setFootageUploading] = useState(false);
-  const [footageProgress, setFootageProgress] = useState(0);
-  const [currentFootageUrl, setCurrentFootageUrl] = useState<string | null>(shot.originalFootageUrl ?? null);
-  const footageInputRef = useRef<HTMLInputElement>(null);
-
   const formatDate = (d: Date | string | null) => {
     if (!d) return "";
     return new Date(d).toISOString().split("T")[0];
@@ -151,47 +102,6 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
     reader.readAsDataURL(file);
   };
 
-  const handleFootageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setFootageFile(file);
-  };
-
-  const handleFootageUpload = async () => {
-    if (!footageFile) return;
-    setFootageUploading(true);
-    setFootageProgress(0);
-    try {
-      const { url, key } = await uploadViaXhr(footageFile, setFootageProgress);
-      await updateShot({
-        shotId: shot.id,
-        originalFootageUrl: url,
-        originalFootageKey: key || undefined,
-      });
-      setCurrentFootageUrl(url);
-      setFootageFile(null);
-      toast({ title: "Footage uploaded" });
-      onSaved?.();
-    } catch (e) {
-      toast({ title: "Upload failed", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
-    } finally {
-      setFootageUploading(false);
-      setFootageProgress(0);
-    }
-  };
-
-  const handleFootageRemove = async () => {
-    try {
-      await updateShot({ shotId: shot.id, originalFootageUrl: null, originalFootageKey: null });
-      setCurrentFootageUrl(null);
-      setFootageFile(null);
-      toast({ title: "Footage removed" });
-      onSaved?.();
-    } catch (e) {
-      toast({ title: "Failed to remove footage", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
-    }
-  };
-
   const onSubmit = async (values: SettingsFormValues) => {
     setIsSaving(true);
     try {
@@ -392,91 +302,6 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
         {isSaving ? "Saving…" : "Save Changes"}
       </Button>
     </form>
-
-    {/* Original Footage — separate section with its own XHR upload */}
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
-        <Video className="h-4 w-4 text-amber-500" />
-        Original Footage
-      </div>
-      <Separator />
-      <p className="text-xs text-zinc-500">Upload the original (pre-VFX) footage for reference. Supported formats: MP4, MOV, AVI, MKV, WebM.</p>
-
-      {currentFootageUrl ? (
-        <div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
-          <Video className="h-5 w-5 text-amber-400 shrink-0" />
-          <span className="text-sm text-zinc-300 truncate flex-1">Footage uploaded</span>
-          <div className="flex items-center gap-2 shrink-0">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => footageInputRef.current?.click()}
-            >
-              Replace
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="text-zinc-500 hover:text-red-400"
-              onClick={handleFootageRemove}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div
-          onClick={() => !footageUploading && footageInputRef.current?.click()}
-          className="w-full rounded-lg border-2 border-dashed border-border hover:border-amber-500/50 flex flex-col items-center justify-center gap-2 py-8 text-sm text-muted-foreground cursor-pointer transition-colors"
-        >
-          <Video className="h-6 w-6" />
-          <span>Click to select original footage</span>
-        </div>
-      )}
-
-      {footageFile && !footageUploading && (
-        <div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
-          <Video className="h-5 w-5 text-zinc-400 shrink-0" />
-          <span className="text-sm text-zinc-300 truncate flex-1">{footageFile.name}</span>
-          <span className="text-xs text-zinc-500 shrink-0">{(footageFile.size / 1024 / 1024).toFixed(1)} MB</span>
-          <Button type="button" size="sm" onClick={handleFootageUpload}>
-            Upload
-          </Button>
-          <button
-            type="button"
-            onClick={() => setFootageFile(null)}
-            className="text-zinc-500 hover:text-zinc-300"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-      )}
-
-      {footageUploading && (
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-xs text-zinc-400">
-            <span>Uploading…</span>
-            <span>{Math.round(footageProgress * 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: `${footageProgress * 100}%` }}
-            />
-          </div>
-        </div>
-      )}
-
-      <input
-        ref={footageInputRef}
-        type="file"
-        accept="video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm,video/*"
-        className="hidden"
-        onChange={handleFootageChange}
-      />
-    </div>
     </div>
   );
 }