fix: proper SVG play/pause icons, preserve progress on resume, fix badge row alignment
Some checks failed
CI / Lint (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Build (push) Has been cancelled

This commit is contained in:
Admin
2026-03-02 12:49:36 +05:00
parent 98fd0de7bc
commit 00a6d2ce43

View File

@@ -2310,19 +2310,17 @@ const chapterTmpl = `
<button id="player-play-btn" type="button" onclick="ttsToggle()"
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">
<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>
<!-- Centre info -->
<div class="flex-1 min-w-0 flex flex-col justify-center 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-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
<!-- next-chapter prefetch badge -->
<span id="player-next-row" hidden>
<span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
</span>
</div>
<div class="flex-1 min-w-0 flex items-center gap-1.5 px-1">
<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>
<!-- next-chapter prefetch badge -->
<span id="player-next-row" hidden class="flex-shrink-0">
<span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
</span>
</div>
<!-- Settings -->
@@ -2597,6 +2595,8 @@ const chapterTmpl = `
}
// ── 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 setGenerating() {
@@ -2610,11 +2610,13 @@ const chapterTmpl = `
}
function setPlaying() {
if (stale()) return;
setPlayIcon('&#9646;&#9646;');
setPlayIcon(SVG_PAUSE);
playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false;
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;
setStatus('');
showSeek();
@@ -2622,7 +2624,7 @@ const chapterTmpl = `
}
function setPaused() {
if (stale()) return;
setPlayIcon('&#9654;');
setPlayIcon(SVG_PLAY);
setBadge(playerStateBadge, 'paused');
var pct = (audio.duration && isFinite(audio.duration))
? Math.round((audio.currentTime / audio.duration) * 100) : 0;
@@ -2633,7 +2635,7 @@ const chapterTmpl = `
}
function setStopped() {
highlightPara(-1);
setPlayIcon('&#9654;');
setPlayIcon(SVG_PLAY);
playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false;
setBadge(playerStateBadge, 'idle');
@@ -2651,7 +2653,7 @@ const chapterTmpl = `
function setError(msg) {
if (stale()) return;
highlightPara(-1);
setPlayIcon('&#9654;');
setPlayIcon(SVG_PLAY);
playerPlayBtn.disabled = false;
voiceSel.disabled = false; speedSlider.disabled = false;
setBadge(playerStateBadge, 'error');