diff --git a/light9/ascoltami/index.html b/light9/ascoltami/index.html --- a/light9/ascoltami/index.html +++ b/light9/ascoltami/index.html @@ -41,11 +41,6 @@ - -

Running on

diff --git a/light9/ascoltami/main.ts b/light9/ascoltami/main.ts --- a/light9/ascoltami/main.ts +++ b/light9/ascoltami/main.ts @@ -29,12 +29,17 @@ async function onLoad() { } byId("currentTime").innerText = data.t.toFixed(1); byId("leftTime").innerText = (data.duration - data.t).toFixed(1); - byId("leftAutoStopTime").innerText = Math.max(0, data.duration - times.post - data.t).toFixed(1); + byId("leftAutoStopTime").innerText = Math.max( + 0, + data.duration - times.post - data.t + ).toFixed(1); byId("states").innerText = JSON.stringify(data.state); currentDuration = data.duration; // document.querySelector("#timeSlider").slider({ value: data.t, max: data.duration }); if (data.playing != lastPlaying) { - document.querySelectorAll(".playMode").forEach((e: Element) => e.classList.remove("active")); + document + .querySelectorAll(".playMode") + .forEach((e: Element) => e.classList.remove("active")); byId(data.playing ? "cmd-play" : "cmd-stop").classList.add("active"); lastPlaying = data.playing; } @@ -42,38 +47,47 @@ async function onLoad() { } function showCurrentSong(uri: string) { - document.querySelectorAll(".songs div").forEach((row: Element, i: number) => { - if (row.querySelector("button")!.dataset.uri == uri) { - row.classList.add("currentSong"); - } else { - row.classList.remove("currentSong"); - } - }); + document + .querySelectorAll(".songs div") + .forEach((row: Element, i: number) => { + if (row.querySelector("button")!.dataset.uri == uri) { + row.classList.add("currentSong"); + } else { + row.classList.remove("currentSong"); + } + }); currentHighlightedSong = uri; } - const data = await (await fetch('api/songs')).json() - data.songs.forEach((song)=> { - const button = document.createElement("button"); - // link is just for dragging, not clicking - const link = document.createElement("a"); - link.appendChild($("").addClass("num").text(song.label.slice(0, 2))); - link.appendChild($("").addClass("song-name").text(song.label.slice(2).trim())); - link.setAttribute("href", song.uri); - link.addEventListener("click", (ev) => { - ev.stopPropagation() - button.click(); - }); - button.appendChild(link); - button.dataset.uri=(song); - button.click(function () { - fetch('api/song', {method: 'POST', body: song$.post("song", button.data("uri"), function (data, textStatus, xhr) { - showCurrentSong(song.uri); - }); - }); - $(".songs").append($("
").append(button)); - }); + const data = await (await fetch("api/songs")).json(); + data.songs.forEach((song) => { + const button = document.createElement("button"); + // link is just for dragging, not clicking + const link = document.createElement("a"); + const n = document.createElement("span"); + n.classList.add("num"); + n.innerText = song.label.slice(0, 2); + link.appendChild(n); + + const sn = document.createElement("span"); + sn.classList.add("song-name"); + sn.innerText = song.label.slice(2).trim(); + link.appendChild(sn); + link.setAttribute("href", song.uri); + link.addEventListener("click", (ev) => { + ev.stopPropagation(); + button.click(); }); + button.appendChild(link); + button.dataset.uri = song; + button.addEventListener("click", async (ev) => { + await fetch("api/song", { method: "POST", body: song.uri }); + showCurrentSong(song.uri); + }); + const dv = document.createElement("div"); + dv.appendChild(button); + document.querySelector(".songs").appendChild(dv); + }); document.addEventListener("keypress", (ev) => { if (ev.which == 115) { @@ -101,16 +115,28 @@ async function onLoad() { }); async function postJson(url: string, jsBody: Object) { - return fetch(url, { method: "POST", headers: { "Content-Type": "applcation/json" }, body: JSON.stringify(jsBody) }); + return fetch(url, { + method: "POST", + headers: { "Content-Type": "applcation/json" }, + body: JSON.stringify(jsBody), + }); } - byId("cmd-stop").addEventListener("click", (ev: Event) => postJson("time", { pause: true })); - byId("cmd-play").addEventListener("click", (ev: Event) => postJson("time", { resume: true })); - byId("cmd-intro").addEventListener("click", (ev: Event) => postJson("time", { t: times.intro, resume: true })); - byId("cmd-post").addEventListener("click", (ev: Event) => postJson("time", { t: currentDuration - times.post, resume: true })); - byId("cmd-go").addEventListener("click", (ev: Event) => postJson("go", {})); - byId("cmd-out0").addEventListener("click", (ev: Event) => postJson("output", { sink: "0" })); - byId("cmd-out1").addEventListener("click", (ev: Event) => postJson("output", { sink: "1" })); + byId("cmd-stop").addEventListener("click", (ev: Event) => + postJson("api/time", { pause: true }) + ); + byId("cmd-play").addEventListener("click", (ev: Event) => + postJson("api/time", { resume: true }) + ); + byId("cmd-intro").addEventListener("click", (ev: Event) => + postJson("api/time", { t: times.intro, resume: true }) + ); + byId("cmd-post").addEventListener("click", (ev: Event) => + postJson("api/time", { t: currentDuration - times.post, resume: true }) + ); + byId("cmd-go").addEventListener("click", (ev: Event) => + postJson("api/go", {}) + ); // var pendingSlide = false; // $("#timeSlider").slider({ @@ -137,11 +163,15 @@ async function onLoad() { if (recentUpdates.length > 1) { if (+new Date() - recentUpdates[recentUpdates.length - 1] > 1000) { byId("updateActual").innerText = "(stalled)"; - document.querySelectorAll(".dimStalled").forEach((el) => el.classList.add("stalled")); + document + .querySelectorAll(".dimStalled") + .forEach((el) => el.classList.add("stalled")); return; } - var avgMs = (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / (recentUpdates.length - 1); + var avgMs = + (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / + (recentUpdates.length - 1); byId("updateActual").innerText = "" + Math.round(1000 / avgMs); } } @@ -155,7 +185,7 @@ async function onLoad() { }; onUpdate(); await updateCurrent(); - whenDone(); + whenDone(); } updateLoop(); }