ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #227 from igoradamenko/scroll-on-volume-slider

Browse Source 
Add scroll listener on volume slider
This commit is contained in:
Sam Potts 2016-05-19 10:43:22 +10:00
commit e0ef7482c6
1 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/js/plyr.js
View File

@ -36,6 +36,9 @@
loop: false, loop: false,
seekTime: 10, seekTime: 10,
volume: 5, volume: 5,
volumeMin: 0,
volumeMax: 10,
volumeStep: 1,
duration: null, duration: null,
displayDuration: true, displayDuration: true,
iconPrefix: 'icon', iconPrefix: 'icon',
@ -773,8 +776,8 @@
html.push( html.push(
'<span class="plyr__volume">', '<span class="plyr__volume">',
'<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', '<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">', '<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="10" value="0" role="presentation"></progress>', '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
'</span>' '</span>'
); );
} }
@ -2020,11 +2023,11 @@
break; break;
case 'vimeo': 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; break;
case 'soundcloud': 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; break;
} }
@ -2035,6 +2038,9 @@
// Set volume // Set volume
function _setVolume(volume) { function _setVolume(volume) {
var max = config.volumeMax,
min = config.volumeMin;
// Use default if no value specified // Use default if no value specified
if (typeof volume === 'undefined') { if (typeof volume === 'undefined') {
volume = config.volume; volume = config.volume;
@ -2053,17 +2059,17 @@
volume = config.volume; volume = config.volume;
} }
// Maximum is 10 // Maximum is volumeMax
if (volume > 10) { if (volume > max) {
volume = 10; volume = max;
} }
// Minimum is 0 // Minimum is volumeMin
if (volume < 0) { if (volume < min) {
volume = 0; volume = min;
} }
// Set the player volume // Set the player volume
plyr.media.volume = parseFloat(volume / 10); plyr.media.volume = parseFloat(volume / max);
// Set the display // Set the display
if (plyr.volume.display) { if (plyr.volume.display) {
@ -2097,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 // Update volume UI and storage
function _updateVolume() { function _updateVolume() {
// Get the current volume // 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 // Update the <input type="range"> if present
if (plyr.supported.full) { if (plyr.supported.full) {
@ -2675,6 +2695,7 @@
} }
} }
} }
_on(window, 'keyup', function(event) { _on(window, 'keyup', function(event) {
var code = (event.keyCode ? event.keyCode : event.which); var code = (event.keyCode ? event.keyCode : event.which);
@ -2746,6 +2767,18 @@
// Focus in/out on controls // Focus in/out on controls
_on(plyr.controls, 'focus blur', _toggleControls, true); _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 // Listen for media events