Mercurial > code > home > repos > light9

changeset 2058:16c7dd543250

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
asco web: fix more porting bugs. UI might work (except for time slider)
author drewp@bigasterisk.com
date Fri, 13 May 2022 15:30:45 -0700
parents d41530a84d4b
children 1d50165c73b8
files light9/ascoltami/index.html light9/ascoltami/main.ts
diffstat 2 files changed, 71 insertions(+), 46 deletions(-) [+]
line wrap: on
line diff
--- a/light9/ascoltami/index.html	Fri May 13 14:56:08 2022 -0700
+++ b/light9/ascoltami/index.html	Fri May 13 15:30:45 2022 -0700
@@ -41,11 +41,6 @@
       <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>
--- a/light9/ascoltami/main.ts	Fri May 13 14:56:08 2022 -0700
+++ b/light9/ascoltami/main.ts	Fri May 13 15:30:45 2022 -0700
@@ -29,12 +29,17 @@
     }
     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 @@
   }
 
   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) {
@@ -101,16 +115,28 @@
   });
 
   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 @@
     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 @@
     };
     onUpdate();
     await updateCurrent();
-	whenDone();
+    whenDone();
   }
   updateLoop();
 }