YouTube speed menu fix

This commit is contained in:
Sam Potts
2018-04-03 22:30:29 +10:00
parent b1e3abc795
commit 91d192dd7c
18 changed files with 1960 additions and 900 deletions

30
src/js/controls.js vendored
View File

@ -474,13 +474,7 @@ const controls = {
break;
case 1440:
label = 'WQHD';
break;
case 1080:
label = 'HD';
break;
case 720:
label = 'HD';
break;
@ -656,14 +650,14 @@ const controls = {
const list = this.elements.settings.panes.captions.querySelector('ul');
// Toggle the pane and tab
const hasTracks = captions.getTracks.call(this).length;
controls.toggleTab.call(this, type, hasTracks);
const toggle = captions.getTracks.call(this).length;
controls.toggleTab.call(this, type, toggle);
// Empty the menu
utils.emptyElement(list);
// If there's no captions, bail
if (!hasTracks) {
if (!toggle) {
return;
}
@ -710,7 +704,9 @@ const controls = {
const type = 'speed';
// Set the speed options
if (!utils.is.array(options)) {
if (utils.is.array(options)) {
this.options.speed = options;
} else if (this.isHTML5 || this.isVimeo) {
this.options.speed = [
0.5,
0.75,
@ -720,15 +716,13 @@ const controls = {
1.75,
2,
];
} else {
this.options.speed = options;
}
// Set options if passed and filter based on config
this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed));
// Toggle the pane and tab
const toggle = !utils.is.empty(this.options.speed);
const toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1;
controls.toggleTab.call(this, type, toggle);
// Check if we need to toggle the parent
@ -750,7 +744,10 @@ const controls = {
utils.emptyElement(list);
// Create items
this.options.speed.forEach(speed => controls.createMenuItem.call(this, speed, list, type, controls.getLabel.call(this, 'speed', speed)));
this.options.speed.forEach(speed => {
const label = controls.getLabel.call(this, 'speed', speed);
controls.createMenuItem.call(this, speed, list, type, label);
});
controls.updateSetting.call(this, type, list);
},
@ -1033,6 +1030,7 @@ const controls = {
if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
const menu = utils.createElement('div', {
class: 'plyr__menu',
hidden: '',
});
menu.appendChild(
@ -1167,12 +1165,12 @@ const controls = {
this.elements.controls = container;
controls.setSpeedMenu.call(this);
if (this.isHTML5) {
controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
}
controls.setSpeedMenu.call(this);
return container;
},

View File

@ -63,7 +63,7 @@ const defaults = {
// Quality default
quality: {
default: 720,
default: 576,
options: [
4320,
2880,

View File

@ -68,13 +68,15 @@ class Fullscreen {
});
// Fullscreen toggle on double click
utils.on(this.player.elements.container, 'dblclick', () => {
utils.on(this.player.elements.container, 'dblclick', event => {
// Ignore double click in controls
if (this.player.elements.controls.contains(event.target)) {
return;
}
this.toggle();
});
// Prevent double click on controls bubbling up
utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
// Update the UI
this.update();
}

View File

@ -351,8 +351,7 @@ const youtube = {
});
// Get available speeds
const options = instance.getAvailablePlaybackRates();
controls.setSpeedMenu.call(player, options);
player.options.speed = instance.getAvailablePlaybackRates();
// Set the tabindex to avoid focus entering iframe
if (player.supported.ui) {

View File

@ -692,11 +692,16 @@ class Plyr {
quality = this.config.quality.default;
}
if (!this.options.quality.includes(quality)) {
this.debug.warn(`Unsupported quality option (${quality})`);
if (!this.options.quality.length) {
return;
}
if (!this.options.quality.includes(quality)) {
const closest = utils.closest(this.options.quality, quality);
this.debug.warn(`Unsupported quality option: ${quality}, using ${closest} instead`);
quality = closest;
}
// Update config
this.config.quality.selected = quality;

View File

@ -746,6 +746,15 @@ const utils = {
return array.filter((item, index) => array.indexOf(item) === index);
},
// Get the closest value in an array
closest(array, value) {
if (!utils.is.array(array) || !array.length) {
return null;
}
return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
},
// Get the provider for a given URL
getProviderByUrl(url) {
// YouTube