light9 Changeset - b39f6c363163

Changeset - b39f6c363163

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

drewp@bigasterisk.com - 20 months ago 2023-05-18 00:27:16
drewp@bigasterisk.com

reformat

1 file changed with 51 insertions and 81 deletions:

light9/ascoltami/Light9AscoltamiUi.ts

0 comments (0 inline, 0 general)

light9/ascoltami/Light9AscoltamiUi.ts

➞

Show inline comments

@@ @@ -63,38 +63,43 @@ export class Light9AscoltamiUi extends L @@
         left: 0;
         top: 0;
         width: 100%;
         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%;
         min-height: 40px;
         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;
+      }
       #songList .row.playing {
         box-shadow: 0 0 30px red;
@@ @@ -105,90 +110,61 @@ export class Light9AscoltamiUi extends L @@
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
       <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>
         <button id="cmd-intro" @click=${this.onCmdIntro}>
           <strong>Skip intro</strong>
           <div class="key">i</div>
@@ @@ -280,31 +256,25 @@ export class Light9AscoltamiUi extends L @@
     if (navigator.userAgent.match(/Windows NT/)) {
       // helper laptop
       updateFreq = 10;
+    }
     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) {
     this.nextText = data.next;
     this.isPlaying = data.playing;
     this.currentDuration = data.duration;
     this.song = new NamedNode(data.song);
     this.overviewZoom = { duration: data.duration, t1: 0, t2: data.duration };
     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 },
       cursor: { t: () => data.t },
       audioY: () => 0,
       audioH: () => 60,

0 comments (0 inline, 0 general)