diff options
Diffstat (limited to 'dist/plyr.polyfilled.js')
| -rw-r--r-- | dist/plyr.polyfilled.js | 153 |
1 files changed, 84 insertions, 69 deletions
diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js index 72aa85c7..d40e6e3d 100644 --- a/dist/plyr.polyfilled.js +++ b/dist/plyr.polyfilled.js @@ -5117,7 +5117,7 @@ var defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.2.4/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', @@ -6135,6 +6135,26 @@ var utils = { }, + // Toggle hidden + toggleHidden: function toggleHidden(element, hidden) { + if (!utils.is.element(element)) { + return; + } + + var hide = hidden; + + if (!utils.is.boolean(hide)) { + hide = !element.hasAttribute('hidden'); + } + + if (hide) { + element.setAttribute('hidden', ''); + } else { + element.removeAttribute('hidden'); + } + }, + + // Toggle class on an element toggleClass: function toggleClass(element, className, toggle) { if (utils.is.element(element)) { @@ -6155,20 +6175,6 @@ var utils = { }, - // Toggle hidden attribute on an element - toggleHidden: function toggleHidden(element, toggle) { - if (!utils.is.element(element)) { - return; - } - - if (toggle) { - element.setAttribute('hidden', ''); - } else { - element.removeAttribute('hidden'); - } - }, - - // Element matches selector matches: function matches(element, selector) { var prototype = { Element: Element }; @@ -6228,8 +6234,8 @@ var utils = { // Display this.elements.display = { buffer: utils.getElement.call(this, this.config.selectors.display.buffer), - duration: utils.getElement.call(this, this.config.selectors.display.duration), - currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime) + currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime), + duration: utils.getElement.call(this, this.config.selectors.display.duration) }; // Seek tooltip @@ -6986,7 +6992,7 @@ var Fullscreen = function () { // Get prefix this.prefix = Fullscreen.prefix; - this.name = Fullscreen.name; + this.property = Fullscreen.property; // Scroll position this.scrollPosition = { x: 0, y: 0 }; @@ -7001,7 +7007,7 @@ var Fullscreen = function () { // Fullscreen toggle on double click utils.on(this.player.elements.container, 'dblclick', function (event) { // Ignore double click in controls - if (_this.player.elements.controls.contains(event.target)) { + if (utils.is.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) { return; } @@ -7050,7 +7056,7 @@ var Fullscreen = function () { } else if (!this.prefix) { this.target.requestFullscreen(); } else if (!utils.is.empty(this.prefix)) { - this.target[this.prefix + 'Request' + this.name](); + this.target[this.prefix + 'Request' + this.property](); } } @@ -7073,7 +7079,7 @@ var Fullscreen = function () { (document.cancelFullScreen || document.exitFullscreen).call(document); } else if (!utils.is.empty(this.prefix)) { var action = this.prefix === 'moz' ? 'Cancel' : 'Exit'; - document['' + this.prefix + action + this.name](); + document['' + this.prefix + action + this.property](); } } @@ -7111,7 +7117,7 @@ var Fullscreen = function () { return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } - var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.name + 'Element']; + var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.property + 'Element']; return element === this.target; } @@ -7155,7 +7161,7 @@ var Fullscreen = function () { return value; } }, { - key: 'name', + key: 'property', get: function get() { return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen'; } @@ -7514,11 +7520,6 @@ var ui = { this.listeners.controls(); } - // If there's no controls, bail - if (!utils.is.element(this.elements.controls)) { - return; - } - // Remove native controls ui.toggleNativeControls.call(this); @@ -7759,10 +7760,10 @@ var ui = { } // Always display hours if duration is over an hour - var displayHours = utils.getHours(this.duration) > 0; + var forceHours = utils.getHours(this.duration) > 0; // eslint-disable-next-line no-param-reassign - target.textContent = utils.formatTime(time, displayHours, inverted); + target.textContent = utils.formatTime(time, forceHours, inverted); }, @@ -7969,7 +7970,6 @@ var browser$1 = utils.getBrowser(); var controls = { // Webkit polyfill for lower fill range updateRangeFill: function updateRangeFill(target) { - // Get range from event if event passed var range = utils.is.event(target) ? target.target : target; @@ -8161,7 +8161,6 @@ var controls = { // Add aria attributes attributes['aria-pressed'] = false; - attributes['aria-label'] = i18n.get(label, this.config); } else { button.appendChild(controls.createIcon.call(this, icon)); button.appendChild(controls.createLabel.call(this, label)); @@ -8263,16 +8262,14 @@ var controls = { // Create time display createTime: function createTime(type) { - var container = utils.createElement('div', { - class: 'plyr__time' - }); - - container.appendChild(utils.createElement('span', { - class: this.config.classNames.hidden - }, i18n.get(type, this.config))); + var attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]); - container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00')); + var container = utils.createElement('div', utils.extend(attributes, { + class: 'plyr__time ' + attributes.class, + 'aria-label': i18n.get(type, this.config) + }), '0:00'); + // Reference for updates this.elements.display[type] = container; return container; @@ -8298,7 +8295,7 @@ var controls = { class: 'plyr__sr-only' })); - var faux = utils.createElement('span', { 'aria-hidden': true }); + var faux = utils.createElement('span', { hidden: '' }); label.appendChild(radio); label.appendChild(faux); @@ -8369,11 +8366,7 @@ var controls = { // Hide/show a tab toggleTab: function toggleTab(setting, toggle) { - var tab = this.elements.settings.tabs[setting]; - var pane = this.elements.settings.panes[setting]; - - utils.toggleHidden(tab, !toggle); - utils.toggleHidden(pane, !toggle); + utils.toggleHidden(this.elements.settings.tabs[setting], !toggle); }, @@ -8585,7 +8578,6 @@ var controls = { // Get current selected caption language // TODO: rework this to user the getter in the API? - // Set a list of available captions languages setCaptionsMenu: function setCaptionsMenu() { var _this3 = this; @@ -8680,10 +8672,6 @@ var controls = { // Get the list to populate var list = this.elements.settings.panes.speed.querySelector('ul'); - // Show the pane and tab - utils.toggleHidden(this.elements.settings.tabs.speed, false); - utils.toggleHidden(this.elements.settings.panes.speed, false); - // Empty the menu utils.emptyElement(list); @@ -8720,7 +8708,7 @@ var controls = { return; } - var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true'; + var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden'); if (utils.is.event(event)) { var isMenuItem = utils.is.element(form) && form.contains(event.target); @@ -8745,7 +8733,7 @@ var controls = { } if (utils.is.element(form)) { - form.setAttribute('aria-hidden', !show); + utils.toggleHidden(form, !show); utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show); if (show) { @@ -8762,7 +8750,7 @@ var controls = { var clone = tab.cloneNode(true); clone.style.position = 'absolute'; clone.style.opacity = 0; - clone.setAttribute('aria-hidden', false); + clone.removeAttribute('hidden'); // Prevent input's being unchecked due to the name being identical Array.from(clone.querySelectorAll('input[name]')).forEach(function (input) { @@ -8808,7 +8796,7 @@ var controls = { // Hide all other tabs // Get other tabs - var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]'); + var current = menu.querySelector('[role="tabpanel"]:not([hidden])'); var container = current.parentNode; // Set other toggles to be expanded false @@ -8849,11 +8837,11 @@ var controls = { } // Set attributes on current tab - current.setAttribute('aria-hidden', true); + utils.toggleHidden(current, true); current.setAttribute('tabindex', -1); // Set attributes on target - pane.setAttribute('aria-hidden', !show); + utils.toggleHidden(pane, !show); tab.setAttribute('aria-expanded', show); pane.removeAttribute('tabindex'); @@ -8988,7 +8976,7 @@ var controls = { var form = utils.createElement('form', { class: 'plyr__menu__container', id: 'plyr-settings-' + data.id, - 'aria-hidden': true, + hidden: '', 'aria-labelled-by': 'plyr-settings-toggle-' + data.id, role: 'tablist', tabindex: -1 @@ -8998,7 +8986,6 @@ var controls = { var home = utils.createElement('div', { id: 'plyr-settings-' + data.id + '-home', - 'aria-hidden': false, 'aria-labelled-by': 'plyr-settings-toggle-' + data.id, role: 'tabpanel' }); @@ -9045,11 +9032,10 @@ var controls = { this.config.settings.forEach(function (type) { var pane = utils.createElement('div', { id: 'plyr-settings-' + data.id + '-' + type, - 'aria-hidden': true, + hidden: '', 'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab', role: 'tabpanel', - tabindex: -1, - hidden: '' + tabindex: -1 }); var back = utils.createElement('button', { @@ -9131,17 +9117,21 @@ var controls = { var container = null; this.elements.controls = null; - // HTML or Element passed as the option + // Set template properties + var props = { + id: this.id, + seektime: this.config.seekTime, + title: this.config.title + }; + var update = true; + if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) { + // String or HTMLElement passed as the option container = this.config.controls; } else if (utils.is.function(this.config.controls)) { // A custom function to build controls // The function can return a HTMLElement or String - container = this.config.controls({ - id: this.id, - seektime: this.config.seekTime, - title: this.config.title - }); + container = this.config.controls.call(this, props); } else { // Create controls container = controls.create.call(this, { @@ -9153,6 +9143,31 @@ var controls = { // TODO: Looping // loop: 'None', }); + update = false; + } + + // Replace props with their value + var replace = function replace(input) { + var result = input; + + Object.entries(props).forEach(function (_ref) { + var _ref2 = slicedToArray(_ref, 2), + key = _ref2[0], + value = _ref2[1]; + + result = utils.replaceAll(result, '{' + key + '}', value); + }); + + return result; + }; + + // Update markup + if (update) { + if (utils.is.string(this.config.controls)) { + container = replace(container); + } else if (utils.is.element(container)) { + container.innerHTML = replace(container.innerHTML); + } } // Controls container @@ -9454,7 +9469,7 @@ var Listeners = function () { }); // Display duration - utils.on(this.player.media, 'durationchange loadedmetadata', function (event) { + utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', function (event) { return ui.durationUpdate.call(_this3.player, event); }); |