Mercurial > code > home > repos > light9

annotate web/ascoltami/Light9AscoltamiTimeline.ts @ 2446:e7e03c203c99

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
resize cursor canvas for 400px tall spectros. fix canvas resolution code
author drewp@bigasterisk.com
date Sat, 01 Jun 2024 13:32:58 -0700
parents 06da5db2fafe
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
1 import { css, html, LitElement, PropertyValueMap } from "lit";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property, state } from "lit/decorators.js";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
3 import Sylvester from "sylvester";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
4 import { Zoom } from "../light9-timeline-audio";
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
5 import { PlainerViewState, PlainViewState } from "../Light9CursorCanvas";
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
6 import { getTopGraph } from "../RdfdbSyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
7 import { show } from "../show_specific";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
8 import { SyncedGraph } from "../SyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
9 import { PlayerState } from "./PlayerState";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
10 export { Light9TimelineAudio } from "../light9-timeline-audio";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
11 export { Light9CursorCanvas } from "../Light9CursorCanvas";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
12 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
13 export { ResourceDisplay } from "../ResourceDisplay";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
14
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
15 const $V = Sylvester.Vector.create;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
16
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
17 async function postJson(url: string, jsBody: Object) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
18 return fetch(url, {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
19 method: "POST",
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
20 headers: { "Content-Type": "applcation/json" },
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
21 body: JSON.stringify(jsBody),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
22 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
23 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
24
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
25 @customElement("light9-ascoltami-timeline")
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
26 export class Light9AscoltamiTimeline extends LitElement {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
27 static styles = [
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
28 css`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
29 .timeRow {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
30 margin: 14px;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
31 position: relative;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
32 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
33 #overview {
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
34 height: 400px;
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
35 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
36 #zoomed {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
37 margin-top: 40px;
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
38 height: 400px;
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
39 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
40 #cursor {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
41 position: absolute;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
42 left: 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
43 top: 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
44 width: 100%;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
45 height: 100%;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
46 }
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
47 #timeSlider {
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
48 height: 0;
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
49 }
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
50 `,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
51 ];
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
52 graph!: SyncedGraph;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
53 @property() playerState: PlayerState = {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
54 duration: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
55 endOfSong: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
56 pausedSongTime: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
57 playing: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
58 song: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
59 wallStartTime: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
60 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
61 @property() playerTime: number = 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
62 @state() zoom: Zoom;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
63 @state() overviewZoom: Zoom;
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
64 @state() viewState: PlainerViewState | null = null;
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
65 constructor() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
66 super();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
67 getTopGraph().then((g) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
68 this.graph = g;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
69 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
70 this.zoom = this.overviewZoom = { duration: null, t1: 0, t2: 1 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
71 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
72 protected willUpdate(_changedProperties: PropertyValueMap<this>): void {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
73 super.willUpdate(_changedProperties);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
74 if ((_changedProperties.has("playerState") || _changedProperties.has("playerTime")) && this.playerState !== null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
75 const duration = this.playerState.duration;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
76 const t = this.playerTime;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
77 if (duration !== null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
78 const timeRow = this.shadowRoot!.querySelector(".timeRow") as HTMLDivElement;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
79 if (timeRow != null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
80 this.updateZooms(duration, t, timeRow);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
81 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
82 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
83 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
84 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
85
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
86 updateZooms(duration: number, t: number, timeRow: HTMLDivElement) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
87 this.overviewZoom = { duration: duration, t1: 0, t2: duration };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
88 const t1 = t - 2;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
89 const t2 = t + 20;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
90 this.zoom = { duration: duration, t1, t2 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
91 const w = timeRow.offsetWidth;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
92 this.viewState = {
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
93 zoomSpec: { t1: t1, t2: t2 },
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
94 cursor: { t: t },
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
95 audioY: 0,
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
96 audioH: 400,
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
97 zoomedTimeY: 400,
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
98 zoomedTimeH: 40,
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
99 fullZoomX: (sec: number) => (sec / duration) * w,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
100 zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
2446
e7e03c203c99 resize cursor canvas for 400px tall spectros. fix canvas resolution code
drewp@bigasterisk.com
parents: 2439
diff changeset
101 mouse: { pos: $V([0, 0]) },
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
102 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
103 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
104
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
105 render() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
106 const song = this.playerState?.song;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
107 if (!song) return html`(spectrogram)`;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
108 return html`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
109 <div class="timeRow">
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
110 <div id="timeSlider"></div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
111 <light9-timeline-audio id="overview" .show=${show} .song=${song} .zoom=${this.overviewZoom}> </light9-timeline-audio>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
112 <light9-timeline-audio id="zoomed" .show=${show} .song=${song} .zoom=${this.zoom}></light9-timeline-audio>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
113 <light9-cursor-canvas id="cursor" .viewState=${this.viewState}></light9-cursor-canvas>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
114 </div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
115 `;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
116 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
117 }