aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2017-03-25 18:44:17 +1100
committerSam Potts <me@sampotts.me>2017-03-25 18:44:17 +1100
commitca12343b164d3cb8d80dc5a4347f81d70c14095a (patch)
treee252e8deae0fdf9420b6488f321871c36e161df8 /src
parenta974fbf31ca4886e7c89cfced744d31a4b1a092d (diff)
parent6eaf33ec6c0b85d5e26445cc46ca5d5ddf9015b8 (diff)
downloadplyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.tar.lz
plyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.tar.xz
plyr-ca12343b164d3cb8d80dc5a4347f81d70c14095a.zip
Merge branch 'develop' of https://github.com/Selz/plyr into develop
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js115
1 files changed, 89 insertions, 26 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index d797f66d..21edc662 100644
--- a/src/js/plyr.js
+++ b/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);
+ // Set new caption text
+ captions.appendChild(content);
+
+ // Force redraw (for Safari)
+ var redraw = captions.offsetHeight;
+ }
- // 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();