Merge branch 'develop' of https://github.com/Selz/plyr into develop
This commit is contained in:
Sam Potts
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
115
src/js/plyr.js
115
src/js/plyr.js
@ -63,6 +63,9 @@
|
||||
hideControls: true,
|
||||
showPosterOnEnd: false,
|
||||
disableContextMenu: true,
|
||||
quality: {
|
||||
options: false
|
||||
},
|
||||
keyboardShortcuts: {
|
||||
focused: true,
|
||||
global: false
|
||||
@ -71,6 +74,7 @@
|
||||
controls: false,
|
||||
seek: true
|
||||
},
|
||||
tracks: [],
|
||||
selectors: {
|
||||
html5: 'video, audio',
|
||||
embed: '[data-type]',
|
||||
@ -90,6 +94,8 @@
|
||||
forward: '[data-plyr="fast-forward"]',
|
||||
mute: '[data-plyr="mute"]',
|
||||
captions: '[data-plyr="captions"]',
|
||||
captions_menu: '[data-plyr="captions_menu"]',
|
||||
captions_lang: '[data-plyr="captions_lang"]',
|
||||
fullscreen: '[data-plyr="fullscreen"]',
|
||||
settings: '[data-plyr="settings"]',
|
||||
pip: '[data-plyr="pip"]',
|
||||
@ -210,6 +216,7 @@
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
captions_lang: null,
|
||||
fullscreen: null,
|
||||
speed: null,
|
||||
loop: null
|
||||
@ -824,6 +831,19 @@
|
||||
};
|
||||
}
|
||||
|
||||
function buildCaptionsMenu() {
|
||||
var trackSubs = '';
|
||||
if (Array.isArray(config.tracks) && config.tracks.length > 0) {
|
||||
for (var i in config.tracks) {
|
||||
var track = config.tracks[i];
|
||||
if (typeof track == 'function') continue;
|
||||
trackSubs += '<button type="button" class="plyr__control" data-plyr="captions_lang" data-lang="'+track.srclang+'" data-index="'+i+'">'+track.label+'</button>';
|
||||
}
|
||||
}
|
||||
|
||||
return trackSubs;
|
||||
}
|
||||
|
||||
// Build the default HTML
|
||||
function buildControls() {
|
||||
// Create html array
|
||||
@ -989,6 +1009,22 @@
|
||||
// Settings button / menu
|
||||
if (inArray(config.controls, 'settings')) {
|
||||
/* beautify ignore:start */
|
||||
var captionsMenuItem = '';
|
||||
if (inArray(config.controls, 'captions')) {
|
||||
captionsMenuItem = '<li role="tab">'+
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">'+
|
||||
config.i18n.captions +
|
||||
'<span class="plyr__menu__value" data-captions="settings">{lang}</span>'+
|
||||
'</button>'+
|
||||
'</li>';
|
||||
}
|
||||
|
||||
if(config.qualityOptions){
|
||||
var showQuality = '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">'+
|
||||
config.i18n.quality +'<span class="plyr__menu__value">Auto</span>'+
|
||||
'</button>';
|
||||
}
|
||||
|
||||
html.push(
|
||||
'<div class="plyr__menu" data-plyr="settings">',
|
||||
'<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
|
||||
@ -999,12 +1035,7 @@
|
||||
'<div>',
|
||||
'<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
||||
'<ul>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
|
||||
config.i18n.captions +
|
||||
'<span class="plyr__menu__value">{lang}</span>',
|
||||
'</button>',
|
||||
'</li>',
|
||||
captionsMenuItem,
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
||||
config.i18n.speed +
|
||||
@ -1012,10 +1043,14 @@
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li role="tab">',
|
||||
|
||||
showQuality,
|
||||
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
|
||||
config.i18n.quality +
|
||||
'<span class="plyr__menu__value">{quality}</span>',
|
||||
'<span class="plyr__menu__value">{quality}</span>'
|
||||
'</button>',
|
||||
|
||||
'</li>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
|
||||
@ -1032,11 +1067,11 @@
|
||||
config.i18n.captions,
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button" class="plyr__control">English</button>',
|
||||
'<li data-captions="langs">',
|
||||
buildCaptionsMenu(),
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button" class="plyr__control">Off</button>',
|
||||
'<button type="button" class="plyr__control" data-plyr="captions_menu">Off</button>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>',
|
||||
@ -1386,7 +1421,7 @@
|
||||
if (captionSources.length === 0) {
|
||||
plyr.captionExists = false;
|
||||
log('No caption track found');
|
||||
} else if ((config.captions.selectedIndex + 1) > captionSources.length) {
|
||||
} else if ((Number(config.captions.selectedIndex) + 1) > captionSources.length) {
|
||||
plyr.captionExists = false;
|
||||
log('Caption index out of bound');
|
||||
} else {
|
||||
@ -1503,27 +1538,30 @@
|
||||
function setCaption(caption) {
|
||||
var captions = getElement(config.selectors.captions);
|
||||
var content = document.createElement('span');
|
||||
if(captions) {
|
||||
|
||||
// Empty the container
|
||||
captions.innerHTML = '';
|
||||
// Empty the container
|
||||
captions.innerHTML = '';
|
||||
|
||||
// Default to empty
|
||||
if (is.undefined(caption)) {
|
||||
// Default to empty
|
||||
if (is.undefined(caption)) {
|
||||
caption = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Set the span content
|
||||
if (is.string(caption)) {
|
||||
// Set the span content
|
||||
if (is.string(caption)) {
|
||||
content.innerHTML = caption.trim();
|
||||
} else {
|
||||
} else {
|
||||
content.appendChild(caption);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
captions.appendChild(content);
|
||||
|
||||
// Force redraw (for Safari)
|
||||
var redraw = captions.offsetHeight;
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
captions.appendChild(content);
|
||||
|
||||
// Force redraw (for Safari)
|
||||
var redraw = captions.offsetHeight;
|
||||
}
|
||||
|
||||
// Captions functions
|
||||
@ -1773,6 +1811,7 @@
|
||||
fullscreen: getElement(config.selectors.buttons.fullscreen),
|
||||
settings: getElement(config.selectors.buttons.settings),
|
||||
pip: getElement(config.selectors.buttons.pip),
|
||||
lang: getElement(config.selectors.buttons.captions_lang),
|
||||
speed: getElement(config.selectors.buttons.speed),
|
||||
loop: getElement(config.selectors.buttons.loop)
|
||||
};
|
||||
@ -1780,6 +1819,7 @@
|
||||
// Inputs
|
||||
plyr.buttons.mute = getElement(config.selectors.buttons.mute);
|
||||
plyr.buttons.captions = getElement(config.selectors.buttons.captions);
|
||||
plyr.buttons.captions_menu = getElement(config.selectors.buttons.captions_menu);
|
||||
|
||||
// Progress
|
||||
plyr.progress = {
|
||||
@ -2929,6 +2969,8 @@
|
||||
|
||||
// Set global
|
||||
plyr.captionsEnabled = show;
|
||||
plyr.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
|
||||
getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
|
||||
|
||||
// Toggle state
|
||||
toggleState(plyr.buttons.captions, plyr.captionsEnabled);
|
||||
@ -2948,13 +2990,27 @@
|
||||
// Select active caption
|
||||
function setCaptionIndex(index) {
|
||||
// Save active caption
|
||||
config.captions.selectedIndex = index;
|
||||
config.captions.selectedIndex = index || config.captions.selectedIndex;
|
||||
|
||||
// Clear caption
|
||||
setCaption();
|
||||
|
||||
// Re-run setup
|
||||
setupCaptions();
|
||||
|
||||
getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
|
||||
}
|
||||
|
||||
function getSubsLangValue() {
|
||||
if (config.tracks.length === 0) {
|
||||
return 'No Subs';
|
||||
}
|
||||
|
||||
if (plyr.captionsEnabled || !is.boolean(plyr.captionsEnabled) && plyr.storage.captionsEnabled) {
|
||||
return config.tracks[config.captions.selectedIndex].label;
|
||||
} else {
|
||||
return 'Disabled';
|
||||
}
|
||||
}
|
||||
|
||||
// Check if media is loading
|
||||
@ -3752,7 +3808,13 @@
|
||||
}
|
||||
|
||||
// Captions
|
||||
proxy(plyr.buttons.captions, 'click', config.listeners.captions, toggleCaptions);
|
||||
proxy(plyr.buttons.captions, 'click', config.listeners.captions toggleCaptions);
|
||||
// ?? on(plyr.buttons.captions_menu, 'click', toggleCaptions);
|
||||
// Language
|
||||
proxy(plyr.buttons.lang, 'click', config.listeners.lang, function(e) {
|
||||
var langIndex = e.target.attributes.getNamedItem("data-index").value;
|
||||
setCaptionIndex(langIndex);
|
||||
});
|
||||
|
||||
// Settings
|
||||
on(plyr.buttons.settings, 'click', function(event) {
|
||||
@ -4180,6 +4242,7 @@
|
||||
|
||||
// Captions
|
||||
setupCaptions();
|
||||
setCaptionIndex();
|
||||
|
||||
// Set volume
|
||||
setVolume();
|
||||
|
||||
Reference in New Issue
Block a user