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

Work on playback rate changes

Browse Source
This commit is contained in:
Sam Potts
2017-07-31 09:58:30 +10:00
parent 7b60e473fa
commit a9957211f4
3 changed files with 120 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/js/plyr.js
View File

@ -1270,6 +1270,31 @@
}));
}
// Trap focus inside container
function focusTrap() {
var tabbables = getElements('input:not([disabled]), button:not([disabled])');
var first = tabbables[0];
var last = tabbables[tabbables.length - 1];
function checkFocus(event) {
// If it is tab
if (event.which === 9 && player.fullscreen.active) {
if (event.target === last && !event.shiftKey) {
// Move focus to first element that can be tabbed if Shift isn't used
event.preventDefault();
first.focus();
} else if (event.target === first && event.shiftKey) {
// Move focus to last element that can be tabbed if Shift is used
event.preventDefault();
last.focus();
}
}
}
// Bind the handler
utils.on(player.elements.container, 'keydown', checkFocus, false);
}
// Find all elements
function getElements(selector) {
return player.elements.container.querySelectorAll(selector);
@ -1280,6 +1305,7 @@
return getElements(selector)[0];
}
// Remove an element
function removeElement(element) {
// Remove reference from player.elements cache
if (utils.is.string(element)) {
@ -1303,31 +1329,6 @@
}
}
// Trap focus inside container
function focusTrap() {
var tabbables = getElements('input:not([disabled]), button:not([disabled])');
var first = tabbables[0];
var last = tabbables[tabbables.length - 1];
function checkFocus(event) {
// If it is TAB
if (event.which === 9 && player.fullscreen.active) {
if (event.target === last && !event.shiftKey) {
// Move focus to first element that can be tabbed if Shift isn't used
event.preventDefault();
first.focus();
} else if (event.target === first && event.shiftKey) {
// Move focus to last element that can be tabbed if Shift is used
event.preventDefault();
last.focus();
}
}
}
// Bind the handler
utils.on(player.elements.container, 'keydown', checkFocus, false);
}
// Get icon URL
function getIconUrl() {
return {
@ -1972,7 +1973,7 @@
}
// Set a list of available captions languages
function setSpeedMenu(options) {
function setSpeedMenu() {
var list = player.elements.settings.panes.speed.querySelector('ul');
// Show the pane and tab
@ -1982,12 +1983,8 @@
// Empty the menu
utils.emptyElement(list);
// If there's no captions, bail
if (!utils.is.array(options)) {
options = player.config.speed.options;
}
options.forEach(function(speed) {
// Create items
player.config.speed.options.forEach(function(speed) {
var item = utils.createElement('li');
var label = utils.createElement('label', {
@ -2000,15 +1997,42 @@
value: speed,
}));
if (speed === player.config.speed.selected) {
radio.checked = true;
}
label.appendChild(radio);
label.insertAdjacentHTML('beforeend', getSpeedLabel(speed));
item.appendChild(label);
list.appendChild(item);
});
setSelectedSpeed(list);
}
// Update the UI
function setSelectedSpeed(list) {
var speed = player.config.speed.selected;
// Unsupported speed
if (!utils.inArray(player.config.speed.options, speed)) {
return;
}
// Get the list if we need to
if (!utils.is.htmlElement(list)) {
list = player.elements.settings.panes.speed.querySelector('ul');
}
// Find the radio option
var target = list.querySelector('[value="' + speed + '"]');
if (!utils.is.htmlElement(target)) {
return;
}
// Check it
target.checked = true;
// Find the label
var label = player.elements.settings.tabs.speed.querySelector('.' + player.config.classes.menu.value);
label.innerHTML = getSpeedLabel(speed);
}
// Setup fullscreen
@ -2622,7 +2646,17 @@
var quality = instance.getPlaybackQuality();
// var set = player.setPlaybackQuality();
console.warn(quality);
console.warn('quality change', quality);
},
'onPlaybackRateChange': function(event) {
// Get the instance
var instance = event.target;
// Get current speed
player.media.playbackRate = instance.getPlaybackRate();
// Trigger timeupdate
trigger(player.media, 'ratechange');
},
'onReady': function(event) {
// Get the instance
@ -2647,10 +2681,9 @@
player.media.muted = instance.isMuted();
// Get available speeds
var speed = instance.getPlaybackRate();
var speedOptions = instance.getAvailablePlaybackRates();
//var set = instance.setPlaybackRate();
console.warn(speed, speedOptions);
player.config.speed.selected = instance.getPlaybackRate();
player.config.speed.options = instance.getAvailablePlaybackRates();
setSpeedMenu();
// Set title
player.config.title = instance.getVideoData().title;
@ -3834,7 +3867,7 @@
// Settings - Language
if (utils.matches(event.target, player.config.selectors.inputs.language)) {
handlerProxy.call(this, event, player.config.listeners.language, function() {
player.language(event.target.value.toLowerCase());
player.setLanguage(event.target.value.toLowerCase());
});
}
@ -4024,6 +4057,20 @@
}, false);
}
// Speed change
utils.on(player.media, 'ratechange', function(event) {
// Store current speed
player.config.speed.selected = player.media.playbackRate;
// Update UI
setSelectedSpeed();
// Save speed to localStorage
updateStorage({
speed: player.config.speed.selected
});
});
// Proxy events to container
// Bubble up key events for Edge
utils.on(player.media, player.config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
@ -4562,7 +4609,6 @@
// Embeds
if (utils.inArray(types.embed, player.type)) {
// YouTube
switch (player.type) {
case 'youtube':
player.embed[player.media.muted ? 'mute' : 'unMute']();
@ -4599,22 +4645,26 @@
speed = 2.0;
}
if (!utils.is.array(player.config.speed.options)) {
player.core.warn('Invalid speeds format');
if (!utils.inArray(player.config.speed.options, speed)) {
player.core.warn('Unsupported speed (' + speed + ')');
return;
}
// Store current speed
player.config.speed.selected = speed;
// Set media speed
switch (player.type) {
case 'youtube':
player.embed.setPlaybackRate(speed);
break;
// Set HTML5 speed
// TODO: set YouTube
player.media.playbackRate = speed;
case 'vimeo':
// Vimeo not supported (https://github.com/vimeo/player.js)
player.core.warn('Vimeo playback rate change is not supported');
break;
// Save speed to localStorage
player.core.updateStorage({
speed: speed
});
default:
player.media.playbackRate = speed;
break;
}
// Allow chaining
return player;
@ -4794,18 +4844,19 @@
return player;
};
// Select active caption
Plyr.prototype.language = function(language) {
// Set caption language
Plyr.prototype.setLanguage = function(language) {
var player = this;
if (utils.is.string(language)) {
// Update config
player.config.captions.language = language.toLowerCase();
} else {
// If no language passed, return current language
return player.config.captions.language;
// Nothing specified
if (!utils.is.string(language)) {
player.core.warn('Language is required');
return;
}
// Update config
player.config.captions.language = language.toLowerCase();
// Clear caption
player.core.setCaption();
@ -4816,6 +4867,11 @@
return player;
};
// Get current language
Plyr.prototype.getLanguage = function() {
return this.config.captions.language;
};
// Toggle fullscreen
// Requires user input event
Plyr.prototype.toggleFullscreen = function(event) {