moved high res uploads button

2026-06-25 10:14:27 +02:00
parent b683976cc6
commit 0274b63c1e
4 changed files with 294 additions and 97 deletions
@@ -0,0 +1,265 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { useToast } from "@/components/ui/use-toast";
+import { Upload, FileVideo, X, CheckCircle2, Trash2 } from "lucide-react";
+import { formatFileSize } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+
+interface HighResUploadDialogProps {
+  shotId: string;
+  shotCode: string;
+  currentFilename: string | null;
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function HighResUploadDialog({
+  shotId,
+  shotCode,
+  currentFilename,
+  open,
+  onClose,
+  onSuccess,
+}: HighResUploadDialogProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadState, setUploadState] = useState<"idle" | "uploading" | "done" | "error">("idle");
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const { toast } = useToast();
+
+  const handleFileSelect = (selected: File) => {
+    if (!selected.type.startsWith("video/")) {
+      toast({ title: "Please select a video file (.mov, .mp4, etc.)", variant: "destructive" });
+      return;
+    }
+    if (selected.size > 50 * 1024 * 1024 * 1024) {
+      // 50 GB sanity cap
+      toast({ title: "File too large (max 50 GB)", variant: "destructive" });
+      return;
+    }
+    setFile(selected);
+  };
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const dropped = e.dataTransfer.files[0];
+    if (dropped) handleFileSelect(dropped);
+  }, []);
+
+  const handleUpload = async () => {
+    if (!file) return;
+    setUploadState("uploading");
+    setUploadProgress(0);
+
+    try {
+      await uploadViaXhr(
+        `/api/shots/${shotId}/highres`,
+        file,
+        (p) => setUploadProgress(Math.round(p * 100))
+      );
+
+      setUploadProgress(100);
+      setUploadState("done");
+      toast({ title: `High-res uploaded: ${file.name}` });
+      setTimeout(() => {
+        onSuccess?.();
+        handleClose();
+      }, 800);
+    } catch (err) {
+      setUploadState("error");
+      toast({
+        title: "Upload failed",
+        description: (err as Error).message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleRemove = async () => {
+    setIsRemoving(true);
+    try {
+      const res = await fetch(`/api/shots/${shotId}/highres`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Remove failed");
+      toast({ title: "High-res file removed" });
+      onSuccess?.();
+      handleClose();
+    } catch (err) {
+      toast({
+        title: "Failed to remove",
+        description: (err as Error).message,
+        variant: "destructive",
+      });
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  const resetState = () => {
+    setFile(null);
+    setUploadProgress(0);
+    setUploadState("idle");
+  };
+
+  const handleClose = () => {
+    if (uploadState === "uploading") return;
+    resetState();
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <FileVideo className="h-5 w-5 text-amber-500" />
+            High Res File — {shotCode}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Current file info */}
+          {currentFilename && !file && (
+            <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={currentFilename}>
+                {currentFilename}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 text-xs text-red-400 hover:text-red-300 hover:bg-red-950/30 gap-1"
+                disabled={isRemoving}
+                onClick={handleRemove}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                {isRemoving ? "Removing…" : "Remove"}
+              </Button>
+            </div>
+          )}
+
+          {/* Drop zone */}
+          {!file ? (
+            <div
+              onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+              onDragLeave={() => setIsDragOver(false)}
+              onDrop={handleDrop}
+              className={cn(
+                "relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-10 transition-colors cursor-pointer",
+                isDragOver
+                  ? "border-amber-500 bg-amber-500/10"
+                  : "border-zinc-700 hover:border-amber-500/50 hover:bg-zinc-800/50"
+              )}
+              onClick={() => document.getElementById("highres-file-input")?.click()}
+            >
+              <input
+                id="highres-file-input"
+                type="file"
+                accept="video/*,.mov"
+                className="hidden"
+                onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
+              />
+              <Upload className="h-8 w-8 text-zinc-500 mb-3" />
+              <p className="text-sm font-medium text-white">
+                {currentFilename ? "Drop replacement file here or click to browse" : "Drop high-res file here or click to browse"}
+              </p>
+              <p className="text-xs text-zinc-400 mt-1">MOV, MP4 or any video format</p>
+            </div>
+          ) : (
+            <div className="flex items-center gap-3 rounded-lg border border-zinc-700 p-3 bg-zinc-800/50">
+              <FileVideo className="h-8 w-8 text-amber-500 shrink-0" />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate text-white">{file.name}</p>
+                <p className="text-xs text-zinc-400">{formatFileSize(file.size)}</p>
+              </div>
+              {uploadState === "idle" && (
+                <Button variant="ghost" size="icon" onClick={() => setFile(null)} className="h-8 w-8">
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+              {uploadState === "done" && (
+                <CheckCircle2 className="h-5 w-5 text-emerald-400" />
+              )}
+            </div>
+          )}
+
+          {/* Upload progress */}
+          {(uploadState === "uploading" || uploadState === "done") && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-zinc-400">
+                  {uploadState === "uploading" ? "Uploading…" : "Complete!"}
+                </span>
+                <span className="text-amber-400 font-mono">{uploadProgress}%</span>
+              </div>
+              <Progress value={uploadProgress} />
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={uploadState === "uploading" || isRemoving}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleUpload}
+            disabled={!file || uploadState !== "idle"}
+            className="gap-2"
+          >
+            <Upload className="h-4 w-4" />
+            Upload
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Upload a file via XHR so we get progress events. */
+function uploadViaXhr(
+  url: string,
+  file: File,
+  onProgress: (fraction: number) => void
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", url);
+
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.lengthComputable) onProgress(e.loaded / e.total);
+    });
+
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } 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 cancelled")));
+
+    xhr.send(formData);
+  });
+}
@@ -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, FileVideo, CheckCircle2 } from "lucide-react";
+import { Upload, X, Film, ImageIcon, Trash2 } 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,7 +55,6 @@ interface ShotSettingsTabProps {
    dueDate: Date | string | null;
    artistId: string | null;
    thumbnailUrl: string | null;
-    highResFilename?: string | null;
    projectId: string;
  };
  artists: Artist[];
@@ -73,12 +72,6 @@ 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];
@@ -104,42 +97,6 @@ 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;
@@ -366,57 +323,6 @@ export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps
      </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">