soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added upload queue notifications

Browse Source
This commit is contained in:
Codex Agent
2025-12-21 12:37:20 +01:00
parent 1e6027f438
commit 6ee40745ca
13 changed files with 566 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
resources/js/guest/pages/UploadPage.tsx
View File

@@ -192,7 +192,6 @@ const [canUpload, setCanUpload] = useState(true);
if (typeof document === 'undefined') return undefined;
const className = 'guest-immersive';
document.body.classList.add(className);
document.body.classList.add('guest-nav-visible'); // show nav by default on upload page
return () => {
document.body.classList.remove(className);
@@ -227,8 +226,8 @@ const [canUpload, setCanUpload] = useState(true);
if (typeof document === 'undefined') {
return;
}
// nav is always visible on upload page unless user explicitly toggles immersive off via button
document.body.classList.add('guest-nav-visible');
const shouldShow = typeof window !== 'undefined' && window.scrollY > 24;
document.body.classList.toggle('guest-nav-visible', shouldShow);
}, []);
useEffect(() => {
@@ -236,11 +235,12 @@ const [canUpload, setCanUpload] = useState(true);
return;
}
// ensure nav remains visible; hide only when immersive toggled off via the menu button
updateNavVisibility();
window.addEventListener('scroll', updateNavVisibility, { passive: true });
return () => {
document.body.classList.remove('guest-nav-visible');
window.removeEventListener('scroll', updateNavVisibility);
};
}, [updateNavVisibility]);
@@ -721,9 +721,10 @@ const [canUpload, setCanUpload] = useState(true);
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()}`);
const target = uploadsRequireApproval ? 'queue' : 'gallery';
navigate(`/e/${encodeURIComponent(eventKey)}/${target}?${params.toString()}`);
},
[emotionSlug, navigate, eventKey, task?.id]
[emotionSlug, navigate, eventKey, task?.id, uploadsRequireApproval]
);
const handleUsePhoto = useCallback(async () => {
@@ -1009,39 +1010,11 @@ const [canUpload, setCanUpload] = useState(true);
<div className="space-y-1">
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Bereit für dein Foto?</p>
<p className="text-base font-semibold leading-tight">Teile den Moment mit allen Gästen.</p>
<p className="text-xs text-white/75">Zieh eine Mission oder starte direkt.</p>
</div>
<Badge variant="secondary" className="rounded-full bg-white/15 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-white/90">
Live
</Badge>
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
<Button
size="sm"
className="rounded-full bg-white text-black shadow"
onClick={() => {
setShowHeroOverlay(false);
navigate(tasksUrl);
}}
>
Mission ziehen
</Button>
<Button
size="sm"
variant="secondary"
className="rounded-full border border-white/30 bg-white/10 text-white"
onClick={() => {
setShowHeroOverlay(false);
navigate(tasksUrl);
}}
>
Stimmung wählen
</Button>
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-[11px] text-white/85">
<Sparkles className="h-4 w-4 text-amber-200" />
Mini-Mission: Fang ein Lachen ein
</span>
</div>
</div>
) : null;
@@ -1228,12 +1201,6 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
>
{taskFloatingCard}
{heroOverlay}
{uploadsRequireApproval ? (
<div className="mx-4 rounded-xl border border-amber-300/70 bg-amber-50/80 p-3 text-amber-900 shadow-sm backdrop-blur dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
<p className="text-sm font-semibold">{t('upload.review.noticeTitle', 'Uploads werden geprüft')}</p>
<p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
</div>
) : null}
<section
className="relative flex flex-col overflow-hidden border border-white/10 bg-black text-white shadow-2xl"
style={{ borderRadius: radius }}
@@ -1462,16 +1429,24 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
</Button>
{mode === 'review' && reviewPhoto ? (
<div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
<Button variant="secondary" className="flex-1" onClick={handleRetake}>
{t('upload.review.retake')}
</Button>
<Button
className="flex-1 animate-pulse bg-pink-500 text-white shadow-lg hover:bg-pink-600 focus-visible:ring-pink-300"
onClick={handleUsePhoto}
>
{t('upload.review.keep')}
</Button>
<div className="flex w-full max-w-md flex-col gap-3">
{uploadsRequireApproval ? (
<div className="rounded-xl border border-amber-300/70 bg-amber-50/80 p-3 text-amber-900 shadow-sm backdrop-blur dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
<p className="text-sm font-semibold">{t('upload.review.noticeTitle', 'Uploads werden geprüft')}</p>
<p className="text-xs">{t('upload.review.noticeBody', 'Dein Foto erscheint, sobald es freigegeben wurde.')}</p>
</div>
) : null}
<div className="flex flex-col gap-3 sm:flex-row">
<Button variant="secondary" className="flex-1" onClick={handleRetake}>
{t('upload.review.retake')}
</Button>
<Button
className="flex-1 animate-pulse bg-pink-500 text-white shadow-lg hover:bg-pink-600 focus-visible:ring-pink-300"
onClick={handleUsePhoto}
>
{t('upload.review.keep')}
</Button>
</div>
</div>
) : (
<div className="relative h-24 w-24">