90 lines
4.6 KiB
TypeScript
90 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { UploadIcon } from "lucide-react";
|
|
import { allowedImageTypeSchema, MAX_PHOTO_BYTES } from "@album/contracts";
|
|
import { api } from "@/trpc/react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function BannerUpload({ eventId, selectedId, onSelect, onBusyChange }: {
|
|
eventId: string;
|
|
selectedId: string | null;
|
|
onSelect: (id: string) => void;
|
|
onBusyChange: (busy: boolean) => void;
|
|
}) {
|
|
const input = useRef<HTMLInputElement>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [bannerId, setBannerId] = useState<string | null>(null);
|
|
const [startedAt, setStartedAt] = useState<number | null>(null);
|
|
const [timedOut, setTimedOut] = useState(false);
|
|
const selectRef = useRef(onSelect);
|
|
useEffect(() => { selectRef.current = onSelect; }, [onSelect]);
|
|
const create = api.banners.create.useMutation();
|
|
const complete = api.banners.complete.useMutation();
|
|
const status = api.banners.status.useQuery({ eventId, bannerId: bannerId ?? "" }, {
|
|
enabled: Boolean(bannerId),
|
|
refetchInterval: (query) => timedOut || ["ready", "failed"].includes(query.state.data?.status ?? "") ? false : 1500,
|
|
retry: false,
|
|
});
|
|
useEffect(() => {
|
|
if (!timedOut && bannerId && status.data?.status === "ready") {
|
|
selectRef.current(bannerId);
|
|
setBannerId(null);
|
|
setStartedAt(null);
|
|
toast.success("Banner ready to preview. Save changes to apply it.");
|
|
}
|
|
}, [bannerId, status.data?.status, timedOut]);
|
|
useEffect(() => {
|
|
if (!startedAt) return;
|
|
const timer = setTimeout(() => setTimedOut(true), 120_000);
|
|
return () => clearTimeout(timer);
|
|
}, [startedAt]);
|
|
async function upload(file: File) {
|
|
const mime = file.type || (/\.heic$/i.test(file.name) ? "image/heic" : /\.heif$/i.test(file.name) ? "image/heif" : "");
|
|
const parsed = allowedImageTypeSchema.safeParse(mime);
|
|
if (!parsed.success || file.size <= 0 || file.size > MAX_PHOTO_BYTES) {
|
|
toast.error("Choose a JPEG, PNG, WebP, or HEIC image up to 25 MB.");
|
|
return;
|
|
}
|
|
setUploading(true);
|
|
setTimedOut(false);
|
|
setBannerId(null);
|
|
setStartedAt(null);
|
|
try {
|
|
const pending = await create.mutateAsync({ eventId, contentType: parsed.data, byteSize: file.size });
|
|
const response = await fetch(pending.uploadUrl, {
|
|
method: "PUT", body: file, headers: { "Content-Type": parsed.data }, signal: AbortSignal.timeout(120_000),
|
|
});
|
|
if (!response.ok) throw new Error("Banner upload failed. Please try again.");
|
|
await complete.mutateAsync({ eventId, bannerId: pending.bannerId });
|
|
setBannerId(pending.bannerId);
|
|
setStartedAt(Date.now());
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "Banner upload failed");
|
|
} finally { setUploading(false); }
|
|
}
|
|
const processing = Boolean(bannerId) && status.data?.status !== "failed" && !status.isError && !timedOut;
|
|
useEffect(() => { onBusyChange(uploading || processing); }, [uploading, processing, onBusyChange]);
|
|
useEffect(() => () => onBusyChange(false), [onBusyChange]);
|
|
return (
|
|
<div className="flex flex-col gap-3 rounded-lg border p-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<input ref={input} type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
|
|
className="hidden" aria-label="Upload a dedicated event banner"
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = "";
|
|
if (file) void upload(file);
|
|
}} />
|
|
<Button type="button" variant="outline" disabled={uploading || processing} onClick={() => input.current?.click()}>
|
|
<UploadIcon data-icon="inline-start" />{uploading ? "Uploading…" : processing ? "Preparing banner…" : selectedId ? "Replace uploaded banner" : "Upload a banner"}
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">A separate image just for this event's header. It won't appear in the gallery. Up to 25 MB.</p>
|
|
{processing ? <p role="status" className="text-sm text-muted-foreground">Preparing your banner… You can keep editing while it processes.</p> : null}
|
|
{status.isError || status.data?.status === "failed" || timedOut ? <p role="alert" className="text-sm text-destructive">{timedOut ? "Processing is taking longer than expected. Your previous banner is unchanged; try another upload." : "Couldn't prepare this banner. Your previous banner is unchanged. Try uploading another image."}</p> : null}
|
|
</div>
|
|
);
|
|
}
|