dtourolle
b98cbfe28a
Every other shell rule in layoutShell.ts already treats /player/* as
immersive; the amber "You're offline" strip was the one piece of chrome
still rendered above it. On the native Android video path that is not
cosmetic: VideoPlayer makes itself transparent so the ExoPlayer
SurfaceView behind the WebView is visible (DR-185), so a shell child that
still paints shows through the picture as a stripe across the top of the
film. Offline is also precisely when a downloaded video plays, so the
banner appeared when it was most in the way — and it offers the viewer
nothing to act on, since local playback needs no server.
The rule moves into the pure module as showOfflineBanner() rather than
staying an inline {#if} in the shell, so the immersive-route contract is
stated in one tested place.
TRACES: UR-003, UR-043 | DR-291 | UT-255
394 lines
17 KiB
Svelte
394 lines
17 KiB
Svelte
<script lang="ts">
|
|
import { onMount, onDestroy } from "svelte";
|
|
import { get } from "svelte/store";
|
|
import { page } from "$app/stores";
|
|
import { platform } from "@tauri-apps/plugin-os";
|
|
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
|
import "../app.css";
|
|
import { commands } from "$lib/api/bindings";
|
|
import { auth, needsReauth, isAuthenticated } from "$lib/stores/auth";
|
|
import { connectivity, isConnected } from "$lib/stores/connectivity";
|
|
import { initPlayerEvents, cleanupPlayerEvents } from "$lib/services/playerEvents";
|
|
import { initWebviewAudio, cleanupWebviewAudio } from "$lib/services/webviewAudio";
|
|
import { downloads, initDownloadEvents, cleanupDownloadEvents } from "$lib/stores/downloads";
|
|
import { syncService } from "$lib/services/syncService";
|
|
import { clearFavorite } from "$lib/stores/favorites";
|
|
import {
|
|
onReconnected as onCatalogReconnected,
|
|
refreshSyncStatus,
|
|
showServerCatalog,
|
|
lastCatalogSync,
|
|
} from "$lib/services/offlineCatalog";
|
|
import { playbackMode } from "$lib/stores/playbackMode";
|
|
import { sessions } from "$lib/stores/sessions";
|
|
import ReauthModal from "$lib/components/auth/ReauthModal.svelte";
|
|
import Toast from "$lib/components/Toast.svelte";
|
|
import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
|
|
import BottomUi from "$lib/components/BottomUi.svelte";
|
|
import AppHeader from "$lib/components/AppHeader.svelte";
|
|
import PendingSyncModal from "$lib/components/sync/PendingSyncModal.svelte";
|
|
import {
|
|
isInitialized,
|
|
pendingSyncCount,
|
|
isAndroid,
|
|
showSleepTimerModal,
|
|
} from "$lib/stores/appState";
|
|
import {
|
|
showBottomNav as computeShowBottomNav,
|
|
showGlobalMiniPlayer as computeShowGlobalMiniPlayer,
|
|
showGlobalHeader as computeShowGlobalHeader,
|
|
routeOwnsLayout as computeRouteOwnsLayout,
|
|
shellReservesBottomInset,
|
|
showOfflineBanner as computeShowOfflineBanner,
|
|
} from "$lib/utils/layoutShell";
|
|
import { registerNavigationTracking } from "$lib/utils/navigation";
|
|
import { useScrollRestore } from "$lib/utils/scrollContainer";
|
|
import { startNetworkReporting } from "$lib/services/networkType";
|
|
import { initSafeArea } from "$lib/utils/safeArea";
|
|
import { createLogger } from "$lib/utils/logger";
|
|
|
|
const log = createLogger("Layout");
|
|
|
|
let { children } = $props();
|
|
|
|
/** Offline banner badge → the list of what is actually queued (DR-132). */
|
|
let showPendingSync = $state(false);
|
|
|
|
/** Teardown for the network-transport reporter (WiFi-only gate). */
|
|
let stopNetworkReporting: (() => void) | null = null;
|
|
let stopFavoritesListener: UnlistenFn | null = null;
|
|
|
|
/** Teardown for the native window-inset subscription (safe areas). */
|
|
let stopSafeArea: (() => void) | null = null;
|
|
|
|
// Track in-app navigation depth so the header "back" affordance knows when a
|
|
// real in-app Back exists (vs. a stale WebView stack after a background /
|
|
// restore). Must run during component init — afterNavigate needs a component
|
|
// context, not the async onMount callback below.
|
|
registerNavigationTracking();
|
|
|
|
// The shell's scroller outlives every route rendered into it, so without this
|
|
// a new page inherits the previous page's offset. Must be registered here at
|
|
// init, alongside the tracker above, for the same reason. (DR-156)
|
|
let shellScroller = $state<HTMLElement>();
|
|
useScrollRestore(() => shellScroller, "shell");
|
|
|
|
// Layout-shell visibility rules live in one pure, unit-tested module
|
|
// ($lib/utils/layoutShell) so they can't drift per route/platform.
|
|
//
|
|
// The bottom UI (mini player + nav) is rendered IN FLEX FLOW below the
|
|
// scroller — never as a fixed overlay — so the list is physically bounded
|
|
// above it and cannot render behind it. There is nothing to measure or
|
|
// reserve; the old ResizeObserver/`bottomUiHeight`/padding scheme (which
|
|
// started at 0 and kept regressing into "last row hidden behind the nav") is
|
|
// gone. See BottomUi.svelte.
|
|
const pathname = $derived($page.url.pathname);
|
|
const showBottomNav = $derived(
|
|
computeShowBottomNav({ pathname, isAuthenticated: $isAuthenticated }),
|
|
);
|
|
const showGlobalMiniPlayer = $derived(computeShowGlobalMiniPlayer({ pathname }));
|
|
|
|
// The shared header (with the account menu) is rendered by the root on every
|
|
// authenticated non-immersive route that doesn't own its own layout. Library
|
|
// renders its own AppHeader; settings/player/login get none. (UR-054)
|
|
const showGlobalHeader = $derived(
|
|
computeShowGlobalHeader({ pathname, isAuthenticated: $isAuthenticated }),
|
|
);
|
|
|
|
// Library/settings/player/login own their own full-height flex column
|
|
// (header + scroller + their own in-flow BottomUi), so the root just clips
|
|
// and lets them manage layout. Every other route renders into the root's
|
|
// scroller, with the root's in-flow BottomUi as a flex sibling below it.
|
|
const routeOwnsLayout = $derived(computeRouteOwnsLayout({ pathname }));
|
|
|
|
// Bottom safe-area inset (Android navigation/gesture bar): BottomUi reserves
|
|
// it wherever one renders, so the shell only takes it on routes that have no
|
|
// bottom UI at all (login, the full-screen player). Exactly one owner, or the
|
|
// bar is either ignored or double-padded. (UR-066)
|
|
const shellPadsBottom = $derived(
|
|
shellReservesBottomInset({ pathname, isAuthenticated: $isAuthenticated }),
|
|
);
|
|
|
|
// The offline banner is shell chrome like the rest, so it stays off the
|
|
// full-screen player — where on the native video path it would paint a
|
|
// stripe straight through the film (DR-291).
|
|
const offlineBannerVisible = $derived(
|
|
computeShowOfflineBanner({
|
|
pathname,
|
|
isAuthenticated: $isAuthenticated,
|
|
isConnected: $isConnected,
|
|
}),
|
|
);
|
|
|
|
onMount(async () => {
|
|
// Detect platform first (synchronously, before any await) so the global
|
|
// mini player's Android visibility gate is correct from the first render.
|
|
// Android needs the global mini player because the library layout hides its
|
|
// own; if this ran after `await auth.initialize()` the store stayed false
|
|
// long enough that the mini player never appeared on library routes.
|
|
try {
|
|
const platformName = platform();
|
|
isAndroid.set(platformName === "android");
|
|
} catch (err) {
|
|
log.error("Platform detection failed:", err);
|
|
}
|
|
|
|
// Prime the safe-area custom properties from the native WindowInsets bridge
|
|
// BEFORE the first await, so the very first paint already clears the status
|
|
// bar and the navigation/gesture bar. Native also pushes updates directly,
|
|
// but a page load wipes the inline style it set, so this pull is required.
|
|
// No-op without the Android bridge. (UR-066)
|
|
stopSafeArea = initSafeArea();
|
|
|
|
// Initialize auth state (restore session from secure storage)
|
|
await auth.initialize();
|
|
isInitialized.set(true);
|
|
|
|
// Initialize player event listener for push-based updates
|
|
await initPlayerEvents();
|
|
|
|
// Initialize the webview audio controller (plays audio-only media in an
|
|
// <audio> element on platforms with no native audio backend, e.g. Windows;
|
|
// self-gates and is a no-op on Linux/Android).
|
|
await initWebviewAudio();
|
|
|
|
// Initialize download event listener
|
|
await initDownloadEvents();
|
|
|
|
// Favourite state can change behind the UI: another Jellyfin client marks
|
|
// something, or the Rust drain pushes toggles queued while offline. Drop
|
|
// the session overrides for those ids so the next render reads the freshly
|
|
// cached server value rather than a stale local guess.
|
|
// TRACES: UR-069 | DR-120
|
|
stopFavoritesListener = await listen<{ itemIds: string[] }>("favorites-changed", (event) => {
|
|
for (const id of event.payload?.itemIds ?? []) clearFavorite(id);
|
|
});
|
|
|
|
// Report the network transport to the backend and keep it current, so the
|
|
// WiFi-only download gate has real data to act on (UR-053). No-op on
|
|
// desktop, where the backend defaults to unmetered.
|
|
stopNetworkReporting = startNetworkReporting();
|
|
|
|
// Prime the downloads store from the DB. The store starts empty each launch,
|
|
// and download badges (e.g. AlbumDownloadButton) derive purely from it, so
|
|
// without an initial refresh a previously-downloaded album shows as
|
|
// not-downloaded until the user opens the Downloads page.
|
|
const userId = get(auth).user?.id;
|
|
if (userId) {
|
|
downloads.refresh(userId).catch((err) => log.error("Initial downloads refresh failed:", err));
|
|
}
|
|
|
|
// Start sync service for offline mutation queue
|
|
syncService.start();
|
|
|
|
// Kick the queue once at startup. The Rust drain otherwise only runs on an
|
|
// offline→online transition, so a queue built up in a previous session sits
|
|
// untouched for a whole run of the app if the server was reachable the
|
|
// whole time. Safe when it isn't: an unreachable server leaves rows queued
|
|
// without spending their retry budget (DR-131).
|
|
if (get(auth).user?.id) {
|
|
commands.syncProcessPending().catch((err) => log.debug("Startup sync drain skipped:", err));
|
|
}
|
|
|
|
// Load the last-sync hint for the offline banner. The catalog *index* is no
|
|
// longer kicked off from here: the Rust background indexer (DR-109) owns
|
|
// when to re-index, so a long session no longer searches a stale catalog and
|
|
// a restart no longer forces a full crawl regardless of freshness.
|
|
void refreshSyncStatus();
|
|
|
|
// Initialize playback mode and session monitoring
|
|
playbackMode.initializeSessionMonitoring();
|
|
await playbackMode.refresh();
|
|
});
|
|
|
|
onDestroy(() => {
|
|
stopNetworkReporting?.();
|
|
stopFavoritesListener?.();
|
|
stopFavoritesListener = null;
|
|
stopSafeArea?.();
|
|
cleanupPlayerEvents();
|
|
cleanupWebviewAudio();
|
|
cleanupDownloadEvents();
|
|
connectivity.stopMonitoring();
|
|
syncService.stop();
|
|
auth.cleanupEventListeners();
|
|
});
|
|
|
|
// Connectivity monitoring is now started early in auth.initialize()
|
|
// This effect is kept only for when the user logs in during the session
|
|
$effect(() => {
|
|
if ($isAuthenticated) {
|
|
// Check if monitoring is already running by attempting to get status
|
|
// If not running, start it (handles login during current session)
|
|
auth.getCurrentSession().then((session) => {
|
|
if (session?.serverUrl) {
|
|
connectivity.forceCheck().catch((error) => {
|
|
// If check fails, monitoring might not be started yet, so start it
|
|
log.debug("Queue status check failed, starting monitoring:", error);
|
|
connectivity
|
|
.startMonitoring(session.serverUrl, {
|
|
onServerReconnected: () => {
|
|
// Retry session verification when server becomes reachable
|
|
auth.retryVerification();
|
|
// Resume offline-queued downloads and refresh the catalog.
|
|
void onCatalogReconnected();
|
|
},
|
|
})
|
|
.catch((monitorError) => {
|
|
log.error("Failed to start connectivity monitoring:", monitorError);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Update pending sync count periodically, and immediately whenever the Rust
|
|
// drain (DR-131) reports it pushed or gave up on rows — otherwise the badge
|
|
// lags a reconnect by up to 10s and reads as if nothing happened.
|
|
$effect(() => {
|
|
if ($isAuthenticated) {
|
|
const updateCount = async () => {
|
|
const count = await syncService.getPendingCount();
|
|
pendingSyncCount.set(count);
|
|
};
|
|
updateCount();
|
|
// Update every 10 seconds
|
|
const interval = setInterval(updateCount, 10000);
|
|
let unlistenDrain: UnlistenFn | null = null;
|
|
listen("sync-queue-changed", () => {
|
|
void updateCount();
|
|
})
|
|
.then((unlisten) => {
|
|
unlistenDrain = unlisten;
|
|
})
|
|
.catch((err) => log.debug("sync-queue-changed listen failed:", err));
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
unlistenDrain?.();
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!--
|
|
The app shell reserves the top/side safe-area insets (status bar, display
|
|
cutout) so no route has to. The bottom inset belongs to BottomUi wherever one
|
|
renders — see shellReservesBottomInset. `h-screen` is border-box, so the
|
|
padding is taken out of the 100vh rather than added to it.
|
|
|
|
TRACES: UR-066 | DR-112
|
|
-->
|
|
<!--
|
|
data-app-shell marks the layer app.css clears for native video. This div
|
|
paints --color-background across the entire viewport, *under* a VideoPlayer
|
|
that makes itself transparent on the native path — so while it stays painted,
|
|
the ExoPlayer SurfaceView behind the WebView cannot be seen no matter what
|
|
else is cleared. The rule in app.css was written for this attribute; the
|
|
attribute was never added. (DR-185)
|
|
-->
|
|
<div
|
|
data-app-shell
|
|
class="h-screen bg-[var(--color-background)] overflow-hidden flex flex-col
|
|
pt-[var(--safe-top)] pl-[var(--safe-left)] pr-[var(--safe-right)]"
|
|
style:padding-bottom={shellPadsBottom ? "var(--safe-bottom)" : undefined}
|
|
>
|
|
{#if isInitialized}
|
|
<!-- Offline indicator banner (never over the player — DR-291) -->
|
|
{#if offlineBannerVisible}
|
|
<div
|
|
class="bg-amber-600/90 text-white px-4 py-2 text-sm flex items-center justify-center gap-2 shrink-0"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
|
|
/>
|
|
</svg>
|
|
<span>You're offline. Some features may be limited.</span>
|
|
<!-- The badge is answerable: it opens the queue it counts. Read as
|
|
"pending transfers" it used to send people to the Downloads page,
|
|
which lists a different table entirely and can never show these.
|
|
TRACES: UR-025 | DR-132 -->
|
|
{#if $pendingSyncCount > 0}
|
|
<button
|
|
type="button"
|
|
onclick={() => (showPendingSync = true)}
|
|
class="bg-white/20 hover:bg-white/30 px-2 py-0.5 rounded-full text-xs transition-colors"
|
|
title="Changes waiting to reach the server"
|
|
>
|
|
{$pendingSyncCount} waiting to sync
|
|
</button>
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
onclick={() => showServerCatalog.update((v) => !v)}
|
|
class="ml-1 bg-white/20 hover:bg-white/30 px-2 py-0.5 rounded-full text-xs transition-colors"
|
|
aria-pressed={$showServerCatalog}
|
|
title={$lastCatalogSync
|
|
? `Catalog last synced ${new Date($lastCatalogSync).toLocaleString()}`
|
|
: "Catalog not yet synced"}
|
|
>
|
|
{$showServerCatalog ? "Hide server media" : "Show all server media"}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Main content. Routes that own their full-height layout (library,
|
|
settings, player, login) get a plain clipped box and manage their own
|
|
scrolling internally. All other top-level pages render directly here, so
|
|
this wrapper must scroll and reserve the fixed bottom UI's measured
|
|
height so the mini player / bottom nav never overlap the last rows. -->
|
|
{#if routeOwnsLayout}
|
|
<!-- These routes own their own full-height flex column (header + scroller
|
|
+ their own in-flow BottomUi), so the root just clips and steps back. -->
|
|
<div class="flex-1 overflow-hidden">
|
|
{@render children()}
|
|
</div>
|
|
{:else}
|
|
<!-- Shared header (account menu, desktop nav) as a flex-shrink-0 sibling
|
|
above the scroller, so it never eats into the scroller's bounds. -->
|
|
{#if showGlobalHeader}
|
|
<AppHeader />
|
|
{/if}
|
|
<!-- Scroller is flex-1/min-h-0; the in-flow BottomUi below is a flex
|
|
sibling, so the list is physically bounded above it and can never
|
|
render behind it. No measurement, no reserved padding. -->
|
|
<div
|
|
bind:this={shellScroller}
|
|
class="flex-1 overflow-y-auto min-h-0"
|
|
style="overscroll-behavior: contain"
|
|
>
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Re-authentication modal -->
|
|
<ReauthModal isOpen={$needsReauth} />
|
|
|
|
<!-- Toast notifications (global) -->
|
|
<Toast />
|
|
|
|
<!-- Bottom UI (mini player + nav), in normal flex flow below the scroller.
|
|
Owned routes render their own BottomUi inside their own column instead. -->
|
|
{#if !routeOwnsLayout && (showBottomNav || showGlobalMiniPlayer)}
|
|
<BottomUi showMiniPlayer={showGlobalMiniPlayer} showNav={showBottomNav} />
|
|
{/if}
|
|
|
|
<!-- Sleep Timer Modal (global) -->
|
|
<SleepTimerModal isOpen={$showSleepTimerModal} onClose={() => showSleepTimerModal.set(false)} />
|
|
|
|
<!-- What the offline banner's badge counts (DR-132) -->
|
|
<PendingSyncModal isOpen={showPendingSync} onClose={() => (showPendingSync = false)} />
|
|
{:else}
|
|
<div class="flex items-center justify-center h-full">
|
|
<div
|
|
class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|