From bb1ba5a29ed28222ef49b4d314b830a9289bc45c Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 15 Feb 2020 16:18:24 +0300 Subject: [PATCH 1/3] Make configurable slider progress bar update --- src/components/nowplayingbar/nowplayingbar.js | 7 +---- src/components/remotecontrol/remotecontrol.js | 6 ---- src/controllers/playback/videoosd.js | 6 ---- src/elements/emby-slider/emby-slider.js | 29 ++++++++++++++----- src/nowplaying.html | 2 +- src/videoosd.html | 2 +- 6 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index d8191e9ef1..56fa2eaa15 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -31,7 +31,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', html += '
'; html += '
'; - html += ''; + html += ''; html += '
'; html += '
'; @@ -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 @@

- +
diff --git a/src/videoosd.html b/src/videoosd.html index a099605d0d..a2bfb7988e 100644 --- a/src/videoosd.html +++ b/src/videoosd.html @@ -18,7 +18,7 @@
- +
From ad0b67d2f6725ece3b1083b243c1974e54311a8e Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sat, 15 Feb 2020 16:51:37 +0300 Subject: [PATCH 2/3] Make delayed volume update --- src/components/nowplayingbar/nowplayingbar.js | 19 +++++++++++-- src/components/remotecontrol/remotecontrol.js | 28 +++++++++++++------ 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index 56fa2eaa15..fcbbc54f1a 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -187,14 +187,29 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', volumeSliderContainer.classList.remove('hide'); } + var volumeSliderTimer; + function setVolume() { + clearTimeout(volumeSliderTimer); + volumeSliderTimer = null; + if (currentPlayer) { currentPlayer.setVolume(this.value); } } + + function setVolumeDelayed() { + if (!volumeSliderTimer) { + var that = this; + volumeSliderTimer = setTimeout(function () { + setVolume.call(that); + }, 700); + } + } + volumeSlider.addEventListener('change', setVolume); - volumeSlider.addEventListener('mousemove', setVolume); - volumeSlider.addEventListener('touchmove', setVolume); + volumeSlider.addEventListener('mousemove', setVolumeDelayed); + volumeSlider.addEventListener('touchmove', setVolumeDelayed); positionSlider = elem.querySelector('.nowPlayingBarPositionSlider'); positionSlider.addEventListener('change', function () { diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index be1fcd2754..df1b01367d 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -609,15 +609,27 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL return datetime.getDisplayRunningTime(ticks); }; - context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", function () { + var volumeSliderTimer; + + function setVolume() { + clearTimeout(volumeSliderTimer); + volumeSliderTimer = null; + playbackManager.setVolume(this.value, currentPlayer); - }); - context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", function () { - playbackManager.setVolume(this.value, currentPlayer); - }); - context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", function () { - playbackManager.setVolume(this.value, currentPlayer); - }); + } + + function setVolumeDelayed() { + if (!volumeSliderTimer) { + var that = this; + volumeSliderTimer = setTimeout(function () { + setVolume.call(that); + }, 700); + } + } + + context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume); + context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed); + context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed); context.querySelector(".buttonMute").addEventListener("click", function () { playbackManager.toggleMute(currentPlayer); }); From 4ea3b98c2794ad97a4d910880faae3209f0aee04 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Wed, 19 Feb 2020 11:10:12 +0300 Subject: [PATCH 3/3] Extract setVolume/setVolumeDelayed --- src/controllers/playback/videoosd.js | 49 +++++++++++----------------- 1 file changed, 19 insertions(+), 30 deletions(-) diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index 6c7dcce788..1c73351db9 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -1405,39 +1405,28 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med }, options); } + function setVolume() { + clearTimeout(volumeSliderTimer); + volumeSliderTimer = null; + + playbackManager.setVolume(this.value, currentPlayer); + } + + function setVolumeDelayed() { + if (!volumeSliderTimer) { + var that = this; + volumeSliderTimer = setTimeout(function () { + setVolume.call(that); + }, 700); + } + } + view.querySelector(".buttonMute").addEventListener("click", function () { playbackManager.toggleMute(currentPlayer); }); - nowPlayingVolumeSlider.addEventListener("change", function () { - if (volumeSliderTimer) { - // interupt and remove existing timer - clearTimeout(volumeSliderTimer); - volumeSliderTimer = null; - } - playbackManager.setVolume(this.value, currentPlayer); - }); - nowPlayingVolumeSlider.addEventListener("mousemove", function () { - if (!volumeSliderTimer) { - var that = this; - // register new timer - volumeSliderTimer = setTimeout(function() { - playbackManager.setVolume(that.value, currentPlayer); - // delete timer after completion - volumeSliderTimer = null; - }, 700); - } - }); - nowPlayingVolumeSlider.addEventListener("touchmove", function () { - if (!volumeSliderTimer) { - var that = this; - // register new timer - volumeSliderTimer = setTimeout(function() { - playbackManager.setVolume(that.value, currentPlayer); - // delete timer after completion - volumeSliderTimer = null; - }, 700); - } - }); + nowPlayingVolumeSlider.addEventListener("change", setVolume); + nowPlayingVolumeSlider.addEventListener("mousemove", setVolumeDelayed); + nowPlayingVolumeSlider.addEventListener("touchmove", setVolumeDelayed); nowPlayingPositionSlider.addEventListener("change", function () { var player = currentPlayer;