stream: surface ingest prefetch progress in the player

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-07-03 12:22:53 +08:00
commit 1648030eba
4 changed files with 66 additions and 2 deletions

View file

@ -83,7 +83,7 @@
<body>
<main class="card">
<div class="logo" id="stationName"></div>
<div class="np-label"><span class="dot"></span>en cours</div>
<div class="np-label"><span class="dot"></span><span id="npLabel">Préchargement</span></div>
<div class="title" id="title"></div>
<div class="artist" id="artist"></div>
<audio id="player" controls autoplay preload="none"></audio>
@ -108,8 +108,32 @@
const titleEl = document.getElementById("title");
const artistEl = document.getElementById("artist");
const npLabel = document.getElementById("npLabel");
const player = document.getElementById("player");
// Tant que le buffer de préchargement (PREFETCH côté ingest) n'est pas
// rempli, on affiche « Préchargement N/M » plutôt que « en cours ». L'info
// vient du daemon d'ingestion, relayée par le stream via /ingest/status.
// Dès que le buffer est plein (ready >= prefetch), on bascule définitivement
// sur « en cours » : ensuite le buffer se vide et se remplit en continu, ce
// n'est plus un état de démarrage à signaler.
let bufferFull = false;
async function pollStatus() {
if (bufferFull) return;
try {
const r = await fetch("/ingest/status", { cache: "no-store" });
const s = await r.json();
const ready = Number(s.ready) || 0;
const prefetch = Number(s.prefetch) || 0;
if (prefetch > 0 && ready >= prefetch) {
bufferFull = true;
npLabel.textContent = "en cours";
} else {
npLabel.textContent = `Préchargement ${ready}/${prefetch || "…"}`;
}
} catch (e) { /* keep last known label */ }
}
// Flux « live » : un paramètre anti-cache force le navigateur à se
// (re)connecter au direct au lieu de rejouer un buffer périmé.
const liveUrl = () => "/radio.mp3?t=" + Date.now();
@ -239,7 +263,8 @@
poll();
pollHistory();
setInterval(() => { poll(); pollHistory(); }, 5000);
pollStatus();
setInterval(() => { poll(); pollHistory(); pollStatus(); }, 5000);
</script>
</body>
</html>