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

stream: link the now-playing title to its source page

Browse source 
For yt-dlp tracks the locator is the original web page, so pass it as a
url annotation, carry it through the stream metadata and history, and
turn the track title into a link back to that page (both live and in the
history). Subsonic ids are opaque and stay plain text.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-07-03 12:14:50 +08:00
commit c12e522fee
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

42
stream/index.html
View file

@ -25,6 +25,8 @@
color: #7d768f; margin-bottom: .5rem; }
.title { font-size: 1.55rem; font-weight: 650; line-height: 1.25;
word-wrap: break-word; }
.title a { color: inherit; text-decoration: none; transition: color .15s; }
.title a:hover { color: #9b8cff; text-decoration: underline; }
.artist { margin-top: .35rem; font-size: 1.05rem; color: #b8b2c8; }
audio { width: 100%; margin-top: 2rem; }
.share { display: flex; gap: .5rem; margin-top: 1rem; }
@ -56,16 +58,16 @@
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 li > :not(a) { padding: .45rem 0; }
.history .h-dl {
.history .h-row {
display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
text-decoration: none; color: inherit;
}
.history .h-dl > div { flex: 1; min-width: 0; }
.history .h-icon { color: #7d768f; font-size: .95rem; transition: color .15s; }
.history .h-dl:hover .h-icon { color: #9b8cff; }
.history .h-dl:hover .h-title { color: #fff; }
.history .h-meta { flex: 1; min-width: 0; }
.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; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
@ -163,7 +165,13 @@
const m = await r.json();
const t = (m.title || "").trim();
const a = (m.artist || "").trim();
titleEl.textContent = t || "—";
// Le titre devient un lien vers la page d'origine (yt-dlp) quand elle
// est connue ; sinon simple texte.
const u = (m.url || "").trim();
const label = t || "—";
titleEl.innerHTML = u
? `<a href="${escapeHtml(u)}" target="_blank" rel="noopener">${escapeHtml(label)}</a>`
: escapeHtml(label);
artistEl.textContent = a;
document.title = t ? (a ? `${t} — ${a} · ${STATION_NAME}` : `${t} · ${STATION_NAME}`) : STATION_NAME;
} catch (e) { /* keep last known values */ }
@ -188,14 +196,18 @@
const t = escapeHtml((m.title || "").trim() || "—");
const a = (m.artist || "").trim();
const artist = a ? `<div class="h-artist">${escapeHtml(a)}</div>` : "";
const meta = `<div class="h-title">${t}</div>${artist}`;
// Lien de téléchargement si le fichier est encore dans le cache.
// Le titre porte le lien vers la page d'origine (yt-dlp) quand elle
// existe ; le téléchargement reste une action distincte à côté.
const u = (m.url || "").trim();
const titleHtml = u
? `<a href="${escapeHtml(u)}" target="_blank" rel="noopener">${t}</a>`
: t;
const meta = `<div class="h-meta"><div class="h-title">${titleHtml}</div>${artist}</div>`;
const f = (m.file || "").trim();
if (f) {
const href = "/download?file=" + encodeURIComponent(f);
return `<li><a class="h-dl" href="${href}" download>${meta}<span class="h-icon">⬇</span></a></li>`;
}
return `<li>${meta}</li>`;
const dl = f
? `<a class="h-act" href="/download?file=${encodeURIComponent(f)}" download title="Télécharger">⬇</a>`
: "";
return `<li><div class="h-row">${meta}${dl}</div></li>`;
}).join("");
} catch (e) { /* keep last known values */ }
}