Mercurial > code > home > repos > light9

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
put a big time display on ascoltami
author drewp@bigasterisk.com
date Mon, 03 Jun 2024 16:35:49 -0700
parents 06da5db2fafe
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
1 import debug from "debug";
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
2 import { css, html, LitElement, PropertyValues } from "lit";
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
3 import { customElement, property } from "lit/decorators.js";
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
4 import { NamedNode } from "n3";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
5 import { PlainViewState } from "../Light9CursorCanvas";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
6 import { getTopGraph } from "../RdfdbSyncedGraph";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
7 import { SyncedGraph } from "../SyncedGraph";
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
8 import { PlayerState } from "./PlayerState";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
9 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
10 export { ResourceDisplay } from "../ResourceDisplay";
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
11 export { Light9AscoltamiTimeline } from "./Light9AscoltamiTimeline";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
12 export { Light9SongListing } from "./Light9SongListing";
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
13
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
14 debug.enable("*");
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
15 const log = debug("asco");
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
16
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
17 async function postJson(url: string, jsBody: Object) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
18 return fetch(url, {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
19 method: "POST",
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
20 headers: { "Content-Type": "applcation/json" },
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
21 body: JSON.stringify(jsBody),
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
22 });
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
23 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
24
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
25 @customElement("light9-ascoltami-ui")
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
26 export class Light9AscoltamiUi extends LitElement {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
27 graph!: SyncedGraph;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
28 @property() show: NamedNode | null = null;
2124
eb5d8349c871 pass timing updates in a simpler way
drewp@bigasterisk.com
parents: 2123
diff changeset
29 @property() song: NamedNode | null = null;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
30 @property() selectedSong: NamedNode | null = null;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
31 @property() viewState: PlainViewState | null = null;
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
32 @property() host: any;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
33 @property() playerState: PlayerState = { duration: null, endOfSong: null, pausedSongTime: null, playing: null, song: null, wallStartTime: null };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
34 @property() playerTime: number = 0;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
35 static styles = [
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
36 css`
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
37 :host {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
38 display: flex;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
39 flex-direction: column;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
40 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
41
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
42 .keyCap {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
43 color: #ccc;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
44 background: #525252;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
45 display: inline-block;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
46 border: 1px outset #b3b3b3;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
47 padding: 2px 3px;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
48 margin: 3px 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
49 margin-left: 0.4em;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
50 font-size: 16px;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
51 box-shadow: 0.9px 0.9px 0px 2px #565656;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
52 border-radius: 2px;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
53 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
54
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
55 button {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
56 min-height: 48pt;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
57 min-width: 65pt;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
58 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
59
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
60 #mainRow {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
61 display: flex;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
62 flex-direction: row;
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
63 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
64
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
65 light9-song-listing {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
66 flex-grow: 1;
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
67 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
68
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
69 th {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
70 text-align: right;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
71 }
2448
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
72 #bigTime {
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
73 color: green;
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
74 font-size: 60pt;
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
75 }
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
76 `,
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
77 ];
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
78
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
79 constructor() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
80 super();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
81 getTopGraph().then((g) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
82 this.graph = g;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
83 this.graph.runHandler(this.updatePlayState.bind(this), "playstate-ui");
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
84 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
85 setInterval(this.updateT.bind(this), 100);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
86 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
87
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
88 protected async firstUpdated(_changedProperties: PropertyValues<this>) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
89 this.bindKeys();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
90 const config = await (await fetch("/service/ascoltami/config")).json();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
91 document.title = document.title.replace("{{host}}", config.host);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
92 this.host = config.host;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
93 }
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
94
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
95 updatePlayState() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
96 const U = this.graph.U();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
97 const asco = U(":ascoltami");
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
98 this.playerState = {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
99 duration: this.graph.optionalFloatValue(asco, U(":duration")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
100 endOfSong: this.graph.optionalBooleanValue(asco, U(":endOfSong")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
101 pausedSongTime: this.graph.optionalFloatValue(asco, U(":pausedSongTime")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
102 wallStartTime: this.graph.optionalFloatValue(asco, U(":wallStartTime")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
103 playing: this.graph.optionalBooleanValue(asco, U(":playing")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
104 song: this.graph.optionalUriValue(asco, U(":song")),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
105 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
106 this.updateT();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
107 }
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
108
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
109 updateT() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
110 if (this.playerState.wallStartTime !== null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
111 this.playerTime = Date.now() / 1000 - this.playerState.wallStartTime;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
112 } else if (this.playerState.pausedSongTime !== null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
113 this.playerTime = this.playerState.pausedSongTime;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
114 } else {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
115 this.playerTime = 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
116 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
117 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
118
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
119 render() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
120 return html`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
121 <h1>ascoltami on ${this.host}</h1>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
122
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
123 <span><rdfdb-synced-graph></rdfdb-synced-graph></span>
2448
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
124 <div id="mainRow">
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
125 <div>
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
126 <light9-song-listing
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
127 @selectsong=${(ev: any) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
128 this.selectedSong = ev.detail.song;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
129 }}
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
130 .selectedSong=${this.selectedSong}
2448
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
131 ></light9-song-listing>
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
132 <div id="bigTime">t=${this.playerTime.toFixed(1)}</div>
2ce77421c0b7 put a big time display on ascoltami
drewp@bigasterisk.com
parents: 2439
diff changeset
133 </div>
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
134 <div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
135 <light9-ascoltami-timeline .playerState=${this.playerState} .playerTime=${this.playerTime}></light9-ascoltami-timeline>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
136 <div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
137 <button ?disabled=${this.selectedSong == null} @click=${this.onLoadSelected}>Change to and play selected <span class="keyCap">l</span></button>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
138 <button ?disabled=${false} @click=${this.onCmdZero}>Seek to zero <span class="keyCap">z</span></button>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
139 <button ?disabled=${this.playerState.playing || this.playerState.song == null} @click=${this.onCmdPlay}>Play <span class="keyCap">p</span></button>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
140 <button ?disabled=${!this.playerState.playing} @click=${this.onCmdStop}>Stop <span class="keyCap">s</span></button>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
141 <button ?disabled=${true} @click=${this.onCmdGo}>Go <span class="keyCap">g</span></button>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
142 </div>
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
143 ${this.renderPlayerStateTable()}
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
144 </div>
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
145 </div>
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
146 `;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
147 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
148 renderPlayerStateTable() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
149 return html` <table>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
150 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
151 <th>duration</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
152 <td>${this.playerState.duration}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
153 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
154 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
155 <th>endOfSong</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
156 <td>${this.playerState.endOfSong}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
157 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
158 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
159 <th>pausedSongTime</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
160 <td>${this.playerState.pausedSongTime?.toFixed(3)}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
161 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
162 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
163 <th>playing</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
164 <td>${this.playerState.playing}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
165 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
166 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
167 <th>song</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
168 <td>${this.playerState.song?.value}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
169 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
170 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
171 <th>wallStartTime</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
172 <td>${this.playerState.wallStartTime}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
173 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
174 <tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
175 <th>t</th>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
176 <td>${this.playerTime.toFixed(3)}</td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
177 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
178 </table>`;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
179 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
180
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
181 onSelectSong(song: NamedNode, ev: MouseEvent) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
182 if (this.selectedSong && song.equals(this.selectedSong)) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
183 this.selectedSong = null;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
184 } else {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
185 this.selectedSong = song;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
186 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
187 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
188
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
189 async onLoadSelected() {
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
190 if (!this.selectedSong) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
191 return;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
192 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
193 await fetch("/service/ascoltami/song", { method: "POST", body: this.selectedSong.value });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
194 this.selectedSong = null;
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
195 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
196
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
197 onCmdStop(ev?: MouseEvent): void {
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
198 postJson("/service/ascoltami/time", { pause: true });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
199 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
200
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
201 onCmdPlay(ev?: MouseEvent): void {
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
202 postJson("/service/ascoltami/time", { resume: true });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
203 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
204
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
205 onCmdGo(ev?: MouseEvent): void {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
206 postJson("/service/ascoltami/go", {});
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
207 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
208
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
209 onCmdZero(ev?: MouseEvent): void {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
210 postJson("/service/ascoltami/time", { t: 0 });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
211 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
212
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
213 bindKeys() {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
214 document.addEventListener("keypress", (ev) => {
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
215 if (ev.key == "l") {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
216 this.onLoadSelected();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
217 } else if (ev.key == "z") {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
218 this.onCmdZero();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
219 } else if (ev.key == "p") {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
220 this.onCmdPlay();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
221 } else if (ev.key == "s") {
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
222 this.onCmdStop();
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
223 } else if (ev.key == "g") {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
224 this.onCmdGo();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
225 } else {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents: 2376
diff changeset
226 return true;
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
227 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
228 });
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
229 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
230 }