--- a/light9/ascoltami/Light9AscoltamiUi.ts	Mon Jun 06 01:15:32 2022 +0000
+++ b/light9/ascoltami/Light9AscoltamiUi.ts	Wed May 17 17:27:16 2023 -0700
@@ -66,23 +66,24 @@
         height: 100%;
       }
       #grow {
-
         flex: 1 1 auto;
         display: flex;
-
       }
       #grow > span {
         display: flex;
         position: relative;
-        width:50%;
+        width: 50%;
       }
       #playSelected {
-        height:100px;
+        height: 100px;
       }
       #songList {
         overflow-y: scroll;
         position: absolute;
-        left:0;top:0;right:0;bottom:0;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
       }
       #songList .row {
         width: 60%;
@@ -90,8 +91,12 @@
         text-align: left;
         position: relative;
       }
-      #songList .row:nth-child(even) {background: #333;}
-      #songList .row:nth-child(odd) {background: #444;}
+      #songList .row:nth-child(even) {
+        background: #333;
+      }
+      #songList .row:nth-child(odd) {
+        background: #444;
+      }
       #songList button {
         min-height: 40px;
         margin-bottom: 10px;
@@ -108,84 +113,55 @@
       <link rel="stylesheet" href="./style.css" />
 
       <!-- <h1>ascoltami <a href="metrics">[metrics]</a></h1> -->
-      
+
       <div id="grow">
         <span>
-                <div id="songList">
-                <table>
-                  ${this.songList.map(
-                    (song) => html`
-                      <tr
-                        class="row ${classMap({
-                          playing: !!(this.song && song.equals(this.song)),
-                        })}"
-                      >
-                        <td><resource-display .uri=${song}></resource-display></td>
-                        <td>
-                          <button @click=${this.onSelectSong.bind(this, song)}>
-                            <span>Select</span>
-                          </button>
-                        </td>
-                      </tr>
-                    `
-                  )}
-                </table>
-              </div>    
-        </span><span>
-      
-        <div id="right">
-      <div>
-        Selected:
-        <resource-display .uri=${this.selectedSong}></resource-display>
-      </div>
-      <div>
-        <button id="playSelected"
-          ?disabled=${this.selectedSong === null}
-          @click=${this.onPlaySelected}
-        >
-          Play selected from start
-        </button>
-      </div>
-      </div>    
+          <div id="songList">
+            <table>
+              ${this.songList.map(
+                (song) => html`
+                  <tr
+                    class="row ${classMap({
+                      playing: !!(this.song && song.equals(this.song)),
+                    })}"
+                  >
+                    <td><resource-display .uri=${song}></resource-display></td>
+                    <td>
+                      <button @click=${this.onSelectSong.bind(this, song)}>
+                        <span>Select</span>
+                      </button>
+                    </td>
+                  </tr>
+                `
+              )}
+            </table>
+          </div> </span
+        ><span>
+          <div id="right">
+            <div>
+              Selected:
+              <resource-display .uri=${this.selectedSong}></resource-display>
+            </div>
+            <div>
+              <button id="playSelected" ?disabled=${this.selectedSong === null} @click=${this.onPlaySelected}>Play selected from start</button>
+            </div>
+          </div>
         </span>
       </div>
-      
-      
+
       <div class="timeRow">
         <div id="timeSlider"></div>
-        <light9-timeline-audio
-          id="overview"
-          .show=${this.show}
-          .song=${this.song}
-          .zoom=${this.overviewZoom}
-        >
-        </light9-timeline-audio>
-        <light9-timeline-audio
-          id="zoomed"
-          .show=${this.show}
-          .song=${this.song}
-          .zoom=${this.zoom}
-        ></light9-timeline-audio>
-        <light9-cursor-canvas
-          id="cursor"
-          .viewState=${this.viewState}
-        ></light9-cursor-canvas>
+        <light9-timeline-audio id="overview" .show=${this.show} .song=${this.song} .zoom=${this.overviewZoom}> </light9-timeline-audio>
+        <light9-timeline-audio id="zoomed" .show=${this.show} .song=${this.song} .zoom=${this.zoom}></light9-timeline-audio>
+        <light9-cursor-canvas id="cursor" .viewState=${this.viewState}></light9-cursor-canvas>
       </div>
 
       <div class="commands">
-        <button
-          id="cmd-stop"
-          @click=${this.onCmdStop}
-          class="playMode ${classMap({ active: !this.isPlaying })}"
-        >
+        <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
           <strong>Stop</strong>
           <div class="key">s</div>
         </button>
-        <button
-          id="cmd-play"
-          @click=${this.onCmdPlay}
-          class="playMode ${classMap({ active: this.isPlaying })}"
-        >
+        <button id="cmd-play" @click=${this.onCmdPlay} class="playMode ${classMap({ active: this.isPlaying })}">
           <strong>Play</strong>
           <div class="key">p</div>
         </button>
@@ -283,11 +259,7 @@
     }
     byId("updateReq").innerText = "" + updateFreq;
 
-    (window as any).finishOldStyleSetup(
-      this.times,
-      updateFreq,
-      this.onOldStyleUpdate.bind(this)
-    );
+    (window as any).finishOldStyleSetup(this.times, updateFreq, this.onOldStyleUpdate.bind(this));
   }
 
   onOldStyleUpdate(data: TimingUpdate) {
@@ -299,9 +271,7 @@
     const t1 = data.t - 2,
       t2 = data.t + 20;
     this.zoom = { duration: data.duration, t1, t2 };
-    const timeRow = this.shadowRoot!.querySelector(
-      ".timeRow"
-    ) as HTMLDivElement;
+    const timeRow = this.shadowRoot!.querySelector(".timeRow") as HTMLDivElement;
     const w = timeRow.offsetWidth;
     this.viewState = {
       zoomSpec: { t1: () => t1, t2: () => t2 },