Make configurable slider progress bar update

src/components/nowplayingbar/nowplayingbar.js

@@ -31,7 +31,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         html += '<div class="nowPlayingBarTop">';
         html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
-        html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider"/>';
+        html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider" data-slider-keep-progress="true"/>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarInfoContainer">';
@@ -393,7 +393,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         var showMuteButton = true;
         var showVolumeSlider = true;
-        var progressElement = volumeSliderContainer.querySelector('.mdl-slider-background-lower');
 
         if (supportedCommands.indexOf('ToggleMute') === -1) {
             showMuteButton = false;
@@ -405,10 +404,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             muteButton.querySelector('i').innerHTML = 'volume_up';
         }
 
-        if (progressElement) {
-            progressElement.style.width = (volumeLevel || 0) + '%';
-        }
-
         if (supportedCommands.indexOf('SetVolume') === -1) {
             showVolumeSlider = false;
         }

src/components/remotecontrol/remotecontrol.js

@@ -279,8 +279,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             var supportedCommands = currentPlayerSupportedCommands;
             var showMuteButton = true;
             var showVolumeSlider = true;
-            var volumeSlider = view.querySelector('.nowPlayingVolumeSliderContainer');
-            var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
 
             if (-1 === supportedCommands.indexOf("Mute")) {
                 showMuteButton = false;
@@ -303,10 +301,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 view.querySelector(".buttonMute i").innerHTML = "volume_up";
             }
 
-            if (progressElement) {
-                progressElement.style.width = (volumeLevel || 0) + '%';
-            }
-
             if (showMuteButton) {
                 view.querySelector(".buttonMute").classList.remove("hide");
             } else {

src/controllers/playback/videoosd.js

@@ -862,8 +862,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
             var supportedCommands = currentPlayerSupportedCommands;
             var showMuteButton = true;
             var showVolumeSlider = true;
-            var volumeSlider = view.querySelector('.osdVolumeSliderContainer');
-            var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
 
             if (-1 === supportedCommands.indexOf("Mute")) {
                 showMuteButton = false;
@@ -886,10 +884,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                 view.querySelector(".buttonMute i").innerHTML = "volume_up";
             }
 
-            if (progressElement) {
-                progressElement.style.width = (volumeLevel || 0) + '%';
-            }
-
             if (showMuteButton) {
                 view.querySelector(".buttonMute").classList.remove("hide");
             } else {

src/elements/emby-slider/emby-slider.js

@@ -72,11 +72,15 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         return Math.min(Math.max(fraction, 0), 1);
     }
 
-    function updateValues() {
+    /**
+     * Updates progress bar.
+     *
+     * @param {boolean} [isValueSet] update by 'valueset' event or by timer
+     */
+    function updateValues(isValueSet) {
 
-        // Do not update values when dragging with keyboard to keep current progress for reference
+        // Do not update values by 'valueset' in case of soft-implemented dragging
-        // Do not update values when touched to keep current progress for reference
+        if (!!isValueSet && (!!this.keyboardDragging || !!this.touched)) {
-        if (!!this.keyboardDragging || !!this.touched) {
             return;
         }
 
@@ -84,7 +88,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         var value = range.value;
 
         // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
-        requestAnimationFrame(function () {
+        // Keep only one per slider frame request
+        cancelAnimationFrame(range.updateValuesFrame);
+        range.updateValuesFrame = requestAnimationFrame(function () {
 
             var backgroundLower = range.backgroundLower;
 
@@ -191,6 +197,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, 'input', function (e) {
             this.dragging = true;
 
+            if (this.dataset.sliderKeepProgress !== 'true') {
+                updateValues.call(this);
+            }
+
             var bubbleValue = mapValueToFraction(this, this.value) * 100;
             updateBubble(this, bubbleValue, sliderBubble);
 
@@ -204,7 +214,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         dom.addEventListener(this, 'change', function () {
             this.dragging = false;
-            updateValues.call(this);
+
+            if (this.dataset.sliderKeepProgress === 'true') {
+                updateValues.call(this);
+            }
 
             sliderBubble.classList.add('hide');
             hasHideClass = true;
@@ -278,7 +291,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         }
 
         if (supportsValueSetOverride) {
-            this.addEventListener('valueset', updateValues);
+            this.addEventListener('valueset', updateValues.bind(this, true));
         } else {
             startInterval(this);
         }
@@ -457,7 +470,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         if (interval) {
             clearInterval(interval);
         }
-        range.interval = setInterval(updateValues.bind(range), 100);
+        range.interval = setInterval(updateValues.bind(range, true), 100);
     }
 
     EmbySliderPrototype.detachedCallback = function () {

src/nowplaying.html

@@ -9,7 +9,7 @@
                 <h2 class="nowPlayingPageTitle"></h2>
 
                 <div class="sliderContainer nowPlayingPositionSliderContainer">
-                    <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
+                    <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
                 </div>
 
                 <div class="nowPlayingInfoButtons">

src/videoosd.html

@@ -18,7 +18,7 @@
             <div class="flex flex-direction-row align-items-center">
                 <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
-                    <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" />
+                    <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
                 <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
             </div>