twotalesanimation
289 lines
9.3 KiB
TypeScript
289 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { createVersion } from "@/actions/versions";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { Upload, Film, X, CheckCircle2 } from "lucide-react";
|
|
import { formatFileSize } from "@/lib/utils";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface VersionUploadProps {
|
|
taskId: string;
|
|
projectId: string;
|
|
currentVersionNumber: number;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: (versionId: string) => void;
|
|
}
|
|
|
|
export function VersionUpload({
|
|
taskId,
|
|
projectId,
|
|
currentVersionNumber,
|
|
open,
|
|
onClose,
|
|
onSuccess,
|
|
}: VersionUploadProps) {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [notes, setNotes] = useState("");
|
|
const [fps, setFps] = useState("24");
|
|
const [uploadProgress, setUploadProgress] = useState(0);
|
|
const [uploadState, setUploadState] = useState<
|
|
"idle" | "uploading" | "processing" | "done" | "error"
|
|
>("idle");
|
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
const { toast } = useToast();
|
|
const router = useRouter();
|
|
|
|
const nextVersion = currentVersionNumber + 1;
|
|
const versionLabel = `v${String(nextVersion).padStart(3, "0")}`;
|
|
const acceptedTypes = "video/mp4,video/quicktime,video/x-msvideo,.mp4,.mov,.avi,.mxf";
|
|
|
|
const handleFileSelect = (selectedFile: File) => {
|
|
if (!selectedFile.type.match(/video\//)) {
|
|
toast({ title: "Please select a video file (.mp4, .mov)", variant: "destructive" });
|
|
return;
|
|
}
|
|
if (selectedFile.size > 2 * 1024 * 1024 * 1024) {
|
|
toast({ title: "File too large (max 2GB)", variant: "destructive" });
|
|
return;
|
|
}
|
|
setFile(selectedFile);
|
|
};
|
|
|
|
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 {
|
|
// Upload via local API (XHR for progress) or UploadThing
|
|
const fileUrl = await uploadViaLocal(file, (p) =>
|
|
setUploadProgress(Math.round(p * 0.85))
|
|
);
|
|
|
|
setUploadProgress(90);
|
|
setUploadState("processing");
|
|
|
|
const result = await createVersion({
|
|
taskId,
|
|
fileUrl,
|
|
fileName: file.name,
|
|
fileSize: file.size,
|
|
mimeType: file.type,
|
|
fps: parseFloat(fps) || 24,
|
|
notes: notes.trim() || undefined,
|
|
});
|
|
|
|
setUploadProgress(100);
|
|
setUploadState("done");
|
|
toast({ title: `${versionLabel} uploaded successfully` });
|
|
setTimeout(() => {
|
|
onSuccess?.(result.version.id);
|
|
router.refresh();
|
|
onClose();
|
|
resetState();
|
|
}, 1000);
|
|
} catch (err) {
|
|
setUploadState("error");
|
|
toast({
|
|
title: "Upload failed",
|
|
description: (err as Error).message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const resetState = () => {
|
|
setFile(null);
|
|
setNotes("");
|
|
setFps("24");
|
|
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">
|
|
<Film className="h-5 w-5 text-amber-500" />
|
|
Upload {versionLabel}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* 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("file-input")?.click()}
|
|
>
|
|
<input
|
|
id="file-input"
|
|
type="file"
|
|
accept={acceptedTypes}
|
|
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">Drop video here or click to browse</p>
|
|
<p className="text-xs text-zinc-400 mt-1">MP4, MOV, AVI up to 2 GB</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-3 rounded-lg border border-zinc-700 p-3 bg-zinc-800/50">
|
|
<Film 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-sm" onClick={() => setFile(null)}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{uploadState === "done" && (
|
|
<CheckCircle2 className="h-5 w-5 text-green-400" />
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Metadata */}
|
|
{file && uploadState === "idle" && (
|
|
<>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="fps" className="text-xs">Frame Rate (FPS)</Label>
|
|
<Input
|
|
id="fps"
|
|
value={fps}
|
|
onChange={(e) => setFps(e.target.value)}
|
|
placeholder="24"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="notes" className="text-xs">Version Notes</Label>
|
|
<Textarea
|
|
id="notes"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
placeholder="What changed in this version?"
|
|
className="text-sm min-h-[80px]"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Upload progress */}
|
|
{(uploadState === "uploading" || uploadState === "processing" || uploadState === "done") && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-zinc-400">
|
|
{uploadState === "uploading" && "Uploading..."}
|
|
{uploadState === "processing" && "Processing..."}
|
|
{uploadState === "done" && "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"}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleUpload}
|
|
disabled={!file || uploadState !== "idle"}
|
|
className="gap-2"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
Upload {versionLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/** Upload a file to /api/upload/local using XHR so we get progress events. */
|
|
function uploadViaLocal(
|
|
file: File,
|
|
onProgress: (fraction: number) => void
|
|
): Promise<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(json.url);
|
|
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 cancelled")));
|
|
|
|
xhr.send(formData);
|
|
});
|
|
}
|
|
|