aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.js')
-rw-r--r--dist/plyr.js812
1 files changed, 451 insertions, 361 deletions
diff --git a/dist/plyr.js b/dist/plyr.js
index fe727a7c..35daacd5 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -414,12 +414,19 @@ typeof navigator === "object" && (function (global, factory) {
// Inaert an element after another
function insertAfter(element, target) {
+ if (!is.element(element) || !is.element(target)) {
+ return;
+ }
+
target.parentNode.insertBefore(element, target.nextSibling);
}
// Insert a DocumentFragment
function insertElement(type, parent, attributes, text) {
- // Inject the new <element>
+ if (!is.element(parent)) {
+ return;
+ }
+
parent.appendChild(createElement(type, attributes, text));
}
@@ -439,6 +446,10 @@ typeof navigator === "object" && (function (global, factory) {
// Remove all child elements
function emptyElement(element) {
+ if (!is.element(element)) {
+ return;
+ }
+
var length = element.childNodes.length;
@@ -627,6 +638,24 @@ typeof navigator === "object" && (function (global, factory) {
toggleListener.call(this, this.elements.container, 'keydown', trap, toggle, false);
}
+ // Set focus and tab focus class
+ function setFocus() {
+ var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+ var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+ if (!is.element(element)) {
+ return;
+ }
+
+ // Set regular focus
+ element.focus();
+
+ // If we want to mimic keyboard focus via tab
+ if (tabFocus) {
+ toggleClass(element, this.config.classNames.tabFocus);
+ }
+ }
+
// ==========================================================================
var transitionEndEvent = function () {
@@ -1645,7 +1674,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');
@@ -1658,6 +1687,8 @@ typeof navigator === "object" && (function (global, factory) {
// Create a settings menu item
createMenuItem: function createMenuItem(_ref) {
+ var _this = this;
+
var value = _ref.value,
list = _ref.list,
type = _ref.type,
@@ -1667,31 +1698,69 @@ typeof navigator === "object" && (function (global, factory) {
_ref$checked = _ref.checked,
checked = _ref$checked === undefined ? false : _ref$checked;
- var item = createElement('li');
+ var attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);
- var label = createElement('label', {
- class: this.config.classNames.control
- });
-
- var radio = createElement('input', extend(getAttributesFromSelector(this.config.selectors.inputs[type]), {
- type: 'radio',
- name: 'plyr-' + type,
- value: value,
- checked: checked,
- class: 'plyr__sr-only'
+ var item = createElement('button', extend(attributes, {
+ type: 'button',
+ role: 'menuitemradio',
+ class: (this.config.classNames.control + ' ' + (attributes.class ? attributes.class : '')).trim(),
+ 'aria-checked': checked,
+ value: value
}));
- var faux = createElement('span', { hidden: '' });
+ var flex = createElement('span');
- label.appendChild(radio);
- label.appendChild(faux);
- label.insertAdjacentHTML('beforeend', title);
+ // We have to set as HTML incase of special characters
+ flex.innerHTML = title;
if (is.element(badge)) {
- label.appendChild(badge);
+ flex.appendChild(badge);
}
- item.appendChild(label);
+ item.appendChild(flex);
+
+ 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');
+ }
+ });
+
+ this.listeners.bind(item, 'click', function () {
+ item.checked = true;
+
+ switch (type) {
+ case 'language':
+ _this.currentTrack = Number(value);
+ break;
+
+ case 'quality':
+ _this.quality = value;
+ break;
+
+ case 'speed':
+ _this.speed = parseFloat(value);
+ break;
+
+ default:
+ break;
+ }
+
+ controls.showMenuPanel.call(_this, 'home');
+ }, type);
+
list.appendChild(item);
},
@@ -1765,7 +1834,7 @@ typeof navigator === "object" && (function (global, factory) {
// Update <progress> elements
updateProgress: function updateProgress(event) {
- var _this = this;
+ var _this2 = this;
if (!this.supported.ui || !is.event(event)) {
return;
@@ -1775,7 +1844,7 @@ typeof navigator === "object" && (function (global, factory) {
var setProgress = function setProgress(target, input) {
var value = is.number(input) ? input : 0;
- var progress = is.element(target) ? target : _this.elements.display.buffer;
+ var progress = is.element(target) ? target : _this2.elements.display.buffer;
// Update value and label
if (is.element(progress)) {
@@ -1855,7 +1924,7 @@ typeof navigator === "object" && (function (global, factory) {
// Update hover tooltip for seeking
updateSeekTooltip: function updateSeekTooltip(event) {
- var _this2 = this;
+ var _this3 = this;
// Bail if setting not true
if (!this.config.tooltips.seek || !is.element(this.elements.inputs.seek) || !is.element(this.elements.display.seekTooltip) || this.duration === 0) {
@@ -1868,7 +1937,7 @@ typeof navigator === "object" && (function (global, factory) {
var visible = this.config.classNames.tooltip + '--visible';
var toggle = function toggle(_toggle) {
- toggleClass(_this2.elements.display.seekTooltip, visible, _toggle);
+ toggleClass(_this3.elements.display.seekTooltip, visible, _toggle);
};
// Hide on touch
@@ -1966,71 +2035,60 @@ typeof navigator === "object" && (function (global, factory) {
// Hide/show a tab
- toggleTab: function toggleTab(setting, toggle) {
- toggleHidden(this.elements.settings.tabs[setting], !toggle);
+ toggleMenuButton: function toggleMenuButton(setting, toggle) {
+ toggleHidden(this.elements.settings.buttons[setting], !toggle);
},
- // Set the quality menu
- setQualityMenu: function setQualityMenu(options) {
- var _this3 = this;
+ // Update the selected setting
+ updateSetting: function updateSetting(setting, container, input) {
+ var pane = this.elements.settings.panels[setting];
+ var value = null;
+ var list = container;
- // Menu required
- if (!is.element(this.elements.settings.panes.quality)) {
- return;
- }
+ if (setting === 'captions') {
+ value = this.currentTrack;
+ } else {
+ value = !is.empty(input) ? input : this[setting];
- var type = 'quality';
- var list = this.elements.settings.panes.quality.querySelector('ul');
+ // Get default
+ if (is.empty(value)) {
+ value = this.config[setting].default;
+ }
- // Set options if passed and filter based on uniqueness and config
- if (is.array(options)) {
- this.options.quality = dedupe(options).filter(function (quality) {
- return _this3.config.quality.options.includes(quality);
- });
- }
+ // Unsupported value
+ if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
+ this.debug.warn('Unsupported value of \'' + value + '\' for ' + setting);
+ return;
+ }
- // Toggle the pane and tab
- var toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;
- controls.toggleTab.call(this, type, toggle);
+ // Disabled value
+ if (!this.config[setting].options.includes(value)) {
+ this.debug.warn('Disabled value of \'' + value + '\' for ' + setting);
+ return;
+ }
+ }
- // Check if we need to toggle the parent
- controls.checkMenu.call(this);
+ // Get the list if we need to
+ if (!is.element(list)) {
+ list = pane && pane.querySelector('[role="menu"]');
+ }
- // If we're hiding, nothing more to do
- if (!toggle) {
+ // If there's no list it means it's not been rendered...
+ if (!is.element(list)) {
return;
}
- // Empty the menu
- emptyElement(list);
-
- // Get the badge HTML for HD, 4K etc
- var getBadge = function getBadge(quality) {
- var label = i18n.get('qualityBadge.' + quality, _this3.config);
-
- if (!label.length) {
- return null;
- }
-
- return controls.createBadge.call(_this3, label);
- };
+ // Update the label
+ var label = this.elements.settings.buttons[setting].querySelector('.' + this.config.classNames.menu.value);
+ label.innerHTML = controls.getLabel.call(this, setting, value);
- // Sort options by the config and then render options
- this.options.quality.sort(function (a, b) {
- var sorting = _this3.config.quality.options;
- return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
- }).forEach(function (quality) {
- controls.createMenuItem.call(_this3, {
- value: quality,
- list: list,
- type: type,
- title: controls.getLabel.call(_this3, 'quality', quality),
- badge: getBadge(quality)
- });
- });
+ // Find the radio option and check it
+ var target = list && list.querySelector('[value="' + value + '"]');
- controls.updateSetting.call(this, type, list);
+ if (is.element(target)) {
+ target.checked = true;
+ }
},
@@ -2062,72 +2120,83 @@ typeof navigator === "object" && (function (global, factory) {
},
- // Update the selected setting
- updateSetting: function updateSetting(setting, container, input) {
- var pane = this.elements.settings.panes[setting];
- var value = null;
- var list = container;
-
- if (setting === 'captions') {
- value = this.currentTrack;
- } else {
- value = !is.empty(input) ? input : this[setting];
+ // Set the quality menu
+ setQualityMenu: function setQualityMenu(options) {
+ var _this4 = this;
- // Get default
- if (is.empty(value)) {
- value = this.config[setting].default;
- }
+ // Menu required
+ if (!is.element(this.elements.settings.panels.quality)) {
+ return;
+ }
- // Unsupported value
- if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
- this.debug.warn('Unsupported value of \'' + value + '\' for ' + setting);
- return;
- }
+ var type = 'quality';
+ var list = this.elements.settings.panels.quality.querySelector('[role="menu"]');
- // Disabled value
- if (!this.config[setting].options.includes(value)) {
- this.debug.warn('Disabled value of \'' + value + '\' for ' + setting);
- return;
- }
+ // Set options if passed and filter based on uniqueness and config
+ if (is.array(options)) {
+ this.options.quality = dedupe(options).filter(function (quality) {
+ return _this4.config.quality.options.includes(quality);
+ });
}
- // Get the list if we need to
- if (!is.element(list)) {
- list = pane && pane.querySelector('ul');
- }
+ // Toggle the pane and tab
+ var toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;
+ controls.toggleMenuButton.call(this, type, toggle);
- // If there's no list it means it's not been rendered...
- if (!is.element(list)) {
+ // Empty the menu
+ emptyElement(list);
+
+ // Check if we need to toggle the parent
+ controls.checkMenu.call(this);
+
+ // If we're hiding, nothing more to do
+ if (!toggle) {
return;
}
- // Update the label
- var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
- label.innerHTML = controls.getLabel.call(this, setting, value);
+ // Get the badge HTML for HD, 4K etc
+ var getBadge = function getBadge(quality) {
+ var label = i18n.get('qualityBadge.' + quality, _this4.config);
- // Find the radio option and check it
- var target = list && list.querySelector('input[value="' + value + '"]');
+ if (!label.length) {
+ return null;
+ }
- if (is.element(target)) {
- target.checked = true;
- }
+ return controls.createBadge.call(_this4, label);
+ };
+
+ // Sort options by the config and then render options
+ this.options.quality.sort(function (a, b) {
+ var sorting = _this4.config.quality.options;
+ return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
+ }).forEach(function (quality) {
+ controls.createMenuItem.call(_this4, {
+ value: quality,
+ list: list,
+ type: type,
+ title: controls.getLabel.call(_this4, 'quality', quality),
+ badge: getBadge(quality)
+ });
+ });
+
+ controls.updateSetting.call(this, type, list);
},
// Set the looping options
/* setLoopMenu() {
// Menu required
- if (!is.element(this.elements.settings.panes.loop)) {
+ if (!is.element(this.elements.settings.panels.loop)) {
return;
}
const options = ['start', 'end', 'all', 'reset'];
- const list = this.elements.settings.panes.loop.querySelector('ul');
+ const list = this.elements.settings.panels.loop.querySelector('[role="menu"]');
// Show the pane and tab
- toggleHidden(this.elements.settings.tabs.loop, false);
- toggleHidden(this.elements.settings.panes.loop, false);
+ toggleHidden(this.elements.settings.buttons.loop, false);
+ toggleHidden(this.elements.settings.panels.loop, false);
// Toggle the pane and tab
const toggle = !is.empty(this.loop.options);
- controls.toggleTab.call(this, 'loop', toggle);
+ controls.toggleMenuButton.call(this, 'loop', toggle);
// Empty the menu
emptyElement(list);
options.forEach(option => {
@@ -2155,15 +2224,21 @@ typeof navigator === "object" && (function (global, factory) {
// Set a list of available captions languages
setCaptionsMenu: function setCaptionsMenu() {
- var _this4 = this;
+ var _this5 = this;
+
+ // Menu required
+ if (!is.element(this.elements.settings.panels.captions)) {
+ return;
+ }
// TODO: Captions or language? Currently it's mixed
var type = 'captions';
- var list = this.elements.settings.panes.captions.querySelector('ul');
+ var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
var tracks = captions.getTracks.call(this);
+ var toggle = Boolean(tracks.length);
// Toggle the pane and tab
- controls.toggleTab.call(this, type, tracks.length);
+ controls.toggleMenuButton.call(this, type, toggle);
// Empty the menu
emptyElement(list);
@@ -2172,7 +2247,7 @@ typeof navigator === "object" && (function (global, factory) {
controls.checkMenu.call(this);
// If there's no captions, bail
- if (!tracks.length) {
+ if (!toggle) {
return;
}
@@ -2180,9 +2255,9 @@ typeof navigator === "object" && (function (global, factory) {
var options = tracks.map(function (track, value) {
return {
value: value,
- checked: _this4.captions.toggled && _this4.currentTrack === value,
- title: captions.getLabel.call(_this4, track),
- badge: track.language && controls.createBadge.call(_this4, track.language.toUpperCase()),
+ checked: _this5.captions.toggled && _this5.currentTrack === value,
+ title: captions.getLabel.call(_this5, track),
+ badge: track.language && controls.createBadge.call(_this5, track.language.toUpperCase()),
list: list,
type: 'language'
};
@@ -2206,19 +2281,15 @@ typeof navigator === "object" && (function (global, factory) {
// Set a list of available captions languages
setSpeedMenu: function setSpeedMenu(options) {
- var _this5 = this;
-
- // Do nothing if not selected
- if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
- return;
- }
+ var _this6 = this;
// Menu required
- if (!is.element(this.elements.settings.panes.speed)) {
+ if (!is.element(this.elements.settings.panels.speed)) {
return;
}
var type = 'speed';
+ var list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
// Set the speed options
if (is.array(options)) {
@@ -2229,12 +2300,15 @@ typeof navigator === "object" && (function (global, factory) {
// Set options if passed and filter based on config
this.options.speed = this.options.speed.filter(function (speed) {
- return _this5.config.speed.options.includes(speed);
+ return _this6.config.speed.options.includes(speed);
});
// Toggle the pane and tab
var toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
- controls.toggleTab.call(this, type, toggle);
+ controls.toggleMenuButton.call(this, type, toggle);
+
+ // Empty the menu
+ emptyElement(list);
// Check if we need to toggle the parent
controls.checkMenu.call(this);
@@ -2244,19 +2318,13 @@ typeof navigator === "object" && (function (global, factory) {
return;
}
- // Get the list to populate
- var list = this.elements.settings.panes.speed.querySelector('ul');
-
- // Empty the menu
- emptyElement(list);
-
// Create items
this.options.speed.forEach(function (speed) {
- controls.createMenuItem.call(_this5, {
+ controls.createMenuItem.call(_this6, {
value: speed,
list: list,
type: type,
- title: controls.getLabel.call(_this5, 'speed', speed)
+ title: controls.getLabel.call(_this6, 'speed', speed)
});
});
@@ -2266,10 +2334,10 @@ typeof navigator === "object" && (function (global, factory) {
// Check if we need to hide/show the settings menu
checkMenu: function checkMenu() {
- var tabs = this.elements.settings.tabs;
+ var buttons = this.elements.settings.buttons;
- var visible = !is.empty(tabs) && Object.values(tabs).some(function (tab) {
- return !tab.hidden;
+ var visible = !is.empty(buttons) && Object.values(buttons).some(function (button) {
+ return !button.hidden;
});
toggleHidden(this.elements.settings.menu, !visible);
@@ -2278,19 +2346,19 @@ typeof navigator === "object" && (function (global, factory) {
// Show/hide menu
toggleMenu: function toggleMenu(event) {
- var form = this.elements.settings.form;
+ var popup = this.elements.settings.popup;
var button = this.elements.buttons.settings;
// Menu and button are required
- if (!is.element(form) || !is.element(button)) {
+ if (!is.element(popup) || !is.element(button)) {
return;
}
- var show = is.boolean(event) ? event : is.element(form) && form.hasAttribute('hidden');
+ var show = is.boolean(event) ? event : is.element(popup) && popup.hasAttribute('hidden');
if (is.event(event)) {
- var isMenuItem = is.element(form) && form.contains(event.target);
+ var isMenuItem = is.element(popup) && popup.contains(event.target);
var isButton = event.target === this.elements.buttons.settings;
// If the click was inside the form or if the click
@@ -2311,32 +2379,36 @@ typeof navigator === "object" && (function (global, factory) {
button.setAttribute('aria-expanded', show);
}
- if (is.element(form)) {
- toggleHidden(form, !show);
+ // Show the actual popup
+ if (is.element(popup)) {
+ toggleHidden(popup, !show);
toggleClass(this.elements.container, this.config.classNames.menu.open, show);
if (show) {
- form.removeAttribute('tabindex');
+ popup.removeAttribute('tabindex');
+
+ // Focus the first item if key interaction
+ if (event.type === 'keydown') {
+ var pane = Object.values(this.elements.settings.panels).find(function (pane) {
+ return !pane.hidden;
+ });
+ var firstItem = pane.querySelector('[role^="menuitem"]');
+ setFocus.call(this, firstItem, true);
+ }
} else {
- form.setAttribute('tabindex', -1);
+ popup.setAttribute('tabindex', -1);
}
}
},
- // 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(function (input) {
- var name = input.getAttribute('name');
- input.setAttribute('name', name + '-clone');
- });
-
// Append to parent so we get the "real" size
tab.parentNode.appendChild(clone);
@@ -2354,34 +2426,23 @@ typeof navigator === "object" && (function (global, factory) {
},
- // Toggle Menu
- showTab: function showTab() {
- var _this6 = this;
+ // Show a panel in the menu
+ showMenuPanel: function showMenuPanel() {
+ var _this7 = this;
- var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- var menu = this.elements.settings.menu;
+ var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- var pane = document.getElementById(target);
+ var target = document.getElementById('plyr-settings-' + this.id + '-' + type);
// Nothing to show, bail
- if (!is.element(pane)) {
- return;
- }
-
- // Are we targeting a tab? If not, bail
- var isTab = pane.getAttribute('role') === 'tabpanel';
- if (!isTab) {
+ if (!is.element(target)) {
return;
}
- // Hide all other tabs
- // Get other tabs
- var current = menu.querySelector('[role="tabpanel"]:not([hidden])');
- var container = current.parentNode;
-
- // Set other toggles to be expanded false
- Array.from(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]')).forEach(function (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
@@ -2391,12 +2452,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;
}
@@ -2405,7 +2466,7 @@ typeof navigator === "object" && (function (global, factory) {
container.style.height = '';
// Only listen once
- off.call(_this6, container, transitionEndEvent, restore);
+ off.call(_this7, container, transitionEndEvent, restore);
};
// Listen for the transition finishing and restore auto height/width
@@ -2418,26 +2479,20 @@ typeof navigator === "object" && (function (global, factory) {
// Set attributes on current tab
toggleHidden(current, true);
- current.setAttribute('tabindex', -1);
// Set attributes on target
- toggleHidden(pane, false);
-
- var tabs = getElements.call(this, '[aria-controls="' + target + '"]');
- Array.from(tabs).forEach(function (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();
+ var firstItem = target.querySelector('[role^="menuitem"]');
+ setFocus.call(this, firstItem, true);
},
// Build the default HTML
// TODO: Set order based on order in the config.controls array?
create: function create(data) {
- var _this7 = this;
+ var _this8 = this;
// Do nothing if we want no controls
if (is.empty(this.config.controls)) {
@@ -2540,107 +2595,144 @@ typeof navigator === "object" && (function (global, factory) {
// Settings button / menu
if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
- var menu = createElement('div', {
+ var control = createElement('div', {
class: 'plyr__menu',
hidden: ''
});
- menu.appendChild(controls.createButton.call(this, 'settings', {
+ control.appendChild(controls.createButton.call(this, 'settings', {
id: 'plyr-settings-toggle-' + data.id,
'aria-haspopup': true,
'aria-controls': 'plyr-settings-' + data.id,
'aria-expanded': false
}));
- var form = createElement('form', {
+ var popup = createElement('div', {
class: 'plyr__menu__container',
id: 'plyr-settings-' + data.id,
hidden: '',
- 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
- role: 'tablist',
- tabindex: -1
+ 'aria-labelled-by': 'plyr-settings-toggle-' + data.id
});
var inner = createElement('div');
var home = createElement('div', {
- id: 'plyr-settings-' + data.id + '-home',
- 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
- role: 'tabpanel'
+ id: 'plyr-settings-' + data.id + '-home'
});
- // Create the tab list
- var tabs = createElement('ul', {
- role: 'tablist'
+ // Create the menu
+ var menu = createElement('div', {
+ role: 'menu'
});
- // Build the tabs
+ home.appendChild(menu);
+ inner.appendChild(home);
+
+ // Build the menu items
this.config.settings.forEach(function (type) {
- var tab = createElement('li', {
- role: 'tab',
+ var menuItem = createElement('button', extend(getAttributesFromSelector(_this8.config.selectors.buttons.settings), {
+ type: 'button',
+ class: _this8.config.classNames.control + ' ' + _this8.config.classNames.control + '--forward',
+ role: 'menuitem',
+ 'aria-haspopup': true,
hidden: ''
+ }));
+
+ // Handle space or -> to open menu
+ on(menuItem, 'keydown', function (event) {
+ // We only care about space and ->
+ if (![32, 39].includes(event.which)) {
+ return;
+ }
+
+ // Prevent play / seek
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Show the respective menu
+ controls.showMenuPanel.call(_this8, type);
+ }, false);
+
+ // Show menu on click
+ on(menuItem, 'click', function () {
+ controls.showMenuPanel.call(_this8, type);
});
- var button = createElement('button', extend(getAttributesFromSelector(_this7.config.selectors.buttons.settings), {
- type: 'button',
- class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--forward',
- id: 'plyr-settings-' + data.id + '-' + type + '-tab',
- 'aria-haspopup': true,
- 'aria-controls': 'plyr-settings-' + data.id + '-' + type,
- 'aria-expanded': false
- }), i18n.get(type, _this7.config));
+ var flex = createElement('span', null, i18n.get(type, _this8.config));
var value = createElement('span', {
- class: _this7.config.classNames.menu.value
+ class: _this8.config.classNames.menu.value
});
// Speed contains HTML entities
value.innerHTML = data[type];
- button.appendChild(value);
- tab.appendChild(button);
- tabs.appendChild(tab);
+ flex.appendChild(value);
+ menuItem.appendChild(flex);
+ menu.appendChild(menuItem);
- _this7.elements.settings.tabs[type] = tab;
- });
-
- home.appendChild(tabs);
- inner.appendChild(home);
-
- // Build the panes
- this.config.settings.forEach(function (type) {
+ // Build the panes
var pane = createElement('div', {
id: 'plyr-settings-' + data.id + '-' + type,
- hidden: '',
- 'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab',
- role: 'tabpanel',
- tabindex: -1
+ hidden: ''
});
- var back = createElement('button', {
+ // Back button
+ var backButton = createElement('button', {
type: 'button',
- class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--back',
- 'aria-haspopup': true,
- 'aria-controls': 'plyr-settings-' + data.id + '-home',
- 'aria-expanded': false
- }, i18n.get(type, _this7.config));
+ class: _this8.config.classNames.control + ' ' + _this8.config.classNames.control + '--back'
+ });
- pane.appendChild(back);
+ // Visible label
+ backButton.appendChild(createElement('span', {
+ 'aria-hidden': true
+ }, i18n.get(type, _this8.config)));
- var options = createElement('ul');
+ // Screen reader label
+ backButton.appendChild(createElement('span', {
+ class: _this8.config.classNames.hidden
+ }, i18n.get('menuBack', _this8.config)));
+
+ // Handle space or -> to open menu
+ on(backButton, 'keydown', function (event) {
+ // We only care about <-
+ if (event.which !== 37) {
+ return;
+ }
+
+ // Prevent seek
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Show the respective menu
+ controls.showMenuPanel.call(_this8, 'home');
+ }, false);
+
+ // Go back
+ on(backButton, 'click', function () {
+ controls.showMenuPanel.call(_this8, 'home');
+ });
+
+ // Add to pane
+ pane.appendChild(backButton);
+
+ // Menu
+ pane.appendChild(createElement('div', {
+ role: 'menu'
+ }));
- pane.appendChild(options);
inner.appendChild(pane);
- _this7.elements.settings.panes[type] = pane;
+ _this8.elements.settings.buttons[type] = menuItem;
+ _this8.elements.settings.panels[type] = pane;
});
- form.appendChild(inner);
- menu.appendChild(form);
- container.appendChild(menu);
+ popup.appendChild(inner);
+ control.appendChild(popup);
+ container.appendChild(control);
- this.elements.settings.form = form;
- this.elements.settings.menu = menu;
+ this.elements.settings.popup = popup;
+ this.elements.settings.menu = control;
}
// Picture in picture button
@@ -2677,7 +2769,7 @@ typeof navigator === "object" && (function (global, factory) {
// Insert controls
inject: function inject() {
- var _this8 = this;
+ var _this9 = this;
// Sprite
if (this.config.loadSprite) {
@@ -2789,8 +2881,8 @@ typeof navigator === "object" && (function (global, factory) {
var labels = getElements.call(this, selector);
Array.from(labels).forEach(function (label) {
- toggleClass(label, _this8.config.classNames.hidden, false);
- toggleClass(label, _this8.config.classNames.tooltip, true);
+ toggleClass(label, _this9.config.classNames.hidden, false);
+ toggleClass(label, _this9.config.classNames.tooltip, true);
});
}
}
@@ -3540,6 +3632,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',
@@ -4420,7 +4515,8 @@ typeof navigator === "object" && (function (global, factory) {
// Clear timer
clearTimeout(_this2.player.timers.controls);
- // Timer to prevent flicker when seeking
+
+ // Set new timer to prevent flicker when seeking
_this2.player.timers.controls = setTimeout(function () {
return ui.toggleControls.call(_this2.player, false);
}, delay);
@@ -4577,130 +4673,123 @@ typeof navigator === "object" && (function (global, factory) {
});
}
- // Listen for control events
+ // Run default and custom handlers
}, {
- key: 'controls',
- value: function controls$$1() {
- var _this4 = this;
+ key: 'proxy',
+ value: function proxy(event, defaultHandler, customHandlerKey) {
+ var customHandler = this.player.config.listeners[customHandlerKey];
+ var hasCustomHandler = is.function(customHandler);
+ var returned = true;
- // IE doesn't support input event, so we fallback to change
- var inputEvent = browser.isIE ? 'change' : 'input';
+ // Execute custom handler
+ if (hasCustomHandler) {
+ returned = customHandler.call(this.player, event);
+ }
- // Run default and custom handlers
- var proxy = function proxy(event, defaultHandler, customHandlerKey) {
- var customHandler = _this4.player.config.listeners[customHandlerKey];
- var hasCustomHandler = is.function(customHandler);
- var returned = true;
+ // Only call default handler if not prevented in custom handler
+ if (returned && is.function(defaultHandler)) {
+ defaultHandler.call(this.player, event);
+ }
+ }
- // Execute custom handler
- if (hasCustomHandler) {
- returned = customHandler.call(_this4.player, event);
- }
+ // Trigger custom and default handlers
- // Only call default handler if not prevented in custom handler
- if (returned && is.function(defaultHandler)) {
- defaultHandler.call(_this4.player, event);
- }
- };
+ }, {
+ key: 'bind',
+ value: function bind(element, type, defaultHandler, customHandlerKey) {
+ var _this4 = this;
- // Trigger custom and default handlers
- var bind = function bind(element, type, defaultHandler, customHandlerKey) {
- var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+ var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
- var customHandler = _this4.player.config.listeners[customHandlerKey];
- var hasCustomHandler = is.function(customHandler);
+ var customHandler = this.player.config.listeners[customHandlerKey];
+ var hasCustomHandler = is.function(customHandler);
- on.call(_this4.player, element, type, function (event) {
- return proxy(event, defaultHandler, customHandlerKey);
- }, passive && !hasCustomHandler);
- };
+ on.call(this.player, element, type, function (event) {
+ return _this4.proxy(event, defaultHandler, customHandlerKey);
+ }, passive && !hasCustomHandler);
+ }
+
+ // Listen for control events
+
+ }, {
+ key: 'controls',
+ value: function controls$$1() {
+ var _this5 = this;
+
+ // IE doesn't support input event, so we fallback to change
+ var inputEvent = browser.isIE ? 'change' : 'input';
// Play/pause toggle
if (this.player.elements.buttons.play) {
Array.from(this.player.elements.buttons.play).forEach(function (button) {
- bind(button, 'click', _this4.player.togglePlay, 'play');
+ _this5.bind(button, 'click', _this5.player.togglePlay, 'play');
});
}
// Pause
- bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
+ this.bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
// Rewind
- bind(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
+ this.bind(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
// Rewind
- bind(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
+ this.bind(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
// Mute toggle
- bind(this.player.elements.buttons.mute, 'click', function () {
- _this4.player.muted = !_this4.player.muted;
+ this.bind(this.player.elements.buttons.mute, 'click', function () {
+ _this5.player.muted = !_this5.player.muted;
}, 'mute');
// Captions toggle
- bind(this.player.elements.buttons.captions, 'click', function () {
- return _this4.player.toggleCaptions();
+ this.bind(this.player.elements.buttons.captions, 'click', function () {
+ return _this5.player.toggleCaptions();
});
// Fullscreen toggle
- bind(this.player.elements.buttons.fullscreen, 'click', function () {
- _this4.player.fullscreen.toggle();
+ this.bind(this.player.elements.buttons.fullscreen, 'click', function () {
+ _this5.player.fullscreen.toggle();
}, 'fullscreen');
// Picture-in-Picture
- bind(this.player.elements.buttons.pip, 'click', function () {
- _this4.player.pip = 'toggle';
+ this.bind(this.player.elements.buttons.pip, 'click', function () {
+ _this5.player.pip = 'toggle';
}, 'pip');
// Airplay
- bind(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
+ this.bind(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
- // Settings menu
- bind(this.player.elements.buttons.settings, 'click', function (event) {
- controls.toggleMenu.call(_this4.player, event);
+ // Settings menu - click toggle
+ this.bind(this.player.elements.buttons.settings, 'click', function (event) {
+ controls.toggleMenu.call(_this5.player, event);
});
- // Settings menu
- bind(this.player.elements.settings.form, 'click', function (event) {
+ // Settings menu - keyboard toggle
+ this.bind(this.player.elements.buttons.settings, 'keydown', function (event) {
+ // We only care about space
+ if (event.which !== 32) {
+ return;
+ }
+
+ // Prevent scroll
+ event.preventDefault();
+
+ // Prevent playing video
event.stopPropagation();
- // Go back to home tab on click
- var showHomeTab = function showHomeTab() {
- var id = 'plyr-settings-' + _this4.player.id + '-home';
- controls.showTab.call(_this4.player, id);
- };
-
- // Settings menu items - use event delegation as items are added/removed
- if (matches(event.target, _this4.player.config.selectors.inputs.language)) {
- proxy(event, function () {
- _this4.player.currentTrack = Number(event.target.value);
- showHomeTab();
- }, 'language');
- } else if (matches(event.target, _this4.player.config.selectors.inputs.quality)) {
- proxy(event, function () {
- _this4.player.quality = event.target.value;
- showHomeTab();
- }, 'quality');
- } else if (matches(event.target, _this4.player.config.selectors.inputs.speed)) {
- proxy(event, function () {
- _this4.player.speed = parseFloat(event.target.value);
- showHomeTab();
- }, 'speed');
- } else {
- var tab = event.target;
- controls.showTab.call(_this4.player, tab.getAttribute('aria-controls'));
- }
- });
+ // Toggle menu
+ controls.toggleMenu.call(_this5.player, event);
+ }, null, false);
// Set range input alternative "value", which matches the tooltip time (#954)
- bind(this.player.elements.inputs.seek, 'mousedown mousemove', function (event) {
- var clientRect = _this4.player.elements.progress.getBoundingClientRect();
+ this.bind(this.player.elements.inputs.seek, 'mousedown mousemove', function (event) {
+ var clientRect = _this5.player.elements.progress.getBoundingClientRect();
var percent = 100 / clientRect.width * (event.pageX - clientRect.left);
event.currentTarget.setAttribute('seek-value', percent);
});
// Pause while seeking
- bind(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) {
+ this.bind(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) {
var seek = event.currentTarget;
var code = event.keyCode ? event.keyCode : event.which;
@@ -4718,15 +4807,15 @@ typeof navigator === "object" && (function (global, factory) {
// If we're done seeking and it was playing, resume playback
if (play && done) {
seek.removeAttribute('play-on-seeked');
- _this4.player.play();
- } else if (!done && _this4.player.playing) {
+ _this5.player.play();
+ } else if (!done && _this5.player.playing) {
seek.setAttribute('play-on-seeked', '');
- _this4.player.pause();
+ _this5.player.pause();
}
});
// Seek
- bind(this.player.elements.inputs.seek, inputEvent, function (event) {
+ this.bind(this.player.elements.inputs.seek, inputEvent, function (event) {
var seek = event.currentTarget;
// If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
@@ -4738,56 +4827,56 @@ typeof navigator === "object" && (function (global, factory) {
seek.removeAttribute('seek-value');
- _this4.player.currentTime = seekTo / seek.max * _this4.player.duration;
+ _this5.player.currentTime = seekTo / seek.max * _this5.player.duration;
}, 'seek');
// Current time invert
// Only if one time element is used for both currentTime and duration
if (this.player.config.toggleInvert && !is.element(this.player.elements.display.duration)) {
- bind(this.player.elements.display.currentTime, 'click', function () {
+ this.bind(this.player.elements.display.currentTime, 'click', function () {
// Do nothing if we're at the start
- if (_this4.player.currentTime === 0) {
+ if (_this5.player.currentTime === 0) {
return;
}
- _this4.player.config.invertTime = !_this4.player.config.invertTime;
+ _this5.player.config.invertTime = !_this5.player.config.invertTime;
- controls.timeUpdate.call(_this4.player);
+ controls.timeUpdate.call(_this5.player);
});
}
// Volume
- bind(this.player.elements.inputs.volume, inputEvent, function (event) {
- _this4.player.volume = event.target.value;
+ this.bind(this.player.elements.inputs.volume, inputEvent, function (event) {
+ _this5.player.volume = event.target.value;
}, 'volume');
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
Array.from(getElements.call(this.player, 'input[type="range"]')).forEach(function (element) {
- bind(element, 'input', function (event) {
- return controls.updateRangeFill.call(_this4.player, event.target);
+ _this5.bind(element, 'input', function (event) {
+ return controls.updateRangeFill.call(_this5.player, event.target);
});
});
}
// Seek tooltip
- bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
- return controls.updateSeekTooltip.call(_this4.player, event);
+ this.bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
+ return controls.updateSeekTooltip.call(_this5.player, event);
});
// Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
- bind(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
- _this4.player.elements.controls.hover = !_this4.player.touch && event.type === 'mouseenter';
+ this.bind(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
+ _this5.player.elements.controls.hover = !_this5.player.touch && event.type === 'mouseenter';
});
// Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
- bind(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
- _this4.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
+ this.bind(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
+ _this5.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
});
// Focus in/out on controls
- bind(this.player.elements.controls, 'focusin focusout', function (event) {
- var _player = _this4.player,
+ this.bind(this.player.elements.controls, 'focusin focusout', function (event) {
+ var _player = _this5.player,
config = _player.config,
elements = _player.elements,
timers = _player.timers;
@@ -4797,7 +4886,7 @@ typeof navigator === "object" && (function (global, factory) {
toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin');
// Toggle
- ui.toggleControls.call(_this4.player, event.type === 'focusin');
+ ui.toggleControls.call(_this5.player, event.type === 'focusin');
// If focusin, hide again after delay
if (event.type === 'focusin') {
@@ -4807,19 +4896,19 @@ typeof navigator === "object" && (function (global, factory) {
}, 0);
// Delay a little more for keyboard users
- var delay = _this4.touch ? 3000 : 4000;
+ var delay = _this5.touch ? 3000 : 4000;
// Clear timer
clearTimeout(timers.controls);
// Hide
timers.controls = setTimeout(function () {
- return ui.toggleControls.call(_this4.player, false);
+ return ui.toggleControls.call(_this5.player, false);
}, delay);
}
});
// Mouse wheel for volume
- bind(this.player.elements.inputs.volume, 'wheel', function (event) {
+ this.bind(this.player.elements.inputs.volume, 'wheel', function (event) {
// Detect "natural" scroll - suppored on OS X Safari only
// Other browsers on OS X will be inverted until support improves
var inverted = event.webkitDirectionInvertedFromDevice;
@@ -4839,10 +4928,10 @@ typeof navigator === "object" && (function (global, factory) {
var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
// Change the volume by 2%
- _this4.player.increaseVolume(direction / 50);
+ _this5.player.increaseVolume(direction / 50);
// Don't break page scrolling at max and min
- var volume = _this4.player.media.volume;
+ var volume = _this5.player.media.volume;
if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {
event.preventDefault();
@@ -6991,16 +7080,17 @@ typeof navigator === "object" && (function (global, factory) {
// Elements cache
this.elements = {
container: null,
+ captions: null,
buttons: {},
display: {},
progress: {},
inputs: {},
settings: {
+ popup: null,
menu: null,
- panes: {},
- tabs: {}
- },
- captions: null
+ panels: {},
+ buttons: {}
+ }
};
// Captions
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 13:57:25 +0000