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

fix: proper SVG play/pause icons, preserve progress on resume, fix badge row alignment
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 12:49:36 +05:00
parent 98fd0de7bc
commit 00a6d2ce43
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2310,19 +2310,17 @@ const chapterTmpl = `
<button id="player-play-btn" type="button" onclick="ttsToggle()" <button id="player-play-btn" type="button" onclick="ttsToggle()"
aria-label="Play / Pause" aria-label="Play / Pause"
class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-amber-500 hover:bg-amber-400 text-zinc-950 text-base border-none cursor-pointer transition-colors shadow-sm"> class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-amber-500 hover:bg-amber-400 text-zinc-950 text-base border-none cursor-pointer transition-colors shadow-sm">
<span id="player-play-icon" aria-hidden="true">&#9654;</span> <span id="player-play-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg></span>
</button> </button>
<!-- Centre info --> <!-- Centre info -->
<div class="flex-1 min-w-0 flex flex-col justify-center px-1"> <div class="flex-1 min-w-0 flex items-center gap-1.5 px-1">
<div class="flex items-center gap-1.5"> <span id="player-title" class="text-xs font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
<span id="player-title" class="text-xs font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span> <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
<span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span> <!-- next-chapter prefetch badge -->
<!-- next-chapter prefetch badge --> <span id="player-next-row" hidden class="flex-shrink-0">
<span id="player-next-row" hidden> <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
<span id="player-next-badge" class="queue-badge queue-badge-idle">next</span> </span>
</span>
</div>
</div> </div>
<!-- Settings --> <!-- Settings -->
@@ -2597,6 +2595,8 @@ const chapterTmpl = `
} }
// ── UI state helpers ────────────────────────────────────────────────────── // ── UI state helpers ──────────────────────────────────────────────────────
var SVG_PLAY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg>';
var SVG_PAUSE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
function setPlayIcon(icon) { playerPlayIcon.innerHTML = icon; } function setPlayIcon(icon) { playerPlayIcon.innerHTML = icon; }
function setGenerating() { function setGenerating() {
@@ -2610,11 +2610,13 @@ const chapterTmpl = `
} }
function setPlaying() { function setPlaying() {
if (stale()) return; if (stale()) return;
setPlayIcon('&#9646;&#9646;'); setPlayIcon(SVG_PAUSE);
playerPlayBtn.disabled = false; playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false; voiceSel.disabled = false; speedSlider.disabled = false;
setBadge(playerStateBadge, 'playing'); setBadge(playerStateBadge, 'playing');
playerStateBadge.textContent = '0%'; var pct = (audio.duration && isFinite(audio.duration))
? Math.round((audio.currentTime / audio.duration) * 100) : 0;
playerStateBadge.textContent = pct + '%';
playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N; playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N;
setStatus(''); setStatus('');
showSeek(); showSeek();
@@ -2622,7 +2624,7 @@ const chapterTmpl = `
} }
function setPaused() { function setPaused() {
if (stale()) return; if (stale()) return;
setPlayIcon('&#9654;'); setPlayIcon(SVG_PLAY);
setBadge(playerStateBadge, 'paused'); setBadge(playerStateBadge, 'paused');
var pct = (audio.duration && isFinite(audio.duration)) var pct = (audio.duration && isFinite(audio.duration))
? Math.round((audio.currentTime / audio.duration) * 100) : 0; ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
@@ -2633,7 +2635,7 @@ const chapterTmpl = `
} }
function setStopped() { function setStopped() {
highlightPara(-1); highlightPara(-1);
setPlayIcon('&#9654;'); setPlayIcon(SVG_PLAY);
playerPlayBtn.disabled = false; playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false; voiceSel.disabled = false; speedSlider.disabled = false;
setBadge(playerStateBadge, 'idle'); setBadge(playerStateBadge, 'idle');
@@ -2651,7 +2653,7 @@ const chapterTmpl = `
function setError(msg) { function setError(msg) {
if (stale()) return; if (stale()) return;
highlightPara(-1); highlightPara(-1);
setPlayIcon('&#9654;'); setPlayIcon(SVG_PLAY);
playerPlayBtn.disabled = false; playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false; voiceSel.disabled = false; speedSlider.disabled = false;
setBadge(playerStateBadge, 'error'); setBadge(playerStateBadge, 'error');