Updated elapsed time while user is dragging the progress slider.

Also ensure that only one seek event can be triggered at a time.

mopidy_musicbox_webclient/static/js/controls.js

@@ -360,13 +360,18 @@ function doSingle() {
  * Use a timer to prevent looping of commands  *
  ***********************************************/
 function doSeekPos(value) {
-    if (mopidy) {
+    if (!positionChanging) {
-        mopidy.playback.seek({'time_position': Math.round(value)});
+        positionChanging = value;
+        mopidy.playback.seek({'time_position': Math.round(value)}).then( function() {
+            positionChanging = null;
+        });;
     }
 }
 
 function setPosition(pos) {
-    setProgressTimer(pos);
+    if (!positionChanging && $("#trackslider").val() != pos) {
+        setProgressTimer(pos);
+    }
 }
 
 /***********************************************

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -14,7 +14,9 @@ var consume;
 var single;
 var mute;
 var volumeChanging;
-var volumeSliding;
+var volumeSliding = false;
+
+var positionChanging;
 
 var initgui = true;
 var popupData = {};

mopidy_musicbox_webclient/static/js/gui.js

@@ -569,8 +569,15 @@ $(document).ready(function(event) {
 			event.stopImmediatePropagation(); }
 		    } );
 
-    $( "#trackslider" ).on( "slidestart", function() { progressTimer.stop(); } );
+    $( "#trackslider" ).on( "slidestart", function() {
-    $( "#trackslider" ).on( "slidestop", function() { doSeekPos( $(this).val() ); } );
+        progressTimer.stop();
+        $( "#trackslider" ).on( "change", function() { updatePosition( $(this).val() ); } );
+        } );
+
+    $( "#trackslider" ).on( "slidestop", function() {
+        $( "#trackslider" ).off( "change");
+        doSeekPos( $(this).val() );
+        } );
 
     $( "#volumeslider" ).on( "slidestart", function() { volumeSliding = true; } );
     $( "#volumeslider" ).on( "slidestop", function() { volumeSliding = false; } );

mopidy_musicbox_webclient/static/js/progress_timer.js

@@ -112,7 +112,7 @@ function format(milliseconds) {
     if (milliseconds === Infinity) {
         return '(n/a)';
     } else if (milliseconds == 0) {
-        return '';
+        return '0:00';
     }
 
     var seconds = Math.floor(milliseconds / 1000);
@@ -160,6 +160,10 @@ function setProgressTimer(pos) {
     }
 }
 
+function updatePosition(pos) {
+    positionNode.nodeValue = format(pos);
+}
+
 function startProgressTimer() {
     reset();
     progressTimer.start();