Add guest Live Show opt-in toggle

This commit is contained in:
Codex Agent
2026-01-05 15:29:59 +01:00
parent 15be3b847c
commit 35ef8f1586
8 changed files with 116 additions and 1 deletions

View File

@@ -4,6 +4,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Switch } from '@/components/ui/switch';
import { motion } from 'framer-motion';
import {
Dialog,
@@ -149,6 +150,7 @@ export default function UploadPage() {
const uploadsRequireApproval =
(event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
const demoReadOnly = Boolean(event?.demo_read_only);
const liveShowModeration = event?.live_show?.moderation_mode ?? 'manual';
const motionEnabled = !prefersReducedMotion();
const overlayMotion = motionEnabled ? { initial: 'hidden', animate: 'show', variants: FADE_SCALE } : {};
const fadeUpMotion = motionEnabled ? { initial: 'hidden', animate: 'show', variants: FADE_UP } : {};
@@ -187,6 +189,7 @@ const navSentinelRef = useRef<HTMLDivElement | null>(null);
const [eventPackage, setEventPackage] = useState<EventPackage | null>(null);
const [canUpload, setCanUpload] = useState(true);
const [submitToLive, setSubmitToLive] = useState(true);
const limitCards = useMemo<LimitSummaryCard[]>(
() => buildLimitSummaries(eventPackage?.limits ?? null, t),
@@ -227,6 +230,11 @@ const [canUpload, setCanUpload] = useState(true);
};
}, []);
useEffect(() => {
if (!event) return;
setSubmitToLive(true);
}, [event?.slug]);
const updateNavVisibility = useCallback(() => {
if (typeof document === 'undefined') {
return;
@@ -776,6 +784,7 @@ const [canUpload, setCanUpload] = useState(true);
const photoId = await uploadPhoto(eventKey, fileForUpload, task?.id, emotionSlug || undefined, {
maxRetries: 2,
guestName: identity.name || undefined,
liveShowOptIn: submitToLive,
onProgress: (percent) => {
setUploadProgress(Math.max(15, Math.min(98, percent)));
setStatusMessage(t('upload.status.uploading'));
@@ -840,7 +849,7 @@ const [canUpload, setCanUpload] = useState(true);
} finally {
setStatusMessage('');
}
}, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, eventKey, stopStream, task, canUpload, t, identity.name, triggerConfetti]);
}, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, eventKey, stopStream, task, canUpload, t, identity.name, triggerConfetti, submitToLive]);
const handleGalleryPick = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
if (!canUpload) return;
@@ -1446,6 +1455,26 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
<p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
</div>
) : null}
<div className="rounded-xl border border-white/20 bg-white/10 p-3 text-white shadow-sm backdrop-blur">
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-semibold">{t('upload.liveShow.title', 'Live-Show')}</p>
<p className="text-xs text-white/70">
{t('upload.liveShow.description', 'Zeige dieses Foto direkt auf der Live-Show.')}
</p>
</div>
<Switch
checked={submitToLive}
onCheckedChange={(checked) => setSubmitToLive(checked)}
aria-label={t('upload.liveShow.toggle', 'Live-Show aktivieren')}
/>
</div>
<p className="mt-2 text-[11px] text-white/70">
{liveShowModeration === 'off'
? t('upload.liveShow.immediate', 'Erscheint sofort auf der Leinwand.')
: t('upload.liveShow.reviewed', 'Wird nach Freigabe für die Live-Show angezeigt.')}
</p>
</div>
<div className="flex flex-col gap-3 sm:flex-row">
<Button variant="secondary" className="flex-1" onClick={handleRetake}>
{t('upload.review.retake')}