diff options
Diffstat (limited to 'dist/plyr.polyfilled.js')
| -rw-r--r-- | dist/plyr.polyfilled.js | 339 |
1 files changed, 167 insertions, 172 deletions
diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js index c7b39915..f7db0630 100644 --- a/dist/plyr.polyfilled.js +++ b/dist/plyr.polyfilled.js @@ -5768,12 +5768,19 @@ typeof navigator === "object" && (function (global, factory) { // Inaert an element after another function insertAfter(element, target) { + if (!is$1.element(element) || !is$1.element(target)) { + return; + } + target.parentNode.insertBefore(element, target.nextSibling); } // Insert a DocumentFragment function insertElement(type, parent, attributes, text) { - // Inject the new <element> + if (!is$1.element(parent)) { + return; + } + parent.appendChild(createElement(type, attributes, text)); } @@ -5793,6 +5800,10 @@ typeof navigator === "object" && (function (global, factory) { // Remove all child elements function emptyElement(element) { + if (!is$1.element(element)) { + return; + } + var length = element.childNodes.length; @@ -6158,16 +6169,11 @@ typeof navigator === "object" && (function (global, factory) { get: function get() { // Get sources var sources = html5.getSources.call(player); - - var _sources$filter = sources.filter(function (source) { + var source = sources.find(function (source) { return source.getAttribute('src') === player.source; - }), - _sources$filter2 = slicedToArray(_sources$filter, 1), - source = _sources$filter2[0]; + }); // Return size, if match is found - - return source && Number(source.getAttribute('size')); }, set: function set(input) { @@ -6185,25 +6191,30 @@ typeof navigator === "object" && (function (global, factory) { } // Get current state - var currentTime = player.currentTime, - playing = player.playing; + var _player$media = player.media, + currentTime = _player$media.currentTime, + paused = _player$media.paused, + preload = _player$media.preload, + readyState = _player$media.readyState; // Set new source player.media.src = source.getAttribute('src'); - // Restore time - var onLoadedMetaData = function onLoadedMetaData() { - player.currentTime = currentTime; - }; - player.once('loadedmetadata', onLoadedMetaData); + // Prevent loading if preload="none" and the current source isn't loaded (#1044) + if (preload !== 'none' || readyState) { + // Restore time + player.once('loadedmetadata', function () { + player.currentTime = currentTime; - // Load new source - player.media.load(); + // Resume playing + if (!paused) { + player.play(); + } + }); - // Resume playing - if (playing) { - player.play(); + // Load new source + player.media.load(); } // Trigger change event @@ -6999,7 +7010,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'); @@ -7021,31 +7032,42 @@ typeof navigator === "object" && (function (global, factory) { _ref$checked = _ref.checked, checked = _ref$checked === undefined ? false : _ref$checked; - var item = createElement('li'); - - var label = createElement('label', { - class: this.config.classNames.control - }); + var attributes = getAttributesFromSelector(this.config.selectors.inputs[type]); - var radio = createElement('input', extend(getAttributesFromSelector(this.config.selectors.inputs[type]), { - type: 'radio', - name: 'plyr-' + type, + var item = createElement('button', extend(attributes, { + type: 'button', + role: 'menuitemradio', + class: (this.config.classNames.control + ' ' + (attributes.class ? attributes.class : '')).trim(), value: value, - checked: checked, - class: 'plyr__sr-only' + 'aria-checked': checked })); - var faux = createElement('span', { hidden: '' }); - - label.appendChild(radio); - label.appendChild(faux); - label.insertAdjacentHTML('beforeend', title); + // We have to set as HTML incase of special characters + item.innerHTML = title; if (is$1.element(badge)) { - label.appendChild(badge); + item.appendChild(badge); } - item.appendChild(label); + Object.defineProperty(item, 'checked', { + enumerable: true, + get: function get() { + return item.getAttribute('aria-checked') === 'true'; + }, + set: function set(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); }, @@ -7310,8 +7332,8 @@ 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); }, @@ -7320,12 +7342,13 @@ typeof navigator === "object" && (function (global, factory) { var _this3 = this; // Menu required - if (!is$1.element(this.elements.settings.panes.quality)) { + if (!is$1.element(this.elements.settings.panels.quality)) { + console.warn('Not an element'); return; } var type = 'quality'; - var list = this.elements.settings.panes.quality.querySelector('ul'); + var list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); // Set options if passed and filter based on uniqueness and config if (is$1.array(options)) { @@ -7335,8 +7358,9 @@ typeof navigator === "object" && (function (global, factory) { } // Toggle the pane and tab + console.warn(this.options.quality); var toggle = !is$1.empty(this.options.quality) && this.options.quality.length > 1; - controls.toggleTab.call(this, type, toggle); + controls.toggleMenuButton.call(this, type, toggle); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -7408,7 +7432,7 @@ typeof navigator === "object" && (function (global, factory) { // Update the selected setting updateSetting: function updateSetting(setting, container, input) { - var pane = this.elements.settings.panes[setting]; + var pane = this.elements.settings.panels[setting]; var value = null; var list = container; @@ -7437,7 +7461,7 @@ typeof navigator === "object" && (function (global, factory) { // Get the list if we need to if (!is$1.element(list)) { - list = pane && pane.querySelector('ul'); + list = pane && pane.querySelector('[role="menu"]'); } // If there's no list it means it's not been rendered... @@ -7446,11 +7470,11 @@ typeof navigator === "object" && (function (global, factory) { } // Update the label - var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value); + var label = this.elements.settings.buttons[setting].querySelector('.' + this.config.classNames.menu.value); label.innerHTML = controls.getLabel.call(this, setting, value); // Find the radio option and check it - var target = list && list.querySelector('input[value="' + value + '"]'); + var target = list && list.querySelector('[value="' + value + '"]'); if (is$1.element(target)) { target.checked = true; @@ -7461,17 +7485,17 @@ typeof navigator === "object" && (function (global, factory) { // 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 => { @@ -7503,11 +7527,11 @@ typeof navigator === "object" && (function (global, factory) { // 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); // Toggle the pane and tab - controls.toggleTab.call(this, type, tracks.length); + controls.toggleMenuButton.call(this, type, tracks.length); // Empty the menu emptyElement(list); @@ -7558,7 +7582,7 @@ typeof navigator === "object" && (function (global, factory) { } // Menu required - if (!is$1.element(this.elements.settings.panes.speed)) { + if (!is$1.element(this.elements.settings.panels.speed)) { return; } @@ -7578,7 +7602,7 @@ typeof navigator === "object" && (function (global, factory) { // Toggle the pane and tab var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1; - controls.toggleTab.call(this, type, toggle); + controls.toggleMenuButton.call(this, type, toggle); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -7589,7 +7613,7 @@ typeof navigator === "object" && (function (global, factory) { } // Get the list to populate - var list = this.elements.settings.panes.speed.querySelector('ul'); + var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Empty the menu emptyElement(list); @@ -7610,10 +7634,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$1.empty(tabs) && Object.values(tabs).some(function (tab) { - return !tab.hidden; + var visible = !is$1.empty(buttons) && Object.values(buttons).some(function (button) { + return !button.hidden; }); toggleHidden(this.elements.settings.menu, !visible); @@ -7622,19 +7646,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$1.element(form) || !is$1.element(button)) { + if (!is$1.element(popup) || !is$1.element(button)) { return; } - var show = is$1.boolean(event) ? event : is$1.element(form) && form.hasAttribute('hidden'); + var show = is$1.boolean(event) ? event : is$1.element(popup) && popup.hasAttribute('hidden'); if (is$1.event(event)) { - var isMenuItem = is$1.element(form) && form.contains(event.target); + var isMenuItem = is$1.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 @@ -7655,32 +7679,26 @@ typeof navigator === "object" && (function (global, factory) { button.setAttribute('aria-expanded', show); } - if (is$1.element(form)) { - toggleHidden(form, !show); + if (is$1.element(popup)) { + toggleHidden(popup, !show); toggleClass(this.elements.container, this.config.classNames.menu.open, show); if (show) { - form.removeAttribute('tabindex'); + popup.removeAttribute('tabindex'); } 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); @@ -7698,34 +7716,23 @@ typeof navigator === "object" && (function (global, factory) { }, - // Toggle Menu - showTab: function showTab() { + // Show a panel in the menu + showMenuPanel: function showMenuPanel() { var _this6 = 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$1.element(pane)) { - return; - } - - // Are we targeting a tab? If not, bail - var isTab = pane.getAttribute('role') === 'tabpanel'; - if (!isTab) { + if (!is$1.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 @@ -7735,12 +7742,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; } @@ -7762,19 +7769,16 @@ typeof navigator === "object" && (function (global, factory) { // Set attributes on current tab toggleHidden(current, true); - current.setAttribute('tabindex', -1); + // 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"]'); + if (firstItem) { + firstItem.focus(); + } }, @@ -7884,55 +7888,46 @@ typeof navigator === "object" && (function (global, factory) { // Settings button / menu if (this.config.controls.includes('settings') && !is$1.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 + // Build the menu items this.config.settings.forEach(function (type) { - var tab = createElement('li', { - role: 'tab', - hidden: '' - }); - - var button = createElement('button', extend(getAttributesFromSelector(_this7.config.selectors.buttons.settings), { + var menuItem = 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)); + role: 'menuitem', + 'aria-haspopup': true + })); + + var flex = createElement('span', null, i18n.get(type, _this7.config)); var value = createElement('span', { class: _this7.config.classNames.menu.value @@ -7941,50 +7936,50 @@ typeof navigator === "object" && (function (global, factory) { // Speed contains HTML entities value.innerHTML = data[type]; - button.appendChild(value); - tab.appendChild(button); - tabs.appendChild(tab); - - _this7.elements.settings.tabs[type] = tab; - }); + flex.appendChild(value); + menuItem.appendChild(flex); + menu.appendChild(menuItem); - 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: '' }); + // Back button var back = 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 + class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--back' }, i18n.get(type, _this7.config)); - + back.addEventListener('click', function () { + controls.showMenuPanel.call(_this7, 'home'); + }); pane.appendChild(back); - var options = createElement('ul'); + // Menu + pane.appendChild(createElement('div', { + role: 'menu' + })); - pane.appendChild(options); inner.appendChild(pane); - _this7.elements.settings.panes[type] = pane; + menuItem.addEventListener('click', function () { + controls.showMenuPanel.call(_this7, type); + }); + + _this7.elements.settings.buttons[type] = menuItem; + _this7.elements.settings.panels[type] = pane; }); - form.appendChild(inner); - menu.appendChild(form); - container.appendChild(menu); + home.appendChild(menu); + inner.appendChild(home); + + 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 @@ -8882,6 +8877,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', @@ -10001,13 +9999,12 @@ typeof navigator === "object" && (function (global, factory) { }); // Settings menu - bind(this.player.elements.settings.form, 'click', function (event) { + bind(this.player.elements.settings.popup, 'click', function (event) { 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); + controls.showMenuPanel.call(_this4.player, 'home'); }; // Settings menu items - use event delegation as items are added/removed @@ -10026,9 +10023,6 @@ typeof navigator === "object" && (function (global, factory) { _this4.player.speed = parseFloat(event.target.value); showHomeTab(); }, 'speed'); - } else { - var tab = event.target; - controls.showTab.call(_this4.player, tab.getAttribute('aria-controls')); } }); @@ -11202,8 +11196,8 @@ typeof navigator === "object" && (function (global, factory) { return Number(instance.getCurrentTime()); }, set: function set(time) { - // If paused, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet). - if (player.paused) { + // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet). + if (player.paused && !player.embed.hasPlayed) { player.embed.mute(); } @@ -12330,16 +12324,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 |