diff options
author | Sam Potts <sam@potts.es> | 2018-06-25 23:09:13 +1000 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2018-06-25 23:09:13 +1000 |
commit | e59fe1aacfcb1366cedcb1a65c4ad22f588f8741 (patch) | |
tree | 82954726ac8d9c400610c5b5ac76904d29f5f69d /src/js/listeners.js | |
parent | 1f1d74ba50f2ac4113948a3b92a0b55f05b735c2 (diff) | |
parent | df458c5e7ae824fc0bf86462130ea9571229c273 (diff) | |
download | plyr-e59fe1aacfcb1366cedcb1a65c4ad22f588f8741.tar.lz plyr-e59fe1aacfcb1366cedcb1a65c4ad22f588f8741.tar.xz plyr-e59fe1aacfcb1366cedcb1a65c4ad22f588f8741.zip |
Merge branch 'develop' into a11y-improvements
# Conflicts:
# dist/plyr.js
# dist/plyr.js.map
# dist/plyr.min.js
# dist/plyr.min.js.map
# dist/plyr.polyfilled.js
# dist/plyr.polyfilled.js.map
# dist/plyr.polyfilled.min.js
# dist/plyr.polyfilled.min.js.map
# src/js/listeners.js
Diffstat (limited to 'src/js/listeners.js')
-rw-r--r-- | src/js/listeners.js | 46 |
1 files changed, 16 insertions, 30 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js index d6786111..05a12147 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -432,9 +432,11 @@ class Listeners { const inputEvent = browser.isIE ? 'change' : 'input'; // Play/pause toggle - Array.from(this.player.elements.buttons.play).forEach(button => { - this.bind(button, 'click', this.player.togglePlay, 'play'); - }); + if (this.player.elements.buttons.play) { + Array.from(this.player.elements.buttons.play).forEach(button => { + this.bind(button, 'click', this.player.togglePlay, 'play'); + }); + } // Pause this.bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart'); @@ -622,36 +624,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(); } }, |