-
- );
+ return
-
-
- {/* Hero */}
-
+
+ {/* Matches the h1 (text-3xl / md:text-5xl) and the pill row below it. */}
+
+
+
+
+ {tiles.map((ratio, i) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/frontend/src/components/gallery/PhotoTile.tsx b/frontend/src/components/gallery/PhotoTile.tsx
new file mode 100644
index 0000000..0dad9b6
--- /dev/null
+++ b/frontend/src/components/gallery/PhotoTile.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import type { Photo } from '@/lib/api';
+import Spinner from '@/components/ui/Spinner';
+import { aspectStyle, masonryTileClass } from './GalleryLayout';
+
+interface PhotoTileProps {
+ photo: Photo;
+ /** Above-the-fold tiles load eagerly, the rest lazily. */
+ eager?: boolean;
+ onOpen: () => void;
+ onDownload: () => void;
+ downloading: boolean;
+ labels: { download: string; downloading: string };
+}
+
+export default function PhotoTile({
+ photo,
+ eager,
+ onOpen,
+ onDownload,
+ downloading,
+ labels,
+}: PhotoTileProps) {
+ const imgRef = useRef(null);
+ // 'initial' is what the server renders: fully visible, so a public gallery
+ // still paints its photos if hydration is slow or JS never arrives. The
+ // fade only takes over once we're mounted and know the image is still in
+ // flight — a cached image reports `complete` here and skips it entirely
+ // (its onLoad already fired before React attached the handler).
+ const [state, setState] = useState<'initial' | 'pending' | 'loaded'>('initial');
+ const pending = state === 'pending';
+
+ useEffect(() => {
+ setState(imgRef.current?.complete ? 'loaded' : 'pending');
+ }, []);
+
+ return (
+ >(() => new Set());
+ const controllers = useRef(new Map());
+ const unmounted = useRef(false);
+ // Lets the retry button in the error toast call the latest `start`.
+ const startRef = useRef<(req: DownloadRequest) => void>(() => {});
+
+ useEffect(() => {
+ unmounted.current = false;
+ return () => {
+ unmounted.current = true;
+ controllers.current.forEach((c) => c.abort());
+ controllers.current.clear();
+ };
+ }, []);
+
+ const start = useCallback(
+ async (req: DownloadRequest) => {
+ // Repeat clicks while the same photo is in flight are no-ops; other
+ // photos are unaffected because state is keyed by id.
+ if (controllers.current.has(req.id)) return;
+
+ const controller = new AbortController();
+ controllers.current.set(req.id, controller);
+ setPending((prev) => new Set(prev).add(req.id));
+
+ let timer = setTimeout(() => controller.abort(), HEADERS_TIMEOUT_MS);
+ const timedOut = () => controller.signal.aborted && !unmounted.current;
+
+ try {
+ const res = await fetch(req.url, {
+ credentials: 'same-origin',
+ signal: controller.signal,
+ });
+ clearTimeout(timer);
+ timer = setTimeout(() => controller.abort(), BODY_TIMEOUT_MS);
+ if (!res.ok) throw new Error(`Download failed (${res.status})`);
+ const blob = await res.blob();
+ saveBlob(blob, req.filename || `${req.id}.jpg`);
+ } catch (err) {
+ if (unmounted.current) return; // page gone, nothing to report
+ if (err instanceof TypeError) {
+ // Network-level failure — most likely a cross-origin presigned
+ // redirect. Hand it to the browser, which can follow it.
+ navigateToDownload(req);
+ } else {
+ const message = timedOut()
+ ? es
+ ? 'La descarga tardó demasiado.'
+ : 'The download timed out.'
+ : es
+ ? 'No se pudo descargar la foto.'
+ : 'Could not download the photo.';
+ toast.error(
+ (t) => (
+
+ {message}
+
+
+ ),
+ { duration: 6000 }
+ );
+ }
+ } finally {
+ clearTimeout(timer);
+ controllers.current.delete(req.id);
+ if (!unmounted.current) {
+ setPending((prev) => {
+ const next = new Set(prev);
+ next.delete(req.id);
+ return next;
+ });
+ }
+ }
+ },
+ [es]
+ );
+
+ useEffect(() => {
+ startRef.current = start;
+ }, [start]);
+
+ const isPending = useCallback((id: string) => pending.has(id), [pending]);
+
+ return { start, isPending };
+}
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index db60571..214186c 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -9,11 +9,21 @@ interface SkeletonProps {
className?: string;
}
-export function Skeleton({ className }: SkeletonProps) {
+export function Skeleton({
+ className,
+ tone = 'default',
+}: SkeletonProps & {
+ /** `on-dark` lightens the surface for placeholders over a dark hero. */
+ tone?: 'default' | 'on-dark';
+}) {
return (
);
}
diff --git a/frontend/src/components/ui/Spinner.tsx b/frontend/src/components/ui/Spinner.tsx
new file mode 100644
index 0000000..7f0ce25
--- /dev/null
+++ b/frontend/src/components/ui/Spinner.tsx
@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+// Inline busy indicator in the same style as the full-page loaders
+// (animate-spin ring with one contrasting edge). Purely decorative: callers
+// own the accessible state via aria-busy / aria-label. Defaults to the
+// white-on-dark ring used by the photo overlay controls; pass `border-*`
+// classes to restyle it elsewhere.
+export default function Spinner({ className }: { className?: string }) {
+ return (
+
+ );
+}
- {heroUrl && (
- <>
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
-
+ {/* Hero — same frame the skeleton renders (GalleryLayout). */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ ) : null
+ }
+ >
+
{/* Masonry grid */}
- (null);
const item = items[index];
const hasMultiple = items.length > 1;
+ const downloading = !!downloadingId && item?.id === downloadingId;
const prev = useCallback(() => {
onNavigate(index > 0 ? index - 1 : items.length - 1);
@@ -98,14 +117,37 @@ export default function Lightbox({ items, index, onClose, onNavigate, renderActi
className="absolute top-4 left-4 z-10 flex items-center gap-4"
onClick={(e) => e.stopPropagation()}
>
-
-
diff --git a/frontend/src/components/gallery/GalleryLayout.tsx b/frontend/src/components/gallery/GalleryLayout.tsx
new file mode 100644
index 0000000..37871f9
--- /dev/null
+++ b/frontend/src/components/gallery/GalleryLayout.tsx
@@ -0,0 +1,46 @@
+// Layout shell shared by the public gallery page (GalleryClient) and its
+// loading placeholder (GallerySkeleton). Column count, gaps, radii and
+// container padding are defined once here, so the skeleton's geometry can
+// never drift from the grid it stands in for.
+
+export function GalleryHeroFrame({
+ children,
+ backdrop,
+}: {
+ children: React.ReactNode;
+ /** Cover image + scrim, absolutely positioned behind the text. */
+ backdrop?: React.ReactNode;
+}) {
+ return (
+ + {title} +
+ {description && ( +{description}
)} -
-
+ - {title} -
- {description && ( -{description}
+
+
+
-
-
-
+
{readyPhotos.length === 0 ? (
+
{/* Call to action: send attendees to their dashboard, everyone else to
the next event. Auth state comes from the same useAuth() the gate
diff --git a/frontend/src/app/(public)/photos/[slug]/loading.tsx b/frontend/src/app/(public)/photos/[slug]/loading.tsx
new file mode 100644
index 0000000..c5ac403
--- /dev/null
+++ b/frontend/src/app/(public)/photos/[slug]/loading.tsx
@@ -0,0 +1,7 @@
+import GallerySkeleton from '@/components/gallery/GallerySkeleton';
+
+// Shown while the server component fetches the gallery, so the first paint is
+// already the gallery's layout rather than an empty page.
+export default function Loading() {
+ return
+
{readyPhotos.map((photo, i) => (
-
+
)}
{lightboxIndex !== null && (
@@ -351,9 +338,16 @@ export default function GalleryClient({ slug, eventSlug, initial }: GalleryClien
index={lightboxIndex}
onClose={() => setLightboxIndex(null)}
onNavigate={setLightboxIndex}
+ onDownload={(it) =>
+ downloads.start({ id: it.id, url: it.downloadUrl, filename: it.filename })
+ }
+ downloadingId={
+ lightboxItems.find((it) => downloads.isPending(it.id))?.id ?? null
+ }
+ downloadLabels={downloadLabels}
/>
)}
- setLightboxIndex(i)}
- onKeyDown={(e) => {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- setLightboxIndex(i);
- }
- }}
- className="group relative mb-2 md:mb-3 break-inside-avoid overflow-hidden rounded-xl bg-gray-100 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-yellow"
- style={
- photo.width && photo.height
- ? { aspectRatio: `${photo.width} / ${photo.height}` }
- : undefined
- }
- >
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
- e.stopPropagation()}
- className="absolute bottom-2 right-2 hidden md:flex p-2 rounded-full bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80"
- aria-label={es ? 'Descargar' : 'Download'}
- >
-
+ photo={photo}
+ eager={i < 8}
+ onOpen={() => setLightboxIndex(i)}
+ onDownload={() => downloadPhoto(photo)}
+ downloading={downloads.isPending(photo.id)}
+ labels={downloadLabels}
+ />
))}
-
+ {backdrop}
+
+ );
+}
+
+export function GalleryContainer({ children }: { children: React.ReactNode }) {
+ return {children}
+ {children}
;
+}
+
+export function MasonryGrid({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Per-tile geometry. Deliberately carries no background so callers can pick
+// one (photo tiles: bg-gray-100, skeleton tiles: the skeleton surface) without
+// two `bg-*` utilities fighting over CSS order.
+export const masonryTileClass = 'mb-2 md:mb-3 break-inside-avoid overflow-hidden rounded-xl';
+
+/**
+ * Reserves the tile's aspect ratio up front so the image can load into a box
+ * that is already the right size — late arrivals never reflow the columns.
+ * Returns undefined when the photo has no stored dimensions.
+ */
+export function aspectStyle(width?: number, height?: number): React.CSSProperties | undefined {
+ return width && height ? { aspectRatio: `${width} / ${height}` } : undefined;
+}
diff --git a/frontend/src/components/gallery/GallerySkeleton.tsx b/frontend/src/components/gallery/GallerySkeleton.tsx
new file mode 100644
index 0000000..60eccc4
--- /dev/null
+++ b/frontend/src/components/gallery/GallerySkeleton.tsx
@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import { Skeleton, SkeletonGroup } from '@/components/ui/Skeleton';
+import { GalleryContainer, GalleryHeroFrame, MasonryGrid, masonryTileClass } from './GalleryLayout';
+
+// Loading placeholder for the public gallery page. It renders through the same
+// hero frame, container and masonry grid as the real page (see GalleryLayout),
+// so replacing it with photos changes only the pixels inside the tiles.
+
+// Portrait/landscape/square mix standing in for a real event set. Fixed order
+// on purpose — a random shuffle would differ between the server and client
+// render and blow up hydration.
+const FALLBACK_RATIOS = [3 / 4, 4 / 3, 1, 2 / 3, 3 / 2, 4 / 5, 1, 3 / 4, 16 / 9, 4 / 5, 3 / 4, 4 / 3];
+
+interface GallerySkeletonProps {
+ /** Number of tiles to draw; ignored when `ratios` is given. */
+ count?: number;
+ /**
+ * Real width/height ratios when the caller already knows them (e.g. a
+ * cached gallery payload). Produces a grid with exactly the right geometry
+ * instead of the guessed mix above.
+ */
+ ratios?: number[];
+}
+
+export default function GallerySkeleton({ count = 12, ratios }: GallerySkeletonProps) {
+ const tiles =
+ ratios && ratios.length > 0
+ ? ratios
+ : Array.from({ length: count }, (_, i) => FALLBACK_RATIOS[i % FALLBACK_RATIOS.length]);
+
+ return (
+
+
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ onOpen();
+ }
+ }}
+ className={clsx(
+ masonryTileClass,
+ 'group relative bg-gray-100 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-yellow'
+ )}
+ /* Sized from the stored dimensions before the bytes arrive, so a slow
+ image never pushes its column around. */
+ style={aspectStyle(photo.width, photo.height)}
+ >
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ setState('loaded')}
+ onError={() => setState('loaded')}
+ className={clsx(
+ 'w-full h-auto transition-[opacity,transform] duration-300 motion-reduce:transition-none group-hover:scale-[1.03]',
+ pending ? 'opacity-0' : 'opacity-100'
+ )}
+ />
+ {pending && (
+
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/components/gallery/useDownloads.tsx b/frontend/src/components/gallery/useDownloads.tsx
new file mode 100644
index 0000000..d7ab010
--- /dev/null
+++ b/frontend/src/components/gallery/useDownloads.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+
+// Per-photo download state for the public gallery. The photo-api serves full
+// quality originals, which takes a few seconds, so downloads run through
+// fetch() instead of a bare — that gives us a spinner, a real
+// success/failure signal, a timeout and abort-on-unmount.
+
+// Originals run to ~20 MB, so a single flat timeout would either be too short
+// for a phone on mobile data or useless as a stall detector. Time out on the
+// response headers instead, then give the body a generous ceiling.
+const HEADERS_TIMEOUT_MS = 30_000;
+const BODY_TIMEOUT_MS = 10 * 60_000;
+
+export interface DownloadRequest {
+ /** Photo id; keys the in-flight state so tiles stay independent. */
+ id: string;
+ url: string;
+ filename?: string;
+}
+
+/** Saves fetched bytes without navigating away from the gallery. */
+function saveBlob(blob: Blob, filename: string) {
+ const objectUrl = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = objectUrl;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ // Give the browser time to start the save before the URL is invalidated.
+ setTimeout(() => URL.revokeObjectURL(objectUrl), 10_000);
+}
+
+/**
+ * Plain-anchor download, i.e. what the page did before this hook existed.
+ * Used as a fallback when fetch() itself fails: with S3 storage the file
+ * endpoint 302s to a presigned URL on another origin, which a cross-origin
+ * fetch cannot read but a navigation downloads fine (the presigned URL
+ * carries its own Content-Disposition).
+ */
+function navigateToDownload({ url, filename }: DownloadRequest) {
+ const a = document.createElement('a');
+ a.href = url;
+ if (filename) a.download = filename;
+ a.rel = 'noopener';
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+}
+
+export function useDownloads(es: boolean) {
+ const [pending, setPending] = useState