Show live % progress in playing badge, generation time in idle badge

scraper/internal/server/ui.go

@@ -2439,6 +2439,7 @@ const chapterTmpl = `
     voiceSel.disabled    = false;
     speedSlider.disabled = false;
     setBadge(playerStateBadge, 'playing');
+    playerStateBadge.textContent = '0%';
     playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N;
     setStatus('');
     showSeek();
@@ -2448,6 +2449,10 @@ const chapterTmpl = `
     if (stale()) return;
     setPlayIcon('▶');
     setBadge(playerStateBadge, 'paused');
+    // Keep showing current % while paused.
+    var pct = (audio.duration && isFinite(audio.duration))
+      ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
+    playerStateBadge.textContent = pct + '%';
     setStatus('');
     showSeek();
     if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused';
@@ -2459,6 +2464,11 @@ const chapterTmpl = `
     voiceSel.disabled    = false;
     speedSlider.disabled = false;
     setBadge(playerStateBadge, 'idle');
+    // Show how long TTS generation took, if we have a timestamp.
+    if (genStartTime > 0) {
+      var secs = ((Date.now() - genStartTime) / 1000).toFixed(1);
+      playerStateBadge.textContent = secs + 's';
+    }
     playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N;
     setStatus('');
     hideSeek();
@@ -2485,11 +2495,13 @@ const chapterTmpl = `
 
   // ── server-side audio generation ─────────────────────────────────────────────
   var currentAudioCtrl = null;
+  var genStartTime     = 0; // Date.now() when generation began
 
   function generateAudio(chapterN, cb) {
     if (currentAudioCtrl) { currentAudioCtrl.abort(); }
     var ctrl = new AbortController();
     currentAudioCtrl = ctrl;
+    genStartTime = Date.now();
 
     fetch('/ui/audio/' + SLUG + '/' + chapterN, {
       method:  'POST',
@@ -2523,6 +2535,10 @@ const chapterTmpl = `
   function onTimeUpdate() {
     if (stale()) { audio.removeEventListener('timeupdate', onTimeUpdate); return; }
     updateSeek();
+    // Live % progress in the badge while playing.
+    if (audio.duration && isFinite(audio.duration) && !audio.paused) {
+      playerStateBadge.textContent = Math.round((audio.currentTime / audio.duration) * 100) + '%';
+    }
     if (!NEXT_N || prefetchFired || !audio.duration || !isFinite(audio.duration)) {
     } else if (audio.currentTime / audio.duration >= 0.8) {
       prefetchFired = true;