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

More work on menus

Browse Source
This commit is contained in:
Sam Potts 2017-04-16 20:38:45 +10:00
parent ff2d27f8e5
commit 452678867f
2 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

98
src/js/plyr.js
View File

@ -122,6 +122,7 @@
ready: 'plyr--ready', ready: 'plyr--ready',
videoWrapper: 'plyr__video-wrapper', videoWrapper: 'plyr__video-wrapper',
embedWrapper: 'plyr__video-embed', embedWrapper: 'plyr__video-embed',
control: 'plyr__control',
type: 'plyr--{0}', type: 'plyr--{0}',
stopped: 'plyr--stopped', stopped: 'plyr--stopped',
playing: 'plyr--playing', playing: 'plyr--playing',
@ -133,6 +134,10 @@
hideControls: 'plyr--hide-controls', hideControls: 'plyr--hide-controls',
isIos: 'plyr--is-ios', isIos: 'plyr--is-ios',
isTouch: 'plyr--is-touch', isTouch: 'plyr--is-touch',
menu: {
value: 'plyr__menu__value',
badge: 'plyr__badge'
},
captions: { captions: {
enabled: 'plyr--captions-enabled', enabled: 'plyr--captions-enabled',
active: 'plyr--captions-active' active: 'plyr--captions-active'
@ -1076,6 +1081,19 @@
}, text); }, text);
} }
// Create a badge
function createBadge(text) {
var badge = createElement('span', {
class: config.classes.menu.value
});
badge.appendChild(createElement('span', {
class: config.classes.menu.badge
}, text));
return badge;
}
// Create a <button> // Create a <button>
function createButton(type, attributes) { function createButton(type, attributes) {
var button = createElement('button'); var button = createElement('button');
@ -1088,11 +1106,11 @@
} }
if ('class' in attributes) { if ('class' in attributes) {
if (attributes.class.indexOf('plyr__control') === -1) { if (attributes.class.indexOf(config.classes.control) === -1) {
attributes.class += ' plyr__control'; attributes.class += ' ' + config.classes.control;
} }
} else { } else {
attributes.class = 'plyr__control'; attributes.class = config.classes.control;
} }
// Large play button // Large play button
@ -1376,7 +1394,7 @@
var button = createElement('button', extend(getAttributesFromSelector(config.selectors.buttons.settings), { var button = createElement('button', extend(getAttributesFromSelector(config.selectors.buttons.settings), {
type: 'button', type: 'button',
class: 'plyr__control plyr__control--forward', class: config.classes.control + ' ' + config.classes.control + '--forward',
id: 'plyr-settings-' + data.id + '-' + type + '-tab', id: 'plyr-settings-' + data.id + '-' + type + '-tab',
'aria-haspopup': true, 'aria-haspopup': true,
'aria-controls': 'plyr-settings-' + data.id + '-' + type, 'aria-controls': 'plyr-settings-' + data.id + '-' + type,
@ -1384,7 +1402,7 @@
}), config.i18n[type]); }), config.i18n[type]);
var value = createElement('span', { var value = createElement('span', {
class: 'plyr__menu__value' class: config.classes.menu.value
}); });
// Speed contains HTML entities // Speed contains HTML entities
@ -1412,23 +1430,19 @@
tabindex: -1 tabindex: -1
}); });
var options = createElement('ul');
var option = createElement('li');
var back = createElement('button', { var back = createElement('button', {
type: 'button', type: 'button',
class: 'plyr__control plyr__control--back', class: config.classes.control + ' ' + config.classes.control + '--back',
'aria-haspopup': true, 'aria-haspopup': true,
'aria-controls': 'plyr-settings-' + data.id + '-home', 'aria-controls': 'plyr-settings-' + data.id + '-home',
'aria-expanded': false 'aria-expanded': false
}, config.i18n.back); }, config.i18n[type]);
option.appendChild(back); pane.appendChild(back);
options.appendChild(option); var options = createElement('ul');
switch (type) { /*switch (type) {
case 'captions': case 'captions':
if (is.array(config.tracks)) { if (is.array(config.tracks)) {
config.tracks.forEach(function(track, index) { config.tracks.forEach(function(track, index) {
@ -1449,7 +1463,7 @@
}); });
} }
break; break;
} }*/
pane.appendChild(options); pane.appendChild(options);
@ -1697,14 +1711,10 @@
} }
if (!label.length) { if (!label.length) {
return ""; return null;
} }
return [ return createBadge(label);
'<span class="plyr__menu__value">',
'<span class="plyr__badge">' + label + '</span>',
'</span>'
].join('');
} }
// Translate the quality key into a nice label // Translate the quality key into a nice label
@ -1735,27 +1745,37 @@
return ['tiny', 'small'].indexOf(quality) === -1; return ['tiny', 'small'].indexOf(quality) === -1;
}); });
var list = filtered.map(function(quality) { var list = player.elements.settings.panes.quality.querySelector('ul');
return [
'<li>', filtered.forEach(function(quality) {
'<label class="plyr__control">', var item = createElement('li');
'<input type="radio" name="quality" value="' + quality + '"' + (quality === player.quality.current ? ' checked' : '') + '>',
getLabel(quality), var label = createElement('label', {
getBadge(quality), class: config.classes.control
'</label>',
'</li>'
].join('');
}); });
list.unshift([ var radio = createElement('input', {
'<li role="tab">', type: 'radio',
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-' + player.id + '-primary" aria-expanded="false">', name: 'quality',
config.i18n.quality, value: quality,
'</button>', });
'</li>'
].join(''));
player.elements.settings.panes.quality.innerHTML = list.join(''); if (quality === player.quality.current) {
radio.setAttribute('checked', '');
}
label.appendChild(radio);
label.appendChild(document.createTextNode(getLabel(quality)));
var badge = getBadge(quality);
if (is.htmlElement(badge)) {
label.appendChild(badge);
}
item.appendChild(label);
list.appendChild(item);
});
} }
} }