light9 Changeset - 16c7dd543250

Changeset - 16c7dd543250

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 3 years ago 2022-05-13 22:30:45
drewp@bigasterisk.com

asco web: fix more porting bugs. UI might work (except for time slider)

2 files changed with 71 insertions and 46 deletions:

light9/ascoltami/index.html

light9/ascoltami/main.ts

0 comments (0 inline, 0 general)

light9/ascoltami/index.html

➞

Show inline comments

@@ @@ -32,25 +32,20 @@ @@
       </table>
       <div class="timeRow">
         <div id="timeSlider"></div>
       </div>
     </div>
     <div class="commands">
       <button id="cmd-stop" class="playMode"><strong>Stop</strong><div class="key">s</div></button>
       <button id="cmd-play" class="playMode"><strong>Play</strong> <div class="key">p</div></button>
       <button id="cmd-intro"><strong>Skip intro</strong> <div class="key">i</div></button>
       <button id="cmd-post"><strong>Skip to Post</strong> <div class="key">t</div></button>
       <button id="cmd-go"><strong>Go</strong> <div class="key">g</div><div id="next"></div></button>
       <!--
       <button id="cmd-out0"><strong>Output 0</strong></button>
       <button id="cmd-out1"><strong>Output 1</strong></button>
       -->
     </div>
     <p>Running on <span id="nav"></span></p>
     <p><a href="">reload</a></p>
     <script type="module" src="main.ts"></script>
   </body>
 </html>

light9/ascoltami/main.ts

➞

Show inline comments

@@ @@ -20,69 +20,83 @@ async function onLoad() { @@
   let currentDuration = 0;
   let currentHighlightedSong = "";
   let lastPlaying = false;
   async function updateCurrent() {
     const data = await (await fetch("api/time")).json();
     byId("currentSong").innerText = data.song;
     if (data.song != currentHighlightedSong) {
       showCurrentSong(data.song);
+    }
     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(
 ,
       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;
+    }
     byId("next").innerText = data.next;
+  }
   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($("<span>").addClass("num").text(song.label.slice(0, 2)));
         link.appendChild($("<span>").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($("<div>").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) {
       byId("cmd-stop").click();
       return false;
+    }
     if (ev.which == 112) {
       byId("cmd-play").click();
       return false;
+    }
     if (ev.which == 105) {
       byId("cmd-intro").click();
@@ @@ -92,34 +106,46 @@ async function onLoad() { @@
       byId("cmd-post").click();
       return false;
+    }
     if (ev.key == "g") {
       byId("cmd-go").click();
       return false;
+    }
     return true;
   });
   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({
   //     step: 0.01,
   //     slide: function (event, ui) {
   //       if (pendingSlide) {
   //         return;
   //       }
   //       pendingSlide = true;
   //       $.post("time", '{"t" : ' + ui.value + "}", function (data, status, xhr) {
   //         pendingSlide = false;
   //       });
@@ @@ -128,35 +154,39 @@ async function onLoad() { @@
   let recentUpdates: Array<number> = [];
   function onUpdate() {
     recentUpdates.push(+new Date());
     recentUpdates = recentUpdates.slice(Math.max(recentUpdates.length - 5, 0));
     refreshUpdateFreqs();
+  }
   function refreshUpdateFreqs() {
     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);
+    }
+  }
   setInterval(refreshUpdateFreqs, 2000);
   async function updateLoop() {
     var whenDone = function () {
       setTimeout(function () {
         requestAnimationFrame(updateLoop);
       }, 1000 / updateFreq);
     };
     onUpdate();
     await updateCurrent();
-	whenDone();
+    whenDone();
+  }
   updateLoop();
+}
 onLoad();

0 comments (0 inline, 0 general)