1
0
dwelling-radio/web/assets/js/main.js

66 lines
2.3 KiB
JavaScript
Raw Normal View History

2023-08-22 16:35:43 +04:00
const $ = id => document.getElementById(id);
2022-03-08 01:17:24 +04:00
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"; });
}
2022-03-08 01:17:24 +04:00
function updateRadioStatus() {
fetch("/status")
2022-03-08 01:17:24 +04:00
.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"; }); }
2022-03-08 01:17:24 +04:00
function updateLastPlayedSong() {
fetch("/lastsong")
2022-03-08 01:17:24 +04:00
.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;
2022-03-08 01:17:24 +04:00
if ($("last-songs").firstChild.children.length == 10)
$("last-songs").firstChild.firstChild.remove();
2022-03-08 01:17:24 +04:00
let row = $("last-songs").insertRow();
2022-04-01 18:42:13 +04:00
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)); }); }
2022-03-08 01:17:24 +04:00
$("radio-update").addEventListener("click", () => update());
2022-03-08 01:17:24 +04:00
setInterval(update, 45000);
2023-08-20 01:20:28 +04:00
2023-08-22 16:50:27 +04:00
const audio = document.getElementsByTagName("audio")[0];
audio.hidden = true;
const audio_src = audio.childNodes[0].src;
const volume = $("radio-volume");
2023-08-22 04:18:30 +04:00
2023-08-22 16:50:27 +04:00
audio.volume = volume.value / 100.0;
2023-08-20 01:20:28 +04:00
2023-08-22 16:50:27 +04:00
volume.addEventListener("input", e => audio.volume = e.target.value / 100.0);
2023-08-20 01:20:28 +04:00
2023-08-22 16:50:27 +04:00
$("player").style.display = $("player").firstChild.style.display = "flex";
2023-08-22 03:39:29 +04:00
$("radio-play").addEventListener("click", e => {
2023-08-22 16:50:27 +04:00
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)"; });