photobooth funktionen im event admin verlinkt, gäste pwa zeigt photobooth nur noch an, wenn diese aktiviert ist. kontaktformular optimiert. teilen-link mit iMessage und whatsapp erweitert.
This commit is contained in:
Codex Agent
@@ -3,7 +3,7 @@ import { Page } from './_util';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||||
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
||||
import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
|
||||
import { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
|
||||
import { likePhoto } from '../services/photosApi';
|
||||
import PhotoLightbox from './PhotoLightbox';
|
||||
import { fetchEvent, type EventData } from '../services/eventApi';
|
||||
@@ -11,8 +11,10 @@ import { useTranslation } from '../i18n/useTranslation';
|
||||
import { sharePhotoLink } from '../lib/sharePhoto';
|
||||
import { useToast } from '../components/ToastHost';
|
||||
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
||||
import { createPhotoShareLink } from '../services/photosApi';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const allowedGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
||||
const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
||||
type GalleryPhoto = {
|
||||
id: number;
|
||||
likes_count?: number | null;
|
||||
@@ -29,9 +31,6 @@ type GalleryPhoto = {
|
||||
uploader_name?: string | null;
|
||||
};
|
||||
|
||||
const parseGalleryFilter = (value: string | null): GalleryFilter =>
|
||||
allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest';
|
||||
|
||||
const normalizeImageUrl = (src?: string | null) => {
|
||||
if (!src) {
|
||||
return '';
|
||||
@@ -56,7 +55,7 @@ export default function GalleryPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const photoIdParam = searchParams.get('photoId');
|
||||
const modeParam = searchParams.get('mode');
|
||||
const [filter, setFilterState] = React.useState<GalleryFilter>(() => parseGalleryFilter(modeParam));
|
||||
const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
|
||||
const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
|
||||
const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
|
||||
|
||||
@@ -65,10 +64,30 @@ export default function GalleryPage() {
|
||||
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(
|
||||
() => Boolean(event?.photobooth_enabled) || typedPhotos.some((p) => p.ingest_source === 'photobooth'),
|
||||
[event?.photobooth_enabled, typedPhotos],
|
||||
);
|
||||
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]);
|
||||
}, [modeParam, parseGalleryFilter]);
|
||||
|
||||
const setFilter = React.useCallback((next: GalleryFilter) => {
|
||||
setFilterState(next);
|
||||
@@ -76,7 +95,12 @@ export default function GalleryPage() {
|
||||
params.set('mode', next);
|
||||
setSearchParams(params, { replace: true });
|
||||
}, [searchParams, setSearchParams]);
|
||||
const typedPhotos = photos as GalleryPhoto[];
|
||||
|
||||
useEffect(() => {
|
||||
if (filter === 'photobooth' && !showPhotoboothFilter) {
|
||||
setFilter('latest');
|
||||
}
|
||||
}, [filter, showPhotoboothFilter, setFilter]);
|
||||
|
||||
// Auto-open lightbox if photoId in query params
|
||||
useEffect(() => {
|
||||
@@ -152,31 +176,89 @@ export default function GalleryPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const buildShareText = (fallback?: string) => t('share.shareText', { event: event?.name ?? fallback ?? 'Fotospiel' });
|
||||
|
||||
async function onShare(photo: GalleryPhoto) {
|
||||
if (!token) return;
|
||||
setShareSheet({ photo, url: null, loading: true });
|
||||
setShareTargetId(photo.id);
|
||||
try {
|
||||
const localizedTask = localizeTaskLabel(photo.task_title ?? null, locale);
|
||||
const result = await sharePhotoLink({
|
||||
token,
|
||||
photoId: photo.id,
|
||||
title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
|
||||
text: t('share.shareText', { event: event?.name ?? 'Fotospiel' }),
|
||||
});
|
||||
|
||||
if (result.method === 'clipboard') {
|
||||
toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
|
||||
} else if (result.method === 'manual') {
|
||||
window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
|
||||
}
|
||||
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 });
|
||||
}
|
||||
|
||||
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<Page title={t('galleryPage.title', 'Galerie')}>
|
||||
@@ -230,7 +312,7 @@ export default function GalleryPage() {
|
||||
|
||||
</div>
|
||||
|
||||
<FiltersBar value={filter} onChange={setFilter} className="mt-2" />
|
||||
<FiltersBar value={filter} onChange={setFilter} className="mt-2" showPhotobooth={showPhotoboothFilter} />
|
||||
{loading && <p className="px-4">{t('galleryPage.loading', 'Lade…')}</p>}
|
||||
<div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{list.map((p: GalleryPhoto) => {
|
||||
@@ -272,22 +354,32 @@ export default function GalleryPage() {
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
|
||||
{localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2">{localizedTaskTitle}</p>}
|
||||
<div className="flex items-center justify-between text-xs text-white/80">
|
||||
<span>{createdLabel}</span>
|
||||
<span>{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
|
||||
<div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
|
||||
{localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white">{localizedTaskTitle}</p>}
|
||||
<div className="flex items-center justify-between text-xs text-white/90">
|
||||
<span className="truncate">{createdLabel}</span>
|
||||
<span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-3 right-3 flex items-center gap-2">
|
||||
<div className="absolute left-3 top-3 z-10 flex flex-col items-start gap-2">
|
||||
{localizedTaskTitle && (
|
||||
<span className="rounded-full bg-white/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white shadow">
|
||||
{localizedTaskTitle}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute right-3 top-3 z-10 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShare(p);
|
||||
}}
|
||||
className={`flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-white/10 transition ${shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/20'}`}
|
||||
className={cn(
|
||||
'flex h-9 w-9 items-center justify-center rounded-full border border-white/40 bg-black/40 text-white transition backdrop-blur',
|
||||
shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
|
||||
)}
|
||||
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
|
||||
disabled={shareTargetId === p.id}
|
||||
>
|
||||
@@ -299,7 +391,10 @@ export default function GalleryPage() {
|
||||
e.stopPropagation();
|
||||
onLike(p.id);
|
||||
}}
|
||||
className={`flex items-center gap-1 rounded-full border border-white/30 bg-white/10 px-3 py-1 text-sm font-medium transition ${liked.has(p.id) ? 'text-pink-300' : 'text-white'}`}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-full border border-white/40 bg-black/40 px-3 py-1 text-sm font-medium text-white transition backdrop-blur',
|
||||
liked.has(p.id) ? 'text-pink-300' : 'text-white'
|
||||
)}
|
||||
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
|
||||
>
|
||||
<Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
|
||||
@@ -319,6 +414,79 @@ export default function GalleryPage() {
|
||||
token={token}
|
||||
/>
|
||||
)}
|
||||
|
||||
{shareSheet.photo && (
|
||||
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{t('share.title', 'Geteiltes Foto')}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-foreground">#{shareSheet.photo.id}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
|
||||
onClick={closeShareSheet}
|
||||
>
|
||||
{t('lightbox.close', 'Schließen')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
||||
onClick={() => shareNative(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<Share2 className="h-4 w-4" />
|
||||
<div>
|
||||
<div>{t('share.button', 'Teilen')}</div>
|
||||
<div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
|
||||
onClick={() => shareWhatsApp(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<WhatsAppIcon className="h-5 w-5" />
|
||||
<div>
|
||||
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
|
||||
onClick={() => shareMessages(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
<div>
|
||||
<div>{t('share.imessage', 'Nachrichten')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
||||
onClick={() => copyLink(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
<div>
|
||||
<div>{t('share.copyLink', 'Link kopieren')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Heart, ChevronLeft, ChevronRight, X, Share2 } from 'lucide-react';
|
||||
import { likePhoto } from '../services/photosApi';
|
||||
import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
|
||||
import { likePhoto, createPhotoShareLink } from '../services/photosApi';
|
||||
import { useTranslation } from '../i18n/useTranslation';
|
||||
import { sharePhotoLink } from '../lib/sharePhoto';
|
||||
import { useToast } from '../components/ToastHost';
|
||||
|
||||
type Photo = {
|
||||
@@ -42,7 +41,10 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
const [taskLoading, setTaskLoading] = useState(false);
|
||||
const [likes, setLikes] = useState<number>(0);
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [shareLoading, setShareLoading] = useState(false);
|
||||
const [shareSheet, setShareSheet] = useState<{ url: string | null; loading: boolean }>({
|
||||
url: null,
|
||||
loading: false,
|
||||
});
|
||||
|
||||
// Determine mode and photo
|
||||
const isStandalone = !photos || photos.length === 0;
|
||||
@@ -209,30 +211,61 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
}
|
||||
}
|
||||
|
||||
async function onShare() {
|
||||
if (!photo || !eventToken) return;
|
||||
setShareLoading(true);
|
||||
try {
|
||||
const result = await sharePhotoLink({
|
||||
token: eventToken,
|
||||
photoId: photo.id,
|
||||
title: photo.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto'),
|
||||
text: t('share.shareText', { event: '' }),
|
||||
});
|
||||
const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
|
||||
const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });
|
||||
|
||||
if (result.method === 'clipboard') {
|
||||
toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
|
||||
} else if (result.method === 'manual') {
|
||||
window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
|
||||
}
|
||||
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
async function openShareSheet() {
|
||||
if (!photo || !eventToken) return;
|
||||
setShareSheet({ url: null, loading: true });
|
||||
try {
|
||||
const payload = await createPhotoShareLink(eventToken, photo.id);
|
||||
setShareSheet({ url: payload.url, loading: false });
|
||||
} catch (error) {
|
||||
console.error('share failed', error);
|
||||
toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
|
||||
} finally {
|
||||
setShareLoading(false);
|
||||
setShareSheet({ url: null, loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
function shareWhatsApp(url?: string | null) {
|
||||
if (!url) return;
|
||||
const waUrl = `https://wa.me/?text=${encodeURIComponent(`${shareText} ${url}`)}`;
|
||||
window.open(waUrl, '_blank', 'noopener');
|
||||
setShareSheet({ url: null, loading: false });
|
||||
}
|
||||
|
||||
function shareMessages(url?: string | null) {
|
||||
if (!url) return;
|
||||
const smsUrl = `sms:?&body=${encodeURIComponent(`${shareText} ${url}`)}`;
|
||||
window.open(smsUrl, '_blank', 'noopener');
|
||||
setShareSheet({ 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({ url: null, loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
function closeShareSheet() {
|
||||
setShareSheet({ url: null, loading: false });
|
||||
}
|
||||
|
||||
function onOpenChange(open: boolean) {
|
||||
if (!open) handleClose();
|
||||
}
|
||||
@@ -255,8 +288,8 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onShare}
|
||||
disabled={shareLoading || !eventToken || !photo}
|
||||
onClick={openShareSheet}
|
||||
disabled={!eventToken || !photo}
|
||||
>
|
||||
<Share2 className="mr-1 h-4 w-4" />
|
||||
{t('share.button', 'Teilen')}
|
||||
@@ -341,6 +374,92 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(shareSheet.url !== null || shareSheet.loading) && (
|
||||
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{t('share.title', 'Geteiltes Foto')}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
|
||||
onClick={closeShareSheet}
|
||||
>
|
||||
{t('lightbox.close', 'Schließen')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
||||
onClick={() => {
|
||||
if (!shareSheet.url) return;
|
||||
const data: ShareData = {
|
||||
title: shareTitle,
|
||||
text: shareText,
|
||||
url: shareSheet.url,
|
||||
};
|
||||
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
|
||||
navigator.share(data).catch(() => {});
|
||||
setShareSheet({ url: null, loading: false });
|
||||
} else {
|
||||
void copyLink(shareSheet.url);
|
||||
}
|
||||
}}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<Share2 className="h-4 w-4" />
|
||||
<div>
|
||||
<div>{t('share.button', 'Teilen')}</div>
|
||||
<div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
|
||||
onClick={() => shareWhatsApp(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<WhatsAppIcon className="h-5 w-5" />
|
||||
<div>
|
||||
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
|
||||
onClick={() => shareMessages(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
<div>
|
||||
<div>{t('share.imessage', 'Nachrichten')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
||||
onClick={() => copyLink(shareSheet.url)}
|
||||
disabled={shareSheet.loading}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
<div>
|
||||
<div>{t('share.copyLink', 'Link kopieren')}</div>
|
||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -279,7 +279,7 @@ const [canUpload, setCanUpload] = useState(true);
|
||||
|
||||
// Check upload limits
|
||||
useEffect(() => {
|
||||
if (!eventKey || !task) return;
|
||||
if (!eventKey) return;
|
||||
|
||||
const checkLimits = async () => {
|
||||
try {
|
||||
@@ -326,7 +326,7 @@ const [canUpload, setCanUpload] = useState(true);
|
||||
};
|
||||
|
||||
checkLimits();
|
||||
}, [eventKey, task, t]);
|
||||
}, [eventKey, t]);
|
||||
|
||||
const stopStream = useCallback(() => {
|
||||
if (streamRef.current) {
|
||||
@@ -542,19 +542,19 @@ const [canUpload, setCanUpload] = useState(true);
|
||||
|
||||
const navigateAfterUpload = useCallback(
|
||||
(photoId: number | undefined) => {
|
||||
if (!eventKey || !task) return;
|
||||
if (!eventKey) return;
|
||||
const params = new URLSearchParams();
|
||||
params.set('uploaded', 'true');
|
||||
if (task.id) params.set('task', String(task.id));
|
||||
if (task?.id) params.set('task', String(task.id));
|
||||
if (photoId) params.set('photo', String(photoId));
|
||||
if (emotionSlug) params.set('emotion', emotionSlug);
|
||||
navigate(`/e/${encodeURIComponent(eventKey)}/gallery?${params.toString()}`);
|
||||
},
|
||||
[emotionSlug, navigate, eventKey, task]
|
||||
[emotionSlug, navigate, eventKey, task?.id]
|
||||
);
|
||||
|
||||
const handleUsePhoto = useCallback(async () => {
|
||||
if (!eventKey || !reviewPhoto || !task || !canUpload) return;
|
||||
if (!eventKey || !reviewPhoto || !canUpload) return;
|
||||
setMode('uploading');
|
||||
setUploadProgress(2);
|
||||
setUploadError(null);
|
||||
|
||||
Reference in New Issue
Block a user