fix: suppress mini-bar for float/minimal player styles; persist float position
This commit is contained in:
@@ -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) -->
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user