client: smoother track slider

andrewrk · Dec 31, 2014 · 09d2b43 · 09d2b43
1 parent d76933f
commit 09d2b43
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/client/app.js b/src/client/app.js
@@ -1826,6 +1826,8 @@ function getCurrentTrackPosition(){
 }
 
 function updateSliderPos() {
+  window.requestAnimationFrame(updateSliderPos);
+
   if (userIsSeeking) return;
 
   var duration, disabled, elapsed, sliderPos;
@@ -1883,7 +1885,6 @@ function renderNowPlaying() {
   nowPlayingToggleIconDom.classList.remove(oldClass);
   nowPlayingToggleIconDom.classList.add(newClass);
   trackSliderDom.disabled = (player.isPlaying == null);
-  updateSliderPos();
   renderVolumeSlider();
 }
 
@@ -2858,7 +2859,7 @@ function setUpNowPlayingUi() {
   volSlider.addEventListener('mousedown', onVolSliderMouseDown, false);
   volSlider.addEventListener('mouseup', onVolSliderMouseUp, false);
 
-  setInterval(updateSliderPos, 100);
+  updateSliderPos();
 }
 
 function onVolSliderMouseDown(ev) {

diff --git a/src/public/index.html b/src/public/index.html
@@ -17,11 +17,11 @@
     </div>
     <div id="client-vol" style="display: none">
       <span class="icon icon-volume-off"></span>
-      <input type="range" id="client-vol-slider" min="0.0" max="1.0" step="0.001" tabindex="-1">
+      <input type="range" id="client-vol-slider" min="0.0" max="1.0" step="0.0001" tabindex="-1">
       <span class="icon icon-volume-on"></span>
     </div>
     <h1 id="track-display"></h1>
-    <input type="range" id="track-slider" min="0.0" max="1.0" step="0.001" tabindex="-1">
+    <input type="range" id="track-slider" min="0.0" max="1.0" step="0.0001" tabindex="-1">
     <span id="nowplaying-time-elapsed"></span>
     <span id="nowplaying-time-left"></span>
     <div style="clear: both;"></div>
@@ -172,7 +172,7 @@ <h1>Sound</h1>
           </div>
           <div id="vol">
             <span class="icon icon-volume-off"></span>
-            <input type="range" id="vol-slider" min="0.0" max="2.0" step="0.001">
+            <input type="range" id="vol-slider" min="0.0" max="2.0" step="0.0001">
             <span class="icon icon-volume-on"></span>
           </div>
           <div style="clear: both;"></div>