Initial commit of Vellum, an event photo product for guest uploads, host moderation, and original-quality galleries.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,298 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { ChevronDownIcon, UploadIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { MAX_PHOTO_BYTES } from "@album/contracts";
|
||||
import { api } from "@/trpc/react";
|
||||
import { imageContentType, isAllowedPhoto, putWithProgress } from "@/lib/upload";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
|
||||
type QueueItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
progress: number;
|
||||
status: "queued" | "uploading" | "done" | "error";
|
||||
error?: string;
|
||||
};
|
||||
|
||||
function guestKey(slug: string, field: string) {
|
||||
return `album:guest:${slug}:${field}`;
|
||||
}
|
||||
|
||||
export function GuestUpload({
|
||||
slug,
|
||||
uploadEnabled,
|
||||
}: {
|
||||
slug: string;
|
||||
uploadEnabled: boolean;
|
||||
}) {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [note, setNote] = useState("");
|
||||
const [notify, setNotify] = useState(true);
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [queue, setQueue] = useState<QueueItem[]>([]);
|
||||
const ensureGuest = api.guest.ensure.useMutation();
|
||||
const startSubmission = api.guest.startSubmission.useMutation();
|
||||
const createPhoto = api.photos.create.useMutation();
|
||||
const completePhoto = api.photos.complete.useMutation();
|
||||
const utils = api.useUtils();
|
||||
|
||||
useEffect(() => {
|
||||
const storedName = localStorage.getItem(guestKey(slug, "name")) ?? "";
|
||||
const storedEmail = localStorage.getItem(guestKey(slug, "email")) ?? "";
|
||||
const storedNote = localStorage.getItem(guestKey(slug, "note")) ?? "";
|
||||
setName(storedName);
|
||||
setEmail(storedEmail);
|
||||
setNote(storedNote);
|
||||
if (storedName || storedEmail || storedNote) setDetailsOpen(true);
|
||||
}, [slug]);
|
||||
|
||||
const busy = useMemo(
|
||||
() => queue.some((item) => item.status === "queued" || item.status === "uploading"),
|
||||
[queue],
|
||||
);
|
||||
|
||||
async function uploadFiles(files: File[]) {
|
||||
const accepted = files.filter(isAllowedPhoto);
|
||||
if (accepted.length !== files.length) {
|
||||
toast.error("Some files were skipped. Use JPEG, PNG, WebP, or HEIC under 25 MB.");
|
||||
}
|
||||
const items: QueueItem[] = accepted.map((file) => ({
|
||||
id: crypto.randomUUID(),
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: "queued",
|
||||
}));
|
||||
setQueue((current) => [...items, ...current]);
|
||||
const trimmedName = name.trim();
|
||||
const trimmedEmail = email.trim();
|
||||
const trimmedNote = note.trim();
|
||||
localStorage.setItem(guestKey(slug, "name"), trimmedName);
|
||||
localStorage.setItem(guestKey(slug, "email"), trimmedEmail);
|
||||
localStorage.setItem(guestKey(slug, "note"), trimmedNote);
|
||||
|
||||
try {
|
||||
await ensureGuest.mutateAsync({
|
||||
eventSlug: slug,
|
||||
displayName: trimmedName || undefined,
|
||||
email: trimmedEmail || undefined,
|
||||
notifyWhenReady: Boolean(trimmedEmail) && notify,
|
||||
note: trimmedNote || undefined,
|
||||
});
|
||||
const submission = await startSubmission.mutateAsync({ eventSlug: slug });
|
||||
|
||||
for (const [index, file] of accepted.entries()) {
|
||||
const item = items[index];
|
||||
if (!item) continue;
|
||||
const contentType = imageContentType(file);
|
||||
if (!contentType) continue;
|
||||
setQueue((current) =>
|
||||
current.map((entry) =>
|
||||
entry.id === item.id ? { ...entry, status: "uploading" } : entry,
|
||||
),
|
||||
);
|
||||
try {
|
||||
const created = await createPhoto.mutateAsync({
|
||||
eventSlug: slug,
|
||||
submissionId: submission.submissionId,
|
||||
contentType,
|
||||
fileName: file.name,
|
||||
byteSize: file.size,
|
||||
});
|
||||
await putWithProgress(created.uploadUrl, file, contentType, (progress) => {
|
||||
setQueue((current) =>
|
||||
current.map((entry) =>
|
||||
entry.id === item.id ? { ...entry, progress } : entry,
|
||||
),
|
||||
);
|
||||
});
|
||||
await completePhoto.mutateAsync({ photoId: created.photoId });
|
||||
setQueue((current) =>
|
||||
current.map((entry) =>
|
||||
entry.id === item.id
|
||||
? { ...entry, status: "done", progress: 100 }
|
||||
: entry,
|
||||
),
|
||||
);
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : "Upload failed";
|
||||
setQueue((current) =>
|
||||
current.map((entry) =>
|
||||
entry.id === item.id
|
||||
? { ...entry, status: "error", error: message }
|
||||
: entry,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
await utils.event.gallery.invalidate(slug);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "Could not start upload");
|
||||
setQueue((current) =>
|
||||
current.map((entry) =>
|
||||
items.some((item) => item.id === entry.id) && entry.status === "queued"
|
||||
? { ...entry, status: "error", error: "Could not start upload" }
|
||||
: entry,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!uploadEnabled) {
|
||||
return (
|
||||
<Alert>
|
||||
<AlertDescription>Uploads are closed for this event.</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<label
|
||||
className={cn(
|
||||
"flex min-h-52 cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-primary/35 bg-card px-5 py-10 text-center shadow-sm transition-all duration-200 hover:border-primary/60 hover:bg-accent/50 motion-reduce:transition-none",
|
||||
dragging && "scale-[1.01] border-primary bg-accent/60 shadow-[0_0_0_6px] shadow-primary/15 motion-reduce:scale-100",
|
||||
)}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault();
|
||||
setDragging(true);
|
||||
}}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault();
|
||||
setDragging(true);
|
||||
}}
|
||||
onDragLeave={(event) => {
|
||||
if (!event.currentTarget.contains(event.relatedTarget as Node)) {
|
||||
setDragging(false);
|
||||
}
|
||||
}}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault();
|
||||
setDragging(false);
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
if (files.length) void uploadFiles(files);
|
||||
}}
|
||||
>
|
||||
<span className="flex size-14 items-center justify-center rounded-full bg-accent text-accent-foreground transition-transform duration-300 ease-out group-hover:scale-105">
|
||||
<UploadIcon aria-hidden="true" />
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-base font-medium">Add photos from this phone</span>
|
||||
<span className="text-sm text-foreground/70">
|
||||
JPEG, PNG, WebP, or HEIC. Up to {Math.round(MAX_PHOTO_BYTES / (1024 * 1024))} MB each. Originals stay full quality.
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
|
||||
multiple
|
||||
className="sr-only"
|
||||
disabled={busy}
|
||||
onChange={(event) => {
|
||||
const files = Array.from(event.target.files ?? []);
|
||||
event.target.value = "";
|
||||
if (files.length) void uploadFiles(files);
|
||||
}}
|
||||
/>
|
||||
<Button type="button" disabled={busy} asChild className="tap-target">
|
||||
<span>
|
||||
{busy ? <Spinner data-icon="inline-start" /> : null}
|
||||
{busy ? "Uploading…" : "Choose photos"}
|
||||
</span>
|
||||
</Button>
|
||||
</label>
|
||||
{queue.length > 0 ? (
|
||||
<ul className="flex flex-col gap-3" aria-live="polite">
|
||||
{queue.map((item) => (
|
||||
<li key={item.id} className="flex flex-col gap-1">
|
||||
<div className="flex justify-between gap-3 text-sm">
|
||||
<span className="truncate">{item.name}</span>
|
||||
<span className="text-muted-foreground">{item.status}</span>
|
||||
</div>
|
||||
<Progress value={item.progress} />
|
||||
{item.error ? (
|
||||
<p className="text-sm text-destructive">{item.error}</p>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
<details
|
||||
className="rounded-2xl border bg-card/60 px-4 py-1"
|
||||
open={detailsOpen}
|
||||
onToggle={(event) => setDetailsOpen(event.currentTarget.open)}
|
||||
>
|
||||
<summary className="tap-target flex cursor-pointer list-none items-center justify-between gap-3 py-2 font-medium [&::-webkit-details-marker]:hidden">
|
||||
<span>Add a name or note</span>
|
||||
<ChevronDownIcon
|
||||
aria-hidden="true"
|
||||
className={cn("size-4 shrink-0 transition-transform duration-200", detailsOpen && "rotate-180")}
|
||||
/>
|
||||
</summary>
|
||||
<div className="pb-4">
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="contributor-name">Your name (optional)</FieldLabel>
|
||||
<Input
|
||||
id="contributor-name"
|
||||
name="contributor-name"
|
||||
autoComplete="name"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Maya…"
|
||||
maxLength={80}
|
||||
className="tap-target"
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="contributor-email">Email (optional)</FieldLabel>
|
||||
<Input
|
||||
id="contributor-email"
|
||||
name="contributor-email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
inputMode="email"
|
||||
spellCheck={false}
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
placeholder="you@example.com"
|
||||
className="tap-target"
|
||||
/>
|
||||
<FieldDescription>
|
||||
Stay anonymous if you skip this. Remembered on this device for this event.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
{email.trim() ? (
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="notify">Email me when the gallery is ready</FieldLabel>
|
||||
<Switch id="notify" checked={notify} onCheckedChange={setNotify} />
|
||||
</Field>
|
||||
) : null}
|
||||
<Field>
|
||||
<FieldLabel htmlFor="note">A note for the event people (optional)</FieldLabel>
|
||||
<Textarea
|
||||
id="note"
|
||||
value={note}
|
||||
onChange={(event) => setNote(event.target.value)}
|
||||
placeholder="Congratulations — enjoy the day."
|
||||
maxLength={2000}
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user