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,103 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { api } from "@/trpc/react";
|
||||
import {
|
||||
Empty,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
} from "@/components/ui/empty";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
export function GuestGallery({ slug }: { slug: string }) {
|
||||
const gallery = api.event.gallery.useQuery(slug);
|
||||
const [active, setActive] = useState<string | null>(null);
|
||||
|
||||
if (gallery.isLoading) {
|
||||
return (
|
||||
<div className="columns-2 gap-3 sm:columns-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<Skeleton key={index} className="mb-3 h-40 w-full break-inside-avoid" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const photos = gallery.data ?? [];
|
||||
const selected = photos.find((photo) => photo.id === active);
|
||||
|
||||
if (photos.length === 0) {
|
||||
return (
|
||||
<Empty className="border">
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No photos in the gallery yet</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Photos will appear here after the event people release the gallery.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="columns-2 gap-2 sm:columns-3 sm:gap-3">
|
||||
{photos.map((photo, index) =>
|
||||
photo.thumbUrl || photo.displayUrl ? (
|
||||
<button
|
||||
key={photo.id}
|
||||
type="button"
|
||||
className="photo-rise mb-2 block w-full break-inside-avoid overflow-hidden rounded-xl focus-visible:ring-3 focus-visible:ring-ring/50 sm:mb-3"
|
||||
style={{ animationDelay: `${Math.min(index, 12) * 40}ms` }}
|
||||
onClick={() => setActive(photo.id)}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={photo.thumbUrl ?? photo.displayUrl ?? ""}
|
||||
alt={
|
||||
photo.contributorName
|
||||
? `Photo from ${photo.contributorName}`
|
||||
: "Event photo"
|
||||
}
|
||||
width={photo.width ?? 800}
|
||||
height={photo.height ?? 1000}
|
||||
loading="lazy"
|
||||
className="w-full transition-transform duration-300 ease-out hover:scale-[1.03] motion-reduce:transition-none motion-reduce:hover:scale-100"
|
||||
/>
|
||||
</button>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
<Dialog open={Boolean(selected)} onOpenChange={(open) => !open && setActive(null)}>
|
||||
<DialogContent className="overflow-hidden border-none bg-background p-3 sm:max-w-3xl sm:p-4">
|
||||
<DialogHeader className="px-1">
|
||||
<DialogTitle>
|
||||
{selected?.contributorName ?? "Shared by a guest"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Full-size event photo
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selected?.displayUrl || selected?.thumbUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={selected.displayUrl ?? selected.thumbUrl ?? ""}
|
||||
alt=""
|
||||
width={selected.width ?? 1600}
|
||||
height={selected.height ?? 1200}
|
||||
className="max-h-[75dvh] w-full rounded-lg object-contain"
|
||||
/>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { createServerCaller } from "@/trpc/server";
|
||||
import { formatEventDate } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { GuestGallery } from "./guest-gallery";
|
||||
import { GuestUpload } from "./guest-upload";
|
||||
|
||||
export default async function EventPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const caller = await createServerCaller();
|
||||
let event;
|
||||
try {
|
||||
event = await caller.event.bySlug(slug);
|
||||
} catch {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const when = formatEventDate(event.startsAt);
|
||||
const galleryLive = Boolean(event.galleryReleasedAt);
|
||||
|
||||
return (
|
||||
<main className="page-pad mx-auto flex w-full max-w-4xl flex-col gap-8 py-8 sm:gap-10 sm:py-12">
|
||||
<header className="reveal flex flex-col gap-3">
|
||||
<p className="text-xs font-medium tracking-[0.22em] text-primary uppercase">
|
||||
Guest gallery
|
||||
</p>
|
||||
<h1 className="font-display text-4xl leading-tight sm:text-5xl">
|
||||
{event.title}
|
||||
</h1>
|
||||
{when ? <p className="text-muted-foreground">{when}</p> : null}
|
||||
{event.description ? (
|
||||
<p className="max-w-2xl text-muted-foreground">{event.description}</p>
|
||||
) : null}
|
||||
</header>
|
||||
<section id="upload" className="reveal-2 scroll-mt-24 flex flex-col gap-4">
|
||||
<h2 className="sr-only">Add a photo</h2>
|
||||
<GuestUpload
|
||||
slug={event.slug}
|
||||
uploadEnabled={event.uploadEnabled && event.status === "published"}
|
||||
/>
|
||||
</section>
|
||||
<Separator />
|
||||
<section className="reveal-3 flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">Gallery</h2>
|
||||
{galleryLive ? (
|
||||
<GuestGallery slug={event.slug} />
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Photos will appear here when the event people release the gallery.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user