# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 1465075438 0
# Node ID 2d77dc9436c3f0c5195a11da48f478917cc74a0a
# Parent  3843f6bd0460c2cbfd6121d831707f0869fbe98e
music drives cursor
Ignore-this: ffa7a9a94084bb8feab6d04e888fb3f6

diff -r 3843f6bd0460 -r 2d77dc9436c3 light9/web/light9-music.coffee
--- a/light9/web/light9-music.coffee	Sat Jun 04 20:43:31 2016 +0000
+++ b/light9/web/light9-music.coffee	Sat Jun 04 21:23:58 2016 +0000
@@ -5,25 +5,56 @@
   is: "light9-music",
   properties:
     status: { type: String, notify: true }
+    statusTitle: { type: String, notify: true }
+    turboSign: { type: String, notify: true }
+    
     duration: { type: Number, notify: true }
     playing: { type: Boolean, notify: true }
     song: { type: String, notify: true }
     t: { type: Number, notify: true }
+    
   ready: ->
+    @turboUntil = 0
     @$.getTime.addEventListener('response', @onResponse.bind(@))
     @$.getTime.addEventListener 'error', (e) =>
       req = @$.getTime.lastRequest
-      @status = "GET "+req.url+ " -> " + req.status + " " + req.statusText
+      @status = "✘"
+      @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText
       setTimeout(@poll.bind(@), 2000)
     @poll()
+    setInterval(@estimateTimeLoop.bind(@), 50)
+
+  estimateTimeLoop: ->
+    if @playing
+      @t = @remoteT + (Date.now() - @remoteAsOfMs) / 1000
+    else
+      @t = @remoteT
+    
   poll: ->
     @$.getTime.generateRequest()
-    @status = "poll"
+    @status = "♫"
   onResponse: ->
-    @status = "ok"
-    setTimeout(@poll.bind(@), 1000)
+    @status = " "
     r = @$.getTime.lastResponse
+    now = Date.now()
+    if !r.playing && r.t != @remoteT
+      # likely seeking in another tool
+      @turboUntil = now + 1000
+    if now < @turboUntil
+      @turboSign = "⚡"
+      delay = 20
+    else
+      @turboSign = " "
+      delay = 700
+    
+    setTimeout(@poll.bind(@), delay)
     @duration = r.duration
     @playing = r.playing
     @song = r.song
-    @t = r.t
+
+    @remoteT = r.t
+    @remoteAsOfMs = now
+
+    
+
+    
diff -r 3843f6bd0460 -r 2d77dc9436c3 light9/web/light9-music.html
--- a/light9/web/light9-music.html	Sat Jun 04 20:43:31 2016 +0000
+++ b/light9/web/light9-music.html	Sat Jun 04 21:23:58 2016 +0000
@@ -4,8 +4,18 @@
 <!-- remote control of ascoltami -->
 <dom-module id="light9-music">
   <template>
+    <style>
+     span {
+         font-family: monospace;
+         white-space: pre;
+         background: black;
+         color: white;
+         border: 1px solid #2782ad;
+         font-size: 12px;
+     }
+    </style>
     <iron-ajax id="getTime" url="/ascoltami/time"></iron-ajax>
-    <span>[[status]]</span>
+    <span>[[status]][[turboSign]]</span>
   </template>
   <script src="light9-music.js"></script>
 </dom-module>
diff -r 3843f6bd0460 -r 2d77dc9436c3 light9/web/timeline-elements.html
--- a/light9/web/timeline-elements.html	Sat Jun 04 20:43:31 2016 +0000
+++ b/light9/web/timeline-elements.html	Sat Jun 04 21:23:58 2016 +0000
@@ -30,18 +30,14 @@
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
      }
-     #debug {
-         position: fixed;
-         right: 0;
-         bottom: 0;
-     }
     </style>
     <div>
       <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
-      <light9-music></light9-music>
-      timeline editor: song [uri] <button>unlink</button>
+      <light9-music song="{{song}}" t="{{songTime}}"></light9-music>
+      timeline editor: song [{{song}}] <button>unlink</button>
       <label><input type="checkbox"> follow player song choice</label>
     </div>
+    <div>[[debug]]</div>
     <!--
          Old zoom menu:
          See current time .. esc
@@ -52,12 +48,10 @@
     <light9-timeline-time-zoomed id="zoomed" graph="{{graph}}" zoom="{{viewState.zoomSpec}}" zoom-in-x="{{zoomInX}}"></light9-timeline-time-zoomed>
     <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer>
     <light9-timeline-adjusters id="adjusters" dia="{{dia}}" adjs="{{adjs}}"></light9-timeline-adjusters>
-    <div id="debug">[[debug]]</div>
   </template>
  
 </dom-module>
 
-
 <!-- the whole section that pans/zooms in time (most of the editor) -->
 <dom-module id="light9-timeline-time-zoomed">
   <template>
diff -r 3843f6bd0460 -r 2d77dc9436c3 light9/web/timeline.coffee
--- a/light9/web/timeline.coffee	Sat Jun 04 20:43:31 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 21:23:58 2016 +0000
@@ -7,11 +7,15 @@
     viewState: { type: Object }
     debug: {type: String}
     graph: {type: Object, notify: true}
+    song: {type: String, notify: true}
+    songTime: {type: Number, notify: true, observer: '_onSongTime'}
   width: ko.observable(1)
   listeners:
     'iron-resize': '_onIronResize'
   _onIronResize: ->
     @width(@offsetWidth)
+  _onSongTime: (t) ->
+    @viewState.cursor.t(t) if @viewState
 
   attached: ->
     @dia = @$.dia
@@ -32,20 +36,17 @@
       @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
       @$.adjusters.updateAllCoords()
 
-    animCursor = () => 
-      @viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000)
+    ko.computed =>
+      # zoomInX changing doesn't retrigger this, so I'll do it here
+      ko.toJS(@viewState.zoomSpec)
+      
       @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                        @$.zoomed.$.time.offsetTop,
                        @$.zoomed.$.time.offsetHeight,
                        @fullZoomX, @zoomInX, @viewState.cursor)
 
-      #@viewState.zoomSpec.t1(80 + 10 * Math.sin(Date.now() / 3000))
-      
-    setInterval(animCursor, 50)
-
     @adjs = @makeZoomAdjs().concat(@persistDemo())
 
-
   persistDemo: ->
     ctx = @graph.Uri('http://example.com/')
     adjs = []
@@ -129,7 +130,7 @@
     zoomInX: { type: Object, notify: true }
 
   
-window.xserial = 0
+
 Polymer
   is: 'light9-timeline-note'
   behaviors: [ Polymer.IronResizableBehavior ]
@@ -261,8 +262,8 @@
       bot: @querySelector('#cursor3')
     return if !@cursorPath.top
     
-    xZoomedOut = fullZoomX(cursor.t)
-    xZoomedIn = zoomInX(cursor.t)
+    xZoomedOut = fullZoomX(cursor.t())
+    xZoomedIn = zoomInX(cursor.t())
     @cursorPath.top.setAttribute 'd', svgPathFromPoints([
       [xZoomedOut, y1]
       [xZoomedOut, y1 + h1]