Merge pull request #1056 from friday/volume

Minor increaseVolume and decreaseVolume changes

2 files changed, 13 insertions, 30 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;
-                    }
-                }
 
-                // 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;
-                    }
-                }
+                // Get delta from event. Invert if `inverted` is true
+                const [x, y] = [event.deltaX, -event.deltaY]
+                    .map(value => inverted ? -value : value);
+
+                // 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();
                 }
             },
diff --git a/src/js/plyr.js b/src/js/plyr.js
index c2bb6a4d..374251e6 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);
     }
 
     /**
@@ -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 : 1);
+        this.increaseVolume(-step);
     }
 
     /**