stream: show a copyable stream URL for external players
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:
parent
c6d642a945
commit
04ea54c03e
1 changed files with 35 additions and 0 deletions
|
|
@ -27,6 +27,20 @@
|
|||
word-wrap: break-word; }
|
||||
.artist { margin-top: .35rem; font-size: 1.05rem; color: #b8b2c8; }
|
||||
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%;
|
||||
background: #4ade80; margin-right: .4rem; vertical-align: middle;
|
||||
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="artist" id="artist"></div>
|
||||
<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>
|
||||
<script>
|
||||
const titleEl = document.getElementById("title");
|
||||
|
|
@ -78,6 +96,23 @@
|
|||
document.title = t ? (a ? `${t} — ${a} · radieo` : `${t} · radieo`) : "radieo";
|
||||
} 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();
|
||||
setInterval(poll, 5000);
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue