';
@@ -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;
}
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 29e7e8f42b..be1fcd2754 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/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 {
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index fd42f68498..6c7dcce788 100644
--- a/src/controllers/playback/videoosd.js
+++ b/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 {
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 13472b4d5d..5465ccc5b6 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/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 when touched to keep current progress for reference
- if (!!this.keyboardDragging || !!this.touched) {
+ // Do not update values by 'valueset' in case of soft-implemented dragging
+ if (!!isValueSet && (!!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 () {
diff --git a/src/nowplaying.html b/src/nowplaying.html
index 78813255c8..68486a2e72 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -9,7 +9,7 @@
-
+