multiple plates

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>
   );
 }