+
+
+
- React.useEffect(() => {
- api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
- }, [mission?.id, api]);
-
- const bind = useGesture(
- {
- onDrag: ({ active, movement: [mx, my], velocity: [vx], direction: [dx], cancel }) => {
- if (active && Math.abs(mx) > swipeThreshold) {
- cancel?.();
- api.start({
- x: dx > 0 ? 520 : -520,
- y: my,
- rotateZ: dx > 0 ? 12 : -12,
- rotateY: dx > 0 ? 18 : -18,
- rotateX: -my / 10,
- opacity: 0,
- scale: 1,
- immediate: false,
- onRest: () => {
- onAdvance();
- api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, opacity: 1, scale: 1, immediate: false });
- },
- });
- return;
- }
-
- api.start({
- x: mx,
- y: my,
- rotateZ: mx / 18,
- rotateY: mx / 28,
- rotateX: -my / 36,
- scale: active ? 1.02 : 1,
- opacity: 1,
- immediate: false,
- });
- },
- onDragEnd: () => {
- api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
- },
- },
- {
- drag: {
- filterTaps: true,
- bounds: { left: -200, right: 200, top: -120, bottom: 120 },
- rubberband: true,
- },
- }
- );
-
- return (
-
-
-
- {stackLayers.map((item, index) => {
- const depth = index + 1;
- const scaleDown = 1 - depth * 0.03;
- const translateY = depth * 12;
- const fade = Math.max(0.25, 0.55 - depth * 0.08);
- return (
-
- );
- })}
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
- Fotoaufgabe
-
-
- Wir haben schon etwas für dich vorbereitet.
-
+ {card?.emotion?.name ?? 'Fotoaufgabe'}
+
+
+
+ Deine nächste Foto-Aufgabe wartet
- {mission ? (
-
-
-
- {mission.title}
-
- {mission.description && (
-
- {mission.description}
-
- )}
-
-
- ) : (
-
- Ziehe deine erste Mission im Aufgaben-Tab oder wähle eine Stimmung.
-
- )}
-
-
-
-
+
+
+ ca. {durationMinutes} min
-
+
+
+ {card ? (
+
+ {card.title}
+
+ ) : loading ? (
+
+
+
+
+
+ ) : (
+
Ziehe deine erste Mission oder wähle eine Stimmung.
+ )}
+
+
+
+
+
+ Mission bereit
+ {card ? 'Tippe zum Start' : 'Neue Mission lädt'}
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ const slides = cards.length ? cards : [mission ?? null];
+ const initialSlide = Math.min(initialIndex, Math.max(0, slides.length - 1));
+
+ return (
+
+
+
+
1}
+ initialSlide={initialSlide}
+ onSwiper={(instance) => {
+ swiperRef.current = instance;
+ if (initialSlide > 0) {
+ instance.slideToLoop ? instance.slideToLoop(initialSlide, 0) : instance.slideTo(initialSlide, 0);
+ }
+ }}
+ onSlideChange={(instance) => {
+ const realIndex = typeof instance.realIndex === 'number' ? instance.realIndex : instance.activeIndex ?? 0;
+ onIndexChange(realIndex, slides.length);
+ }}
+ className="!pb-2"
+ style={{ paddingLeft: '0.25rem', paddingRight: '0.25rem' }}
+ >
+ {slides.map((card, index) => {
+ const key = `card-${card?.id ?? 'x'}-${index}`;
+ return (
+
+
+ {renderCardContent(card)}
+
+
+ );
+ })}
+
+
);
@@ -534,13 +645,58 @@ function UploadActionCard({
secondaryAccent,
radius,
bodyFont,
+ requiresApproval,
}: {
token: string;
accentColor: string;
secondaryAccent: string;
radius: number;
bodyFont?: string;
+ requiresApproval: boolean;
}) {
+ const inputRef = React.useRef
(null);
+ const [busy, setBusy] = React.useState(false);
+ const [message, setMessage] = React.useState(null);
+ const navigate = useNavigate();
+
+ const { upload, uploading, error, warning, progress, reset } = useDirectUpload({
+ eventToken: token,
+ taskId: undefined,
+ emotionSlug: undefined,
+ onCompleted: () => {
+ setMessage(null);
+ navigate(`/e/${encodeURIComponent(token)}/gallery`);
+ },
+ });
+
+ const onPick = React.useCallback(
+ async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ setBusy(true);
+ setMessage(null);
+ try {
+ await upload(file);
+ } finally {
+ setBusy(false);
+ }
+ if (inputRef.current) {
+ inputRef.current.value = '';
+ }
+ },
+ [upload]
+ );
+
+ React.useEffect(() => {
+ if (error) {
+ setMessage(error);
+ } else if (warning) {
+ setMessage(warning);
+ } else {
+ setMessage(null);
+ }
+ }, [error, warning]);
+
return (
-
-
-
-
-
-
-
Direkt hochladen
-
Kamera öffnen oder ein Foto aus deiner Galerie wählen.
-
-
Offline möglich – wir laden später hoch.
+
+
+ Kamera öffnen oder ein Foto aus deiner Galerie wählen. Offline möglich – wir laden später hoch.
+
+ {requiresApproval ? (
+
+ Deine Fotos werden kurz geprüft und erscheinen danach in der Galerie.
+
+ ) : null}
+ {message && (
+
+ {message} {progress > 0 && progress < 100 ? `(${Math.round(progress)}%)` : ''}
+
+ )}
);
diff --git a/resources/js/guest/pages/PhotoLightbox.tsx b/resources/js/guest/pages/PhotoLightbox.tsx
index e5b0c15..0a6f72c 100644
--- a/resources/js/guest/pages/PhotoLightbox.tsx
+++ b/resources/js/guest/pages/PhotoLightbox.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from '../i18n/useTranslation';
import { useToast } from '../components/ToastHost';
import ShareSheet from '../components/ShareSheet';
import { useEventBranding } from '../context/EventBrandingContext';
+import { getDeviceId } from '../lib/device';
type Photo = {
id: number;
@@ -162,12 +163,20 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
headers: {
Accept: 'application/json',
'X-Locale': locale,
+ 'X-Device-Id': getDeviceId(),
},
}
);
if (res.ok) {
- const tasks = (await res.json()) as Task[];
- const foundTask = tasks.find((t) => t.id === taskId);
+ const payload = (await res.json()) as unknown;
+ const tasks = Array.isArray(payload)
+ ? payload
+ : Array.isArray((payload as any)?.data)
+ ? (payload as any).data
+ : Array.isArray((payload as any)?.tasks)
+ ? (payload as any).tasks
+ : [];
+ const foundTask = (tasks as Task[]).find((t) => t.id === taskId);
if (foundTask) {
setTask({
id: foundTask.id,
diff --git a/resources/js/guest/pages/TaskPickerPage.tsx b/resources/js/guest/pages/TaskPickerPage.tsx
index 98ec6cd..2e973c1 100644
--- a/resources/js/guest/pages/TaskPickerPage.tsx
+++ b/resources/js/guest/pages/TaskPickerPage.tsx
@@ -10,6 +10,13 @@ import { cn } from '@/lib/utils';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useEventBranding } from '../context/EventBrandingContext';
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
+import {
+ getEmotionIcon,
+ getEmotionTheme,
+ type EmotionIdentity,
+ type EmotionTheme,
+} from '../lib/emotionTheme';
+import { getDeviceId } from '../lib/device';
interface Task {
id: number;
@@ -39,128 +46,6 @@ type EventPhoto = {
const SWIPE_THRESHOLD_PX = 40;
const SIMILAR_PHOTO_LIMIT = 6;
-type EmotionTheme = {
- gradientClass: string;
- gradientBackground: string;
- suggestionGradient: string;
- suggestionBorder: string;
-};
-
-type EmotionIdentity = {
- slug?: string | null;
- name?: string | null;
-};
-
-const themeFreude: EmotionTheme = {
- gradientClass: 'from-amber-300 via-orange-400 to-rose-500',
- gradientBackground: 'linear-gradient(135deg, #fde68a, #fb923c, #fb7185)',
- suggestionGradient: 'from-amber-50 via-white to-orange-50 dark:from-amber-500/20 dark:via-gray-900 dark:to-orange-500/10',
- suggestionBorder: 'border-amber-200/60 dark:border-amber-400/30',
-};
-const themeLiebe: EmotionTheme = {
- gradientClass: 'from-rose-400 via-fuchsia-500 to-purple-600',
- gradientBackground: 'linear-gradient(135deg, #fb7185, #ec4899, #9333ea)',
- suggestionGradient: 'from-rose-50 via-white to-fuchsia-50 dark:from-rose-500/20 dark:via-gray-900 dark:to-fuchsia-500/10',
- suggestionBorder: 'border-rose-200/60 dark:border-rose-400/30',
-};
-const themeEkstase: EmotionTheme = {
- gradientClass: 'from-fuchsia-400 via-purple-500 to-indigo-500',
- gradientBackground: 'linear-gradient(135deg, #f472b6, #a855f7, #6366f1)',
- suggestionGradient: 'from-fuchsia-50 via-white to-indigo-50 dark:from-fuchsia-500/20 dark:via-gray-900 dark:to-indigo-500/10',
- suggestionBorder: 'border-fuchsia-200/60 dark:border-fuchsia-400/30',
-};
-const themeEntspannt: EmotionTheme = {
- gradientClass: 'from-teal-300 via-emerald-400 to-cyan-500',
- gradientBackground: 'linear-gradient(135deg, #5eead4, #34d399, #22d3ee)',
- suggestionGradient: 'from-teal-50 via-white to-emerald-50 dark:from-teal-500/20 dark:via-gray-900 dark:to-emerald-500/10',
- suggestionBorder: 'border-emerald-200/60 dark:border-emerald-400/30',
-};
-const themeBesinnlich: EmotionTheme = {
- gradientClass: 'from-slate-500 via-blue-500 to-indigo-600',
- gradientBackground: 'linear-gradient(135deg, #64748b, #3b82f6, #4f46e5)',
- suggestionGradient: 'from-slate-50 via-white to-blue-50 dark:from-slate-600/20 dark:via-gray-900 dark:to-blue-500/10',
- suggestionBorder: 'border-slate-200/60 dark:border-slate-500/30',
-};
-const themeUeberraschung: EmotionTheme = {
- gradientClass: 'from-indigo-300 via-violet-500 to-rose-500',
- gradientBackground: 'linear-gradient(135deg, #a5b4fc, #a855f7, #fb7185)',
- suggestionGradient: 'from-indigo-50 via-white to-violet-50 dark:from-indigo-500/20 dark:via-gray-900 dark:to-violet-500/10',
- suggestionBorder: 'border-indigo-200/60 dark:border-indigo-400/30',
-};
-const themeDefault: EmotionTheme = {
- gradientClass: 'from-pink-500 via-purple-500 to-indigo-600',
- gradientBackground: 'linear-gradient(135deg, #ec4899, #a855f7, #4f46e5)',
- suggestionGradient: 'from-pink-50 via-white to-indigo-50 dark:from-pink-500/20 dark:via-gray-900 dark:to-indigo-500/10',
- suggestionBorder: 'border-pink-200/60 dark:border-pink-400/30',
-};
-
-const EMOTION_THEMES: Record = {
- freude: themeFreude,
- happy: themeFreude,
- liebe: themeLiebe,
- romance: themeLiebe,
- romantik: themeLiebe,
- nostalgie: themeEntspannt,
- relaxed: themeEntspannt,
- ruehrung: themeBesinnlich,
- traurigkeit: themeBesinnlich,
- teamgeist: themeFreude,
- gemeinschaft: themeFreude,
- ueberraschung: themeUeberraschung,
- surprise: themeUeberraschung,
- ekstase: themeEkstase,
- excited: themeEkstase,
- besinnlichkeit: themeBesinnlich,
- sad: themeBesinnlich,
- default: themeDefault,
-};
-
-const EMOTION_ICONS: Record = {
- freude: '😊',
- happy: '😊',
- liebe: '❤️',
- romantik: '💞',
- nostalgie: '📼',
- ruehrung: '🥲',
- teamgeist: '🤝',
- ueberraschung: '😲',
- surprise: '😲',
- ekstase: '🤩',
- besinnlichkeit: '🕯️',
-};
-
-function sluggify(value?: string | null): string {
- return (value ?? '')
- .toString()
- .toLowerCase()
- .normalize('NFD')
- .replace(/[\u0300-\u036f]/g, '')
- .replace(/[^a-z0-9]+/g, '')
- .trim();
-}
-
-function resolveEmotionKey(identity?: EmotionIdentity | null): string {
- if (!identity) return 'default';
- const nameKey = sluggify(identity.name);
- if (nameKey && EMOTION_THEMES[nameKey]) {
- return nameKey;
- }
- const slugKey = sluggify(identity.slug);
- if (slugKey && EMOTION_THEMES[slugKey]) {
- return slugKey;
- }
- return 'default';
-}
-
-function getEmotionTheme(identity?: EmotionIdentity | null): EmotionTheme {
- const key = resolveEmotionKey(identity);
- return EMOTION_THEMES[key] ?? themeDefault;
-}
-
-function getEmotionIcon(identity?: EmotionIdentity | null): string {
- const key = resolveEmotionKey(identity);
- return EMOTION_ICONS[key] ?? '✨';
-}
export default function TaskPickerPage() {
const { token } = useParams<{ token: string }>();
@@ -218,6 +103,7 @@ export default function TaskPickerPage() {
const headers: HeadersInit = {
Accept: 'application/json',
'X-Locale': locale,
+ 'X-Device-Id': getDeviceId(),
};
if (cached?.etag) {
@@ -235,14 +121,17 @@ export default function TaskPickerPage() {
if (!response.ok) throw new Error('Aufgaben konnten nicht geladen werden.');
const payload = await response.json();
- if (Array.isArray(payload)) {
- const entry = { data: payload, etag: response.headers.get('ETag') };
- tasksCacheRef.current.set(cacheKey, entry);
- setTasks(payload);
- } else {
- tasksCacheRef.current.set(cacheKey, { data: [], etag: response.headers.get('ETag') });
- setTasks([]);
- }
+ const taskList = Array.isArray(payload)
+ ? payload
+ : Array.isArray(payload?.data)
+ ? payload.data
+ : Array.isArray(payload?.tasks)
+ ? payload.tasks
+ : [];
+
+ const entry = { data: taskList, etag: response.headers.get('ETag') };
+ tasksCacheRef.current.set(cacheKey, entry);
+ setTasks(taskList);
} catch (err) {
console.error('Failed to load tasks', err);
setError(err instanceof Error ? err.message : 'Unbekannter Fehler');
diff --git a/resources/js/guest/pages/UploadPage.tsx b/resources/js/guest/pages/UploadPage.tsx
index d98ea4a..b3f5b98 100644
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -39,6 +39,7 @@ import { useEventStats } from '../context/EventStatsContext';
import { useEventBranding } from '../context/EventBrandingContext';
import { compressPhoto, formatBytes } from '../lib/image';
import { useGuestIdentity } from '../context/GuestIdentityContext';
+import { useEventData } from '../hooks/useEventData';
interface Task {
id: number;
@@ -120,10 +121,13 @@ export default function UploadPage() {
const { t, locale } = useTranslation();
const stats = useEventStats();
const { branding } = useEventBranding();
+ const { event } = useEventData();
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 uploadsRequireApproval =
+ (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
const taskIdParam = searchParams.get('task');
const emotionSlug = searchParams.get('emotion') || '';
@@ -253,12 +257,19 @@ const [canUpload, setCanUpload] = useState(true);
headers: {
Accept: 'application/json',
'X-Locale': locale,
+ 'X-Device-Id': getDeviceId(),
},
}
);
if (!res.ok) throw new Error('Tasks konnten nicht geladen werden');
const payload = (await res.json()) as unknown;
- const entries = Array.isArray(payload) ? payload.filter(isTaskPayload) : [];
+ const entries = Array.isArray(payload)
+ ? payload.filter(isTaskPayload)
+ : Array.isArray((payload as any)?.data)
+ ? (payload as any).data.filter(isTaskPayload)
+ : Array.isArray((payload as any)?.tasks)
+ ? (payload as any).tasks.filter(isTaskPayload)
+ : [];
const found = entries.find((entry) => entry.id === currentTaskId) ?? null;
if (!active) return;
@@ -1103,6 +1114,12 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
>
{taskFloatingCard}
{heroOverlay}
+ {uploadsRequireApproval ? (
+
+
{t('upload.review.noticeTitle', 'Uploads werden geprüft')}
+
{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}
+