Add original footage to shots function

components/shots/FootageViewer.tsx

@@ -0,0 +1,325 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Video, Upload, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { updateShot } from "@/actions/shots";
+import { useToast } from "@/components/ui/use-toast";
+
+interface FootageViewerProps {
+  shot: {
+    id: string;
+    shotCode: string;
+    originalFootageUrl: string | null;
+    originalFootageKey: string | null;
+  };
+  canManage: boolean;
+  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 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 [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [currentUrl, setCurrentUrl] = useState<string | null>(shot.originalFootageUrl ?? null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setFootageFile(file);
+    e.target.value = "";
+  };
+
+  const handleUpload = async () => {
+    if (!footageFile) return;
+    setUploading(true);
+    setProgress(0);
+    try {
+      const { url, key } = await uploadViaXhr(footageFile, setProgress);
+      await updateShot({
+        shotId: shot.id,
+        originalFootageUrl: url,
+        originalFootageKey: key || undefined,
+      });
+      setCurrentUrl(url);
+      setFootageFile(null);
+      toast({ title: "Footage uploaded" });
+      onSaved?.();
+    } catch (e) {
+      toast({
+        title: "Upload failed",
+        description: e instanceof Error ? e.message : undefined,
+        variant: "destructive",
+      });
+    } finally {
+      setUploading(false);
+      setProgress(0);
+    }
+  };
+
+  const handleRemove = async () => {
+    try {
+      await updateShot({ shotId: shot.id, originalFootageUrl: null, originalFootageKey: null });
+      setCurrentUrl(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",
+      });
+    }
+  };
+
+  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>
+        )}
+      </div>
+
+      {/* Video player */}
+      {currentUrl && (
+        <div className="relative w-full rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video">
+          <video
+            ref={videoRef}
+            src={currentUrl}
+            controls
+            className="w-full h-full"
+            preload="metadata"
+          >
+            Your browser does not support the video tag.
+          </video>
+        </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>}
+        </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">
+          <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>
+          </div>
+          <Button size="sm" onClick={handleUpload}>
+            <Upload className="h-3.5 w-3.5 mr-1.5" />
+            Upload
+          </Button>
+          <button
+            type="button"
+            onClick={() => setFootageFile(null)}
+            className="text-zinc-500 hover:text-zinc-300"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Upload progress */}
+      {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>{Math.round(progress * 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: `${progress * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm,video/*"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+}
+
+
+interface FootageViewerProps {
+  shot: {
+    id: string;
+    shotCode: string;
+    description: string | null;
+    status: string;
+    priority: string;
+    fps: number;
+    frameStart?: number | null;
+    frameEnd?: number | null;
+    dueDate: Date | string | null;
+    artistId: string | null;
+    thumbnailUrl: string | null;
+    originalFootageUrl: string | null;
+    originalFootageKey: string | null;
+  };
+  canManage: boolean;
+  artists: { id: string; name: string | null; email: string }[];
+  onSaved?: () => void;
+}
+
+export function FootageViewer({ shot, canManage, artists, onSaved }: FootageViewerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [showUpload, setShowUpload] = useState(false);
+
+  if (!shot.originalFootageUrl) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 gap-4 text-zinc-500">
+        <Video className="h-12 w-12 opacity-30" />
+        <p className="text-sm">No original footage uploaded yet.</p>
+        {canManage && !showUpload && (
+          <Button variant="outline" size="sm" onClick={() => setShowUpload(true)}>
+            Upload Footage
+          </Button>
+        )}
+        {canManage && showUpload && (
+          <div className="w-full max-w-2xl mt-4">
+            <ShotSettingsTab
+              shot={shot}
+              artists={artists}
+              onSaved={() => { setShowUpload(false); onSaved?.(); }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <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 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs text-zinc-500 hover:text-zinc-300"
+            onClick={() => setShowUpload((v) => !v)}
+          >
+            <Settings className="h-3.5 w-3.5 mr-1.5" />
+            {showUpload ? "Hide" : "Replace"}
+          </Button>
+        )}
+      </div>
+
+      {/* Video player */}
+      <div className="relative w-full rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video">
+        <video
+          ref={videoRef}
+          src={shot.originalFootageUrl}
+          controls
+          className="w-full h-full"
+          preload="metadata"
+        >
+          Your browser does not support the video tag.
+        </video>
+      </div>
+
+      {canManage && showUpload && (
+        <div className="mt-6 max-w-2xl">
+          <ShotSettingsTab
+            shot={shot}
+            artists={artists}
+            onSaved={() => { setShowUpload(false); onSaved?.(); }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}