Merge pull request #520 from platformpurple/feature/subtitles
Feature/subtitles
This commit is contained in:
commit
6eaf33ec6c
@ -63,6 +63,9 @@
|
|||||||
hideControls: true,
|
hideControls: true,
|
||||||
showPosterOnEnd: false,
|
showPosterOnEnd: false,
|
||||||
disableContextMenu: true,
|
disableContextMenu: true,
|
||||||
|
quality: {
|
||||||
|
options: false
|
||||||
|
},
|
||||||
keyboardShortcuts: {
|
keyboardShortcuts: {
|
||||||
focused: true,
|
focused: true,
|
||||||
global: false
|
global: false
|
||||||
@ -71,6 +74,7 @@
|
|||||||
controls: false,
|
controls: false,
|
||||||
seek: true
|
seek: true
|
||||||
},
|
},
|
||||||
|
tracks: [],
|
||||||
selectors: {
|
selectors: {
|
||||||
html5: 'video, audio',
|
html5: 'video, audio',
|
||||||
embed: '[data-type]',
|
embed: '[data-type]',
|
||||||
@ -90,6 +94,8 @@
|
|||||||
forward: '[data-plyr="fast-forward"]',
|
forward: '[data-plyr="fast-forward"]',
|
||||||
mute: '[data-plyr="mute"]',
|
mute: '[data-plyr="mute"]',
|
||||||
captions: '[data-plyr="captions"]',
|
captions: '[data-plyr="captions"]',
|
||||||
|
captions_menu: '[data-plyr="captions_menu"]',
|
||||||
|
captions_lang: '[data-plyr="captions_lang"]',
|
||||||
fullscreen: '[data-plyr="fullscreen"]',
|
fullscreen: '[data-plyr="fullscreen"]',
|
||||||
settings: '[data-plyr="settings"]',
|
settings: '[data-plyr="settings"]',
|
||||||
pip: '[data-plyr="pip"]',
|
pip: '[data-plyr="pip"]',
|
||||||
@ -210,6 +216,7 @@
|
|||||||
mute: null,
|
mute: null,
|
||||||
volume: null,
|
volume: null,
|
||||||
captions: null,
|
captions: null,
|
||||||
|
captions_lang: null,
|
||||||
fullscreen: null,
|
fullscreen: null,
|
||||||
speed: null,
|
speed: null,
|
||||||
loop: 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
|
// Build the default HTML
|
||||||
function buildControls() {
|
function buildControls() {
|
||||||
// Create html array
|
// Create html array
|
||||||
@ -989,6 +1009,22 @@
|
|||||||
// Settings button / menu
|
// Settings button / menu
|
||||||
if (inArray(config.controls, 'settings')) {
|
if (inArray(config.controls, 'settings')) {
|
||||||
/* beautify ignore:start */
|
/* 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(
|
html.push(
|
||||||
'<div class="plyr__menu" data-plyr="settings">',
|
'<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">',
|
'<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>',
|
||||||
'<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
'<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
||||||
'<ul>',
|
'<ul>',
|
||||||
'<li role="tab">',
|
captionsMenuItem,
|
||||||
'<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>',
|
|
||||||
'<li role="tab">',
|
'<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">',
|
'<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 +
|
config.i18n.speed +
|
||||||
@ -1012,10 +1043,14 @@
|
|||||||
'</button>',
|
'</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li role="tab">',
|
'<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">',
|
'<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 +
|
config.i18n.quality +
|
||||||
'<span class="plyr__menu__value">{quality}</span>',
|
'<span class="plyr__menu__value">{quality}</span>'
|
||||||
'</button>',
|
'</button>',
|
||||||
|
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li role="tab">',
|
'<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">',
|
'<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,
|
config.i18n.captions,
|
||||||
'</button>',
|
'</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li data-captions="langs">',
|
||||||
'<button type="button" class="plyr__control">English</button>',
|
buildCaptionsMenu(),
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li>',
|
||||||
'<button type="button" class="plyr__control">Off</button>',
|
'<button type="button" class="plyr__control" data-plyr="captions_menu">Off</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'</ul>',
|
'</ul>',
|
||||||
'</div>',
|
'</div>',
|
||||||
@ -1386,7 +1421,7 @@
|
|||||||
if (captionSources.length === 0) {
|
if (captionSources.length === 0) {
|
||||||
plyr.captionExists = false;
|
plyr.captionExists = false;
|
||||||
log('No caption track found');
|
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;
|
plyr.captionExists = false;
|
||||||
log('Caption index out of bound');
|
log('Caption index out of bound');
|
||||||
} else {
|
} else {
|
||||||
@ -1503,6 +1538,7 @@
|
|||||||
function setCaption(caption) {
|
function setCaption(caption) {
|
||||||
var captions = getElement(config.selectors.captions);
|
var captions = getElement(config.selectors.captions);
|
||||||
var content = document.createElement('span');
|
var content = document.createElement('span');
|
||||||
|
if(captions) {
|
||||||
|
|
||||||
// Empty the container
|
// Empty the container
|
||||||
captions.innerHTML = '';
|
captions.innerHTML = '';
|
||||||
@ -1526,6 +1562,8 @@
|
|||||||
var redraw = captions.offsetHeight;
|
var redraw = captions.offsetHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// Captions functions
|
// Captions functions
|
||||||
// Seek the manual caption time and update UI
|
// Seek the manual caption time and update UI
|
||||||
function seekManualCaptions(time) {
|
function seekManualCaptions(time) {
|
||||||
@ -1773,6 +1811,7 @@
|
|||||||
fullscreen: getElement(config.selectors.buttons.fullscreen),
|
fullscreen: getElement(config.selectors.buttons.fullscreen),
|
||||||
settings: getElement(config.selectors.buttons.settings),
|
settings: getElement(config.selectors.buttons.settings),
|
||||||
pip: getElement(config.selectors.buttons.pip),
|
pip: getElement(config.selectors.buttons.pip),
|
||||||
|
lang: getElement(config.selectors.buttons.captions_lang),
|
||||||
speed: getElement(config.selectors.buttons.speed),
|
speed: getElement(config.selectors.buttons.speed),
|
||||||
loop: getElement(config.selectors.buttons.loop)
|
loop: getElement(config.selectors.buttons.loop)
|
||||||
};
|
};
|
||||||
@ -1780,6 +1819,7 @@
|
|||||||
// Inputs
|
// Inputs
|
||||||
plyr.buttons.mute = getElement(config.selectors.buttons.mute);
|
plyr.buttons.mute = getElement(config.selectors.buttons.mute);
|
||||||
plyr.buttons.captions = getElement(config.selectors.buttons.captions);
|
plyr.buttons.captions = getElement(config.selectors.buttons.captions);
|
||||||
|
plyr.buttons.captions_menu = getElement(config.selectors.buttons.captions_menu);
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
plyr.progress = {
|
plyr.progress = {
|
||||||
@ -2929,6 +2969,8 @@
|
|||||||
|
|
||||||
// Set global
|
// Set global
|
||||||
plyr.captionsEnabled = show;
|
plyr.captionsEnabled = show;
|
||||||
|
plyr.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
|
||||||
|
getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
|
||||||
|
|
||||||
// Toggle state
|
// Toggle state
|
||||||
toggleState(plyr.buttons.captions, plyr.captionsEnabled);
|
toggleState(plyr.buttons.captions, plyr.captionsEnabled);
|
||||||
@ -2948,13 +2990,27 @@
|
|||||||
// Select active caption
|
// Select active caption
|
||||||
function setCaptionIndex(index) {
|
function setCaptionIndex(index) {
|
||||||
// Save active caption
|
// Save active caption
|
||||||
config.captions.selectedIndex = index;
|
config.captions.selectedIndex = index || config.captions.selectedIndex;
|
||||||
|
|
||||||
// Clear caption
|
// Clear caption
|
||||||
setCaption();
|
setCaption();
|
||||||
|
|
||||||
// Re-run setup
|
// Re-run setup
|
||||||
setupCaptions();
|
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
|
// Check if media is loading
|
||||||
@ -3752,7 +3808,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Captions
|
// 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
|
// Settings
|
||||||
on(plyr.buttons.settings, 'click', function(event) {
|
on(plyr.buttons.settings, 'click', function(event) {
|
||||||
@ -4180,6 +4242,7 @@
|
|||||||
|
|
||||||
// Captions
|
// Captions
|
||||||
setupCaptions();
|
setupCaptions();
|
||||||
|
setCaptionIndex();
|
||||||
|
|
||||||
// Set volume
|
// Set volume
|
||||||
setVolume();
|
setVolume();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user