fix: proper SVG play/pause icons, preserve progress on resume, fix badge row alignment
This commit is contained in:
@@ -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">▶</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. {{.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. {{.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('▮▮');
|
||||
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('▶');
|
||||
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('▶');
|
||||
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('▶');
|
||||
setPlayIcon(SVG_PLAY);
|
||||
playerPlayBtn.disabled = false;
|
||||
voiceSel.disabled = false; speedSlider.disabled = false;
|
||||
setBadge(playerStateBadge, 'error');
|
||||
|
||||
Reference in New Issue
Block a user