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

function $(id) { return document.getElementById(id); }

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-played").firstChild === null)
			$("last-played").appendChild(document.createElement("tbody"))
		else if (last_played.time == $("last-played").firstChild.lastChild.firstChild.innerText)
			return;

		if ($("last-played").firstChild.children.length == 10)
			$("last-played").firstChild.firstChild.remove();

		let row = $("last-played").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));
	});
}

document.getElementsByName("update")[0].addEventListener("click", () => {
	updateLastPlayedSong();
	updateRadioStatus();
})

setInterval(updateRadioStatus, 45000);
setInterval(updateLastPlayedSong, 45000);

const audio = document.getElementsByTagName("audio")[0];
const volume = document.getElementsByName("volume")[0];

const audio_src = audio.childNodes[0].src;
audio.hidden = true;
audio.volume = parseFloat(volume.value) / 100.0;
document.querySelector("#player div:first-child").style.display = "flex";
$("player").style.display = "flex";

volume.addEventListener("input", e => {
	audio.volume = parseFloat(e.target.value) / 100.0; });

document.getElementsByName("play")[0].addEventListener("click", e => {
	if (audio.paused) {
		audio.src = audio_src;
		audio.play();
	} else {
		audio.pause();
		audio.src = "";
	}
	e.target.style.maskImage = e.target.style.webkitMaskImage = audio.paused ?
		"url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; });

audio.addEventListener("timeupdate", e => {
	const ct = e.target.currentTime;
	const s = Math.floor(ct % 60);
	const m = Math.floor((ct / 60) % 60);
	const h = Math.floor(ct / 3600);
	document.getElementsByClassName("elapsed")[0].textContent = `${h}h ${m}m ${s}s`; });