616 lines
28 KiB
TypeScript
616 lines
28 KiB
TypeScript
// @ts-nocheck
|
||
import React, { useEffect, useState } from 'react';
|
||
import { Page } from './_util';
|
||
import { Link, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
|
||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
||
import { Heart, Image as ImageIcon, ImagePlus, Share2, Users } from 'lucide-react';
|
||
import { motion } from 'framer-motion';
|
||
import { likePhoto } from '../services/photosApi';
|
||
import PhotoLightbox from './PhotoLightbox';
|
||
import { fetchEvent, type EventData } from '../services/eventApi';
|
||
import { useTranslation } from '../i18n/useTranslation';
|
||
import { useToast } from '../components/ToastHost';
|
||
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
||
import { shouldShowPhotoboothFilter } from '../lib/galleryFilters';
|
||
import { createPhotoShareLink } from '../services/photosApi';
|
||
import { cn } from '@/lib/utils';
|
||
import { useEventBranding } from '../context/EventBrandingContext';
|
||
import ShareSheet from '../components/ShareSheet';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
FADE_SCALE,
|
||
FADE_UP,
|
||
STAGGER_FAST,
|
||
getMotionContainerPropsForNavigation,
|
||
getMotionItemPropsForNavigation,
|
||
prefersReducedMotion,
|
||
} from '../lib/motion';
|
||
import PullToRefresh from '../components/PullToRefresh';
|
||
import { triggerHaptic } from '../lib/haptics';
|
||
import { useEventStats } from '../context/EventStatsContext';
|
||
|
||
const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
||
type GalleryPhoto = {
|
||
id: number;
|
||
likes_count?: number | null;
|
||
created_at?: string | null;
|
||
ingest_source?: string | null;
|
||
session_id?: string | null;
|
||
task_id?: number | null;
|
||
task_title?: string | null;
|
||
emotion_id?: number | null;
|
||
emotion_name?: string | null;
|
||
thumbnail_path?: string | null;
|
||
file_path?: string | null;
|
||
title?: string | null;
|
||
uploader_name?: string | null;
|
||
};
|
||
|
||
const normalizeImageUrl = (src?: string | null) => {
|
||
if (!src) {
|
||
return '';
|
||
}
|
||
|
||
if (/^https?:/i.test(src)) {
|
||
return src;
|
||
}
|
||
|
||
let cleanPath = src.replace(/^\/+/g, '').replace(/\/+/g, '/');
|
||
if (!cleanPath.startsWith('storage/')) {
|
||
cleanPath = `storage/${cleanPath}`;
|
||
}
|
||
|
||
return `/${cleanPath}`.replace(/\/+/g, '/');
|
||
};
|
||
|
||
export default function GalleryPage() {
|
||
const { token } = useParams<{ token?: string }>();
|
||
const navigationType = useNavigationType();
|
||
const { t, locale } = useTranslation();
|
||
const { branding } = useEventBranding();
|
||
const stats = useEventStats();
|
||
const { photos, loading, newCount, acknowledgeNew, refreshNow } = usePollGalleryDelta(token ?? '', locale);
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const photoIdParam = searchParams.get('photoId');
|
||
const modeParam = searchParams.get('mode');
|
||
const radius = branding.buttons?.radius ?? 12;
|
||
const buttonStyle = branding.buttons?.style ?? 'filled';
|
||
const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
|
||
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
|
||
const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
|
||
const motionEnabled = !prefersReducedMotion();
|
||
const containerMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
|
||
const fadeUpMotion = getMotionItemPropsForNavigation(motionEnabled, FADE_UP, navigationType);
|
||
const fadeScaleMotion = getMotionItemPropsForNavigation(motionEnabled, FADE_SCALE, navigationType);
|
||
const gridMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
|
||
const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
|
||
const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
|
||
const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
|
||
|
||
const [event, setEvent] = useState<EventData | null>(null);
|
||
const [eventLoading, setEventLoading] = useState(true);
|
||
const toast = useToast();
|
||
const [shareTargetId, setShareTargetId] = React.useState<number | null>(null);
|
||
const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
|
||
const [shareSheet, setShareSheet] = React.useState<{ photo: GalleryPhoto | null; url: string | null; loading: boolean }>({
|
||
photo: null,
|
||
url: null,
|
||
loading: false,
|
||
});
|
||
|
||
const typedPhotos = photos as GalleryPhoto[];
|
||
const showPhotoboothFilter = React.useMemo(() => shouldShowPhotoboothFilter(event), [event]);
|
||
const allowedGalleryFilters = React.useMemo<GalleryFilter[]>(
|
||
() => (showPhotoboothFilter ? allGalleryFilters : ['latest', 'popular', 'mine']),
|
||
[showPhotoboothFilter],
|
||
);
|
||
const parseGalleryFilter = React.useCallback(
|
||
(value: string | null): GalleryFilter =>
|
||
allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest',
|
||
[allowedGalleryFilters],
|
||
);
|
||
|
||
useEffect(() => {
|
||
setFilterState(parseGalleryFilter(modeParam));
|
||
}, [modeParam, parseGalleryFilter]);
|
||
|
||
const setFilter = React.useCallback((next: GalleryFilter) => {
|
||
setFilterState(next);
|
||
const params = new URLSearchParams(searchParams);
|
||
params.set('mode', next);
|
||
setSearchParams(params, { replace: true });
|
||
}, [searchParams, setSearchParams]);
|
||
|
||
useEffect(() => {
|
||
if (filter === 'photobooth' && !showPhotoboothFilter) {
|
||
setFilter('latest');
|
||
}
|
||
}, [filter, showPhotoboothFilter, setFilter]);
|
||
|
||
// Auto-open lightbox if photoId in query params
|
||
useEffect(() => {
|
||
if (photoIdParam && photos.length > 0 && currentPhotoIndex === null && !hasOpenedPhoto) {
|
||
const index = typedPhotos.findIndex((photo) => photo.id === parseInt(photoIdParam, 10));
|
||
if (index !== -1) {
|
||
setCurrentPhotoIndex(index);
|
||
setHasOpenedPhoto(true);
|
||
}
|
||
}
|
||
}, [typedPhotos, photos.length, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);
|
||
|
||
// Load event and package info
|
||
const loadEventData = React.useCallback(async () => {
|
||
if (!token) return;
|
||
try {
|
||
setEventLoading(true);
|
||
const eventData = await fetchEvent(token);
|
||
setEvent(eventData);
|
||
} catch (err) {
|
||
console.error('Failed to load event data', err);
|
||
} finally {
|
||
setEventLoading(false);
|
||
}
|
||
}, [token]);
|
||
|
||
useEffect(() => {
|
||
void loadEventData();
|
||
}, [loadEventData]);
|
||
|
||
const handleRefresh = React.useCallback(async () => {
|
||
await Promise.all([refreshNow(), loadEventData()]);
|
||
acknowledgeNew();
|
||
}, [acknowledgeNew, loadEventData, refreshNow]);
|
||
|
||
const myPhotoIds = React.useMemo(() => {
|
||
try {
|
||
const raw = localStorage.getItem('my-photo-ids');
|
||
return new Set<number>(raw ? JSON.parse(raw) : []);
|
||
} catch { return new Set<number>(); }
|
||
}, []);
|
||
|
||
const list = React.useMemo(() => {
|
||
let arr = typedPhotos.slice();
|
||
if (filter === 'popular') {
|
||
arr.sort((a, b) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
|
||
} else if (filter === 'mine') {
|
||
arr = arr.filter((p) => myPhotoIds.has(p.id));
|
||
} else if (filter === 'photobooth') {
|
||
arr = arr.filter((p) => p.ingest_source === 'photobooth');
|
||
arr.sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
|
||
} else {
|
||
arr.sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
|
||
}
|
||
return arr;
|
||
}, [typedPhotos, filter, myPhotoIds]);
|
||
const [liked, setLiked] = React.useState<Set<number>>(new Set());
|
||
const [counts, setCounts] = React.useState<Record<number, number>>({});
|
||
|
||
async function onLike(id: number) {
|
||
if (liked.has(id)) return;
|
||
setLiked(new Set(liked).add(id));
|
||
try {
|
||
const c = await likePhoto(id);
|
||
setCounts((m) => ({ ...m, [id]: c }));
|
||
triggerHaptic('selection');
|
||
// keep a simple record of liked items
|
||
try {
|
||
const raw = localStorage.getItem('liked-photo-ids');
|
||
const arr: number[] = raw ? JSON.parse(raw) : [];
|
||
if (!arr.includes(id)) localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, id]));
|
||
} catch (error) {
|
||
console.warn('Failed to persist liked-photo-ids', error);
|
||
}
|
||
} catch (error) {
|
||
console.warn('Like failed', error);
|
||
const s = new Set(liked); s.delete(id); setLiked(s);
|
||
}
|
||
}
|
||
|
||
const buildShareText = (fallback?: string) => {
|
||
const eventName = event?.name ?? fallback ?? 'Fotospiel';
|
||
const base = t('share.shareText', 'Schau dir diesen Moment bei Fotospiel an.');
|
||
return `${eventName} – ${base}`;
|
||
};
|
||
|
||
async function onShare(photo: GalleryPhoto) {
|
||
if (!token) return;
|
||
setShareSheet({ photo, url: null, loading: true });
|
||
setShareTargetId(photo.id);
|
||
try {
|
||
const url = await ensureShareUrl(photo);
|
||
setShareSheet({ photo, url, loading: false });
|
||
} catch (error) {
|
||
console.error('share failed', error);
|
||
toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
} finally {
|
||
setShareTargetId(null);
|
||
}
|
||
}
|
||
|
||
async function ensureShareUrl(photo: GalleryPhoto): Promise<string> {
|
||
if (!token) throw new Error('missing token');
|
||
const payload = await createPhotoShareLink(token, photo.id);
|
||
return payload.url;
|
||
}
|
||
|
||
function shareNative(url?: string | null) {
|
||
if (!shareSheet.photo || !url) return;
|
||
const localizedTask = localizeTaskLabel(shareSheet.photo.task_title ?? null, locale);
|
||
const data: ShareData = {
|
||
title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
|
||
text: buildShareText(),
|
||
url,
|
||
};
|
||
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
|
||
navigator.share(data).catch(() => {
|
||
// user cancelled; no toast
|
||
});
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
return;
|
||
}
|
||
void copyLink(url);
|
||
}
|
||
|
||
function shareWhatsApp(url?: string) {
|
||
if (!url) return;
|
||
const text = `${buildShareText()} ${url}`;
|
||
const waUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
|
||
window.open(waUrl, '_blank', 'noopener');
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
}
|
||
|
||
function shareMessages(url?: string) {
|
||
if (!url) return;
|
||
const text = `${buildShareText()} ${url}`;
|
||
const smsUrl = `sms:?&body=${encodeURIComponent(text)}`;
|
||
window.open(smsUrl, '_blank', 'noopener');
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
}
|
||
|
||
async function copyLink(url?: string | null) {
|
||
if (!url) return;
|
||
try {
|
||
await navigator.clipboard?.writeText(url);
|
||
toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
|
||
} catch {
|
||
toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
|
||
} finally {
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
}
|
||
}
|
||
|
||
function closeShareSheet() {
|
||
setShareSheet({ photo: null, url: null, loading: false });
|
||
}
|
||
|
||
if (!token) {
|
||
return (
|
||
<Page title={t('galleryPage.title', 'Galerie')}>
|
||
<p>{t('galleryPage.eventNotFound', 'Event nicht gefunden.')}</p>
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
if (eventLoading) {
|
||
return (
|
||
<Page title={t('galleryPage.title', 'Galerie')}>
|
||
<p>{t('galleryPage.loadingEvent', 'Lade Event-Info...')}</p>
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
const newPhotosBadgeText = t('galleryPage.badge.newPhotos', {
|
||
count: numberFormatter.format(newCount),
|
||
}, `${newCount} neue Fotos`);
|
||
const badgeEmphasisClass = newCount > 0
|
||
? 'border border-pink-200 bg-pink-500/15 text-pink-600'
|
||
: 'border border-transparent bg-muted text-muted-foreground';
|
||
const uploadUrl = token ? `/e/${encodeURIComponent(token)}/upload` : '/event';
|
||
const heroStatsLine = t('galleryPage.hero.stats', {
|
||
photoCount: numberFormatter.format(list.length),
|
||
likeCount: numberFormatter.format(stats.likesCount ?? 0),
|
||
guestCount: numberFormatter.format(stats.onlineGuests || stats.guestCount || 0),
|
||
}, `${numberFormatter.format(list.length)} Fotos · ${numberFormatter.format(stats.likesCount ?? 0)} ❤️ · ${numberFormatter.format(stats.onlineGuests || stats.guestCount || 0)} Gäste online`);
|
||
const bentoShadow =
|
||
'shadow-[10px_10px_0_rgba(15,23,42,0.85)] dark:shadow-[10px_10px_0_rgba(15,23,42,0.6)]';
|
||
|
||
return (
|
||
<Page title="">
|
||
<div className="relative">
|
||
<PullToRefresh
|
||
onRefresh={handleRefresh}
|
||
pullLabel={t('common.pullToRefresh')}
|
||
releaseLabel={t('common.releaseToRefresh')}
|
||
refreshingLabel={t('common.refreshing')}
|
||
>
|
||
<motion.div className="space-y-6 pb-24" {...containerMotion}>
|
||
<motion.div className="space-y-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
|
||
<div className="grid gap-4 lg:grid-cols-[1.35fr_0.65fr]">
|
||
<div
|
||
className={cn(
|
||
'relative overflow-hidden rounded-[28px] border-2 border-slate-900/80 bg-slate-950 text-white',
|
||
bentoShadow
|
||
)}
|
||
style={{
|
||
borderRadius: radius + 14,
|
||
background: `radial-gradient(120% 120% at 90% 0%, ${branding.secondaryColor}55 0%, transparent 60%), linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
|
||
}}
|
||
>
|
||
<div className="absolute inset-0 opacity-40 [background-image:radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.45),transparent_45%),radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.25),transparent_40%)]" />
|
||
<div className="absolute inset-0 opacity-25 [background-image:linear-gradient(135deg,rgba(255,255,255,0.12)_12%,transparent_12%),linear-gradient(225deg,rgba(255,255,255,0.12)_12%,transparent_12%)] [background-size:16px_16px]" />
|
||
<div className="relative z-10 flex h-full flex-col gap-4 p-6 sm:p-7">
|
||
<div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-white/80">
|
||
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/15">
|
||
<ImageIcon className="h-5 w-5" aria-hidden />
|
||
</span>
|
||
<span>{t('galleryPage.hero.label')}</span>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h1
|
||
className="text-3xl font-bold leading-tight sm:text-4xl"
|
||
style={headingFont ? { fontFamily: headingFont } : undefined}
|
||
>
|
||
{event?.name ?? t('galleryPage.hero.eventFallback')}
|
||
</h1>
|
||
<p className="max-w-xl text-sm text-white/85 sm:text-base">
|
||
{t('galleryPage.subtitle')}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-white/90">
|
||
<span className="rounded-full border border-white/30 bg-white/10 px-3 py-1">
|
||
{heroStatsLine}
|
||
</span>
|
||
{newCount > 0 && (
|
||
<span className="rounded-full border border-white/30 bg-black/30 px-3 py-1">
|
||
{newPhotosBadgeText}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3 pt-1">
|
||
<Button
|
||
asChild
|
||
size="lg"
|
||
className="h-12 rounded-full bg-white text-slate-900 shadow-[6px_6px_0_rgba(15,23,42,0.7)] transition hover:-translate-y-0.5 hover:bg-white/90"
|
||
>
|
||
<Link to={uploadUrl} className="flex items-center gap-2">
|
||
<ImagePlus className="h-5 w-5" />
|
||
{t('galleryPage.hero.upload', 'Neues Foto hochladen')}
|
||
</Link>
|
||
</Button>
|
||
{newCount > 0 && (
|
||
<button
|
||
type="button"
|
||
onClick={acknowledgeNew}
|
||
className="rounded-full border border-white/30 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-white/90 transition hover:bg-white/20"
|
||
>
|
||
{t('galleryPage.badge.markSeen', 'Gesehen')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4">
|
||
<div
|
||
className={cn(
|
||
'rounded-[26px] border-2 border-slate-900/80 bg-white/90 p-5 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white',
|
||
)}
|
||
style={{ borderRadius: radius + 10 }}
|
||
>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
|
||
{t('galleryPage.feed.title', 'Live-Feed')}
|
||
</p>
|
||
<p className="mt-2 text-sm text-slate-700 dark:text-white/80">
|
||
{t('galleryPage.feed.description', 'Alle paar Sekunden aktualisiert.')}
|
||
</p>
|
||
<div className="mt-4 flex items-center justify-between gap-2 rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-800 shadow-[4px_4px_0_rgba(15,23,42,0.8)] dark:border-white/10 dark:bg-slate-900 dark:text-white">
|
||
<span>{t('galleryPage.feed.newUploads', '{count} neue Uploads sind da.').replace('{count}', `${newCount}`)}</span>
|
||
<span className={cn('rounded-full px-2 py-0.5', badgeEmphasisClass)}>{newCount}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div
|
||
className={cn(
|
||
'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-4 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white'
|
||
)}
|
||
style={{ borderRadius: radius + 8 }}
|
||
>
|
||
<p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
|
||
Likes
|
||
</p>
|
||
<div className="mt-3 flex items-center gap-2 text-2xl font-bold">
|
||
<Heart className="h-5 w-5 text-pink-500" />
|
||
{numberFormatter.format(stats.likesCount ?? 0)}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={cn(
|
||
'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-4 text-slate-900 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80 dark:text-white'
|
||
)}
|
||
style={{ borderRadius: radius + 8 }}
|
||
>
|
||
<p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-white/60">
|
||
{t('galleryPage.hero.statsGuests', 'Gäste online')}
|
||
</p>
|
||
<div className="mt-3 flex items-center gap-2 text-2xl font-bold">
|
||
<Users className="h-5 w-5 text-slate-700 dark:text-white" />
|
||
{numberFormatter.format(stats.onlineGuests || stats.guestCount || 0)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={cn(
|
||
'rounded-[22px] border-2 border-slate-900/80 bg-white/95 p-2 shadow-[8px_8px_0_rgba(15,23,42,0.9)] dark:border-white/10 dark:bg-slate-950/80'
|
||
)}
|
||
style={{ borderRadius: radius + 8 }}
|
||
>
|
||
<FiltersBar
|
||
value={filter}
|
||
onChange={setFilter}
|
||
className="mt-0"
|
||
showPhotobooth={showPhotoboothFilter}
|
||
styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{loading && (
|
||
<motion.p className="px-1" {...fadeUpMotion}>
|
||
{t('galleryPage.loading', 'Lade…')}
|
||
</motion.p>
|
||
)}
|
||
|
||
<motion.div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
|
||
{list.map((p: GalleryPhoto, idx: number) => {
|
||
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
||
const createdLabel = p.created_at
|
||
? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||
: t('galleryPage.photo.justNow', 'Gerade eben');
|
||
const likeCount = counts[p.id] ?? (p.likes_count || 0);
|
||
const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
|
||
const altSuffix = localizedTaskTitle
|
||
? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
|
||
: '';
|
||
const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
|
||
|
||
const openPhoto = () => {
|
||
const index = list.findIndex((photo) => photo.id === p.id);
|
||
setCurrentPhotoIndex(index >= 0 ? index : null);
|
||
};
|
||
|
||
return (
|
||
<motion.div
|
||
key={p.id}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={openPhoto}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
openPhoto();
|
||
}
|
||
}}
|
||
className="group flex flex-col overflow-hidden border border-border/60 bg-white shadow-sm ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
|
||
style={{ borderRadius: radius }}
|
||
{...fadeScaleMotion}
|
||
>
|
||
<div className="relative">
|
||
<img
|
||
src={imageUrl}
|
||
alt={altText}
|
||
decoding="async"
|
||
loading={idx < 6 ? 'eager' : 'lazy'}
|
||
fetchPriority={idx < 6 ? 'high' : 'auto'}
|
||
className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
|
||
onError={(e) => {
|
||
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
||
}}
|
||
/>
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/55 via-black/0 to-transparent" aria-hidden />
|
||
</div>
|
||
<div className="space-y-2 px-3 pb-3 pt-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
||
{localizedTaskTitle && (
|
||
<p
|
||
className="text-sm font-semibold leading-tight line-clamp-2 text-foreground"
|
||
style={headingFont ? { fontFamily: headingFont } : undefined}
|
||
>
|
||
{localizedTaskTitle}
|
||
</p>
|
||
)}
|
||
<div className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
|
||
<span className="truncate">{createdLabel}</span>
|
||
<span className="truncate">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onLike(p.id);
|
||
}}
|
||
className={cn(
|
||
'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
|
||
liked.has(p.id) ? 'border-pink-200 bg-pink-50 text-pink-600' : 'hover:bg-muted/40'
|
||
)}
|
||
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
|
||
style={{ borderRadius: radius }}
|
||
>
|
||
<Heart className={`h-3.5 w-3.5 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
|
||
{likeCount}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onShare(p);
|
||
}}
|
||
className={cn(
|
||
'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
|
||
shareTargetId === p.id ? 'opacity-60' : 'hover:bg-muted/40'
|
||
)}
|
||
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
|
||
disabled={shareTargetId === p.id}
|
||
style={{ borderRadius: radius }}
|
||
>
|
||
<Share2 className="h-3.5 w-3.5" aria-hidden />
|
||
{t('galleryPage.photo.shareLabel', 'Teilen')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
|
||
<motion.div
|
||
key={`placeholder-${idx}`}
|
||
className="relative overflow-hidden border border-muted/40 bg-white shadow-sm ring-1 ring-black/5 dark:bg-slate-950 dark:ring-white/10"
|
||
style={{ borderRadius: radius }}
|
||
{...fadeScaleMotion}
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
|
||
<div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
|
||
<ImageIcon className="h-6 w-6" aria-hidden />
|
||
<div className="h-2 w-10 rounded-full bg-muted/40" />
|
||
</div>
|
||
<div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
</PullToRefresh>
|
||
</div>
|
||
{currentPhotoIndex !== null && list.length > 0 && (
|
||
<PhotoLightbox
|
||
photos={list}
|
||
currentIndex={currentPhotoIndex}
|
||
onClose={() => setCurrentPhotoIndex(null)}
|
||
onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
|
||
token={token}
|
||
eventName={event?.name ?? null}
|
||
/>
|
||
)}
|
||
|
||
<ShareSheet
|
||
open={Boolean(shareSheet.photo)}
|
||
photoId={shareSheet.photo?.id ?? null}
|
||
eventName={event?.name ?? null}
|
||
url={shareSheet.url}
|
||
loading={shareSheet.loading}
|
||
onClose={closeShareSheet}
|
||
onShareNative={() => shareNative(shareSheet.url)}
|
||
onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
|
||
onShareMessages={() => shareMessages(shareSheet.url)}
|
||
onCopyLink={() => copyLink(shareSheet.url)}
|
||
radius={radius}
|
||
bodyFont={bodyFont}
|
||
headingFont={headingFont}
|
||
/>
|
||
</Page>
|
||
);
|
||
}
|