Add guest Live Show opt-in toggle
This commit is contained in:
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user