light9 Changeset - 2ce77421c0b7

Changeset - 2ce77421c0b7

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

drewp@bigasterisk.com - 8 months ago 2024-06-03 23:35:49
drewp@bigasterisk.com

put a big time display on ascoltami

1 file changed with 7 insertions and 0 deletions:

web/ascoltami/Light9AscoltamiUi.ts

0 comments (0 inline, 0 general)

web/ascoltami/Light9AscoltamiUi.ts

➞

Show inline comments

@@ @@ -48,48 +48,52 @@ export class Light9AscoltamiUi extends L @@
         margin: 3px 0;
         margin-left: 0.4em;
         font-size: 16px;
         box-shadow: 0.9px 0.9px 0px 2px #565656;
         border-radius: 2px;
+      }
       button {
         min-height: 48pt;
         min-width: 65pt;
+      }
       #mainRow {
         display: flex;
         flex-direction: row;
+      }
       light9-song-listing {
         flex-grow: 1;
+      }
       th {
         text-align: right;
+      }
 #bigTime {
     color: green;
     font-size: 60pt;
+}
     `,
   ];
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.updatePlayState.bind(this), "playstate-ui");
     });
     setInterval(this.updateT.bind(this), 100);
+  }
   protected async firstUpdated(_changedProperties: PropertyValues<this>) {
     this.bindKeys();
     const config = await (await fetch("/service/ascoltami/config")).json();
     document.title = document.title.replace("{{host}}", config.host);
     this.host = config.host;
+  }
   updatePlayState() {
     const U = this.graph.U();
     const asco = U(":ascoltami");
     this.playerState = {
       duration: this.graph.optionalFloatValue(asco, U(":duration")),
@@ @@ -97,54 +101,57 @@ export class Light9AscoltamiUi extends L @@
       pausedSongTime: this.graph.optionalFloatValue(asco, U(":pausedSongTime")),
       wallStartTime: this.graph.optionalFloatValue(asco, U(":wallStartTime")),
       playing: this.graph.optionalBooleanValue(asco, U(":playing")),
       song: this.graph.optionalUriValue(asco, U(":song")),
     };
     this.updateT();
+  }
   updateT() {
     if (this.playerState.wallStartTime !== null) {
       this.playerTime = Date.now() / 1000 - this.playerState.wallStartTime;
     } else if (this.playerState.pausedSongTime !== null) {
       this.playerTime = this.playerState.pausedSongTime;
     } else {
       this.playerTime = 0;
+    }
+  }
   render() {
     return html`
       <h1>ascoltami on ${this.host}</h1>
       <span><rdfdb-synced-graph></rdfdb-synced-graph></span>
       <div id="mainRow">
           <div>
         <light9-song-listing
           @selectsong=${(ev: any) => {
             this.selectedSong = ev.detail.song;
           }}
           .selectedSong=${this.selectedSong}
         ></light9-song-listing>
           <div id="bigTime">t=${this.playerTime.toFixed(1)}</div>
           </div>
         <div>
           <light9-ascoltami-timeline .playerState=${this.playerState} .playerTime=${this.playerTime}></light9-ascoltami-timeline>
           <div>
             <button ?disabled=${this.selectedSong == null} @click=${this.onLoadSelected}>Change to and play selected <span class="keyCap">l</span></button>
             <button ?disabled=${false} @click=${this.onCmdZero}>Seek to zero <span class="keyCap">z</span></button>
             <button ?disabled=${this.playerState.playing || this.playerState.song == null} @click=${this.onCmdPlay}>Play <span class="keyCap">p</span></button>
             <button ?disabled=${!this.playerState.playing} @click=${this.onCmdStop}>Stop <span class="keyCap">s</span></button>
             <button ?disabled=${true} @click=${this.onCmdGo}>Go <span class="keyCap">g</span></button>
           </div>
           ${this.renderPlayerStateTable()}
         </div>
       </div>
     `;
+  }
   renderPlayerStateTable() {
     return html` <table>
       <tr>
         <th>duration</th>
         <td>${this.playerState.duration}</td>
       </tr>
       <tr>
         <th>endOfSong</th>
         <td>${this.playerState.endOfSong}</td>
       </tr>

0 comments (0 inline, 0 general)