light9 Changeset - 1b690005aabd

Changeset - 1b690005aabd

Parent rev.

Child rev.

[Not reviewed]

default

0 4 0

Drew Perttula - 6 years ago 2019-06-09 19:16:37
drewp@bigasterisk.com

little vidref player inside timeline
Ignore-this: 87333fed2271d9eae182fff1e3d2be1

4 files changed with 45 insertions and 17 deletions:

bin/vidref

light9/web/light9-vidref-replay-stack.js

light9/web/light9-vidref-replay.js

light9/web/timeline/timeline-elements.html

0 comments (0 inline, 0 general)

bin/vidref

➞

Show inline comments

@@ @@ -153,7 +153,7 @@ class ReplayMap(PrettyErrorHandler, cycl @@
             })
         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)

light9/web/light9-vidref-replay-stack.js

➞

Show inline comments

@@ @@ -11,7 +11,8 @@ class Light9VidrefReplayStack extends Li @@
         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 }
         };
+    }
@@ @@ -34,9 +35,10 @@ class Light9VidrefReplayStack extends Li @@
         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 @@ class Light9VidrefReplayStack extends Li @@
         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 @@ class Light9VidrefReplayStack extends Li @@
         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 @@ class Light9VidrefReplayStack extends Li @@
+    }
     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 @@ class Light9VidrefReplayStack extends Li @@
+    }
     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}
 `;
+    }

light9/web/light9-vidref-replay.js

➞

Show inline comments

@@ @@ -15,7 +15,8 @@ class Light9VidrefReplay extends LitElem @@
             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 @@ class Light9VidrefReplay extends LitElem @@
         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>
@@ @@ -118,6 +122,10 @@ class Light9VidrefReplay extends LitElem @@
     rate = <span class="num">${rounding(this.playRate, 3)}</span>
   </div>
   `;
+        }
         return html`
   <video id="replay" class="size-${this.size}" src="${this.videoUrl}"></video>
   `;
+    }
+}

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -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>

0 comments (0 inline, 0 general)