main.js was rewritten and now it displays estimate and total duration of a current song.
This commit is contained in:
parent
238705b00f
commit
f0420e9bcd
@ -1,60 +1,85 @@
|
|||||||
const $ = id => document.getElementById(id);
|
const $ = id => document.getElementById(id);
|
||||||
|
|
||||||
function update() {
|
const formatDuration = date => `${date.getUTCHours() > 0 ? date.getUTCHours() + ":" : ""}${date.getUTCMinutes()}:${date.getUTCSeconds().toString().padStart(2, "0")}`;
|
||||||
fetch("/api/status")
|
const formatStartAt = date => `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
|
||||||
.then(r => r.json())
|
|
||||||
.then(r => {
|
let cursong_startat = null;
|
||||||
$("radio-song").textContent = `${r.current_song.artist} - ${r.current_song.title}`;
|
let cursong_duration_msec = 0;
|
||||||
$("radio-duration").textContent = r.current_song.duration;
|
|
||||||
$("radio-listeners").textContent = r.listeners.current;
|
async function updateStatus() {
|
||||||
$("radio-listener-peak").textContent = r.listeners.peak;
|
const resp = await fetch("/api/status");
|
||||||
}).catch(() => {
|
|
||||||
$("radio-song").textContent = "";
|
if (!resp.ok || 200 != resp.status) {
|
||||||
|
$("radio-song").textContent =
|
||||||
|
$("radio-duration-estimate").textContent =
|
||||||
|
$("radio-duration").textContent = "";
|
||||||
$("radio-listeners").textContent =
|
$("radio-listeners").textContent =
|
||||||
$("radio-listener-peak").textContent = "0"; });
|
$("radio-listener-peak").textContent = "0";
|
||||||
|
$("last-songs").firstChild.remove();
|
||||||
|
return [-1, null];
|
||||||
|
}
|
||||||
|
|
||||||
|
const s = await resp.json();
|
||||||
|
|
||||||
|
if (undefined == s.current_song)
|
||||||
|
return [-1, null];
|
||||||
|
|
||||||
|
$("radio-song").textContent = `${s.current_song.artist} - ${s.current_song.title}`;
|
||||||
|
$("radio-duration").textContent = formatDuration(new Date(s.current_song.duration_msec));
|
||||||
|
$("radio-listeners").textContent = s.listeners.current;
|
||||||
|
$("radio-listener-peak").textContent = s.listeners.peak;
|
||||||
|
|
||||||
|
if (undefined != s.last_songs) {
|
||||||
|
$("last-songs").firstChild.remove();
|
||||||
|
$("last-songs").appendChild(document.createElement("tbody"));
|
||||||
|
for (let i = 0; i < s.last_songs.length; ++i) {
|
||||||
|
let row = $("last-songs").insertRow();
|
||||||
|
row.insertCell().appendChild(document.createTextNode(formatStartAt(new Date(s.last_songs[i].start_at))));
|
||||||
|
row.insertCell().appendChild(document.createTextNode(s.last_songs[i].listeners == 0 ? "" : s.last_songs[i].listeners));
|
||||||
|
row.insertCell().appendChild(document.createTextNode(`${s.last_songs[i].artist} - ${s.last_songs[i].title}`));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [s.current_song.duration_msec, new Date(s.current_song.start_at)];
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateRadioStatus() {
|
async function update() {
|
||||||
fetch("/status")
|
if (null === cursong_startat)
|
||||||
.then(r => r.json())
|
return false;
|
||||||
.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() {
|
const estimate = (new Date()) - (new Date(cursong_startat));
|
||||||
fetch("/lastsong")
|
if (estimate >= cursong_duration_msec) {
|
||||||
.then(r => r.json())
|
return false;
|
||||||
.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)
|
$("radio-duration-estimate").textContent = `${formatDuration(new Date(estimate))} / `;
|
||||||
$("last-songs").firstChild.firstChild.remove();
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
let row = $("last-songs").insertRow();
|
$("radio-update").addEventListener("click", async () =>
|
||||||
row.insertCell().appendChild(document.createTextNode(last_played.time));
|
[cursong_duration_msec, cursong_startat] = await updateStatus());
|
||||||
row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners));
|
|
||||||
row.insertCell().appendChild(document.createTextNode(last_played.song)); }); }
|
|
||||||
|
let update_interval_id = null;
|
||||||
|
async function interval() {
|
||||||
|
if (!await update()) {
|
||||||
|
clearInterval(update_interval_id);
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 5000));
|
||||||
|
[cursong_duration_msec, cursong_startat] = await updateStatus();
|
||||||
|
update_interval_id = setInterval(interval, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update_interval_id = setInterval(interval, 1000);
|
||||||
|
|
||||||
$("radio-update").addEventListener("click", () => update());
|
|
||||||
|
|
||||||
setInterval(update, 45000);
|
|
||||||
|
|
||||||
const audio = document.getElementsByTagName("audio")[0];
|
const audio = document.getElementsByTagName("audio")[0];
|
||||||
audio.hidden = true;
|
audio.hidden = true;
|
||||||
const audio_src = audio.childNodes[0].src;
|
const audio_src = audio.childNodes[0].src;
|
||||||
|
|
||||||
const volume = $("radio-volume");
|
const volume = $("radio-volume");
|
||||||
|
|
||||||
audio.volume = volume.value / 100.0;
|
audio.volume = volume.value / 100.0;
|
||||||
|
|
||||||
volume.addEventListener("input", e => audio.volume = e.target.value / 100.0);
|
volume.addEventListener("input", e => audio.volume = e.target.value / 100.0);
|
||||||
|
|
||||||
$("player").style.display = $("player").firstChild.style.display = "flex";
|
$("player").style.display = $("player").firstChild.style.display = "flex";
|
||||||
|
Loading…
Reference in New Issue
Block a user