High res uploads

components/shots/ShotSettingsTab.tsx

@@ -20,7 +20,7 @@ import {
 } from "@/components/ui/select";
 import { updateShot, deleteShot } from "@/actions/shots";
 import { useToast } from "@/components/ui/use-toast";
-import { Upload, X, Film, ImageIcon, Trash2 } from "lucide-react";
+import { Upload, X, Film, ImageIcon, Trash2, FileVideo, CheckCircle2 } from "lucide-react";
 
 const settingsSchema = z.object({
   shotCode: z.string().min(1, "Required").max(120).regex(/^[A-Z0-9_]+$/i, "Alphanumeric and underscores only"),
@@ -55,6 +55,7 @@ interface ShotSettingsTabProps {
     dueDate: Date | string | null;
     artistId: string | null;
     thumbnailUrl: string | null;
+    highResFilename?: string | null;
     projectId: string;
   };
   artists: Artist[];
@@ -72,6 +73,12 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
   const [clearThumbnail, setClearThumbnail] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // High-res state
+  const [highResFilename, setHighResFilename] = useState<string | null>(shot.highResFilename ?? null);
+  const [highResUploading, setHighResUploading] = useState(false);
+  const [highResRemoving, setHighResRemoving] = useState(false);
+  const highResInputRef = useRef<HTMLInputElement>(null);
+
   const formatDate = (d: Date | string | null) => {
     if (!d) return "";
     return new Date(d).toISOString().split("T")[0];
@@ -97,6 +104,42 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
     },
   });
 
+  const handleHighResChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setHighResUploading(true);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      const res = await fetch(`/api/shots/${shot.id}/highres`, { method: "POST", body: fd });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error ?? "Upload failed");
+      }
+      setHighResFilename(file.name);
+      toast({ title: "High-res file uploaded" });
+    } catch (err) {
+      toast({ title: "Upload failed", description: err instanceof Error ? err.message : undefined, variant: "destructive" });
+    } finally {
+      setHighResUploading(false);
+      if (highResInputRef.current) highResInputRef.current.value = "";
+    }
+  };
+
+  const handleHighResRemove = async () => {
+    setHighResRemoving(true);
+    try {
+      const res = await fetch(`/api/shots/${shot.id}/highres`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Remove failed");
+      setHighResFilename(null);
+      toast({ title: "High-res file removed" });
+    } catch (err) {
+      toast({ title: "Failed to remove", description: err instanceof Error ? err.message : undefined, variant: "destructive" });
+    } finally {
+      setHighResRemoving(false);
+    }
+  };
+
   const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -319,9 +362,61 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
       </div>
 
       <Button type="submit" disabled={isSaving}>
-        {isSaving ? "Saving…" : "Save Changes"}
+        {isSaving ? "Saving\u2026" : "Save Changes"}
       </Button>
     </form>
+
+    {/* High Res File */}
+    <div className="space-y-4">
+      <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
+        <FileVideo className="h-4 w-4 text-amber-500" />
+        High Res File
+      </div>
+      <Separator />
+      <p className="text-xs text-zinc-500">Upload the full-resolution MOV deliverable. Stored in Hetzner Object Storage. Clients can download it from the review player.</p>
+
+      {highResFilename ? (
+        <div className="flex items-center gap-3 rounded-lg border border-zinc-700 bg-zinc-800/50 px-4 py-3">
+          <CheckCircle2 className="h-4 w-4 text-emerald-400 shrink-0" />
+          <span className="flex-1 truncate font-mono text-sm text-zinc-200" title={highResFilename}>
+            {highResFilename}
+          </span>
+          <button
+            type="button"
+            disabled={highResRemoving}
+            onClick={handleHighResRemove}
+            className="shrink-0 text-xs text-red-400 hover:text-red-300 disabled:opacity-50 transition-colors"
+          >
+            {highResRemoving ? "Removing\u2026" : "Remove"}
+          </button>
+          <button
+            type="button"
+            onClick={() => highResInputRef.current?.click()}
+            className="shrink-0 text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
+          >
+            Replace
+          </button>
+        </div>
+      ) : (
+        <div
+          onClick={() => !highResUploading && highResInputRef.current?.click()}
+          className="flex cursor-pointer items-center justify-center gap-2 rounded-lg border-2 border-dashed border-zinc-700 px-4 py-6 text-sm text-zinc-500 transition-colors hover:border-amber-500/50 hover:text-zinc-400"
+        >
+          {highResUploading ? (
+            <><div className="h-4 w-4 animate-spin rounded-full border-2 border-amber-500 border-t-transparent" /><span>Uploading\u2026</span></>
+          ) : (
+            <><Upload className="h-4 w-4" /><span>Upload high-res MOV</span></>
+          )}
+        </div>
+      )}
+      <input
+        ref={highResInputRef}
+        type="file"
+        accept="video/*,.mov"
+        className="hidden"
+        onChange={handleHighResChange}
+      />
+    </div>
     {/* Danger Zone */}
     <div className="space-y-3 pt-2">
       <div className="flex items-center gap-2 text-sm font-semibold text-red-500">