@@ -227,99 +227,3 @@ export function FootageViewer({ shot, canManage, onSaved }: FootageViewerProps)
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user