Mercurial > code > home > repos > light9
annotate web/light9-vidref-replay-stack.js @ 2405:69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
this was hard because we have to somehow wait for the graph to load before config'ing the panes
| author | drewp@bigasterisk.com |
|---|---|
| date | Fri, 17 May 2024 16:58:26 -0700 |
| parents | 4556eebe5d73 |
| children |
| rev | line source |
|---|---|
| 1951 | 1 import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js'; |
| 2 import debug from '/lib/debug/debug-build-es6.js'; | |
| 3 import _ from '/lib/underscore/underscore-min-es6.js'; | |
| 4 import { rounding } from '/node_modules/significant-rounding/index.js'; | |
| 5 | |
| 6 const log = debug('stack'); | |
| 7 | |
| 8 class Light9VidrefReplayStack extends LitElement { | |
| 9 | |
| 10 static get properties() { | |
| 11 return { | |
| 12 songTime: { type: Number, attribute: false }, // from musicState.t but higher res | |
| 13 musicState: { type: Object, attribute: false }, | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
14 players: { type: Array, attribute: false }, |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
15 size: { type: String, attribute: true } |
| 1951 | 16 }; |
| 17 } | |
| 18 | |
| 19 constructor() { | |
| 20 super(); | |
| 21 this.musicState = {}; | |
| 22 } | |
| 23 | |
| 24 setVideoTimesFromSongTime() { | |
| 25 this.shadowRoot.querySelectorAll('light9-vidref-replay').forEach( | |
| 26 (r) => { | |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
27 r.setVideoTimeFromSongTime(this.songTime, this.musicState.playing); |
| 1951 | 28 }); |
| 29 } | |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
30 nudgeTime(dt) { |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
31 this.songTime += dt; |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
32 log('song now', this.songTime); |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
33 } |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
34 fineTime() { |
| 1951 | 35 if (this.musicState.playing) { |
| 36 const sinceLastUpdate = (Date.now() - this.musicState.reportTime) / 1000; | |
| 37 this.songTime = sinceLastUpdate + this.musicState.tStart; | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
38 } else if (this.lastFineTimePlayingState) { |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
39 this.songTime = this.musicState.t; |
| 1951 | 40 } |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
41 this.lastFineTimePlayingState = this.musicState.playing; |
| 1951 | 42 requestAnimationFrame(this.fineTime.bind(this)); |
| 43 } | |
| 44 | |
| 45 updated(changedProperties) { | |
| 46 if (changedProperties.has('songTime')) { | |
| 47 this.setVideoTimesFromSongTime(); | |
| 48 } | |
| 49 } | |
| 50 | |
| 51 firstUpdated() { | |
| 52 this.songTimeRangeInput = this.shadowRoot.querySelector('#songTime'); | |
| 53 | |
| 54 const ws = reconnectingWebSocket('../ascoltami/time/stream', | |
| 55 this.receivedSongAndTime.bind(this)); | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
56 reconnectingWebSocket('../vidref/time/stream', this.receivedRemoteScrubbedTime.bind(this)); |
| 1951 | 57 // bug: upon connecting, clear this.song |
| 58 this.fineTime(); | |
| 59 } | |
| 60 | |
| 61 receivedSongAndTime(msg) { | |
| 62 this.musicState = msg; | |
| 63 this.musicState.reportTime = Date.now(); | |
| 64 this.musicState.tStart = this.musicState.t; | |
| 65 | |
| 66 this.songTimeRangeInput.max = this.musicState.duration; | |
| 67 | |
| 68 if (this.musicState.song != this.song) { | |
| 69 this.song = this.musicState.song; | |
| 70 this.getReplayMapForSong(this.song); | |
| 71 } | |
| 72 } | |
|
1986
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
73 |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
74 receivedRemoteScrubbedTime(msg) { |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
75 this.songTime = msg.st; |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
76 |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
77 // This doesn't work completely since it will keep getting |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
78 // updates from ascoltami slow updates. |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
79 if (msg.song != this.song) { |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
80 this.song = msg.song; |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
81 this.getReplayMapForSong(this.song); |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
82 } |
|
c8f0d1b9a171
timeline scrubbing shows up on vidref (again)
drewp@bigasterisk.com
parents:
1954
diff
changeset
|
83 } |
| 1951 | 84 |
| 85 getReplayMapForSong(song) { | |
| 86 const u = new URL(window.location.href); | |
| 87 u.pathname = '/vidref/replayMap' | |
| 88 u.searchParams.set('song', song); | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
89 u.searchParams.set('maxClips', this.size == "small" ? '1' : '3'); |
| 1951 | 90 fetch(u.toString()).then((resp) => { |
| 91 if (resp.ok) { | |
| 92 resp.json().then((msg) => { | |
| 93 this.players = msg.map(this.makeClipRow.bind(this)); | |
| 94 this.updateComplete.then(this.setupClipRows.bind(this, msg)); | |
| 95 }); | |
| 96 } | |
| 97 }); | |
| 98 } | |
| 99 | |
| 100 setupClipRows(msg) { | |
| 101 const nodes = this.shadowRoot.querySelectorAll('light9-vidref-replay'); | |
| 102 nodes.forEach((node, i) => { | |
| 103 node.uri = msg[i].uri; | |
| 104 node.videoUrl = msg[i].videoUrl; | |
| 105 node.songToVideo = msg[i].songToVideo; | |
| 106 }); | |
| 107 this.setVideoTimesFromSongTime(); | |
| 108 } | |
| 109 | |
| 110 makeClipRow(clip) { | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
111 return html`<light9-vidref-replay @clips-changed="${this.onClipsChanged}" size="${this.size}"></light9-vidref-replay>`; |
| 1951 | 112 } |
| 113 | |
| 114 onClipsChanged(ev) { | |
| 115 this.getReplayMapForSong(this.song); | |
| 116 } | |
| 117 | |
| 118 disconnectedCallback() { | |
| 119 log('bye'); | |
| 120 //close socket | |
| 121 } | |
| 122 | |
| 123 userMovedSongTime(ev) { | |
| 124 const st = this.songTimeRangeInput.valueAsNumber; | |
| 125 this.songTime = st; | |
| 126 | |
| 127 fetch('/ascoltami/seekPlayOrPause', { | |
| 128 method: 'POST', | |
| 129 body: JSON.stringify({scrub: st}), | |
| 130 }); | |
| 131 } | |
| 132 | |
| 133 static get styles() { | |
| 134 return css` | |
| 135 :host { | |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
136 display: inline-block; |
| 1951 | 137 } |
| 138 #songTime { | |
| 139 width: 100%; | |
| 140 } | |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
141 #clips { |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
142 display: flex; |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
143 flex-direction: column; |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
144 } |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
145 a { |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
146 color: rgb(97, 97, 255); |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
147 } |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
148 #songTime { |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
149 font-size: 27px; |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
150 } |
| 2021 | 151 light9-vidref-replay { |
| 152 margin: 5px; | |
| 153 } | |
| 1951 | 154 `; |
| 155 } | |
| 156 | |
| 157 render() { | |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
158 const songTimeRange = this.size != "small" ? html`<input id="songTime" type="range" |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
159 .value="${this.songTime}" |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
160 @input="${this.userMovedSongTime}" |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
161 min="0" max="0" step=".001"></div> |
|
2018
5b157494a741
vidref always show song time, and don't lose the details on normal size view
drewp@bigasterisk.com
parents:
1994
diff
changeset
|
162 <div><a href="${this.musicState.song}">${this.musicState.song}</a></div>` : ''; |
|
5b157494a741
vidref always show song time, and don't lose the details on normal size view
drewp@bigasterisk.com
parents:
1994
diff
changeset
|
163 |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
164 |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
165 const globalCommands = this.size != 'small' ? html` |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
166 <div> |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
167 <button @click="${this.onClipsChanged}">Refresh clips for song</button> |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
168 </div> |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
169 ` : ''; |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
170 return html` |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
171 <div> |
|
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
172 ${songTimeRange} |
|
2018
5b157494a741
vidref always show song time, and don't lose the details on normal size view
drewp@bigasterisk.com
parents:
1994
diff
changeset
|
173 <div id="songTime">showing song time ${rounding(this.songTime, 3)}</div> |
|
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
174 <div>clips:</div> |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
175 <div id="clips"> |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
176 ${this.players} |
|
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
177 </div> |
|
1994
1b690005aabd
little vidref player inside timeline
Drew Perttula <drewp@bigasterisk.com>
parents:
1986
diff
changeset
|
178 ${globalCommands} |
| 1951 | 179 `; |
| 180 | |
| 181 } | |
| 182 } | |
| 183 customElements.define('light9-vidref-replay-stack', Light9VidrefReplayStack); |