Mercurial > code > home > repos > light9

annotate web/ascoltami/Light9AscoltamiTimeline.ts @ 2439:06da5db2fafe

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite ascoltami to use the graph for more playback data
author drewp@bigasterisk.com
date Thu, 30 May 2024 01:08:07 -0700
parents
children e7e03c203c99
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";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
5 import { PlainViewState } from "../Light9CursorCanvas";
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 {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
34 height: 60px;
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;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
38 height: 80px;
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 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
47 `,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
48 ];
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
49 graph!: SyncedGraph;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
50 @property() playerState: PlayerState = {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
51 duration: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
52 endOfSong: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
53 pausedSongTime: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
54 playing: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
55 song: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
56 wallStartTime: null,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
57 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
58 @property() playerTime: number = 0;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
59 @state() zoom: Zoom;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
60 @state() overviewZoom: Zoom;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
61 @state() viewState: PlainViewState | null = null;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
62 constructor() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
63 super();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
64 getTopGraph().then((g) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
65 this.graph = g;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
66 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
67 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
68 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
69 protected willUpdate(_changedProperties: PropertyValueMap<this>): void {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
70 super.willUpdate(_changedProperties);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
71 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
72 const duration = this.playerState.duration;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
73 const t = this.playerTime;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
74 if (duration !== null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
75 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
76 if (timeRow != null) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
77 this.updateZooms(duration, t, timeRow);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
78 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
79 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
80 }
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 updateZooms(duration: number, t: number, timeRow: HTMLDivElement) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
84 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
85 const t1 = t - 2;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
86 const t2 = t + 20;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
87 this.zoom = { duration: duration, t1, t2 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
88 const w = timeRow.offsetWidth;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
89 this.viewState = {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
90 zoomSpec: { t1: () => t1, t2: () => t2 },
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
91 cursor: { t: () => t },
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
92 audioY: () => 0,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
93 audioH: () => 60,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
94 zoomedTimeY: () => 60,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
95 zoomedTimeH: () => 40,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
96 fullZoomX: (sec: number) => (sec / duration) * w,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
97 zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
98 mouse: { pos: () => $V([0, 0]) },
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
99 };
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
100 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
101
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
102 render() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
103 const song = this.playerState?.song;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
104 if (!song) return html`(spectrogram)`;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
105 return html`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
106 <div class="timeRow">
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
107 <div id="timeSlider"></div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
108 <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
109 <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
110 <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
111 </div>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
112 `;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
113 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
114 }