aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.js')
-rw-r--r--dist/plyr.js133
1 files changed, 70 insertions, 63 deletions
diff --git a/dist/plyr.js b/dist/plyr.js
index 804d7dd5..66ea1d3f 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -1624,7 +1624,7 @@ typeof navigator === "object" && (function (global, factory) {
var attributes = getAttributesFromSelector(this.config.selectors.display[type]);
var container = createElement('div', extend(attributes, {
- class: 'plyr__time ' + attributes.class,
+ class: (this.config.classNames.display.time + ' ' + (attributes.class ? attributes.class : '')).trim(),
'aria-label': i18n.get(type, this.config)
}), '00:00');
@@ -1646,16 +1646,42 @@ typeof navigator === "object" && (function (global, factory) {
_ref$checked = _ref.checked,
checked = _ref$checked === undefined ? false : _ref$checked;
- var item = createElement('button', extend(getAttributesFromSelector(this.config.selectors.inputs[type]), {
+ var attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);
+
+ var item = createElement('button', extend(attributes, {
type: 'button',
+ role: 'menuitemradio',
+ class: (this.config.classNames.control + ' ' + (attributes.class ? attributes.class : '')).trim(),
value: value,
'aria-checked': checked
- }), title);
+ }));
+
+ // We have to set as HTML incase of special characters
+ item.innerHTML = title;
if (is.element(badge)) {
item.appendChild(badge);
}
+ Object.defineProperty(item, 'checked', {
+ enumerable: true,
+ get: function get$$1() {
+ return item.getAttribute('aria-checked') === 'true';
+ },
+ set: function set$$1(checked) {
+ // Ensure exclusivity
+ if (checked) {
+ Array.from(item.parentNode.children).filter(function (node) {
+ return matches(node, '[role="menuitemradio"]');
+ }).forEach(function (node) {
+ return node.setAttribute('aria-checked', 'false');
+ });
+ }
+
+ item.setAttribute('aria-checked', checked ? 'true' : 'false');
+ }
+ });
+
list.appendChild(item);
},
@@ -1930,12 +1956,12 @@ typeof navigator === "object" && (function (global, factory) {
var _this3 = this;
// Menu required
- if (!is.element(this.elements.settings.menus.quality)) {
+ if (!is.element(this.elements.settings.panels.quality)) {
return;
}
var type = 'quality';
- var list = this.elements.settings.menus.quality.querySelector('[role="menu"]');
+ var list = this.elements.settings.panels.quality.querySelector('[role="menu"]');
// Set options if passed and filter based on uniqueness and config
if (is.array(options)) {
@@ -2018,7 +2044,7 @@ typeof navigator === "object" && (function (global, factory) {
// Update the selected setting
updateSetting: function updateSetting(setting, container, input) {
- var pane = this.elements.settings.menus[setting];
+ var pane = this.elements.settings.panels[setting];
var value = null;
var list = container;
@@ -2060,10 +2086,10 @@ typeof navigator === "object" && (function (global, factory) {
label.innerHTML = controls.getLabel.call(this, setting, value);
// Find the radio option and check it
- var target = list && list.querySelector('button[value="' + value + '"]');
+ var target = list && list.querySelector('[value="' + value + '"]');
if (is.element(target)) {
- target.setAttribute('aria-checked', true);
+ target.checked = true;
}
},
@@ -2071,14 +2097,14 @@ typeof navigator === "object" && (function (global, factory) {
// Set the looping options
/* setLoopMenu() {
// Menu required
- if (!is.element(this.elements.settings.menus.loop)) {
+ if (!is.element(this.elements.settings.panels.loop)) {
return;
}
const options = ['start', 'end', 'all', 'reset'];
- const list = this.elements.settings.menus.loop.querySelector('[role="menu"]');
+ const list = this.elements.settings.panels.loop.querySelector('[role="menu"]');
// Show the pane and tab
toggleHidden(this.elements.settings.buttons.loop, false);
- toggleHidden(this.elements.settings.menus.loop, false);
+ toggleHidden(this.elements.settings.panels.loop, false);
// Toggle the pane and tab
const toggle = !is.empty(this.loop.options);
controls.toggleMenuButton.call(this, 'loop', toggle);
@@ -2113,7 +2139,7 @@ typeof navigator === "object" && (function (global, factory) {
// TODO: Captions or language? Currently it's mixed
var type = 'captions';
- var list = this.elements.settings.menus.captions.querySelector('[role="menu"]');
+ var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
var tracks = captions.getTracks.call(this);
// Toggle the pane and tab
@@ -2168,7 +2194,7 @@ typeof navigator === "object" && (function (global, factory) {
}
// Menu required
- if (!is.element(this.elements.settings.menus.speed)) {
+ if (!is.element(this.elements.settings.panels.speed)) {
return;
}
@@ -2199,7 +2225,7 @@ typeof navigator === "object" && (function (global, factory) {
}
// Get the list to populate
- var list = this.elements.settings.menus.speed.querySelector('[role="menu"]');
+ var list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
// Empty the menu
emptyElement(list);
@@ -2278,19 +2304,13 @@ typeof navigator === "object" && (function (global, factory) {
},
- // Get the natural size of a tab
- getTabSize: function getTabSize(tab) {
+ // Get the natural size of a menu panel
+ getMenuSize: function getMenuSize(tab) {
var clone = tab.cloneNode(true);
clone.style.position = 'absolute';
clone.style.opacity = 0;
clone.removeAttribute('hidden');
- // Prevent input's being unchecked due to the name being identical
- /* Array.from(clone.querySelectorAll('input[name]')).forEach(input => {
- const name = input.getAttribute('name');
- input.setAttribute('name', `${name}-clone`);
- }); */
-
// Append to parent so we get the "real" size
tab.parentNode.appendChild(clone);
@@ -2308,38 +2328,24 @@ typeof navigator === "object" && (function (global, factory) {
},
- // Toggle Menu
- showMenu: function showMenu() {
+ // Show a panel in the menu
+ showMenuPanel: function showMenuPanel() {
var _this6 = this;
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- var menu = this.elements.settings.menu;
-
- var pane = document.getElementById('plyr-settings-' + this.id + '-' + type);
- console.warn('plyr-settings-' + this.id + '-' + type);
+ var target = document.getElementById('plyr-settings-' + this.id + '-' + type);
// Nothing to show, bail
- if (!is.element(pane)) {
- console.warn('No pane found');
+ if (!is.element(target)) {
return;
}
- // Are we targeting a tab? If not, bail
- /* const isTab = pane.getAttribute('role') === 'tabpanel';
- if (!isTab) {
- return;
- } */
-
- // Hide all other tabs
- // Get other tabs
- var current = menu.querySelector('[id^=plyr-settings-' + this.id + ']:not([hidden])');
- var container = current.parentNode;
-
- // Set other toggles to be expanded false
- /* Array.from(menu.querySelectorAll(`[aria-controls="${current.getAttribute('id')}"]`)).forEach(toggle => {
- toggle.setAttribute('aria-expanded', false);
- }); */
+ // Hide all other panels
+ var container = target.parentNode;
+ var current = Array.from(container.children).find(function (node) {
+ return !node.hidden;
+ });
// If we can do fancy animations, we'll animate the height/width
if (support.transitions && !support.reducedMotion) {
@@ -2348,12 +2354,12 @@ typeof navigator === "object" && (function (global, factory) {
container.style.height = current.scrollHeight + 'px';
// Get potential sizes
- var size = controls.getTabSize.call(this, pane);
+ var size = controls.getMenuSize.call(this, target);
// Restore auto height/width
- var restore = function restore(e) {
+ var restore = function restore(event) {
// We're only bothered about height and width on the container
- if (e.target !== container || !['width', 'height'].includes(e.propertyName)) {
+ if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
return;
}
@@ -2378,16 +2384,10 @@ typeof navigator === "object" && (function (global, factory) {
// current.setAttribute('tabindex', -1);
// Set attributes on target
- toggleHidden(pane, false);
-
- /* const tabs = getElements.call(this, `[aria-controls="${target}"]`);
- Array.from(tabs).forEach(tab => {
- tab.setAttribute('aria-expanded', true);
- });
- pane.removeAttribute('tabindex'); */
+ toggleHidden(target, false);
// Focus the first item
- pane.querySelectorAll('button:not(:disabled), input:not(:disabled), [tabindex]')[0].focus();
+ target.querySelectorAll('[role^="menuitem"]')[0].focus();
},
@@ -2532,7 +2532,7 @@ typeof navigator === "object" && (function (global, factory) {
var menuItem = createElement('button', extend(getAttributesFromSelector(_this7.config.selectors.buttons.settings), {
type: 'button',
class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--forward',
- 'role': 'menuitem',
+ role: 'menuitem',
'aria-haspopup': true
}));
@@ -2556,10 +2556,14 @@ typeof navigator === "object" && (function (global, factory) {
});
// Back button
- pane.appendChild(createElement('button', {
+ var back = createElement('button', {
type: 'button',
class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--back'
- }, i18n.get(type, _this7.config)));
+ }, i18n.get(type, _this7.config));
+ back.addEventListener('click', function () {
+ controls.showMenuPanel.call(_this7, 'home');
+ });
+ pane.appendChild(back);
// Menu
pane.appendChild(createElement('div', {
@@ -2569,11 +2573,11 @@ typeof navigator === "object" && (function (global, factory) {
inner.appendChild(pane);
menuItem.addEventListener('click', function () {
- controls.showMenu.call(_this7, type);
+ controls.showMenuPanel.call(_this7, type);
});
_this7.elements.settings.buttons[type] = menuItem;
- _this7.elements.settings.menus[type] = pane;
+ _this7.elements.settings.panels[type] = pane;
});
home.appendChild(menu);
@@ -3482,6 +3486,9 @@ typeof navigator === "object" && (function (global, factory) {
isTouch: 'plyr--is-touch',
uiSupported: 'plyr--full-ui',
noTransition: 'plyr--no-transition',
+ display: {
+ time: 'plyr__time'
+ },
menu: {
value: 'plyr__menu__value',
badge: 'plyr__badge',
@@ -4608,7 +4615,7 @@ typeof navigator === "object" && (function (global, factory) {
// Go back to home tab on click
var showHomeTab = function showHomeTab() {
- controls.showMenu.call(_this4.player, 'home');
+ controls.showMenuPanel.call(_this4.player, 'home');
};
// Settings menu items - use event delegation as items are added/removed
@@ -6942,7 +6949,7 @@ typeof navigator === "object" && (function (global, factory) {
settings: {
popup: null,
menu: null,
- menus: {},
+ panels: {},
buttons: {}
}
};