fix(feed): survive a bad network, and let the lightbox actually browse
Four things a guest on congested venue wifi would have hit, and one they would have
hit immediately.
A FAILED FEED LOAD CLAIMED THE GALLERY WAS EMPTY. `loadFeed` caught, toasted for five
seconds and left `uploads` empty, so the page fell through to "Noch keine Fotos. Tippe
auf den Kamera-Button unten!" — the most likely first impression at the party, and a
lie. There is now a distinct error state with "Erneut laden". Refreshes suppressed the
toast entirely, so pull-to-refresh and the "Neue Beiträge" pill failed in total
silence; they now report, and the pill survives its own failure instead of clearing
before the request.
THE FILTER-EMPTY STATE WAS DEAD CODE. With filtering server-side `displayUploads` is a
plain alias of `uploads`, so the grid's "Keine Treffer für die gewählten Filter." plus
its reset button sat behind an identical earlier branch and could never render — a
guest tapping a chip with no matches was told to go take a photo.
SSE COULD FREEZE THE FEED FOR THE WHOLE EVENING. Nothing in the feed ever refetched on
a timer; every update path was triggered exclusively by a stream event. Behind a proxy
that buffers `text/event-stream` `onopen` never fires, so the guest saw only the photos
that were on screen when they arrived; and a socket left half-open by an AP roam is
worse, because `connectSse` early-returns on a non-null EventSource and nothing ever
reconnects. A pure silence timer is not implementable — the backend sends keep-alives
as SSE comments, which the EventSource parser discards without dispatching — so
liveness is established on evidence instead: a jittered 60-120s `/feed/delta` backstop
that reconnects when a poll returns content the stream never delivered. The ticket
round-trip also seeds the delta cursor before the EventSource is created, so the
backstop has a `since` even if `onopen` never fires.
THE PILL COLLAPSED A DEEPLY-SCROLLED FEED to 20 items and dumped the guest at an
arbitrary scroll position — the exact yank the pill exists to avoid. It merges now.
The refresh debounce was 800ms + jitter, which during a burst is roughly one feed query
per client every two seconds; at 100 guests that approaches the 60/min per-user limit,
and the resulting 429s were swallowed by a bare `catch {}`, so the feed would simply
stop updating with no signal. Now 8s + jitter, coalescing, and skipped entirely while
the page is hidden.
Not one `<img>` in the app had an `onerror`. `pickMediaUrl` falls back to the original
whenever preview and thumbnail are null — i.e. for everything still compressing, which
during a burst is the top of the feed — so a 404 there rendered an empty grey box with
`alt=""`, not even a message. Each now retries once, then shows the placeholder.
The lightbox had no swipe, no prev/next and no arrow keys, so browsing 300 photos meant
closing and reopening the modal for every one — while FEATURES.md and USER_JOURNEYS
both claimed swipe shipped. It now has chevrons (44px, German aria-labels, hidden at
the ends), arrow keys, and horizontal swipe, with focus handed to the surviving control
so a disappearing chevron can't drop focus to `<body>`. Comment deletion was a ~14px
`✕` four pixels from the text that deleted permanently on one tap, while deleting a
POST two components away goes through a ConfirmSheet; it now matches.
`feed-filter.ts` and its test are deleted — with the server filtering, they were dead.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Fabian Hamm (Privat)
@@ -15,6 +15,25 @@ export class ApiError extends Error {
|
||||
|
||||
const TIMEOUT_MS = 20_000;
|
||||
|
||||
/** Pages that ARE the recovery flow — redirecting from them would loop. */
|
||||
const AUTH_ROUTES = ['/join', '/recover'];
|
||||
|
||||
/**
|
||||
* Send a guest whose session died back to the join screen.
|
||||
*
|
||||
* Deliberately uses `window.location` rather than SvelteKit's `goto`: `toast-store` already
|
||||
* imports `ApiError` from this module, so pulling a store or `$app/navigation` in here would
|
||||
* create an import cycle. A full document load is also the more correct behaviour after a
|
||||
* session loss — it resets every module-level store, which is exactly what we want, and the
|
||||
* queued upload blobs live in IndexedDB so they survive it.
|
||||
*/
|
||||
function redirectToJoin(): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
const path = window.location.pathname;
|
||||
if (AUTH_ROUTES.some((r) => path === r || path.startsWith(`${r}/`))) return;
|
||||
window.location.assign('/join');
|
||||
}
|
||||
|
||||
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||
const headers: Record<string, string> = {};
|
||||
const token = getToken();
|
||||
@@ -69,6 +88,17 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
|
||||
// simply get a 403 "gesperrt" toast on writes.
|
||||
if (res.status === 401) {
|
||||
clearAuth();
|
||||
// Clearing auth alone leaves the guest stranded: the bottom nav and FAB are
|
||||
// gated on `isAuthenticated` so they simply vanish, route guards only run in
|
||||
// onMount (which does not re-run), and a standalone PWA has no URL bar — so
|
||||
// there is no way back to /join. Real triggers mid-event are a host PIN reset
|
||||
// (which revokes that guest's sessions) and a redeployed JWT_SECRET.
|
||||
// Queued upload blobs survive in IndexedDB and are picked up again after
|
||||
// re-joining — via the `onSetAuth` hook in upload-queue.ts, NOT the boot-time
|
||||
// call in +layout.svelte: this redirect lands on /join with no token, so the
|
||||
// layout's `if (getToken())` skips it, and the subsequent recover navigates
|
||||
// with `goto()`, which never re-runs `onMount`.
|
||||
redirectToJoin();
|
||||
}
|
||||
const d = (data ?? {}) as { error?: string; message?: string };
|
||||
throw new ApiError(
|
||||
|
||||
@@ -27,6 +27,53 @@
|
||||
|
||||
const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
|
||||
|
||||
// Video cards show a poster if one exists; `pickMediaUrl` is not used here because it is
|
||||
// mime-agnostic and would hand back the raw MP4 for an <img>.
|
||||
const posterSrc = $derived(upload.thumbnail_url ?? upload.preview_url ?? '');
|
||||
|
||||
// ── Media fallback ───────────────────────────────────────────────────────────────
|
||||
//
|
||||
// A failed <img> rendered as an empty grey box with `alt=""` — no icon, no message,
|
||||
// nothing to tap. And the failure is routine rather than exotic: `pickMediaUrl` falls
|
||||
// back to `/original` whenever preview AND thumbnail are still null, i.e. for everything
|
||||
// still compressing, which in a newest-first feed is the card at the top during every
|
||||
// burst. That also makes the cause usually TRANSIENT, so one delayed retry of the same
|
||||
// URL recovers most of them; the nonce exists because the browser would otherwise replay
|
||||
// its cached failure rather than re-request. Two strikes and we fall through to the
|
||||
// placeholder this card already draws for "no derivative yet".
|
||||
const MEDIA_RETRY_MS = 4000;
|
||||
let mediaRetryNonce = $state(0);
|
||||
let mediaFailed = $state(false);
|
||||
let mediaRetryTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function withNonce(url: string): string {
|
||||
if (!url || !mediaRetryNonce) return url;
|
||||
return `${url}${url.includes('?') ? '&' : '?'}r=${mediaRetryNonce}`;
|
||||
}
|
||||
|
||||
const displaySrc = $derived(withNonce(isVideo(upload.mime_type) ? posterSrc : mediaSrc));
|
||||
|
||||
// A url change — the SSE `upload-processed` swapping the original for a real preview is
|
||||
// the common one — deserves a clean attempt rather than inheriting the old verdict.
|
||||
$effect(() => {
|
||||
void mediaSrc;
|
||||
void posterSrc;
|
||||
mediaRetryNonce = 0;
|
||||
mediaFailed = false;
|
||||
});
|
||||
|
||||
function handleMediaError() {
|
||||
if (mediaRetryNonce) {
|
||||
mediaFailed = true;
|
||||
return;
|
||||
}
|
||||
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
|
||||
mediaRetryTimer = setTimeout(() => {
|
||||
mediaRetryTimer = null;
|
||||
mediaRetryNonce = Date.now();
|
||||
}, MEDIA_RETRY_MS);
|
||||
}
|
||||
|
||||
function relativeTime(iso: string, nowMs: number): string {
|
||||
const diff = nowMs - new Date(iso).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
@@ -61,6 +108,7 @@
|
||||
// card mid-animation) so it can't fire against a stale component.
|
||||
onDestroy(() => {
|
||||
if (burstTimer) clearTimeout(burstTimer);
|
||||
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -124,13 +172,14 @@
|
||||
<HeartBurst active={heartBurst} />
|
||||
{#if isVideo(upload.mime_type)}
|
||||
<div class="relative aspect-video w-full bg-gray-900">
|
||||
{#if upload.thumbnail_url || upload.preview_url}
|
||||
{#if posterSrc && !mediaFailed}
|
||||
<img
|
||||
src={upload.thumbnail_url ?? upload.preview_url ?? ''}
|
||||
src={displaySrc}
|
||||
alt=""
|
||||
class="h-full w-full object-cover opacity-80"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onerror={handleMediaError}
|
||||
/>
|
||||
{/if}
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
@@ -143,17 +192,18 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else if mediaSrc}
|
||||
{:else if mediaSrc && !mediaFailed}
|
||||
<!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
|
||||
to height 0 and reflow as images stream in. The uncropped original is one
|
||||
tap away in the lightbox. -->
|
||||
<div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
|
||||
<img
|
||||
src={mediaSrc}
|
||||
src={displaySrc}
|
||||
alt=""
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onerror={handleMediaError}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -209,6 +259,7 @@
|
||||
{#if $commentsEnabled}
|
||||
<button
|
||||
onclick={() => oncomment(upload.id)}
|
||||
aria-label="Kommentare anzeigen"
|
||||
class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 active:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 dark:active:text-blue-400"
|
||||
>
|
||||
<svg
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import { onDestroy, tick } from 'svelte';
|
||||
import { beforeNavigate } from '$app/navigation';
|
||||
import type { FeedUpload } from '$lib/types';
|
||||
import { api } from '$lib/api';
|
||||
import { onSseEvent } from '$lib/sse';
|
||||
@@ -14,6 +15,7 @@
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import { commentsEnabled } from '$lib/event-config-store';
|
||||
import HeartBurst from './HeartBurst.svelte';
|
||||
import ConfirmSheet from './ConfirmSheet.svelte';
|
||||
|
||||
const COMMENT_MAX = 500;
|
||||
|
||||
@@ -30,9 +32,41 @@
|
||||
upload: FeedUpload;
|
||||
onclose: () => void;
|
||||
onlike: (id: string) => void;
|
||||
/** Whether a previous/next item exists in the caller's list. Controls the chevrons. */
|
||||
hasPrev?: boolean;
|
||||
hasNext?: boolean;
|
||||
onprev?: () => void;
|
||||
onnext?: () => void;
|
||||
}
|
||||
|
||||
let { upload, onclose, onlike }: Props = $props();
|
||||
let {
|
||||
upload,
|
||||
onclose,
|
||||
onlike,
|
||||
hasPrev = false,
|
||||
hasNext = false,
|
||||
onprev,
|
||||
onnext
|
||||
}: Props = $props();
|
||||
|
||||
// The system back gesture must close the photo, not leave the app.
|
||||
//
|
||||
// On a phone, back is how you dismiss a full-screen view — but this modal is component
|
||||
// state, not a route, so back navigated away from /feed entirely and the guest lost their
|
||||
// scroll position. Since the modal is only mounted while open, this subscription is
|
||||
// active exactly while it is open (Svelte tears it down on destroy).
|
||||
//
|
||||
// Cancelling a popstate navigation is explicitly supported: SvelteKit counteracts it with
|
||||
// `history.go`, restoring the entry we just left (see its client runtime, "if a
|
||||
// popstate-driven navigation is cancelled"). So the URL stays put and the photo closes.
|
||||
// Only `popstate` is intercepted — an in-app link or a programmatic `goto` should still
|
||||
// navigate, closing the modal with the page.
|
||||
beforeNavigate((nav) => {
|
||||
if (nav.type === 'popstate') {
|
||||
nav.cancel();
|
||||
onclose();
|
||||
}
|
||||
});
|
||||
|
||||
let comments = $state<CommentDto[]>([]);
|
||||
let newComment = $state('');
|
||||
@@ -56,6 +90,115 @@
|
||||
: pickMediaUrl($dataMode, upload)
|
||||
);
|
||||
|
||||
// ── Prev / next ──────────────────────────────────────────────────────────────────
|
||||
//
|
||||
// Until now the only way out of a photo was to close the modal, so browsing hundreds
|
||||
// of party photos meant open-close-open-close all evening — while FEATURES.md and
|
||||
// USER_JOURNEYS §8.6/§17 both promised swipe navigation. Three affordances, because
|
||||
// each covers a different user: on-screen chevrons are the discoverable baseline (a
|
||||
// swipe nobody knows about is not a feature), arrow keys for the projector laptop,
|
||||
// swipe for the phone in one hand.
|
||||
let prevBtn = $state<HTMLButtonElement | undefined>();
|
||||
let nextBtn = $state<HTMLButtonElement | undefined>();
|
||||
let closeBtn = $state<HTMLButtonElement | undefined>();
|
||||
|
||||
async function step(dir: -1 | 1) {
|
||||
if (dir === -1) {
|
||||
if (!hasPrev) return;
|
||||
onprev?.();
|
||||
} else {
|
||||
if (!hasNext) return;
|
||||
onnext?.();
|
||||
}
|
||||
// Stepping onto the first/last item removes the chevron that was just used. A
|
||||
// focused node disappearing drops focus to <body> — outside `focusTrap`'s node — so
|
||||
// the next Tab would leave for the browser chrome instead of cycling the modal.
|
||||
// Hand focus to whichever control survived.
|
||||
await tick();
|
||||
if (document.activeElement === document.body) {
|
||||
const fallback = dir === -1 ? nextBtn : prevBtn;
|
||||
(fallback ?? closeBtn)?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
|
||||
// Never hijack caret movement inside the comment composer.
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
|
||||
e.preventDefault();
|
||||
void step(e.key === 'ArrowLeft' ? -1 : 1);
|
||||
}
|
||||
|
||||
// Swipe. Bound to the media wrapper rather than the whole modal so it cannot fight the
|
||||
// comment list's vertical scroll, and read on touchend rather than continuously so the
|
||||
// browser keeps ownership of the gesture until we know it was horizontal.
|
||||
const SWIPE_MIN_PX = 50;
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
let touchTracking = false;
|
||||
|
||||
function onTouchStart(e: TouchEvent) {
|
||||
// A second finger means pinch-zoom, which must not turn into a page change.
|
||||
touchTracking = e.touches.length === 1;
|
||||
if (!touchTracking) return;
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchStartY = e.touches[0].clientY;
|
||||
}
|
||||
|
||||
function onTouchEnd(e: TouchEvent) {
|
||||
if (!touchTracking) return;
|
||||
touchTracking = false;
|
||||
const t = e.changedTouches[0];
|
||||
if (!t) return;
|
||||
const dx = t.clientX - touchStartX;
|
||||
const dy = t.clientY - touchStartY;
|
||||
// Require a decisively HORIZONTAL gesture: the modal body scrolls vertically, so a
|
||||
// diagonal drag must not steal a photo change from someone who meant to scroll.
|
||||
if (Math.abs(dx) < SWIPE_MIN_PX || Math.abs(dx) < Math.abs(dy) * 1.5) return;
|
||||
void step(dx < 0 ? 1 : -1);
|
||||
}
|
||||
|
||||
// ── Media fallback ───────────────────────────────────────────────────────────────
|
||||
//
|
||||
// A failed <img> used to render as an empty black box with `alt=""` — no icon, no
|
||||
// message, nothing to tap. And the failure is common rather than exotic: `pickMediaUrl`
|
||||
// falls back to `/original` whenever preview AND thumbnail are still null, i.e. for
|
||||
// everything still compressing, which in a newest-first feed is the top of the list
|
||||
// during every burst. That also makes the cause usually TRANSIENT, so one delayed retry
|
||||
// of the same URL recovers most of them; the nonce is there because the browser would
|
||||
// otherwise replay its cached failure rather than re-request.
|
||||
const MEDIA_RETRY_MS = 4000;
|
||||
let mediaRetryNonce = $state(0);
|
||||
let mediaFailed = $state(false);
|
||||
let mediaRetryTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const displaySrc = $derived(
|
||||
mediaRetryNonce
|
||||
? `${mediaSrc}${mediaSrc.includes('?') ? '&' : '?'}r=${mediaRetryNonce}`
|
||||
: mediaSrc
|
||||
);
|
||||
|
||||
// A different photo — or the same one after `upload-processed` swapped the original for
|
||||
// a real preview — deserves a clean attempt rather than inheriting the old verdict.
|
||||
$effect(() => {
|
||||
void mediaSrc;
|
||||
mediaRetryNonce = 0;
|
||||
mediaFailed = false;
|
||||
});
|
||||
|
||||
function handleMediaError() {
|
||||
if (mediaRetryNonce) {
|
||||
mediaFailed = true;
|
||||
return;
|
||||
}
|
||||
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
|
||||
mediaRetryTimer = setTimeout(() => {
|
||||
mediaRetryTimer = null;
|
||||
mediaRetryNonce = Date.now();
|
||||
}, MEDIA_RETRY_MS);
|
||||
}
|
||||
|
||||
function triggerHeartBurst() {
|
||||
heartBurst = true;
|
||||
vibrate(10);
|
||||
@@ -90,6 +233,7 @@
|
||||
|
||||
onDestroy(() => {
|
||||
if (burstTimer) clearTimeout(burstTimer);
|
||||
if (mediaRetryTimer) clearTimeout(mediaRetryTimer);
|
||||
unsubCommentDeleted();
|
||||
unsubNewComment();
|
||||
});
|
||||
@@ -128,16 +272,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* `asHost` routes to the moderation endpoint. The guest route only ever deletes the
|
||||
* caller's OWN comment, and it refuses a banned author outright — so without this a
|
||||
* host who banned an abusive guest was left with the abuse still on screen and no way
|
||||
* to remove it, since the ban itself blocks the author's own delete.
|
||||
*/
|
||||
async function deleteComment(id: string, asHost: boolean) {
|
||||
// Comment deletion is permanent and had NO confirmation at all — from a ~14px ✕ glyph
|
||||
// sitting a few pixels from the comment text, which a host could also use on someone
|
||||
// else's words. Deleting a POST two components away has always gone through ConfirmSheet;
|
||||
// this is the same irreversible act and now takes the same route.
|
||||
// `asHost` routes to the moderation endpoint: the guest route only ever deletes the
|
||||
// caller's OWN comment, and it refuses a banned author outright — so without it a host
|
||||
// who banned an abusive guest was left with the abuse on screen and no way to remove it,
|
||||
// since the ban itself blocks the author's own delete.
|
||||
let pendingCommentDelete = $state<{ id: string; asHost: boolean } | null>(null);
|
||||
|
||||
async function confirmDeleteComment() {
|
||||
const pending = pendingCommentDelete;
|
||||
if (!pending) return;
|
||||
pendingCommentDelete = null;
|
||||
try {
|
||||
await api.delete(asHost ? `/host/comment/${id}` : `/comment/${id}`);
|
||||
comments = comments.filter((c) => c.id !== id);
|
||||
await api.delete(pending.asHost ? `/host/comment/${pending.id}` : `/comment/${pending.id}`);
|
||||
comments = comments.filter((c) => c.id !== pending.id);
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
@@ -157,6 +308,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
|
||||
role="dialog"
|
||||
@@ -166,12 +319,26 @@
|
||||
use:scrollLock
|
||||
use:modalInert
|
||||
>
|
||||
<!-- Backdrop — real <button> so keyboard / switch-control users get parity, matching
|
||||
ContextSheet / ConfirmSheet / UploadSheet. The lightbox was the one overlay in the app
|
||||
that did NOT close on an outside tap, which is why it felt broken: every other sheet
|
||||
does. `tabindex="-1"` keeps it out of the tab order, so it adds no stop in front of the
|
||||
photo; Escape still closes via `focusTrap` and the labelled ✕ stays the keyboard route.
|
||||
It sits behind the content, which is `relative` for exactly that reason. -->
|
||||
<button
|
||||
type="button"
|
||||
class="absolute inset-0 cursor-default"
|
||||
onclick={onclose}
|
||||
tabindex="-1"
|
||||
aria-label="Schließen"
|
||||
></button>
|
||||
<div
|
||||
class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900"
|
||||
class="relative flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900"
|
||||
>
|
||||
<!-- Media -->
|
||||
<div class="relative bg-black">
|
||||
<button
|
||||
bind:this={closeBtn}
|
||||
onclick={onclose}
|
||||
aria-label="Schließen"
|
||||
class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
|
||||
@@ -185,7 +352,59 @@
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="relative" use:doubletap ondoubletap={triggerHeartBurst}>
|
||||
|
||||
<!-- Chevrons sit OUTSIDE the doubletap wrapper below, so tapping one can never be
|
||||
read as half of a double-tap and fire a like on the photo you are leaving. -->
|
||||
{#if hasPrev}
|
||||
<button
|
||||
bind:this={prevBtn}
|
||||
type="button"
|
||||
onclick={() => void step(-1)}
|
||||
aria-label="Vorheriges Foto"
|
||||
class="absolute left-2 top-1/2 z-10 inline-flex min-h-11 min-w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15.75 19.5 8.25 12l7.5-7.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
{#if hasNext}
|
||||
<button
|
||||
bind:this={nextBtn}
|
||||
type="button"
|
||||
onclick={() => void step(1)}
|
||||
aria-label="Nächstes Foto"
|
||||
class="absolute right-2 top-1/2 z-10 inline-flex min-h-11 min-w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8.25 4.5l7.5 7.5-7.5 7.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- `role="group"` is here for the touch handlers, not for semantics: swipe is a
|
||||
redundant shortcut for the labelled chevrons above and the arrow keys, so
|
||||
assistive tech loses nothing by treating this as a plain grouping. -->
|
||||
<div
|
||||
class="relative"
|
||||
role="group"
|
||||
aria-label="Foto – wischen zum Blättern"
|
||||
use:doubletap
|
||||
ondoubletap={triggerHeartBurst}
|
||||
ontouchstart={onTouchStart}
|
||||
ontouchend={onTouchEnd}
|
||||
ontouchcancel={() => (touchTracking = false)}
|
||||
>
|
||||
{#if isVideo(upload.mime_type)}
|
||||
<video
|
||||
src={mediaSrc}
|
||||
@@ -195,12 +414,29 @@
|
||||
class="max-h-[60vh] w-full object-contain"
|
||||
poster={upload.thumbnail_url ?? undefined}
|
||||
></video>
|
||||
{:else if mediaFailed}
|
||||
<!-- Both attempts failed. Anything is better than the empty black box this used
|
||||
to leave behind, which read as a broken app rather than a missing file. -->
|
||||
<div
|
||||
class="flex h-[40vh] flex-col items-center justify-center gap-2 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-sm">Bild konnte nicht geladen werden.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<img
|
||||
src={mediaSrc}
|
||||
src={displaySrc}
|
||||
alt=""
|
||||
class="max-h-[60vh] w-full object-contain select-none"
|
||||
class="max-h-[60vh] w-full select-none object-contain"
|
||||
draggable="false"
|
||||
onerror={handleMediaError}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -211,18 +447,20 @@
|
||||
<!-- Info + Comments -->
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<div class="border-b border-gray-100 p-3 dark:border-gray-800">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100"
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<!-- `min-w-0` + `truncate`: without them a long display name (guests type their
|
||||
own) is unshrinkable and pushes the like button off the right edge. -->
|
||||
<div class="flex min-w-0 items-baseline gap-2">
|
||||
<span id="lightbox-title" class="truncate font-medium text-gray-900 dark:text-gray-100"
|
||||
>{upload.uploader_name}</span
|
||||
>
|
||||
<span class="ml-2 text-xs text-gray-400 dark:text-gray-500"
|
||||
<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500"
|
||||
>{formatTime(upload.created_at)}</span
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
onclick={() => onlike(upload.id)}
|
||||
class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {upload.liked_by_me
|
||||
class="flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {upload.liked_by_me
|
||||
? 'bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}"
|
||||
>
|
||||
@@ -269,22 +507,32 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if comment.user_id === userId || $isStaff}
|
||||
<!-- A trash glyph, not a ✕ (which reads as "dismiss"), and a real 44px tap
|
||||
target: the old 14px icon sat ~4px from the comment text, so a thumb
|
||||
aiming at the text destroyed the comment instead. -->
|
||||
<button
|
||||
onclick={() => deleteComment(comment.id, comment.user_id !== userId)}
|
||||
class="shrink-0 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
|
||||
aria-label={comment.user_id === userId ? 'Löschen' : 'Kommentar entfernen'}
|
||||
type="button"
|
||||
onclick={() =>
|
||||
(pendingCommentDelete = {
|
||||
id: comment.id,
|
||||
asHost: comment.user_id !== userId
|
||||
})}
|
||||
class="-m-1.5 inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
|
||||
aria-label={comment.user_id === userId
|
||||
? 'Kommentar löschen'
|
||||
: 'Kommentar entfernen'}
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -335,3 +583,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Same branded confirmation the post-delete flow uses. -->
|
||||
<ConfirmSheet
|
||||
open={pendingCommentDelete !== null}
|
||||
title={pendingCommentDelete?.asHost ? 'Kommentar entfernen?' : 'Kommentar löschen?'}
|
||||
message={pendingCommentDelete?.asHost
|
||||
? 'Der Kommentar verschwindet für alle Gäste. Diese Aktion kann nicht rückgängig gemacht werden.'
|
||||
: 'Diese Aktion kann nicht rückgängig gemacht werden.'}
|
||||
confirmLabel={pendingCommentDelete?.asHost ? 'Entfernen' : 'Löschen'}
|
||||
tone="danger"
|
||||
onConfirm={confirmDeleteComment}
|
||||
onCancel={() => (pendingCommentDelete = null)}
|
||||
/>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
import { get } from 'svelte/store';
|
||||
import { browser } from '$app/environment';
|
||||
import type { FeedUpload } from '$lib/types';
|
||||
import { dataMode } from '$lib/data-mode-store';
|
||||
import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
|
||||
import { commentsEnabled } from '$lib/event-config-store';
|
||||
import { longpress } from '$lib/actions/longpress';
|
||||
import FeedListCard from './FeedListCard.svelte';
|
||||
@@ -62,12 +62,74 @@
|
||||
return mime.startsWith('video/');
|
||||
}
|
||||
|
||||
// Grid tiles always use the small thumbnail — full media is one tap away in the
|
||||
// lightbox where the data-mode picker decides for real.
|
||||
// Grid tiles prefer the SMALLEST derivative — three across, so a thumbnail is plenty and
|
||||
// the full file is one tap away in the lightbox.
|
||||
//
|
||||
// Everything past that preference defers to `pickMediaUrl`, the centralised rule the card
|
||||
// and the lightbox already follow (saver → preview → thumbnail → original). This used to
|
||||
// return '' when no derivative existed yet, which rendered the grey "broken image" tile
|
||||
// for every upload still in the compression queue. Because the feed is newest-first, that
|
||||
// was precisely the top of the grid during a burst — the photos people had just taken —
|
||||
// while the same items opened fine in the lightbox, which has always had the fallback.
|
||||
// An upload with no derivatives is a TRANSIENT state (SSE `upload-processed` swaps in the
|
||||
// preview as soon as the worker finishes), so the original is only ever fetched for the
|
||||
// short window before compression catches up.
|
||||
function tileUrl(upload: FeedUpload): string {
|
||||
if (upload.thumbnail_url) return upload.thumbnail_url;
|
||||
if (upload.preview_url) return upload.preview_url;
|
||||
return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
|
||||
// VIDEOS: a poster image or nothing. `pickMediaUrl` is deliberately mime-agnostic and
|
||||
// bottoms out at `/original` — for a video that is the raw MP4, and this is an <img>.
|
||||
// Videos also never get a `preview_url` (compression.rs gives them a thumbnail only,
|
||||
// and only when a poster frame was actually extracted), so falling through would put a
|
||||
// multi-hundred-MB file behind three broken-image tiles per row. Returning '' keeps the
|
||||
// `{#if tileUrl(...)}` guard meaningful and leaves the play icon on its own. This is the
|
||||
// same carve-out LightboxModal documents for the same reason.
|
||||
if (isVideo(upload.mime_type)) return upload.thumbnail_url ?? '';
|
||||
if ($dataMode === 'saver' && upload.thumbnail_url) return upload.thumbnail_url;
|
||||
return pickMediaUrl($dataMode, upload);
|
||||
}
|
||||
|
||||
// ── Tile media fallback ──────────────────────────────────────────────────────────
|
||||
//
|
||||
// A tile whose <img> 404s used to render as an empty grey box with `alt=""` — no icon,
|
||||
// no message, nothing to tap. And it is not an exotic case: `tileUrl` bottoms out at
|
||||
// `/original` while an upload is still compressing, which in a newest-first grid is the
|
||||
// top-left corner during every burst. That also makes the cause usually TRANSIENT, so
|
||||
// one delayed retry recovers most of them; the nonce is required because the browser
|
||||
// would otherwise replay its cached failure instead of re-requesting.
|
||||
//
|
||||
// Keyed by upload id rather than per-<img>, because the virtualizer recycles rows: a
|
||||
// tile that scrolls out and back must not restart the whole dance, and must not lose a
|
||||
// verdict we already reached. The recorded `url` is what makes that safe to keep — an
|
||||
// `upload-processed` that swaps the original for a real preview is a DIFFERENT url and
|
||||
// gets a clean attempt.
|
||||
const MEDIA_RETRY_MS = 4000;
|
||||
type TileError = { url: string; phase: 'retrying' | 'failed'; nonce: number };
|
||||
let tileErrors = $state<Record<string, TileError>>({});
|
||||
|
||||
function tileSrc(upload: FeedUpload): string {
|
||||
const base = tileUrl(upload);
|
||||
if (!base) return '';
|
||||
const e = tileErrors[upload.id];
|
||||
if (!e || e.url !== base) return base;
|
||||
if (e.phase === 'failed') return '';
|
||||
return e.nonce ? `${base}${base.includes('?') ? '&' : '?'}r=${e.nonce}` : base;
|
||||
}
|
||||
|
||||
function handleTileError(upload: FeedUpload) {
|
||||
const base = tileUrl(upload);
|
||||
if (!base) return;
|
||||
const e = tileErrors[upload.id];
|
||||
if (e && e.url === base) {
|
||||
// The retry failed too — show the placeholder rather than a blank tile.
|
||||
tileErrors[upload.id] = { ...e, phase: 'failed' };
|
||||
return;
|
||||
}
|
||||
tileErrors[upload.id] = { url: base, phase: 'retrying', nonce: 0 };
|
||||
setTimeout(() => {
|
||||
const cur = tileErrors[upload.id];
|
||||
if (cur && cur.url === base && cur.phase === 'retrying') {
|
||||
tileErrors[upload.id] = { ...cur, nonce: Date.now() };
|
||||
}
|
||||
}, MEDIA_RETRY_MS);
|
||||
}
|
||||
|
||||
// STABLE option callbacks — created once, never swapped. They read the live
|
||||
@@ -208,13 +270,14 @@
|
||||
>
|
||||
{#if isVideo(upload.mime_type)}
|
||||
<div class="flex h-full items-center justify-center bg-gray-800">
|
||||
{#if tileUrl(upload)}
|
||||
{#if tileSrc(upload)}
|
||||
<img
|
||||
src={tileUrl(upload)}
|
||||
src={tileSrc(upload)}
|
||||
alt=""
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onerror={() => handleTileError(upload)}
|
||||
/>
|
||||
{/if}
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
@@ -227,13 +290,14 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{:else if tileUrl(upload)}
|
||||
{:else if tileSrc(upload)}
|
||||
<img
|
||||
src={tileUrl(upload)}
|
||||
src={tileSrc(upload)}
|
||||
alt=""
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onerror={() => handleTileError(upload)}
|
||||
/>
|
||||
{:else}
|
||||
<div class="flex h-full items-center justify-center text-gray-400">
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
* paint the right colours before the JS bundle loads (no flash of the default palette).
|
||||
*/
|
||||
import { writable } from 'svelte/store';
|
||||
import { api } from './api';
|
||||
import { buildPaletteCss, applyPaletteCss, type ThemeConfig } from './theme/palette';
|
||||
|
||||
export const PALETTE_CACHE_KEY = 'eventsnap_palette_css';
|
||||
@@ -23,12 +24,24 @@ export const eventConfig = writable<EventConfig | null>(null);
|
||||
/** Convenience flag for the comment UI. Optimistic `true` until /event resolves. */
|
||||
export const commentsEnabled = writable<boolean>(true);
|
||||
|
||||
type PublicEventDto = {
|
||||
name: string;
|
||||
slug: string;
|
||||
comments_enabled?: boolean;
|
||||
theme_preset?: string;
|
||||
theme_primary?: string;
|
||||
theme_accent?: string;
|
||||
};
|
||||
|
||||
/** Fetch /event, apply the theme, and cache the resolved CSS for the next boot. */
|
||||
export async function loadEventConfig(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch('/api/v1/event');
|
||||
if (!res.ok) return;
|
||||
const b = await res.json();
|
||||
// Through `api` rather than a bare `fetch`: this was the ONE request in the app with
|
||||
// no AbortController deadline. On a congested venue WiFi a socket that never answers
|
||||
// left the promise pending indefinitely, so the palette never reconciled with the
|
||||
// server — and since `event-updated` re-calls this, those zombie requests stack up.
|
||||
// `api` aborts at 20s and turns it into an ApiError the catch below already handles.
|
||||
const b = await api.get<PublicEventDto>('/event');
|
||||
const theme: ThemeConfig = {
|
||||
preset: b.theme_preset ?? 'champagne-gold',
|
||||
primary: b.theme_primary ?? '#8a6a2b',
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { filterUploads, type FeedFilter } from './feed-filter';
|
||||
|
||||
// filterUploads only reads `caption` and `uploader_name`, so a partial shape suffices.
|
||||
const u = (id: string, uploader_name: string, caption: string | null) =>
|
||||
({ id, uploader_name, caption }) as any;
|
||||
|
||||
const uploads = [
|
||||
u('1', 'Alice', 'pic #wedding'),
|
||||
u('2', 'Bob', 'party #party'),
|
||||
u('3', 'Alice', 'more #wedding #party'),
|
||||
u('4', 'Carol', 'no tags here'),
|
||||
u('5', 'Bob', null) // no caption
|
||||
];
|
||||
|
||||
const ids = (r: any[]) => r.map((x) => x.id);
|
||||
const tag = (value: string): FeedFilter => ({ type: 'tag', value });
|
||||
const user = (value: string): FeedFilter => ({ type: 'user', value });
|
||||
|
||||
describe('filterUploads', () => {
|
||||
it('no filters → returns all uploads unchanged', () => {
|
||||
expect(filterUploads(uploads, [])).toBe(uploads);
|
||||
});
|
||||
|
||||
it('a single tag matches uploads whose caption contains it', () => {
|
||||
expect(ids(filterUploads(uploads, [tag('wedding')]))).toEqual(['1', '3']);
|
||||
});
|
||||
|
||||
it('two tags combine with OR', () => {
|
||||
expect(ids(filterUploads(uploads, [tag('wedding'), tag('party')]))).toEqual(['1', '2', '3']);
|
||||
});
|
||||
|
||||
it('a single user matches only that uploader', () => {
|
||||
expect(ids(filterUploads(uploads, [user('Alice')]))).toEqual(['1', '3']);
|
||||
});
|
||||
|
||||
it('two users combine with OR', () => {
|
||||
expect(ids(filterUploads(uploads, [user('Alice'), user('Bob')]))).toEqual(['1', '2', '3', '5']);
|
||||
});
|
||||
|
||||
it('a user chip and a tag chip combine with AND', () => {
|
||||
// Alice AND #wedding → only Alice's wedding uploads (not Bob's #wedding, not Alice's #party-only)
|
||||
expect(ids(filterUploads(uploads, [user('Alice'), tag('wedding')]))).toEqual(['1', '3']);
|
||||
});
|
||||
|
||||
it('AND excludes an uploader-match that lacks the tag', () => {
|
||||
// Bob AND #wedding → none (Bob has #party and a null caption, no #wedding)
|
||||
expect(filterUploads(uploads, [user('Bob'), tag('wedding')])).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('tag matching is case-insensitive against the caption', () => {
|
||||
expect(filterUploads([u('9', 'X', 'PIC #WeDDing')], [tag('wedding')])).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('a null caption never matches a tag but can match a user', () => {
|
||||
expect(filterUploads([u('5', 'Bob', null)], [tag('party')])).toHaveLength(0);
|
||||
expect(filterUploads([u('5', 'Bob', null)], [user('Bob')])).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
// Grid-view feed filtering. Extracted from feed/+page.svelte so the OR/AND
|
||||
// combination rules are unit-testable without mounting the page.
|
||||
|
||||
import type { FeedUpload } from './types';
|
||||
|
||||
export interface FeedFilter {
|
||||
type: 'tag' | 'user';
|
||||
value: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the active grid filters to a list of uploads.
|
||||
*
|
||||
* Combination rules (mirroring the chip UI):
|
||||
* - Tags combine with **OR**: a card passes the tag group if its caption contains
|
||||
* ANY selected `#tag`.
|
||||
* - Users combine with **OR** within the user group (uploader is one of the
|
||||
* selected names).
|
||||
* - The tag group and the user group combine with **AND**: a card must satisfy
|
||||
* both groups. An empty group is a pass-through.
|
||||
*
|
||||
* Tags are matched against the caption text (the autocomplete source), so `value`
|
||||
* is expected lowercase (as produced by the tag suggestions).
|
||||
*/
|
||||
export function filterUploads(uploads: FeedUpload[], filters: FeedFilter[]): FeedUpload[] {
|
||||
if (filters.length === 0) return uploads;
|
||||
const tags = filters.filter((f) => f.type === 'tag').map((f) => f.value);
|
||||
const users = filters.filter((f) => f.type === 'user').map((f) => f.value);
|
||||
return uploads.filter((u) => {
|
||||
const cap = (u.caption ?? '').toLowerCase();
|
||||
const passTag = !tags.length || tags.some((t) => cap.includes('#' + t));
|
||||
const passUser = !users.length || users.includes(u.uploader_name);
|
||||
return passTag && passUser;
|
||||
});
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
import { writable } from 'svelte/store';
|
||||
import { api } from './api';
|
||||
import { onClearAuth } from './auth';
|
||||
|
||||
export interface QuotaSnapshot {
|
||||
enabled: boolean;
|
||||
@@ -26,6 +27,12 @@ const empty: QuotaSnapshot = {
|
||||
|
||||
export const quotaStore = writable<QuotaSnapshot>(empty);
|
||||
|
||||
// Reset on logout, the same way role-store / ban-store / upload-queue do. A phone handed
|
||||
// round a party is one browser profile: `goto()` is a client-side navigation, so no module
|
||||
// re-imports and no `onMount` re-runs, and without this the next guest saw the PREVIOUS
|
||||
// guest's storage usage — their data, on their screen — until the first refresh landed.
|
||||
onClearAuth(() => quotaStore.set(empty));
|
||||
|
||||
/** Refresh from the server. Swallows errors so a transient network blip doesn't
|
||||
* break the account page; the previous snapshot just stays in place. */
|
||||
export async function refreshQuota(): Promise<void> {
|
||||
|
||||
@@ -27,6 +27,27 @@ const handlers: Map<string, EventHandler[]> = new Map();
|
||||
let reconnectAttempt = 0;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
/**
|
||||
* True once a stream has opened at least once this session. Distinguishes "first
|
||||
* connect" from "reconnect" now that `lastEventTime` is seeded at ticket-mint rather
|
||||
* than in `onopen` (see `connectSse`) — without it every boot would fire a pointless
|
||||
* zero-width delta.
|
||||
*/
|
||||
let streamEverOpened = false;
|
||||
|
||||
/**
|
||||
* `Date.now()` of the last thing we actually received on the live stream.
|
||||
*
|
||||
* Keep-alives are deliberately NOT observable here: the backend sends them as SSE
|
||||
* COMMENTS (`KeepAlive::new().text("ping")` emits `:ping`), and the EventSource parser
|
||||
* discards comments without dispatching anything at all. There is no browser API that
|
||||
* exposes them. So liveness cannot be decided by a plain silence timer — it could not
|
||||
* tell a dead socket from a genuinely quiet half hour, and would churn reconnects for
|
||||
* every guest through every lull. The backstop poll below decides it on evidence
|
||||
* instead: the server had news that this stream never delivered.
|
||||
*/
|
||||
let lastStreamActivity = 0;
|
||||
|
||||
/**
|
||||
* SSE event names emitted by the backend. Add new ones here as `state.sse_tx.send`
|
||||
* call sites grow — every entry becomes a relay registration below.
|
||||
@@ -91,29 +112,40 @@ export function connectSse(): void {
|
||||
scheduleReconnect();
|
||||
return;
|
||||
}
|
||||
// Auth flow may have torn things down while we were awaiting the ticket.
|
||||
if (!getToken() || eventSource) return;
|
||||
// Seed the reconnect cursor the moment we have a server clock — NOT in `onopen`,
|
||||
// which is where it used to live. `onopen` never fires behind a captive portal or
|
||||
// any proxy that buffers `text/event-stream`, so on exactly the networks where the
|
||||
// stream fails the cursor stayed `null` forever and the backstop poll below had no
|
||||
// `since` to fetch from. Still the server clock and never `new Date()`: a skewed
|
||||
// browser clock would shift the window and silently drop uploads.
|
||||
if (!lastEventTime) lastEventTime = serverTime;
|
||||
|
||||
// Auth flow may have torn things down while we were awaiting the ticket — and the
|
||||
// phone may have gone to sleep during that round-trip. Opening a stream while
|
||||
// hidden is worse than not opening one: iOS reaps a backgrounded socket without
|
||||
// ever firing `onerror`, so `eventSource` stays non-null and the guard at the top
|
||||
// of this function then treats the corpse as a live connection for the rest of the
|
||||
// evening. The visibility handler reconnects us when the screen comes back.
|
||||
if (!getToken() || eventSource || (typeof document !== 'undefined' && document.hidden)) return;
|
||||
|
||||
eventSource = new EventSource(`/api/v1/stream?ticket=${encodeURIComponent(ticket)}`);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
// Successful connection — reset the backoff counter.
|
||||
reconnectAttempt = 0;
|
||||
// If we have a previous timestamp this is a reconnect — fetch the gap. The
|
||||
// delta advances `lastEventTime` from the SERVER clock it returns.
|
||||
const since = lastEventTime;
|
||||
if (since) {
|
||||
void deltaFetchAndFan(since);
|
||||
} else {
|
||||
// First connect: seed the cursor from the server clock at ticket-mint time,
|
||||
// never `new Date()` — a skewed browser clock would otherwise shift the very
|
||||
// first reconnect window and could drop uploads.
|
||||
lastEventTime = serverTime;
|
||||
}
|
||||
noteStreamActivity();
|
||||
// A reconnect has a gap to close; the very first open of a session does not
|
||||
// (the cursor was just seeded from this ticket's server clock). The delta
|
||||
// advances `lastEventTime` from the SERVER clock it returns.
|
||||
if (streamEverOpened && lastEventTime) void deltaFetchAndFan(lastEventTime);
|
||||
streamEverOpened = true;
|
||||
};
|
||||
|
||||
for (const eventName of KNOWN_EVENTS) {
|
||||
eventSource.addEventListener(eventName, (e) => dispatch(eventName, (e as MessageEvent).data));
|
||||
eventSource.addEventListener(eventName, (e) => {
|
||||
noteStreamActivity();
|
||||
dispatch(eventName, (e as MessageEvent).data);
|
||||
});
|
||||
}
|
||||
|
||||
// `resync` is emitted by the server when our broadcast subscription fell
|
||||
@@ -123,6 +155,7 @@ export function connectSse(): void {
|
||||
// own listener — not via `dispatch` — so reading `lastEventTime` as the gap
|
||||
// start isn't clobbered by dispatch bumping it to "now".
|
||||
eventSource.addEventListener('resync', () => {
|
||||
noteStreamActivity();
|
||||
const since = lastEventTime;
|
||||
if (since) void deltaFetchAndFan(since);
|
||||
});
|
||||
@@ -141,7 +174,14 @@ export function connectSse(): void {
|
||||
function scheduleReconnect(): void {
|
||||
reconnectAttempt++;
|
||||
const delay = Math.min(60_000, 1_000 * 2 ** (reconnectAttempt - 1));
|
||||
const jitter = Math.random() * 500;
|
||||
// Jitter must SCALE WITH the backoff, not be a flat 500ms. Every client that dropped
|
||||
// together shares the same `reconnectAttempt`, so they compute an identical `delay` —
|
||||
// a fixed 500ms window spreads 100 phones over half a second no matter how long the
|
||||
// backoff grew, which is the thundering herd the backoff exists to prevent. Each
|
||||
// reconnect costs a ticket POST + stream GET + feed-delta fetch, so the herd lands on
|
||||
// the DB pool three times over. Scaling the jitter to the delay (floored at 1s so the
|
||||
// first, most synchronised retry is spread too) turns that into a smooth ramp.
|
||||
const jitter = Math.random() * Math.max(delay, 1_000);
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
reconnectTimer = setTimeout(connectSse, delay + jitter);
|
||||
}
|
||||
@@ -157,6 +197,91 @@ export function disconnectSse(): void {
|
||||
}
|
||||
}
|
||||
|
||||
function noteStreamActivity(): void {
|
||||
lastStreamActivity = Date.now();
|
||||
}
|
||||
|
||||
// ── Stream backstop ────────────────────────────────────────────────────────────────
|
||||
//
|
||||
// EVERY feed update is triggered by an SSE event — there is no periodic refetch — so a
|
||||
// stream that stops delivering freezes a guest's gallery for the rest of the evening.
|
||||
// And a venue produces exactly the two failures that the reconnect path cannot see:
|
||||
//
|
||||
// • a captive portal or any proxy that buffers `text/event-stream` never forwards a
|
||||
// byte, so `onopen` may never fire and neither does `onerror`;
|
||||
// • a phone that roams between APs leaves a HALF-OPEN socket — the connection is gone
|
||||
// but `readyState` still reads OPEN, no error is raised, and `connectSse` early-
|
||||
// returns on its non-null `eventSource`, so nothing ever reconnects.
|
||||
//
|
||||
// Neither surfaces anything to react to, which is why the only honest backstop is to
|
||||
// ask the server. `/feed/delta` is idempotent and answers with an empty payload when
|
||||
// nothing changed, and one request per 60–120s is ~1/60th of the per-user feed limit —
|
||||
// cheap insurance against a guest staring at a frozen feed all night. The diashow uses
|
||||
// the same reconcile-on-a-timer for the same reason (`RECONCILE_INTERVAL_MS` there).
|
||||
const BACKSTOP_MIN_MS = 60_000;
|
||||
const BACKSTOP_MAX_MS = 120_000;
|
||||
let backstopTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let backstopEnabled = false;
|
||||
|
||||
/**
|
||||
* Start the poll-based liveness/completeness backstop. Opt-in per page (the feed is the
|
||||
* consumer that needs it; the export page's SSE use is a status ping and the diashow
|
||||
* runs its own full reconcile), and idempotent.
|
||||
*/
|
||||
export function startStreamBackstop(): void {
|
||||
if (typeof document === 'undefined' || backstopEnabled) return;
|
||||
backstopEnabled = true;
|
||||
scheduleBackstop();
|
||||
}
|
||||
|
||||
export function stopStreamBackstop(): void {
|
||||
backstopEnabled = false;
|
||||
if (backstopTimer) {
|
||||
clearTimeout(backstopTimer);
|
||||
backstopTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleBackstop(): void {
|
||||
if (backstopTimer) clearTimeout(backstopTimer);
|
||||
// Jittered for the same reason the reconnect backoff is: ~100 phones that joined
|
||||
// within the same few minutes would otherwise poll in permanent lockstep.
|
||||
const delay = BACKSTOP_MIN_MS + Math.random() * (BACKSTOP_MAX_MS - BACKSTOP_MIN_MS);
|
||||
backstopTimer = setTimeout(() => void runBackstop(), delay);
|
||||
}
|
||||
|
||||
async function runBackstop(): Promise<void> {
|
||||
backstopTimer = null;
|
||||
try {
|
||||
// A hidden tab has no stream (the visibility handler closed it) and cannot show a
|
||||
// result anyway; the reopen path already fetches the gap.
|
||||
if (document.hidden || !getToken()) return;
|
||||
// No stream, or one the browser has admitted is closed, while we are visible: there
|
||||
// is no other way back, because `connectSse`'s `eventSource` guard cannot tell a
|
||||
// corpse from a live connection.
|
||||
if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
|
||||
disconnectSse();
|
||||
reconnectAttempt = 0;
|
||||
connectSse();
|
||||
return;
|
||||
}
|
||||
const since = lastEventTime;
|
||||
if (!since) return;
|
||||
const activityBefore = lastStreamActivity;
|
||||
const carried = await deltaFetchAndFan(since);
|
||||
// The server had news that this stream never delivered. That is the evidence a
|
||||
// half-open socket cannot otherwise give us — reconnect, or every remaining update
|
||||
// tonight arrives at poll latency instead of instantly.
|
||||
if (carried && lastStreamActivity === activityBefore) {
|
||||
disconnectSse();
|
||||
reconnectAttempt = 0;
|
||||
connectSse();
|
||||
}
|
||||
} finally {
|
||||
if (backstopEnabled) scheduleBackstop();
|
||||
}
|
||||
}
|
||||
|
||||
export function getLastEventTime(): string | null {
|
||||
return lastEventTime;
|
||||
}
|
||||
@@ -196,14 +321,23 @@ function extractCreatedAt(data: string): string | undefined {
|
||||
* event. Subscribers (typically the feed page) merge the result into their
|
||||
* in-memory list. Swallows errors — a failed delta is non-fatal; the next live
|
||||
* SSE event will keep the feed moving.
|
||||
*
|
||||
* Resolves to whether the delta actually CARRIED something. `runBackstop` uses that as
|
||||
* its liveness signal: content the poll found but the stream never pushed means the
|
||||
* stream is dead in the way the browser will not report.
|
||||
*/
|
||||
async function deltaFetchAndFan(since: string, attempt = 0): Promise<void> {
|
||||
async function deltaFetchAndFan(since: string, attempt = 0): Promise<boolean> {
|
||||
try {
|
||||
const response = await api.get<DeltaResponse>(`/feed/delta?since=${encodeURIComponent(since)}`);
|
||||
// Advance the cursor to the server clock this delta was computed at, so the next
|
||||
// reconnect resumes exactly where the server left off (no browser-clock skew).
|
||||
lastEventTime = response.server_time;
|
||||
dispatch('feed-delta', JSON.stringify(response));
|
||||
return (
|
||||
response.uploads.length > 0 ||
|
||||
response.deleted_ids.length > 0 ||
|
||||
response.hidden_user_ids.length > 0
|
||||
);
|
||||
} catch (e) {
|
||||
// A throttled delta (429) must NOT be silently dropped: live events keep advancing
|
||||
// `lastEventTime`, so the next reconnect would resume PAST this un-fetched gap and
|
||||
@@ -211,10 +345,15 @@ async function deltaFetchAndFan(since: string, attempt = 0): Promise<void> {
|
||||
// covered regardless of how the live cursor moves in the meantime. Bounded, and only
|
||||
// reachable by a rapidly flapping EventSource hitting the per-user delta limit.
|
||||
if (e instanceof ApiError && e.status === 429 && attempt < MAX_DELTA_RETRIES) {
|
||||
const delayMs = DELTA_RETRY_BASE_MS * 2 ** attempt;
|
||||
setTimeout(() => void deltaFetchAndFan(since, attempt + 1), delayMs);
|
||||
// Jittered for the same reason `scheduleReconnect` is: the clients that hit this
|
||||
// 429 are the ones that just reconnected together after a venue-wide wifi blip,
|
||||
// so they share `attempt` and would otherwise retry in lockstep at exactly 2s,
|
||||
// 4s, 8s — re-tripping the same per-user limit in a synchronised wave.
|
||||
const base = DELTA_RETRY_BASE_MS * 2 ** attempt;
|
||||
setTimeout(() => void deltaFetchAndFan(since, attempt + 1), base + Math.random() * base);
|
||||
}
|
||||
// Other errors are non-fatal — the next live SSE event keeps the feed moving.
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,6 +367,12 @@ function handleVisibilityChange() {
|
||||
if (document.hidden) {
|
||||
disconnectSse();
|
||||
} else {
|
||||
// Tear down UNCONDITIONALLY before reconnecting rather than leaning on
|
||||
// `connectSse`'s `eventSource` guard. iOS can reap a backgrounded socket without
|
||||
// ever firing `onerror`, which leaves a non-null but permanently dead EventSource —
|
||||
// and the guard would then read that as "already connected" and never reconnect,
|
||||
// for the rest of the evening. Closing an already-closed EventSource is a no-op.
|
||||
disconnectSse();
|
||||
// User-initiated reconnect — clear backoff so we don't wait out a long
|
||||
// retry delay that was scheduled from a prior background error.
|
||||
reconnectAttempt = 0;
|
||||
|
||||
@@ -67,6 +67,8 @@ export interface MeContextDto {
|
||||
storage_quota_enabled: boolean;
|
||||
uploads_locked: boolean;
|
||||
gallery_released: boolean;
|
||||
/** Read-only ban: the feed and the keepsake stay available, every write is refused. */
|
||||
is_banned: boolean;
|
||||
}
|
||||
|
||||
// mirrors backend/src/handlers/host.rs::PinResetResponse
|
||||
|
||||
@@ -3,7 +3,13 @@
|
||||
import { getToken, getUserId } from '$lib/auth';
|
||||
import { isStaff } from '$lib/role-store';
|
||||
import { api } from '$lib/api';
|
||||
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
|
||||
import {
|
||||
connectSse,
|
||||
disconnectSse,
|
||||
onSseEvent,
|
||||
startStreamBackstop,
|
||||
stopStreamBackstop
|
||||
} from '$lib/sse';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import VirtualFeed from '$lib/components/VirtualFeed.svelte';
|
||||
import HashtagChips from '$lib/components/HashtagChips.svelte';
|
||||
@@ -17,7 +23,6 @@
|
||||
import { toast, toastError } from '$lib/toast-store';
|
||||
import { pullToRefresh } from '$lib/actions/pull-to-refresh';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import { filterUploads } from '$lib/feed-filter';
|
||||
import { refreshEventState } from '$lib/event-state-store';
|
||||
import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
|
||||
|
||||
@@ -27,6 +32,11 @@
|
||||
let nextCursor = $state<string | null>(null);
|
||||
let loadingMore = $state(false);
|
||||
let initialLoading = $state(true);
|
||||
// Set when a load left us with NOTHING to show. Without it the template fell straight
|
||||
// through to "Noch keine Fotos" — so on the venue WiFi the most likely first thing a
|
||||
// guest ever saw was the app confidently telling them the gallery was empty, with no
|
||||
// error, no retry, and nobody around to ask.
|
||||
let loadError = $state(false);
|
||||
let refreshing = $state(false);
|
||||
let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
|
||||
let selectedUpload = $state<FeedUpload | null>(null);
|
||||
@@ -36,6 +46,10 @@
|
||||
let sentinel: HTMLDivElement;
|
||||
let feedObserver: IntersectionObserver | null = null;
|
||||
let inPlaceRefreshTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
// Latest moment the coalescing window below is allowed to push the reconcile to, and
|
||||
// a "an event arrived while hidden" flag — see `scheduleInPlaceRefresh`.
|
||||
let inPlaceRefreshDeadline = 0;
|
||||
let inPlaceRefreshDeferred = false;
|
||||
// `asHost` picks the endpoint AND the copy: removing someone else's photo is a
|
||||
// moderation action, not "delete my post", and it hits the host route.
|
||||
let pendingDelete = $state<{ id: string; asHost: boolean } | null>(null);
|
||||
@@ -49,11 +63,20 @@
|
||||
if (typeof document === 'undefined') return;
|
||||
const prev = document.documentElement.style.overscrollBehaviorY;
|
||||
document.documentElement.style.overscrollBehaviorY = 'contain';
|
||||
document.addEventListener('visibilitychange', handleVisibility);
|
||||
return () => {
|
||||
document.documentElement.style.overscrollBehaviorY = prev;
|
||||
document.removeEventListener('visibilitychange', handleVisibility);
|
||||
};
|
||||
});
|
||||
|
||||
/** Run the reconcile that was deferred while the tab was hidden (see `scheduleInPlaceRefresh`). */
|
||||
function handleVisibility() {
|
||||
if (document.hidden || !inPlaceRefreshDeferred) return;
|
||||
inPlaceRefreshDeferred = false;
|
||||
scheduleInPlaceRefresh();
|
||||
}
|
||||
|
||||
// View mode
|
||||
let viewMode = $state<'list' | 'grid'>('list');
|
||||
|
||||
@@ -132,20 +155,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
|
||||
// ── Autocomplete sources ─────────────────────────────────────────────────
|
||||
// Tags come from the SERVER's hashtag index (`/hashtags`, already loaded for the list
|
||||
// view's chips and ordered by count) — not just the captions of the uploads currently
|
||||
// in memory. Page 1 is 20 items, so deriving tags only from loaded captions meant a tag
|
||||
// used further down the feed was simply absent from the picker until the user happened
|
||||
// to scroll past the photo carrying it. That is the "sometimes I can't select a tag"
|
||||
// case: the tag was never offered, so no amount of typing surfaced it.
|
||||
//
|
||||
// Captions of loaded uploads are unioned in afterwards so a tag from a photo that landed
|
||||
// since the last `/hashtags` refresh is still offered. The regex mirrors the backend rule
|
||||
// exactly — ASCII alphanumerics and `_`, stopping at the first other character (see
|
||||
// backend `models/hashtag.rs::extract_hashtags`) — so both sources agree on what a tag is.
|
||||
let allTags = $derived.by(() => {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local throwaway counter inside a $derived.by; never stored in $state, so no reactivity is involved.
|
||||
const freq = new Map<string, number>();
|
||||
for (const u of uploads) {
|
||||
for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) {
|
||||
const t = m[1].toLowerCase();
|
||||
freq.set(t, (freq.get(t) ?? 0) + 1);
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local dedupe set inside a $derived.by; never stored in $state, so no reactivity is involved.
|
||||
const seen = new Set<string>();
|
||||
const out: string[] = [];
|
||||
const add = (raw: string) => {
|
||||
const t = raw.toLowerCase();
|
||||
if (t && !seen.has(t)) {
|
||||
seen.add(t);
|
||||
out.push(t);
|
||||
}
|
||||
};
|
||||
for (const h of hashtags) add(h.tag);
|
||||
for (const u of uploads) {
|
||||
for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) add(m[1]);
|
||||
}
|
||||
return [...freq.entries()].sort((a, b) => b[1] - a[1]).map(([t]) => t);
|
||||
return out;
|
||||
});
|
||||
|
||||
let allUploaders = $derived([...new Set(uploads.map((u) => u.uploader_name))].sort());
|
||||
// Uploaders come from `/uploaders` for the same reason tags come from `/hashtags`: deriving
|
||||
// them from the uploads currently in memory meant typing a guest's name found nothing
|
||||
// whenever their photos sat below page 1, which reads as "search is broken". The endpoint
|
||||
// reads v_feed, so banned and hidden uploaders are already excluded.
|
||||
let uploaderNames = $state<string[]>([]);
|
||||
let allUploaders = $derived(uploaderNames);
|
||||
|
||||
// The suggestion SOURCE is frozen for as long as the dropdown is open.
|
||||
//
|
||||
@@ -186,31 +231,36 @@
|
||||
...frozenTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t }))
|
||||
];
|
||||
}
|
||||
// Once the user has TYPED, every match is offered — no `.slice()`. The old caps (8 for
|
||||
// a `#` query, 4 tags + 4 users otherwise) silently dropped matches, so a tag that
|
||||
// existed and matched what was typed still could not be selected, with nothing on
|
||||
// screen to say more existed. The dropdown scrolls instead (see `max-h-72` below),
|
||||
// which bounds the UI without bounding the choices.
|
||||
if (q.startsWith('#')) {
|
||||
const prefix = q.slice(1).toLowerCase();
|
||||
return frozenTags
|
||||
.filter((t) => t.startsWith(prefix))
|
||||
.slice(0, 8)
|
||||
.map((t) => ({ type: 'tag' as const, value: t }));
|
||||
}
|
||||
const lower = q.toLowerCase();
|
||||
return [
|
||||
...frozenUploaders
|
||||
.filter((u) => u.toLowerCase().includes(lower))
|
||||
.slice(0, 4)
|
||||
.map((u) => ({ type: 'user' as const, value: u })),
|
||||
...frozenTags
|
||||
.filter((t) => t.includes(lower))
|
||||
.slice(0, 4)
|
||||
.map((t) => ({ type: 'tag' as const, value: t }))
|
||||
];
|
||||
});
|
||||
|
||||
// ── Filtered uploads for grid view ───────────────────────────────────────
|
||||
let displayUploads = $derived.by(() => {
|
||||
if (viewMode === 'list' || activeFilters.length === 0) return uploads;
|
||||
return filterUploads(uploads, activeFilters);
|
||||
});
|
||||
// `uploads` IS the filtered set — the server applied the filters (see `filterParams`), so
|
||||
// there is nothing left to narrow client-side. The previous client-side pass could only
|
||||
// ever see the pages already loaded, so a tag whose photos sat past page 1 rendered a
|
||||
// near-empty grid that looked complete, and it matched a caption SUBSTRING rather than the
|
||||
// tag itself (`#tanz` also matched `#tanzflaeche`) — so list and grid disagreed about the
|
||||
// same chip. Kept as an alias so the template and the infinite-scroll sentinel read the
|
||||
// same way in both views.
|
||||
let displayUploads = $derived(uploads);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// onMount B — auth gate, recovery toast, data load, SSE subscriptions,
|
||||
@@ -243,8 +293,12 @@
|
||||
// state in the same request.
|
||||
void refreshEventState();
|
||||
|
||||
await Promise.all([loadFeed(), loadHashtags()]);
|
||||
await Promise.all([loadFeed(), loadHashtags(), loadUploaders()]);
|
||||
connectSse();
|
||||
// Nothing in this page refetches on a timer — every update path below hangs off an
|
||||
// SSE event. The backstop is what keeps that from meaning "one bad socket and the
|
||||
// gallery is frozen until you force-reload", which is not a thing a guest will do.
|
||||
startStreamBackstop();
|
||||
|
||||
unsubscribers.push(
|
||||
onSseEvent('new-upload', (data) => {
|
||||
@@ -371,6 +425,7 @@
|
||||
|
||||
onDestroy(() => {
|
||||
disconnectSse();
|
||||
stopStreamBackstop();
|
||||
for (const unsub of unsubscribers) unsub();
|
||||
feedObserver?.disconnect();
|
||||
if (inPlaceRefreshTimer) clearTimeout(inPlaceRefreshTimer);
|
||||
@@ -396,64 +451,164 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced page-1 fetch that *merges* (updates existing cards in place, prepends
|
||||
// genuinely new ones) rather than replacing the array — preserves scroll and any
|
||||
// pages already loaded below the fold.
|
||||
// Coalescing window for the SSE-driven reconcile. The old floor was `800 + random*2000`,
|
||||
// which during a burst (a bulk upload fires one `upload-processed` PER FILE) meant
|
||||
// roughly one feed query per client every ~2s. At 100 guests that walks straight into
|
||||
// the backend's 60/min per-user feed limit — and `refreshFeedInPlace`'s bare `catch {}`
|
||||
// swallowed the resulting 429s, so the feed simply stopped updating with nothing on
|
||||
// screen to say why. A reconcile is a background nicety; seconds of latency cost the
|
||||
// guest nothing, while the request budget is the thing that actually runs out.
|
||||
const REFRESH_DEBOUNCE_MS = 8_000;
|
||||
// Spread on top of the floor. A fixed delay would make every client that saw the same
|
||||
// broadcast fetch in the same window — 100 feed queries landing together, on top of the
|
||||
// reconnect burst that often triggered them. The spread makes it a ramp.
|
||||
const REFRESH_SPREAD_MS = 7_000;
|
||||
// Ceiling on the coalescing, so a party that never stops posting still reconciles.
|
||||
const REFRESH_MAX_WAIT_MS = 30_000;
|
||||
// How much of the loaded feed a reconcile re-reads, and at what page size. The server
|
||||
// caps `limit` at 100.
|
||||
const RECONCILE_PAGE = 100;
|
||||
const RECONCILE_MAX_PAGES = 3;
|
||||
|
||||
// Debounced fetch that *merges* (updates existing cards in place, prepends genuinely
|
||||
// new ones) rather than replacing the array — preserves scroll and any pages already
|
||||
// loaded below the fold.
|
||||
function scheduleInPlaceRefresh() {
|
||||
if (inPlaceRefreshTimer) return;
|
||||
// A hidden tab cannot show the result, and iOS clamps its timers into a clump that
|
||||
// all fires at once on wake. Defer to the visibility change, where exactly one runs.
|
||||
if (typeof document !== 'undefined' && document.hidden) {
|
||||
inPlaceRefreshDeferred = true;
|
||||
return;
|
||||
}
|
||||
const nowMs = Date.now();
|
||||
if (!inPlaceRefreshTimer) inPlaceRefreshDeadline = nowMs + REFRESH_MAX_WAIT_MS;
|
||||
// Push the reconcile out again on every further event, so a burst of thirty uploads
|
||||
// costs ONE feed query once it settles rather than one per event — but never past
|
||||
// the deadline above.
|
||||
const delay = Math.min(
|
||||
REFRESH_DEBOUNCE_MS + Math.random() * REFRESH_SPREAD_MS,
|
||||
Math.max(0, inPlaceRefreshDeadline - nowMs)
|
||||
);
|
||||
if (inPlaceRefreshTimer) clearTimeout(inPlaceRefreshTimer);
|
||||
inPlaceRefreshTimer = setTimeout(() => {
|
||||
inPlaceRefreshTimer = null;
|
||||
void refreshFeedInPlace();
|
||||
}, 800);
|
||||
void refreshFeedInPlace().catch(() => {
|
||||
// Background reconcile — quiet by design. The next event, the next visibility
|
||||
// change or a pull-to-refresh retries; if this was a 429 we are already over
|
||||
// budget and retrying immediately is the worst possible response.
|
||||
});
|
||||
}, delay);
|
||||
}
|
||||
|
||||
async function refreshFeedInPlace() {
|
||||
try {
|
||||
/**
|
||||
* Merge the server's current view of the LOADED WINDOW into the in-memory list.
|
||||
*
|
||||
* Reconciling only page 1 (what this used to do) meant like/comment counts on items
|
||||
* 21..N moved solely via live `like-update` / `new-comment` — so for a guest who had
|
||||
* scrolled through a few hundred photos, everything that happened while their phone
|
||||
* was asleep or their stream was down was lost permanently. Paging at the server's
|
||||
* 100 cap and stopping after `RECONCILE_MAX_PAGES` keeps that at 1–3 requests instead
|
||||
* of one per 20 items, which at a party's event rate would be its own little DDoS.
|
||||
*
|
||||
* Throws: callers decide whether the failure is worth showing (the pill's tap is, a
|
||||
* background event is not).
|
||||
*/
|
||||
async function refreshFeedInPlace(): Promise<void> {
|
||||
const base = filterParams();
|
||||
base.set('limit', String(RECONCILE_PAGE));
|
||||
const known = new Set(uploads.map((u) => u.id));
|
||||
// How much of the loaded window we set out to re-read for fresh counts.
|
||||
const windowPages = Math.min(
|
||||
RECONCILE_MAX_PAGES,
|
||||
Math.max(1, Math.ceil(uploads.length / RECONCILE_PAGE))
|
||||
);
|
||||
const fetched: FeedUpload[] = [];
|
||||
let cursor: string | null = null;
|
||||
for (let page = 0; page < RECONCILE_MAX_PAGES; page++) {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
|
||||
const params = new URLSearchParams();
|
||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||
params.set('limit', '20');
|
||||
const params = new URLSearchParams(base);
|
||||
if (cursor) params.set('cursor', cursor);
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
const byId = new Map(res.uploads.map((u) => [u.id, u]));
|
||||
const known = new Set(uploads.map((u) => u.id));
|
||||
uploads = uploads.map((u) => byId.get(u.id) ?? u);
|
||||
const fresh = res.uploads.filter((u) => !known.has(u.id));
|
||||
if (fresh.length) uploads = [...fresh, ...uploads];
|
||||
} catch {
|
||||
// Background refresh — stay quiet, the next event or pull-to-refresh retries.
|
||||
fetched.push(...res.uploads);
|
||||
cursor = res.next_cursor;
|
||||
if (!cursor) break;
|
||||
// Nothing fetched so far overlaps what we hold, so the head we are prepending is
|
||||
// not yet CONTIGUOUS with the old list — there are still unseen uploads in between.
|
||||
// Keep paging until the two reconverge, or the merge would silently leave a hole
|
||||
// in the middle of the feed (the truncated-delta pill is exactly this case: more
|
||||
// than the backend's 200-row delta cap arrived while the guest was away).
|
||||
const bridged = known.size === 0 || fetched.some((u) => known.has(u.id));
|
||||
if (page + 1 >= windowPages && bridged) break;
|
||||
}
|
||||
const byId = new Map(fetched.map((u) => [u.id, u]));
|
||||
uploads = uploads.map((u) => byId.get(u.id) ?? u);
|
||||
const fresh = fetched.filter((u) => !known.has(u.id));
|
||||
if (fresh.length) uploads = [...fresh, ...uploads];
|
||||
}
|
||||
|
||||
/**
|
||||
* The "Neue Beiträge" pill's action. MERGES page 1 into the head of what is already
|
||||
* loaded instead of replacing the array with it.
|
||||
*
|
||||
* Replacing collapsed the virtualizer's total size from however many rows were loaded
|
||||
* (400+ after an evening of scrolling) down to 20, so the browser dropped the reader at
|
||||
* an arbitrary offset in a feed that had just shrunk under them — the exact yank the
|
||||
* pill exists to prevent (see the `feedStale` comment at the top of this file).
|
||||
* `nextCursor` is deliberately left alone for the same reason: the tail below the fold
|
||||
* is still loaded and still paginating from where it was.
|
||||
*/
|
||||
async function refreshStale() {
|
||||
try {
|
||||
await refreshFeedInPlace();
|
||||
feedStale = false;
|
||||
} catch (e) {
|
||||
// Keep the pill up so the tap can be retried. Clearing it before the request (as
|
||||
// this used to) left a guest whose tap failed with no signal AND no control.
|
||||
toastError(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFeed(refresh = false) {
|
||||
// Any full refresh (pill tap, pull-to-refresh, filter change) resyncs page 1,
|
||||
// so the "new posts" pill is no longer relevant — clear it here rather than
|
||||
// only in the pill's own onclick, or a pull-to-refresh leaves it stranded.
|
||||
if (refresh) feedStale = false;
|
||||
try {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
|
||||
const params = new URLSearchParams();
|
||||
const params = filterParams();
|
||||
if (!refresh && nextCursor) params.set('cursor', nextCursor);
|
||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||
params.set('limit', '20');
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
uploads = res.uploads;
|
||||
nextCursor = res.next_cursor;
|
||||
loadError = false;
|
||||
// A full refresh (pull-to-refresh, filter change) has resynced page 1, so the
|
||||
// "new posts" pill is no longer relevant. Cleared only on SUCCESS: clearing it up
|
||||
// front meant a failed pull-to-refresh silently ate the one affordance the guest
|
||||
// had for getting the new photos.
|
||||
if (refresh) feedStale = false;
|
||||
} catch (e) {
|
||||
// Initial / user-triggered refresh is worth surfacing — background SSE refetches are noisier and silenced below.
|
||||
if (!refresh) toastError(e);
|
||||
// Every path through here is user-triggered (first load, pull-to-refresh, filter
|
||||
// change) — silencing the refresh ones, as this used to, made pull-to-refresh fail
|
||||
// completely invisibly.
|
||||
toastError(e);
|
||||
// Only the case where we have nothing left on screen earns the full error view;
|
||||
// a failed refresh over an already-populated feed keeps the feed.
|
||||
if (uploads.length === 0) loadError = true;
|
||||
} finally {
|
||||
initialLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** "Erneut laden" from the error state — a clean re-run of everything onMount loads. */
|
||||
async function retryInitialLoad() {
|
||||
loadError = false;
|
||||
initialLoading = true;
|
||||
nextCursor = null;
|
||||
await Promise.all([loadFeed(true), loadHashtags(), loadUploaders()]);
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
if (!nextCursor || loadingMore) return;
|
||||
loadingMore = true;
|
||||
try {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
|
||||
const params = new URLSearchParams();
|
||||
const params = filterParams();
|
||||
params.set('cursor', nextCursor);
|
||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||
params.set('limit', '20');
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
uploads = [...uploads, ...res.uploads];
|
||||
@@ -473,6 +628,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function loadUploaders() {
|
||||
try {
|
||||
uploaderNames = await api.get<string[]>('/uploaders');
|
||||
} catch {
|
||||
// Same as the hashtag index: the picker degrades, the feed keeps working.
|
||||
}
|
||||
}
|
||||
|
||||
async function pullRefresh() {
|
||||
if (refreshing) return;
|
||||
refreshing = true;
|
||||
@@ -480,16 +643,69 @@
|
||||
vibrate(10);
|
||||
try {
|
||||
nextCursor = null;
|
||||
await Promise.all([loadFeed(true), loadHashtags()]);
|
||||
await Promise.all([loadFeed(true), loadHashtags(), loadUploaders()]);
|
||||
} finally {
|
||||
refreshing = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Filter state ─────────────────────────────────────────────────────────
|
||||
//
|
||||
// BOTH views filter server-side now; the two states below are just the two UIs for it.
|
||||
// `selectedHashtag` is the list's single chip, `activeFilters` the grid's chip row, and
|
||||
// `filterParams()` is the one place either is turned into a request.
|
||||
//
|
||||
// Previously the list filtered server-side while the grid filtered the loaded array
|
||||
// client-side, and the two never synced — so a tag picked in the list kept filtering the
|
||||
// grid (the fetch still carried `?hashtag=`) while the grid's chip row rendered the empty
|
||||
// `activeFilters`: active, invisible, unclearable. The grid also matched a caption
|
||||
// substring rather than the tag, so `#tanz` matched `#tanzflaeche` in one view and not the
|
||||
// other, and it could only ever see the pages already loaded.
|
||||
//
|
||||
// The helpers below keep the two chip UIs in sync when switching views.
|
||||
|
||||
/** The tag currently shown as a grid chip, if any. Grid supports several; list has one. */
|
||||
function firstTagFilter(): string | null {
|
||||
return activeFilters.find((f) => f.type === 'tag')?.value ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The active filter as query params — the SINGLE place that translates UI state into a
|
||||
* request, used by every fetch path (initial load, pagination, pull-to-refresh, and the
|
||||
* SSE-driven in-place refresh).
|
||||
*
|
||||
* Those four used to build their own params, and each only knew about `selectedHashtag` —
|
||||
* so the grid's chips were never sent at all and were applied client-side over whatever
|
||||
* pages happened to be loaded.
|
||||
*/
|
||||
function filterParams(): URLSearchParams {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
|
||||
const params = new URLSearchParams();
|
||||
if (viewMode === 'list') {
|
||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||
return params;
|
||||
}
|
||||
const tags = activeFilters.filter((f) => f.type === 'tag').map((f) => f.value);
|
||||
if (tags.length) params.set('hashtags', tags.join(','));
|
||||
const user = activeFilters.find((f) => f.type === 'user');
|
||||
if (user) params.set('uploader', user.value);
|
||||
return params;
|
||||
}
|
||||
|
||||
/** Re-run page 1 under the current filters. Any filter change resets pagination. */
|
||||
function reloadForFilters() {
|
||||
nextCursor = null;
|
||||
loadFeed(true);
|
||||
}
|
||||
|
||||
function selectHashtag(tag: string | null) {
|
||||
selectedHashtag = tag;
|
||||
nextCursor = null;
|
||||
loadFeed();
|
||||
// Mirror into the grid chips so switching views SHOWS the active filter. Tag chips are
|
||||
// replaced rather than appended: the list's model is one tag. User chips are grid-only,
|
||||
// so they survive untouched.
|
||||
const users = activeFilters.filter((f) => f.type === 'user');
|
||||
activeFilters = tag ? [{ type: 'tag', value: tag }, ...users] : users;
|
||||
reloadForFilters();
|
||||
}
|
||||
|
||||
async function handleLike(id: string) {
|
||||
@@ -527,28 +743,85 @@
|
||||
}
|
||||
|
||||
function selectSuggestion(item: Filter) {
|
||||
if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
|
||||
if (item.type === 'user') {
|
||||
// Exactly ONE uploader at a time. The server takes a single `uploader` param
|
||||
// rather than a list because display names may contain a comma, and a CSV would
|
||||
// silently split such a name into two filters that match nobody. Tags are safe to
|
||||
// CSV — the backend restricts them to ASCII alphanumerics and `_`.
|
||||
activeFilters = [...activeFilters.filter((f) => f.type !== 'user'), item];
|
||||
} else if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
|
||||
activeFilters = [...activeFilters, item];
|
||||
}
|
||||
searchQuery = '';
|
||||
showAutocomplete = false;
|
||||
reloadForFilters();
|
||||
}
|
||||
|
||||
function removeFilter(item: Filter) {
|
||||
activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
|
||||
reloadForFilters();
|
||||
}
|
||||
|
||||
// `selectedHashtag` is cleared too, not just the grid chips: the two are mirrors of one
|
||||
// server-side filter (see `selectHashtag`), so dropping only `activeFilters` left the
|
||||
// list's tag armed and invisible — switching back to the list silently re-applied it.
|
||||
function clearFilters() {
|
||||
activeFilters = [];
|
||||
selectedHashtag = null;
|
||||
searchQuery = '';
|
||||
reloadForFilters();
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the empty feed we are looking at is "no matches" rather than "no photos yet".
|
||||
* Both chip UIs count, because the list and the grid express the same server-side
|
||||
* filter differently.
|
||||
*/
|
||||
const hasActiveFilters = $derived(
|
||||
viewMode === 'list' ? selectedHashtag !== null : activeFilters.length > 0
|
||||
);
|
||||
|
||||
// ── Lightbox stepping ────────────────────────────────────────────────────────────
|
||||
//
|
||||
// Prev/next walk THE SAME array the feed renders — already server-filtered and
|
||||
// server-ordered — so "next" in the lightbox is the photo the guest would have
|
||||
// scrolled to. It stops at the end of what is LOADED rather than paging: infinite
|
||||
// scroll owns pagination, and having the modal extend the list would grow the
|
||||
// virtualizer behind it while it is the thing holding focus.
|
||||
const lightboxIndex = $derived(
|
||||
selectedUpload ? uploads.findIndex((u) => u.id === selectedUpload!.id) : -1
|
||||
);
|
||||
|
||||
function stepLightbox(delta: -1 | 1) {
|
||||
if (lightboxIndex < 0) return;
|
||||
const next = uploads[lightboxIndex + delta];
|
||||
if (next) selectedUpload = next;
|
||||
}
|
||||
|
||||
function switchView(mode: 'list' | 'grid') {
|
||||
viewMode = mode;
|
||||
if (mode === 'list') {
|
||||
const before = filterParams().toString();
|
||||
if (mode === 'grid') {
|
||||
// Carry the list's tag into the grid's chip row so it is visible — and therefore
|
||||
// removable — there.
|
||||
if (
|
||||
selectedHashtag &&
|
||||
!activeFilters.some((f) => f.type === 'tag' && f.value === selectedHashtag)
|
||||
) {
|
||||
activeFilters = [{ type: 'tag', value: selectedHashtag }, ...activeFilters];
|
||||
}
|
||||
} else {
|
||||
searchQuery = '';
|
||||
showAutocomplete = false;
|
||||
// The list expresses exactly one tag, so carry the first chip across. A second tag
|
||||
// or an uploader chip cannot be represented here; they stay on `activeFilters` and
|
||||
// come back when the user returns to the grid.
|
||||
selectedHashtag = firstTagFilter();
|
||||
}
|
||||
viewMode = mode;
|
||||
// Both views send their filters to the server, but they express them differently
|
||||
// (`hashtag` vs `hashtags`+`uploader`), so refetch only when the effective query
|
||||
// actually changed — switching views with no filter must not reset pagination.
|
||||
if (filterParams().toString() !== before) reloadForFilters();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -604,10 +877,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="pointer-events-auto rounded-full border border-primary-400 bg-primary-100 px-4 py-1.5 text-xs font-semibold text-primary-800 shadow-lg hover:border-primary-500 hover:bg-primary-200 dark:border-primary-500/50 dark:bg-primary-950/60 dark:text-primary-200"
|
||||
onclick={() => {
|
||||
feedStale = false;
|
||||
void loadFeed(true);
|
||||
}}
|
||||
onclick={() => void refreshStale()}
|
||||
>
|
||||
Neue Beiträge – tippen zum Aktualisieren
|
||||
</button>
|
||||
@@ -781,7 +1051,7 @@
|
||||
element self-destructing is harmless, and press-then-slide-off aborts like a button
|
||||
should. -->
|
||||
<div
|
||||
class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900"
|
||||
class="absolute left-0 right-0 top-full z-50 mt-1 max-h-72 overflow-y-auto overscroll-contain rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900"
|
||||
onmousedown={(e) => e.preventDefault()}
|
||||
role="listbox"
|
||||
tabindex="-1"
|
||||
@@ -918,10 +1188,51 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if loadError}
|
||||
<!-- Must sit AHEAD of the empty state: a failed load also leaves `uploads` empty, and
|
||||
"Noch keine Fotos" is then an outright lie — the one thing a guest on a congested
|
||||
venue WiFi must not be told, since there is no operator to correct it. -->
|
||||
<div class="py-20 text-center" data-testid="feed-error">
|
||||
<svg
|
||||
class="mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-lg font-medium text-gray-700 dark:text-gray-300">
|
||||
Galerie konnte nicht geladen werden.
|
||||
</p>
|
||||
<p class="mx-auto mt-1 max-w-xs text-sm text-gray-500 dark:text-gray-400">
|
||||
Das WLAN ist gerade voll. Versuch es gleich noch einmal.
|
||||
</p>
|
||||
<button onclick={() => void retryInitialLoad()} class="btn btn-primary btn-sm mt-4">
|
||||
Erneut laden
|
||||
</button>
|
||||
</div>
|
||||
{:else if uploads.length === 0 && hasActiveFilters}
|
||||
<!-- "No matches" is checked BEFORE "no photos": since filtering moved server-side,
|
||||
an empty response under an active filter is exactly that, and the generic empty
|
||||
state told a guest who had just tapped a hashtag chip to go take a photo. -->
|
||||
<div class="py-16 text-center" data-testid="feed-no-matches">
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">
|
||||
Keine Treffer für die gewählten Filter.
|
||||
</p>
|
||||
<button onclick={clearFilters} class="btn btn-ghost btn-sm mt-2">Filter zurücksetzen</button>
|
||||
</div>
|
||||
{:else if uploads.length === 0}
|
||||
<div class="py-20 text-center">
|
||||
<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
|
||||
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
|
||||
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">
|
||||
Tippe auf den Kamera-Button unten!
|
||||
</p>
|
||||
</div>
|
||||
{:else if viewMode === 'list'}
|
||||
<!-- List view: chronological full-width cards (DOM-windowed) -->
|
||||
@@ -937,33 +1248,21 @@
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Grid view: 3-col, filters applied (DOM-windowed by row) -->
|
||||
<!-- Grid view: 3-col, filters applied server-side (DOM-windowed by row). The
|
||||
"keine Treffer" branch that used to live here was unreachable — `displayUploads`
|
||||
is a plain alias of `uploads` since filtering moved server-side, so its emptiness
|
||||
check was identical to the one two branches above, which always won. It now
|
||||
lives up there, where it can actually be reached from either view. -->
|
||||
<div class="mx-auto max-w-2xl">
|
||||
{#if displayUploads.length === 0}
|
||||
<div class="py-16 text-center">
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">
|
||||
Keine Treffer für die gewählten Filter.
|
||||
</p>
|
||||
{#if nextCursor}
|
||||
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.
|
||||
</p>
|
||||
{/if}
|
||||
<button onclick={clearFilters} class="btn btn-ghost btn-sm mt-2"
|
||||
>Filter zurücksetzen</button
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<VirtualFeed
|
||||
mode="grid"
|
||||
uploads={displayUploads}
|
||||
{myUserId}
|
||||
onlike={handleLike}
|
||||
oncomment={openComments}
|
||||
onselect={(u) => (selectedUpload = u)}
|
||||
oncontextmenu={openContextSheet}
|
||||
/>
|
||||
{/if}
|
||||
<VirtualFeed
|
||||
mode="grid"
|
||||
uploads={displayUploads}
|
||||
{myUserId}
|
||||
onlike={handleLike}
|
||||
oncomment={openComments}
|
||||
onselect={(u) => (selectedUpload = u)}
|
||||
oncontextmenu={openContextSheet}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -986,6 +1285,10 @@
|
||||
upload={selectedUpload}
|
||||
onclose={() => (selectedUpload = null)}
|
||||
onlike={handleLike}
|
||||
hasPrev={lightboxIndex > 0}
|
||||
hasNext={lightboxIndex >= 0 && lightboxIndex < uploads.length - 1}
|
||||
onprev={() => stepLightbox(-1)}
|
||||
onnext={() => stepLightbox(1)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user