Mercurial > code > home > repos > light9

annotate web/ascoltami/Light9AscoltamiUi.ts @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/ascoltami/Light9AscoltamiUi.ts@06bf6dae8e64
children 06da5db2fafe
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";
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
2 import { css, html, LitElement } from "lit";
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
3 import { customElement, property } from "lit/decorators.js";
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
4 import { classMap } from "lit/directives/class-map.js";
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
5 import { NamedNode } from "n3";
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
6 import Sylvester from "sylvester";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
7 import { Zoom } from "../light9-timeline-audio";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
8 import { PlainViewState } from "../Light9CursorCanvas";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
9 import { getTopGraph } from "../RdfdbSyncedGraph";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
10 import { SyncedGraph } from "../SyncedGraph";
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
11 import { TimingUpdate } from "./main";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
12 import { showRoot } from "../show_specific";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
13 export { Light9TimelineAudio } from "../light9-timeline-audio";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
14 export { Light9CursorCanvas } from "../Light9CursorCanvas";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
15 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
16 export { ResourceDisplay } from "../ResourceDisplay";
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
17 const $V = Sylvester.Vector.create;
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
18
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
19 debug.enable("*");
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
20 const log = debug("asco");
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
21
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
22 function byId(id: string): HTMLElement {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
23 return document.getElementById(id)!;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
24 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
25 async function postJson(url: string, jsBody: Object) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
26 return fetch(url, {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
27 method: "POST",
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
28 headers: { "Content-Type": "applcation/json" },
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
29 body: JSON.stringify(jsBody),
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
30 });
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
31 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
32 @customElement("light9-ascoltami-ui")
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
33 export class Light9AscoltamiUi extends LitElement {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
34 graph!: SyncedGraph;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
35 times!: { intro: number; post: number };
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
36 @property() nextText: string = "";
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
37 @property() isPlaying: boolean = false;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
38 @property() show: NamedNode | null = null;
2124
eb5d8349c871 pass timing updates in a simpler way
drewp@bigasterisk.com
parents: 2123
diff changeset
39 @property() song: NamedNode | null = null;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
40 @property() selectedSong: NamedNode | null = null;
2124
eb5d8349c871 pass timing updates in a simpler way
drewp@bigasterisk.com
parents: 2123
diff changeset
41 @property() currentDuration: number = 0;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
42 @property() zoom: Zoom;
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
43 @property() overviewZoom: Zoom;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
44 @property() viewState: PlainViewState | null = null;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
45 static styles = [
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
46 css`
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
47 :host {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
48 display: flex;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
49 flex-direction: column;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
50 }
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
51 .timeRow {
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
52 margin: 14px;
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
53 position: relative;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
54 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
55 #overview {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
56 height: 60px;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
57 }
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
58 #zoomed {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
59 margin-top: 40px;
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
60 height: 80px;
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
61 }
2128
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
62 #cursor {
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
63 position: absolute;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
64 left: 0;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
65 top: 0;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
66 width: 100%;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
67 height: 100%;
e2ed5ce36253 double spectrum views have a connected cursor
drewp@bigasterisk.com
parents: 2127
diff changeset
68 }
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
69 #grow {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
70 flex: 1 1 auto;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
71 display: flex;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
72 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
73 #grow > span {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
74 display: flex;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
75 position: relative;
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
76 width: 50%;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
77 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
78 #playSelected {
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
79 height: 100px;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
80 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
81 #songList {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
82 overflow-y: scroll;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
83 position: absolute;
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
84 left: 0;
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
85 top: 0;
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
86 right: 0;
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
87 bottom: 0;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
88 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
89 #songList .row {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
90 width: 60%;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
91 min-height: 40px;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
92 text-align: left;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
93 position: relative;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
94 }
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
95 #songList .row:nth-child(even) {
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
96 background: #333;
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
97 }
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
98 #songList .row:nth-child(odd) {
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
99 background: #444;
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
100 }
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
101 #songList button {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
102 min-height: 40px;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
103 margin-bottom: 10px;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
104 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
105 #songList .row.playing {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
106 box-shadow: 0 0 30px red;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
107 background-color: #de5050;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
108 }
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
109 `,
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
110 ];
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
111 render() {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
112 return html`<rdfdb-synced-graph></rdfdb-synced-graph>
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
113
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
114 <link rel="stylesheet" href="../style.css" />
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
115
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
116 <!-- <h1>ascoltami <a href="metrics">[metrics]</a></h1> -->
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
117
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
118 <div id="grow">
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
119 <span>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
120 <div id="songList">
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
121 <table>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
122 ${this.songList.map(
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
123 (song) => html`
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
124 <tr
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
125 class="row ${classMap({
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
126 playing: !!(this.song && song.equals(this.song)),
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
127 })}"
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
128 >
2312
3f0b889c8fa9 don't let phone users click on song uris by mistake
drewp@bigasterisk.com
parents: 2164
diff changeset
129 <td><resource-display .uri=${song} noclick></resource-display></td>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
130 <td>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
131 <button @click=${this.onSelectSong.bind(this, song)}>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
132 <span>Select</span>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
133 </button>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
134 </td>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
135 </tr>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
136 `
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
137 )}
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
138 </table>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
139 </div> </span
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
140 ><span>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
141 <div id="right">
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
142 <div>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
143 Selected:
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
144 <resource-display .uri=${this.selectedSong}></resource-display>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
145 </div>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
146 <div>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
147 <button id="playSelected" ?disabled=${this.selectedSong === null} @click=${this.onPlaySelected}>Play selected from start</button>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
148 </div>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
149 </div>
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
150 </span>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
151 </div>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
152
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
153 <div class="timeRow">
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
154 <div id="timeSlider"></div>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
155 <light9-timeline-audio id="overview" .show=${this.show} .song=${this.song} .zoom=${this.overviewZoom}> </light9-timeline-audio>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
156 <light9-timeline-audio id="zoomed" .show=${this.show} .song=${this.song} .zoom=${this.zoom}></light9-timeline-audio>
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
157 <light9-cursor-canvas id="cursor" .viewState=${this.viewState}></light9-cursor-canvas>
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
158 </div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
159
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
160 <div class="commands">
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
161 <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
162 <strong>Stop</strong>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
163 <div class="key">s</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
164 </button>
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
165 <button id="cmd-play" @click=${this.onCmdPlay} class="playMode ${classMap({ active: this.isPlaying })}">
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
166 <strong>Play</strong>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
167 <div class="key">p</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
168 </button>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
169 <button id="cmd-intro" @click=${this.onCmdIntro}>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
170 <strong>Skip intro</strong>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
171 <div class="key">i</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
172 </button>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
173 <button id="cmd-post" @click=${this.onCmdPost}>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
174 <strong>Skip to Post</strong>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
175 <div class="key">t</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
176 </button>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
177 <button id="cmd-go" @click=${this.onCmdGo}>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
178 <strong>Go</strong>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
179 <div class="key">g</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
180 <div id="next">${this.nextText}</div>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
181 </button>
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
182 </div>`;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
183 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
184
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
185 onSelectSong(song: NamedNode, ev: MouseEvent) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
186 if (this.selectedSong && song.equals(this.selectedSong)) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
187 this.selectedSong = null;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
188 } else {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
189 this.selectedSong = song;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
190 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
191 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
192 async onPlaySelected(ev: Event) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
193 if (!this.selectedSong) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
194 return;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
195 }
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
196 await fetch("../service/ascoltami/song", { method: "POST", body: this.selectedSong.value });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
197 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
198
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
199 onCmdStop(ev?: MouseEvent): void {
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
200 postJson("../service/ascoltami/time", { pause: true });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
201 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
202 onCmdPlay(ev?: MouseEvent): void {
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
203 postJson("../service/ascoltami/time", { resume: true });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
204 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
205 onCmdIntro(ev?: MouseEvent): void {
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
206 postJson("../service/ascoltami/time", { t: this.times.intro, resume: true });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
207 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
208 onCmdPost(ev?: MouseEvent): void {
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
209 postJson("../service/ascoltami/time", {
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
210 t: this.currentDuration - this.times.post,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
211 resume: true,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
212 });
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
213 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
214 onCmdGo(ev?: MouseEvent): void {
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
215 postJson("../service/ascoltami/go", {});
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
216 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
217
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
218 bindKeys() {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
219 document.addEventListener("keypress", (ev) => {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
220 if (ev.which == 115) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
221 this.onCmdStop();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
222 return false;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
223 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
224 if (ev.which == 112) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
225 this.onCmdPlay();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
226 return false;
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 if (ev.which == 105) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
229 this.onCmdIntro();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
230 return false;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
231 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
232 if (ev.which == 116) {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
233 this.onCmdPost();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
234 return false;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
235 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
236
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
237 if (ev.key == "g") {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
238 this.onCmdGo();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
239 return false;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
240 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
241 return true;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
242 });
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
243 }
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
244
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
245 async musicSetup() {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
246 // shoveled over from the vanillajs version
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2364
diff changeset
247 const config = await (await fetch("../service/ascoltami/config")).json();
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
248 this.show = new NamedNode(config.show);
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
249 this.times = config.times;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
250 document.title = document.title.replace("{{host}}", config.host);
2133
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
251 try {
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
252 const h1 = document.querySelector("h1")!;
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
253 h1.innerText = h1.innerText.replace("{{host}}", config.host);
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
254 } catch (e) {}
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
255
2360
6c6b29d21959 carefully rm parameter
drewp@bigasterisk.com
parents: 2312
diff changeset
256 (window as any).finishOldStyleSetup(this.times, this.onOldStyleUpdate.bind(this));
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
257 }
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
258
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
259 onOldStyleUpdate(data: TimingUpdate) {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
260 this.nextText = data.next;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
261 this.isPlaying = data.playing;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
262 this.currentDuration = data.duration;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
263 this.song = new NamedNode(data.song);
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
264 this.overviewZoom = { duration: data.duration, t1: 0, t2: data.duration };
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
265 const t1 = data.t - 2,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
266 t2 = data.t + 20;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
267 this.zoom = { duration: data.duration, t1, t2 };
2137
b39f6c363163 reformat
drewp@bigasterisk.com
parents: 2135
diff changeset
268 const timeRow = this.shadowRoot!.querySelector(".timeRow") as HTMLDivElement;
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
269 const w = timeRow.offsetWidth;
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
270 this.viewState = {
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
271 zoomSpec: { t1: () => t1, t2: () => t2 },
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
272 cursor: { t: () => data.t },
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
273 audioY: () => 0,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
274 audioH: () => 60,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
275 zoomedTimeY: () => 60,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
276 zoomedTimeH: () => 40,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
277 fullZoomX: (sec: number) => (sec / data.duration) * w,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
278 zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
279 mouse: { pos: () => $V([0, 0]) },
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
280 };
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
281 }
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
282
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
283 @property() songList: NamedNode[] = [];
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
284 constructor() {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
285 super();
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
286 this.bindKeys();
2127
1dc96b97a544 two zoomed spectrogram views in asco
drewp@bigasterisk.com
parents: 2124
diff changeset
287 this.zoom = this.overviewZoom = { duration: null, t1: 0, t2: 1 };
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
288
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
289 getTopGraph().then((g) => {
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
290 this.graph = g;
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
291 this.musicSetup(); // async
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
292 this.graph.runHandler(this.graphChanged.bind(this), "loadsongs");
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
293 });
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
294 }
2133
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
295 graphChanged() {
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
296 this.songList = [];
2133
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
297 try {
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
298 const playList = this.graph.uriValue(
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
299 //
2160
611c3e97de2f factor out the show-specific strs
drewp@bigasterisk.com
parents: 2140
diff changeset
300 this.graph.Uri(showRoot),
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
301 this.graph.Uri(":playList")
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
302 );
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
303 log(playList);
2133
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
304 this.songList = this.graph.items(playList) as NamedNode[];
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
305 } catch (e) {
2135
197a4ec877a7 acso relayout so only the song list scrolls
drewp@bigasterisk.com
parents: 2133
diff changeset
306 log("no playlist yet");
2133
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
307 }
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
308 log(this.songList.length);
1dbbf0db3036 WIP graph-using songlist; trying to make request-then-play safer ux for song playback
drewp@bigasterisk.com
parents: 2128
diff changeset
309 }
2123
c4427fd59306 port some of ascoltami into lit
drewp@bigasterisk.com
parents:
diff changeset
310 }