From 43879e08f44a5bb902b4dc0f8ccd1d3d6283b47d Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 19 Jun 2018 16:25:37 +0200 Subject: [PATCH 1/3] Make (increase/decrease)Volume methods ignore invalid input instead of raising / lowering to the min / max --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/plyr.js b/src/js/plyr.js index c2bb6a4d..9e00e836 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -553,7 +553,7 @@ class Plyr { */ increaseVolume(step) { const volume = this.media.muted ? 0 : this.volume; - this.volume = volume + (is.number(step) ? step : 1); + this.volume = volume + (is.number(step) ? step : 0); } /** @@ -562,7 +562,7 @@ class Plyr { */ decreaseVolume(step) { const volume = this.media.muted ? 0 : this.volume; - this.volume = volume - (is.number(step) ? step : 1); + this.volume = volume - (is.number(step) ? step : 0); } /** From 39c7bd40c205700e7b1df677b8aaacc6cb8100db Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 19 Jun 2018 16:29:52 +0200 Subject: [PATCH 2/3] Make decreaseVolume wrap increaseVolume for code reuse --- src/js/plyr.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/js/plyr.js b/src/js/plyr.js index 9e00e836..374251e6 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -561,8 +561,7 @@ class Plyr { * @param {boolean} step - How much to decrease by (between 0 and 1) */ decreaseVolume(step) { - const volume = this.media.muted ? 0 : this.volume; - this.volume = volume - (is.number(step) ? step : 0); + this.increaseVolume(-step); } /** From 004528a65c334603bfd0e79222687a7fec02abcb Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 19 Jun 2018 17:16:30 +0200 Subject: [PATCH 3/3] Avoid conditions in volume scroll event listener --- src/js/listeners.js | 36 ++++++++++-------------------------- 1 file changed, 10 insertions(+), 26 deletions(-) diff --git a/src/js/listeners.js b/src/js/listeners.js index 9d987508..d9811dd1 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -665,36 +665,20 @@ class Listeners { // Detect "natural" scroll - suppored on OS X Safari only // Other browsers on OS X will be inverted until support improves const inverted = event.webkitDirectionInvertedFromDevice; - const step = 1 / 50; - let direction = 0; - // Scroll down (or up on natural) to decrease - if (event.deltaY < 0 || event.deltaX > 0) { - if (inverted) { - this.player.decreaseVolume(step); - direction = -1; - } else { - this.player.increaseVolume(step); - direction = 1; - } - } + // Get delta from event. Invert if `inverted` is true + const [x, y] = [event.deltaX, -event.deltaY] + .map(value => inverted ? -value : value); - // Scroll up (or down on natural) to increase - if (event.deltaY > 0 || event.deltaX < 0) { - if (inverted) { - this.player.increaseVolume(step); - direction = 1; - } else { - this.player.decreaseVolume(step); - direction = -1; - } - } + // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta) + const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y); + + // Change the volume by 2% + this.player.increaseVolume(direction / 50); // Don't break page scrolling at max and min - if ( - (direction === 1 && this.player.media.volume < 1) || - (direction === -1 && this.player.media.volume > 0) - ) { + const { volume } = this.player.media; + if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) { event.preventDefault(); } },