Merge branch 'develop' into a11y-improvements
# Conflicts: # demo/dist/demo.css # dist/plyr.css # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map # src/js/captions.js
This commit is contained in:
69
src/js/controls.js
vendored
69
src/js/controls.js
vendored
@ -373,7 +373,7 @@ const controls = {
|
||||
},
|
||||
|
||||
// Create a settings menu item
|
||||
createMenuItem(value, list, type, title, badge = null, checked = false) {
|
||||
createMenuItem({value, list, type, title, badge = null, checked = false}) {
|
||||
const item = utils.createElement('li');
|
||||
|
||||
const label = utils.createElement('label', {
|
||||
@ -704,8 +704,13 @@ const controls = {
|
||||
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
|
||||
})
|
||||
.forEach(quality => {
|
||||
const label = controls.getLabel.call(this, 'quality', quality);
|
||||
controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality));
|
||||
controls.createMenuItem.call(this, {
|
||||
value: quality,
|
||||
list,
|
||||
type,
|
||||
title: controls.getLabel.call(this, 'quality', quality),
|
||||
badge: getBadge(quality),
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -746,16 +751,7 @@ const controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
if (this.captions.active) {
|
||||
if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) {
|
||||
value = this.captions.language;
|
||||
} else {
|
||||
value = 'enabled';
|
||||
}
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
|
||||
value = this.currentTrack;
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -855,10 +851,10 @@ const controls = {
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
const type = 'captions';
|
||||
const list = this.elements.settings.panes.captions.querySelector('ul');
|
||||
const tracks = captions.getTracks.call(this);
|
||||
|
||||
// Toggle the pane and tab
|
||||
const toggle = captions.getTracks.call(this).length;
|
||||
controls.toggleTab.call(this, type, toggle);
|
||||
controls.toggleTab.call(this, type, tracks.length);
|
||||
|
||||
// Empty the menu
|
||||
utils.emptyElement(list);
|
||||
@ -867,34 +863,31 @@ const controls = {
|
||||
controls.checkMenu.call(this);
|
||||
|
||||
// If there's no captions, bail
|
||||
if (!toggle) {
|
||||
if (!tracks.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Re-map the tracks into just the data we need
|
||||
const tracks = captions.getTracks.call(this).map(track => ({
|
||||
language: !utils.is.empty(track.language) ? track.language : 'enabled',
|
||||
label: captions.getLabel.call(this, track),
|
||||
// Generate options data
|
||||
const options = tracks.map((track, value) => ({
|
||||
value,
|
||||
checked: this.captions.active && this.currentTrack === value,
|
||||
title: captions.getLabel.call(this, track),
|
||||
badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
|
||||
list,
|
||||
type: 'language',
|
||||
}));
|
||||
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: i18n.get('disabled', this.config),
|
||||
options.unshift({
|
||||
value: -1,
|
||||
checked: !this.captions.active,
|
||||
title: i18n.get('disabled', this.config),
|
||||
list,
|
||||
type: 'language',
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(track => {
|
||||
controls.createMenuItem.call(
|
||||
this,
|
||||
track.language,
|
||||
list,
|
||||
'language',
|
||||
track.label,
|
||||
track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null,
|
||||
track.language.toLowerCase() === this.language,
|
||||
);
|
||||
});
|
||||
options.forEach(controls.createMenuItem.bind(this));
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
},
|
||||
@ -951,8 +944,12 @@ const controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(speed => {
|
||||
const label = controls.getLabel.call(this, 'speed', speed);
|
||||
controls.createMenuItem.call(this, speed, list, type, label);
|
||||
controls.createMenuItem.call(this, {
|
||||
value: speed,
|
||||
list,
|
||||
type,
|
||||
title: controls.getLabel.call(this, 'speed', speed),
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
|
Reference in New Issue
Block a user