diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 65 |
1 files changed, 51 insertions, 14 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index e6980b6b..825f13da 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -36,6 +36,9 @@ loop: false, seekTime: 10, volume: 5, + volumeMin: 0, + volumeMax: 10, + volumeStep: 1, duration: null, displayDuration: true, iconPrefix: 'plyr', @@ -194,7 +197,7 @@ else if ((verOffset=nAgt.indexOf('Safari')) !== -1) { name = 'Safari'; fullVersion = nAgt.substring(verOffset + 7); - if ((verOffset=nAgt.indexOf('Version')) !== -1) { + if ((verOffset = nAgt.indexOf('Version')) !== -1) { fullVersion = nAgt.substring(verOffset + 8); } } @@ -773,8 +776,8 @@ html.push( '<span class="plyr__volume">', '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', - '<input id="volume{id}" class="plyr__volume--input" type="range" min="0" max="10" value="5" data-plyr="volume">', - '<progress class="plyr__volume--display" max="10" value="0" role="presentation"></progress>', + '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">', + '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>', '</span>' ); } @@ -1390,7 +1393,7 @@ window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; // Add to queue - window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container) }); + window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); }); // Set callback to process queue window.onYouTubeIframeAPIReady = function () { @@ -1610,6 +1613,10 @@ _triggerEvent(plyr.media, 'pause'); break; } + + _triggerEvent(plyr.container, 'statechange', false, { + code: event.data + }); } } }); @@ -2016,11 +2023,11 @@ break; case 'vimeo': - plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10)); + plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); break; case 'soundcloud': - plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / 10)); + plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); break; } @@ -2031,6 +2038,9 @@ // Set volume function _setVolume(volume) { + var max = config.volumeMax, + min = config.volumeMin; + // Use default if no value specified if (typeof volume === 'undefined') { volume = config.volume; @@ -2049,17 +2059,17 @@ volume = config.volume; } - // Maximum is 10 - if (volume > 10) { - volume = 10; + // Maximum is volumeMax + if (volume > max) { + volume = max; } - // Minimum is 0 - if (volume < 0) { - volume = 0; + // Minimum is volumeMin + if (volume < min) { + volume = min; } // Set the player volume - plyr.media.volume = parseFloat(volume / 10); + plyr.media.volume = parseFloat(volume / max); // Set the display if (plyr.volume.display) { @@ -2093,10 +2103,24 @@ } } + // Increase volume + function _increaseVolume() { + var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + + _setVolume(volume + config.volumeStep); + } + + // Decrease volume + function _decreaseVolume() { + var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + + _setVolume(volume - config.volumeStep); + } + // Update volume UI and storage function _updateVolume() { // Get the current volume - var volume = plyr.media.muted ? 0 : (plyr.media.volume * 10); + var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); // Update the <input type="range"> if present if (plyr.supported.full) { @@ -2684,6 +2708,7 @@ } } } + _on(window, 'keyup', function(event) { var code = (event.keyCode ? event.keyCode : event.which); @@ -2755,6 +2780,18 @@ // Focus in/out on controls _on(plyr.controls, 'focus blur', _toggleControls, true); } + + _on(plyr.volume.input, 'wheel', function(event) { + event.preventDefault(); + + if (event.deltaY < 0 || event.deltaX > 0) { + _increaseVolume(); + } + + if (event.deltaY > 0 || event.deltaX < 0) { + _decreaseVolume(); + } + }); } // Listen for media events |