comparison web/ascoltami/Light9AscoltamiUi.ts @ 2448:2ce77421c0b7

put a big time display on ascoltami
author drewp@bigasterisk.com
date Mon, 03 Jun 2024 16:35:49 -0700
parents 06da5db2fafe
children
comparison
equal deleted inserted replaced
2447:361c612e3c60 2448:2ce77421c0b7
67 } 67 }
68 68
69 th { 69 th {
70 text-align: right; 70 text-align: right;
71 } 71 }
72 #bigTime {
73 color: green;
74 font-size: 60pt;
75 }
72 `, 76 `,
73 ]; 77 ];
74 78
75 constructor() { 79 constructor() {
76 super(); 80 super();
115 render() { 119 render() {
116 return html` 120 return html`
117 <h1>ascoltami on ${this.host}</h1> 121 <h1>ascoltami on ${this.host}</h1>
118 122
119 <span><rdfdb-synced-graph></rdfdb-synced-graph></span> 123 <span><rdfdb-synced-graph></rdfdb-synced-graph></span>
120 <div id="mainRow"> 124 <div id="mainRow">
125 <div>
121 <light9-song-listing 126 <light9-song-listing
122 @selectsong=${(ev: any) => { 127 @selectsong=${(ev: any) => {
123 this.selectedSong = ev.detail.song; 128 this.selectedSong = ev.detail.song;
124 }} 129 }}
125 .selectedSong=${this.selectedSong} 130 .selectedSong=${this.selectedSong}
126 ></light9-song-listing> 131 ></light9-song-listing>
132 <div id="bigTime">t=${this.playerTime.toFixed(1)}</div>
133 </div>
127 <div> 134 <div>
128 <light9-ascoltami-timeline .playerState=${this.playerState} .playerTime=${this.playerTime}></light9-ascoltami-timeline> 135 <light9-ascoltami-timeline .playerState=${this.playerState} .playerTime=${this.playerTime}></light9-ascoltami-timeline>
129 <div> 136 <div>
130 <button ?disabled=${this.selectedSong == null} @click=${this.onLoadSelected}>Change to and play selected <span class="keyCap">l</span></button> 137 <button ?disabled=${this.selectedSong == null} @click=${this.onLoadSelected}>Change to and play selected <span class="keyCap">l</span></button>
131 <button ?disabled=${false} @click=${this.onCmdZero}>Seek to zero <span class="keyCap">z</span></button> 138 <button ?disabled=${false} @click=${this.onCmdZero}>Seek to zero <span class="keyCap">z</span></button>