Pierre-Olivier Mercier
04ea54c03e
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>
120 lines
4.6 KiB
HTML
120 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>radieo</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; min-height: 100vh; display: flex; align-items: center;
|
|
justify-content: center; font-family: system-ui, sans-serif;
|
|
background: radial-gradient(circle at 30% 20%, #2a2140, #0d0b14 70%);
|
|
color: #f2f0f7;
|
|
}
|
|
.card {
|
|
width: min(90vw, 420px); padding: 2.5rem 2rem;
|
|
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
|
|
backdrop-filter: blur(8px); text-align: center;
|
|
}
|
|
.logo { font-size: .8rem; letter-spacing: .35em; text-transform: uppercase;
|
|
color: #9b8cff; margin-bottom: 1.75rem; }
|
|
.np-label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
|
|
color: #7d768f; margin-bottom: .5rem; }
|
|
.title { font-size: 1.55rem; font-weight: 650; line-height: 1.25;
|
|
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; }
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
|
|
70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="card">
|
|
<div class="logo">◈ radieo</div>
|
|
<div class="np-label"><span class="dot"></span>en cours</div>
|
|
<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");
|
|
const artistEl = document.getElementById("artist");
|
|
const player = document.getElementById("player");
|
|
|
|
// 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();
|
|
function goLive() {
|
|
player.src = liveUrl();
|
|
player.load();
|
|
player.play().catch(() => {});
|
|
}
|
|
goLive();
|
|
|
|
// Reprendre après une pause = revenir au direct, pas au point bufferisé.
|
|
let wasPaused = false;
|
|
player.addEventListener("pause", () => { wasPaused = true; });
|
|
player.addEventListener("play", () => {
|
|
if (wasPaused) { wasPaused = false; goLive(); }
|
|
});
|
|
|
|
async function poll() {
|
|
try {
|
|
const r = await fetch("/nowplaying", { cache: "no-store" });
|
|
const m = await r.json();
|
|
const t = (m.title || "").trim();
|
|
const a = (m.artist || "").trim();
|
|
titleEl.textContent = t || "—";
|
|
artistEl.textContent = a;
|
|
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>
|
|
</body>
|
|
</html>
|