const $ = id => document.getElementById(id); function update() { fetch("/api/status") .then(r => r.json()) .then(r => { $("radio-song").textContent = `${r.current_song.artist} - ${r.current_song.title}`; $("radio-duration").textContent = r.current_song.duration; $("radio-listeners").textContent = r.listeners.current; $("radio-listener-peak").textContent = r.listeners.peak; }).catch(() => { $("radio-song").textContent = ""; $("radio-listeners").textContent = $("radio-listener-peak").textContent = "0"; }); } function updateRadioStatus() { fetch("/status") .then(r => r.json()) .then(r => { $("radio-song").textContent = r.song; $("radio-listeners").textContent = r.listeners; $("radio-listener-peak").textContent = r.listener_peak; }).catch(() => { $("radio-song").textContent = ""; $("radio-listeners").textContent = $("radio-listener-peak").textContent = "0"; }); } function updateLastPlayedSong() { fetch("/lastsong") .then(r => r.json()) .then(last_played => { if ($("last-songs").firstChild === null) $("last-songs").appendChild(document.createElement("tbody")); else if (last_played.time == $("last-songs").firstChild.lastChild.firstChild.textContent) return; if ($("last-songs").firstChild.children.length == 10) $("last-songs").firstChild.firstChild.remove(); let row = $("last-songs").insertRow(); row.insertCell().appendChild(document.createTextNode(last_played.time)); row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners)); row.insertCell().appendChild(document.createTextNode(last_played.song)); }); } $("radio-update").addEventListener("click", () => update()); setInterval(update, 45000); const audio = document.getElementsByTagName("audio")[0]; audio.hidden = true; const audio_src = audio.childNodes[0].src; const volume = $("radio-volume"); audio.volume = volume.value / 100.0; volume.addEventListener("input", e => audio.volume = e.target.value / 100.0); $("player").style.display = $("player").firstChild.style.display = "flex"; $("radio-play").addEventListener("click", e => { audio.paused ? (audio.src = audio_src) && audio.play() : audio.src = ""; e.target.style.maskImage = e.target.style.webkitMaskImage = audio.paused ? "url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; });