fix: suppress mini-bar for float/minimal player styles; persist float position
All checks were successful
Release / Test backend (push) Successful in 1m0s
Release / Check ui (push) Successful in 1m42s
Release / Docker (push) Successful in 5m55s
Release / Gitea Release (push) Successful in 39s

This commit is contained in:
root
2026-04-11 17:20:09 +05:00
parent 1f4d67dc77
commit 8660c675b6
4 changed files with 51 additions and 10 deletions

View File

@@ -512,7 +512,7 @@
style="display:none"
></audio>
<div class="min-h-screen flex flex-col" class:pb-24={audioStore.active}>
<div class="min-h-screen flex flex-col" class:pb-24={audioStore.active && !audioStore.suppressMiniBar}>
<!-- Navigation progress bar — shown while SSR is running for any page transition -->
{#if navigating}
<div class="fixed top-0 left-0 right-0 z-[100] h-1 bg-(--color-surface-2)">
@@ -959,7 +959,7 @@
</div>
<!-- ── Persistent mini-player bar ─────────────────────────────────────────── -->
{#if audioStore.active}
{#if audioStore.active && !audioStore.suppressMiniBar}
<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface) border-t border-(--color-border) shadow-2xl">
<!-- Generation progress bar (sits at very top of the bar) -->

View File

@@ -100,6 +100,33 @@
document.documentElement.style.setProperty('--reading-max-width', READ_WIDTHS[layout.readWidth]);
});
// ── Suppress mini-bar for float / minimal player styles ──────────────────────
// The in-page player is the sole control surface for these styles; the layout
// mini-bar would be a duplicate. Clear on page destroy so the mini-bar returns
// on other pages (library, catalogue, etc.) where audio may still be playing.
$effect(() => {
audioStore.suppressMiniBar = layout.playerStyle === 'float' || layout.playerStyle === 'minimal';
return () => { audioStore.suppressMiniBar = false; };
});
// ── Persist float overlay position across reloads ─────────────────────────────
const FLOAT_POS_KEY = 'reader_float_pos_v1';
if (browser) {
try {
const saved = localStorage.getItem(FLOAT_POS_KEY);
if (saved) {
const p = JSON.parse(saved) as { x: number; y: number };
if (typeof p.x === 'number' && typeof p.y === 'number') audioStore.floatPos = p;
}
} catch { /* ignore */ }
}
$effect(() => {
const pos = audioStore.floatPos;
if (browser && (pos.x !== 0 || pos.y !== 0)) {
try { localStorage.setItem(FLOAT_POS_KEY, JSON.stringify(pos)); } catch { /* ignore */ }
}
});
// ── Scroll progress bar ──────────────────────────────────────────────────────
let scrollProgress = $state(0);
@@ -797,7 +824,7 @@
{#if layout.readMode === 'scroll' && !layout.focusMode}
{@const atTop = scrollProgress <= 0.01}
{@const atBottom = scrollProgress >= 0.99}
<div class="fixed right-4 {audioStore.active ? 'bottom-[5.5rem]' : 'bottom-8'} z-40 flex flex-col gap-2 transition-all">
<div class="fixed right-4 {audioStore.active && !audioStore.suppressMiniBar ? 'bottom-[5.5rem]' : 'bottom-8'} z-40 flex flex-col gap-2 transition-all">
<!-- Up button / Prev chapter -->
{#if atTop && data.prev}
<a
@@ -856,7 +883,7 @@
<!-- ── Focus mode floating nav ───────────────────────────────────────────── -->
{#if layout.focusMode}
<div class="fixed {audioStore.active ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50 max-w-[calc(100vw-2rem)]">
<div class="fixed {audioStore.active && !audioStore.suppressMiniBar ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50 max-w-[calc(100vw-2rem)]">
<div class="flex items-center divide-x divide-(--color-border) rounded-full bg-(--color-surface-2)/95 backdrop-blur border border-(--color-border) shadow-lg text-xs text-(--color-muted) overflow-hidden">
<!-- Prev chapter -->
{#if data.prev}