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

Merge pull request #520 from platformpurple/feature/subtitles

Browse Source 
Feature/subtitles
This commit is contained in:
Sam Potts 2017-03-25 18:43:45 +11:00 committed by GitHub
commit 6eaf33ec6c
2 changed files with 90 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

115
src/js/plyr.js
View File

@ -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();