kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 157 Wiki Activity

fix: slim seek bar, scrollable settings panel, speed+toggles first then voices
Some checks failed
CI / Lint (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Admin
2026-03-02 13:17:41 +05:00
parent c08da7ef54
commit ce4b904e62
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
scraper/internal/server/ui.go
View File

@@ -2151,10 +2151,10 @@ const chapterTmpl = `
.queue-badge-time { text-transform: none; letter-spacing: 0; }
/* ── Seek bar ───────────────────────────────────────────────────────────── */
#seek-track { height: 2.5rem; cursor: pointer; touch-action: none; user-select: none; }
#seek-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: #3f3f46; border-radius: 9999px; overflow: hidden; pointer-events: none; }
#seek-track { height: 1.25rem; cursor: pointer; touch-action: none; user-select: none; }
#seek-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 2px; background: #3f3f46; border-radius: 9999px; overflow: hidden; pointer-events: none; }
#seek-fill { position: absolute; left: 0; top: 0; height: 100%; background: #f59e0b; }
#seek-thumb { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: #fbbf24; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; transition: transform 0.1s; }
#seek-thumb { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; transition: transform 0.1s; }
#seek-thumb:hover { transform: translateY(-50%) translateX(-50%) scale(1.3); }
/* ── Safe-area inset ────────────────────────────────────────────────────── */
@@ -2330,10 +2330,7 @@ const chapterTmpl = `
role="dialog"
aria-label="Reader settings"
hidden
class="fixed inset-x-4 top-1/2 -translate-y-1/2 sm:absolute sm:inset-x-auto sm:top-auto sm:translate-y-0 sm:bottom-[calc(100%+0.25rem)] sm:right-[max(0.5rem,calc(50%-32rem+0.5rem))] sm:w-80 bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl z-[100]">
<!-- scrollable body -->
<div class="p-4">
class="fixed inset-x-4 top-1/2 -translate-y-1/2 max-h-[75vh] overflow-y-auto sm:absolute sm:inset-x-auto sm:top-auto sm:translate-y-0 sm:bottom-[calc(100%+0.25rem)] sm:right-[max(0.5rem,calc(50%-32rem+0.5rem))] sm:w-80 sm:max-h-[80vh] bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl z-[100]">
<!-- hidden native select keeps existing JS working unchanged -->
<select id="tts-voice" class="sr-only" aria-hidden="true" tabindex="-1">
@@ -2342,9 +2339,32 @@ const chapterTmpl = `
{{end}}
</select>
<div class="mb-4">
<div class="p-4 space-y-4">
<!-- Speed -->
<label class="block">
<span class="block text-xs text-zinc-500 mb-1.5">Speed — <span id="tts-speed-label">1.0×</span></span>
<input id="tts-speed" type="range" min="0.5" max="2" step="0.1" value="1"
class="w-full accent-amber-500 cursor-pointer" />
</label>
<!-- Toggles -->
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
<span class="toggle-switch"><input id="tts-autoplay" type="checkbox" /><span class="toggle-track"></span></span>
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
<span class="toggle-switch"><input id="tts-autoscroll" type="checkbox" checked /><span class="toggle-track"></span></span>
</label>
<!-- Divider -->
<div class="border-t border-zinc-800"></div>
<!-- Voice grid -->
<div>
<span class="block text-xs text-zinc-500 mb-2">Voice</span>
<div id="voice-grid" class="grid grid-cols-2 gap-1.5 max-h-48 overflow-y-auto pr-0.5">
<div id="voice-grid" class="grid grid-cols-2 gap-1.5">
{{range .Voices}}
<button type="button"
data-voice="{{.ID}}"
@@ -2360,25 +2380,7 @@ const chapterTmpl = `
</div>
</div>
</div><!-- end scrollable body -->
<!-- sticky footer: speed + toggles always visible -->
<div class="flex-shrink-0 border-t border-zinc-800 p-4 space-y-3">
<label class="block">
<span class="block text-xs text-zinc-500 mb-1.5">Speed — <span id="tts-speed-label">1.0×</span></span>
<input id="tts-speed" type="range" min="0.5" max="2" step="0.1" value="1"
class="w-full accent-amber-500 cursor-pointer" />
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
<span class="toggle-switch"><input id="tts-autoplay" type="checkbox" /><span class="toggle-track"></span></span>
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
<span class="toggle-switch"><input id="tts-autoscroll" type="checkbox" checked /><span class="toggle-track"></span></span>
</label>
</div>
</div>
<!-- Hidden native audio -->