Mercurial > code > home > repos > light9

comparison web/light9-timeline-audio.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 4556eebe5d73
children e7e03c203c99
comparison
equal deleted inserted replaced
2438:f2b3cfcc23d3 2439:06da5db2fafe
25 25
26 // (potentially-zoomed) spectrogram view 26 // (potentially-zoomed) spectrogram view
27 @customElement("light9-timeline-audio") 27 @customElement("light9-timeline-audio")
28 export class Light9TimelineAudio extends LitElement { 28 export class Light9TimelineAudio extends LitElement {
29 graph!: SyncedGraph; 29 graph!: SyncedGraph;
30 graphReady: Promise<void>;
30 render() { 31 render() {
31 return html` 32 return html`
32 <style> 33 <style>
33 :host { 34 :host {
34 display: block; 35 display: block;
60 @state() imgLeft: string = "0"; // css 61 @state() imgLeft: string = "0"; // css
61 62
62 constructor() { 63 constructor() {
63 super(); 64 super();
64 65
65 getTopGraph().then((g) => { 66 this.graphReady = getTopGraph().then((g) => {
66 this.graph = g; 67 this.graph = g;
67 }); 68 });
68 } 69 }
69 70
70 updated(changedProperties: PropertyValues) { 71 async updated(changedProperties: PropertyValues) {
72 super.updated(changedProperties);
71 if (changedProperties.has("song") || changedProperties.has("show")) { 73 if (changedProperties.has("song") || changedProperties.has("show")) {
74 await this.graphReady;
72 if (this.song && this.show) { 75 if (this.song && this.show) {
73 this.graph.runHandler(this.setImgSrc.bind(this), "timeline-audio " + this.song); 76 this.graph.runHandler(this.setImgSrc.bind(this), "timeline-audio " + this.song.value);
74 } 77 }
75 } 78 }
76 if (changedProperties.has("zoom")) { 79 if (changedProperties.has("zoom")) {
77 this.imgWidth = this._imgWidth(this.zoom); 80 this.imgWidth = this._imgWidth(this.zoom);
78 this.imgLeft = this._imgLeft(this.zoom); 81 this.imgLeft = this._imgLeft(this.zoom);