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

stream: show a copyable stream URL for external players

Browse source 
Add a read-only field with the bare /radio.mp3 URL and a copy button
(clipboard API, with a select+execCommand fallback), so the stream can
easily be opened in VLC or another external player.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-07-02 23:45:55 +08:00
commit 04ea54c03e
1 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

35
stream/index.html
View file

@ -27,6 +27,20 @@
word-wrap: break-word; } word-wrap: break-word; }
.artist { margin-top: .35rem; font-size: 1.05rem; color: #b8b2c8; } .artist { margin-top: .35rem; font-size: 1.05rem; color: #b8b2c8; }
audio { width: 100%; margin-top: 2rem; } audio { width: 100%; margin-top: 2rem; }
.share { display: flex; gap: .5rem; margin-top: 1rem; }
.share input {
flex: 1; min-width: 0; padding: .55rem .7rem; font-size: .85rem;
color: #cfc9de; background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
font-family: ui-monospace, monospace;
}
.share button {
padding: .55rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer;
color: #f2f0f7; background: rgba(155,140,255,.18);
border: 1px solid rgba(155,140,255,.35); border-radius: 10px;
transition: background .15s;
}
.share button:hover { background: rgba(155,140,255,.3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #4ade80; margin-right: .4rem; vertical-align: middle; background: #4ade80; margin-right: .4rem; vertical-align: middle;
box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2s infinite; } box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2s infinite; }
@ -44,6 +58,10 @@
<div class="title" id="title">—</div> <div class="title" id="title">—</div>
<div class="artist" id="artist"></div> <div class="artist" id="artist"></div>
<audio id="player" controls autoplay preload="none"></audio> <audio id="player" controls autoplay preload="none"></audio>
<div class="share">
<input id="streamUrl" type="text" readonly>
<button id="copyBtn" type="button">Copier</button>
</div>
</main> </main>
<script> <script>
const titleEl = document.getElementById("title"); const titleEl = document.getElementById("title");
@ -78,6 +96,23 @@
document.title = t ? (a ? `${t} — ${a} · radieo` : `${t} · radieo`) : "radieo"; document.title = t ? (a ? `${t} — ${a} · radieo` : `${t} · radieo`) : "radieo";
} catch (e) { /* keep last known values */ } } 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");
const copyBtn = document.getElementById("copyBtn");
urlEl.value = shareUrl;
copyBtn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(shareUrl);
} catch (e) {
urlEl.select();
document.execCommand("copy");
}
const prev = copyBtn.textContent;
copyBtn.textContent = "Copié !";
setTimeout(() => { copyBtn.textContent = prev; }, 1500);
});
poll(); poll();
setInterval(poll, 5000); setInterval(poll, 5000);
</script> </script>