Mercurial > code > home > repos > light9
changeset 1994:1b690005aabd
little vidref player inside timeline
Ignore-this: 87333fed2271d9eae182fff1e3d2be1
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Sun, 09 Jun 2019 19:16:37 +0000 |
| parents | a322fba0035c |
| children | 8a618476e2fa |
| files | bin/vidref light9/web/light9-vidref-replay-stack.js light9/web/light9-vidref-replay.js light9/web/timeline/timeline-elements.html |
| diffstat | 4 files changed, 46 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/bin/vidref Sun Jun 09 18:31:47 2019 +0000 +++ b/bin/vidref Sun Jun 09 19:16:37 2019 +0000 @@ -153,7 +153,7 @@ }) clips.sort(key=lambda c: len(cast(list, c['songToVideo']))) - clips = clips[-3:] + clips = clips[-int(self.get_argument('maxClips', '3')):] clips.sort(key=lambda c: c['uri'], reverse=True) ret = json.dumps(clips)
--- a/light9/web/light9-vidref-replay-stack.js Sun Jun 09 18:31:47 2019 +0000 +++ b/light9/web/light9-vidref-replay-stack.js Sun Jun 09 19:16:37 2019 +0000 @@ -11,7 +11,8 @@ return { songTime: { type: Number, attribute: false }, // from musicState.t but higher res musicState: { type: Object, attribute: false }, - players: { type: Array, attribute: false } + players: { type: Array, attribute: false }, + size: { type: String, attribute: true } }; } @@ -30,13 +31,14 @@ this.songTime += dt; log('song now', this.songTime); } - fineTime() { + fineTime() { if (this.musicState.playing) { const sinceLastUpdate = (Date.now() - this.musicState.reportTime) / 1000; this.songTime = sinceLastUpdate + this.musicState.tStart; - } else { - // this.songTime = this.musicState.t; + } else if (this.lastFineTimePlayingState) { + this.songTime = this.musicState.t; } + this.lastFineTimePlayingState = this.musicState.playing; requestAnimationFrame(this.fineTime.bind(this)); } @@ -51,7 +53,7 @@ const ws = reconnectingWebSocket('../ascoltami/time/stream', this.receivedSongAndTime.bind(this)); - reconnectingWebSocket('time/stream', this.receivedRemoteScrubbedTime.bind(this)); + reconnectingWebSocket('../vidref/time/stream', this.receivedRemoteScrubbedTime.bind(this)); // bug: upon connecting, clear this.song this.fineTime(); } @@ -84,6 +86,7 @@ const u = new URL(window.location.href); u.pathname = '/vidref/replayMap' u.searchParams.set('song', song); + u.searchParams.set('maxClips', this.size == "small" ? '1' : '3'); fetch(u.toString()).then((resp) => { if (resp.ok) { resp.json().then((msg) => { @@ -105,7 +108,7 @@ } makeClipRow(clip) { - return html`<light9-vidref-replay @clips-changed="${this.onClipsChanged}"></light9-vidref-replay>`; + return html`<light9-vidref-replay @clips-changed="${this.onClipsChanged}" size="${this.size}"></light9-vidref-replay>`; } onClipsChanged(ev) { @@ -149,21 +152,26 @@ } render() { - return html` - <div> - <input id="songTime" type="range" + const songTimeRange = this.size != "small" ? html`<input id="songTime" type="range" .value="${this.songTime}" @input="${this.userMovedSongTime}" min="0" max="0" step=".001"></div> <div><a href="${this.musicState.song}">${this.musicState.song}</a></div> - <div id="songTime">showing song time ${rounding(this.songTime, 3)}</div> + <div id="songTime">showing song time ${rounding(this.songTime, 3)}</div>` : ''; + + const globalCommands = this.size != 'small' ? html` + <div> + <button @click="${this.onClipsChanged}">Refresh clips for song</button> + </div> +` : ''; + return html` + <div> + ${songTimeRange} <div>clips:</div> <div id="clips"> ${this.players} </div> - <div> - <button @click="${this.onClipsChanged}">Refresh clips for song</button> - </div> + ${globalCommands} `; }
--- a/light9/web/light9-vidref-replay.js Sun Jun 09 18:31:47 2019 +0000 +++ b/light9/web/light9-vidref-replay.js Sun Jun 09 19:16:37 2019 +0000 @@ -15,7 +15,8 @@ videoTime: { type: Number }, outVideoCurrentTime: { type: Number }, timeErr: { type: Number }, - playRate: { type: Number } + playRate: { type: Number }, + size: { type: String, attribute: true } }; } estimateRate() { @@ -98,13 +99,16 @@ a { color: rgb(97, 97, 255); } + video.size-small { + width: 460px; + } `; } render() { - return html` - <video id="replay" src="${this.videoUrl}"></video> - <div> + let details = ''; + if (this.size != 'small') { + details = html` <div> take is <a href="${this.uri}">${this.uri}</a> (${Object.keys(this.songToVideo).length} frames) <button @click="${this.onDelete}">Delete</button> @@ -117,6 +121,10 @@ err = <span class="num">${rounding(this.timeErr, 3)} </span> rate = <span class="num">${rounding(this.playRate, 3)}</span> </div> +`; + } + return html` + <video id="replay" class="size-${this.size}" src="${this.videoUrl}"></video> `; }
--- a/light9/web/timeline/timeline-elements.html Sun Jun 09 18:31:47 2019 +0000 +++ b/light9/web/timeline/timeline-elements.html Sun Jun 09 19:16:37 2019 +0000 @@ -11,6 +11,10 @@ <link rel="import" href="../light9-music.html"> <link rel="import" href="../edit-choice.html"> <link rel="import" href="inline-attrs.html"> + <script src="/websocket.js"></script> +<script type="module" src="/light9-vidref-replay.js"></script> + +<script type="module" src="/light9-vidref-replay-stack.js"></script> <!-- Whole editor- include this on your page. @@ -50,6 +54,13 @@ font-size: 125%; height: 15px; } + light9-vidref-replay-stack { + position: absolute; + bottom: 10px; + background: gray; + box-shadow: 6px 10px 12px #0000006b; + display: inline-block; + } </style> <div> <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph> @@ -80,6 +91,7 @@ <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}"> </light9-adjusters-canvas> <light9-cursor-canvas id="cursorCanvas" view-state="{{viewState}}"></light9-cursor-canvas> + <light9-vidref-replay-stack size="small"></light9-vidref-replay-stack> </div> </template>