# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 2019-06-09 19:16:37
# Node ID 1b690005aabd4793cf2ff560b6e104f7b26171d9
# Parent  a322fba0035caf8da3942770de2c8965ad2fabdc

little vidref player inside timeline
Ignore-this: 87333fed2271d9eae182fff1e3d2be1

diff --git a/bin/vidref b/bin/vidref
--- a/bin/vidref
+++ b/bin/vidref
@@ -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)
diff --git a/light9/web/light9-vidref-replay-stack.js b/light9/web/light9-vidref-replay-stack.js
--- a/light9/web/light9-vidref-replay-stack.js
+++ b/light9/web/light9-vidref-replay-stack.js
@@ -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 }
         };
     }
 
@@ -30,13 +31,14 @@ class Light9VidrefReplayStack extends Li
         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 @@ 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}
 `;
 
     }
diff --git a/light9/web/light9-vidref-replay.js b/light9/web/light9-vidref-replay.js
--- a/light9/web/light9-vidref-replay.js
+++ b/light9/web/light9-vidref-replay.js
@@ -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>
@@ -117,6 +121,10 @@ class Light9VidrefReplay extends LitElem
     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>
   `;
 
     }
diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html
--- a/light9/web/timeline/timeline-elements.html
+++ b/light9/web/timeline/timeline-elements.html
@@ -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>