nemunaire/radieo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stream: show the queue of upcoming tracks (/queue)

Browse source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-07-04 11:10:37 +08:00
commit 62302ac21d
4 changed files with 98 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

61
stream/index.html
View file

@ -71,11 +71,11 @@
}
.actions button:hover, .actions a:hover { background: rgba(155,140,255,.3); }
.actions button:disabled { opacity: .5; cursor: default; }
.history { margin-top: 1.75rem; text-align: left; }
.history h2 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
.history, .queue { margin-top: 1.75rem; text-align: left; }
.history h2, .queue h2 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
color: #7d768f; margin: 0 0 .4rem; font-weight: 600; }
.history ul { list-style: none; margin: 0; padding: 0; }
.history li { border-top: 1px solid rgba(255,255,255,.06); }
.history ul, .queue ul { list-style: none; margin: 0; padding: 0; }
.history li, .queue li { border-top: 1px solid rgba(255,255,255,.06); }
.history .h-row {
display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
}
@ -83,11 +83,17 @@
.history .h-act { color: #7d768f; font-size: .95rem; text-decoration: none;
transition: color .15s; }
.history .h-act:hover { color: #9b8cff; }
.history .h-title { color: #e8e4f2; font-size: .92rem; }
.history .h-title a { color: inherit; text-decoration: none; transition: color .15s; }
.history .h-title a:hover { color: #9b8cff; text-decoration: underline; }
.history .h-artist { color: #8b849c; font-size: .8rem; margin-top: .1rem; }
.history .empty { color: #6b6480; font-size: .85rem; padding: .45rem 0; }
.history .h-title, .queue .h-title { color: #e8e4f2; font-size: .92rem; }
.history .h-title a, .queue .h-title a { color: inherit; text-decoration: none; transition: color .15s; }
.history .h-title a:hover, .queue .h-title a:hover { color: #9b8cff; text-decoration: underline; }
.history .h-artist, .queue .h-artist { color: #8b849c; font-size: .8rem; margin-top: .1rem; }
.history .empty, .queue .empty { color: #6b6480; font-size: .85rem; padding: .45rem 0; }
/* File d'attente : rang discret devant chaque titre à venir. */
.queue li { padding: .45rem 0; }
.queue .q-item { display: flex; align-items: baseline; gap: .6rem; }
.queue .q-num { color: #6b6480; font-size: .8rem; font-variant-numeric: tabular-nums;
min-width: 1.2em; text-align: right; }
.queue .q-meta { flex: 1; min-width: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #4ade80; margin-right: .4rem; vertical-align: middle;
box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2s infinite; }
@ -114,6 +120,10 @@
<input id="streamUrl" type="text" readonly>
<button id="copyBtn" type="button">Copier</button>
</div>
<section class="queue">
<h2>File d'attente</h2>
<ul id="queueList"></ul>
</section>
<section class="history">
<h2>Historique</h2>
<ul id="historyList"></ul>
@ -344,6 +354,34 @@
}).join("");
} catch (e) { /* keep last known values */ }
}
// File d'attente : les prochains morceaux déjà préchargés par le daemon
// d'ingestion, relayés par le stream via /queue (le plus proche en tête).
// La liste est courte (bornée par PREFETCH) et peut être vide au démarrage.
const queueList = document.getElementById("queueList");
async function pollQueue() {
try {
const r = await fetch("/queue", { cache: "no-store" });
const items = await r.json();
const next = Array.isArray(items) ? items : [];
if (next.length === 0) {
queueList.innerHTML = '<li class="empty">—</li>';
return;
}
queueList.innerHTML = next.map((m, i) => {
const t = escapeHtml((m.title || "").trim() || "—");
const a = (m.artist || "").trim();
const artist = a ? `<div class="h-artist">${escapeHtml(a)}</div>` : "";
// Titre cliquable vers la page d'origine (yt-dlp) quand elle existe.
const u = (m.url || "").trim();
const titleHtml = u
? `<a href="${escapeHtml(u)}" target="_blank" rel="noopener">${t}</a>`
: t;
const meta = `<div class="q-meta"><div class="h-title">${titleHtml}</div>${artist}</div>`;
return `<li><div class="q-item"><span class="q-num">${i + 1}</span>${meta}</div></li>`;
}).join("");
} catch (e) { /* keep last known values */ }
}
// Lien nu du flux, à ouvrir dans un lecteur externe (VLC…).
const shareUrl = location.origin + "/radio.mp3";
const urlEl = document.getElementById("streamUrl");
@ -367,13 +405,14 @@
skipBtn.disabled = true;
try { await fetch("/skip", { method: "POST" }); } catch (e) { /* ignore */ }
// Laisser le temps à la bascule, puis rafraîchir l'affichage.
setTimeout(() => { skipBtn.disabled = false; poll(); pollHistory(); }, 900);
setTimeout(() => { skipBtn.disabled = false; poll(); pollHistory(); pollQueue(); }, 900);
});
poll();
pollHistory();
pollQueue();
pollStatus();
setInterval(() => { poll(); pollHistory(); pollStatus(); }, 5000);
setInterval(() => { poll(); pollHistory(); pollQueue(); pollStatus(); }, 5000);
</script>
</body>
</html>