diff --git a/.prettierrc b/.prettierrc index e68122c4..cee783d4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "useTabs": false, "tabWidth": 4, "singleQuote": true, - "trailingComma": "all" + "trailingComma": "all", + "printWidth": 120 } diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index ec18afaa..8b00d82d 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -12,9 +12,7 @@ import Raven from 'raven-js'; // Raven / Sentry // For demo site (https://plyr.io) only if (isLive) { - Raven.config( - 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555', - ).install(); + Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install(); } document.addEventListener('DOMContentLoaded', () => { @@ -130,7 +128,7 @@ import Raven from 'raven-js'; google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - // enabled: true, + enabled: true, publisherId: '918848828995742', }, }); @@ -174,47 +172,40 @@ import Raven from 'raven-js'; title: 'View From A Blue Moon', sources: [ { - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', type: 'video/mp4', size: 576, }, { - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4', type: 'video/mp4', size: 720, }, { - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4', type: 'video/mp4', size: 1080, }, { - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4', type: 'video/mp4', size: 1440, }, ], - poster: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ { kind: 'captions', label: 'English', srclang: 'en', - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', - src: - 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ], }; @@ -224,17 +215,14 @@ import Raven from 'raven-js'; case types.audio: player.source = { type: 'audio', - title: - 'Kishi Bashi – “It All Began With A Burst”', + title: 'Kishi Bashi – “It All Began With A Burst”', sources: [ { - src: - 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', type: 'audio/mp3', }, { - src: - 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', type: 'audio/ogg', }, ], @@ -247,8 +235,7 @@ import Raven from 'raven-js'; type: 'video', sources: [ { - src: - 'https://youtube.com/watch?v=bTqVqk7FSmY', + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', provider: 'youtube', }, ], @@ -277,26 +264,16 @@ import Raven from 'raven-js'; currentType = type; // Remove active classes - Array.from(buttons).forEach(button => - toggleClass(button.parentElement, 'active', false), - ); + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); // Set active on parent - toggleClass( - document.querySelector(`[data-source="${type}"]`), - 'active', - true, - ); + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); // Show cite - Array.from(document.querySelectorAll('.plyr__cite')).forEach( - cite => { - cite.setAttribute('hidden', ''); - }, - ); - document - .querySelector(`.plyr__cite--${type}`) - .removeAttribute('hidden'); + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { + cite.setAttribute('hidden', ''); + }); + document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); } // Bind to each button @@ -364,13 +341,7 @@ import Raven from 'raven-js'; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); - })( - window, - document, - 'script', - 'https://www.google-analytics.com/analytics.js', - 'ga', - ); + })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); window.ga('create', 'UA-40881672-11', 'auto'); window.ga('send', 'pageview'); } diff --git a/package.json b/package.json index 26303924..3e527e40 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "3.3.23", + "version": "3.4.0-beta.1", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "homepage": "https://plyr.io", diff --git a/src/js/captions.js b/src/js/captions.js index 14f77a2e..4ad2a956 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -84,7 +84,9 @@ const captions = { // * toggled: The real captions state const languages = dedupe( - Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(language => language.split('-')[0]), + Array.from(navigator.languages || navigator.language || navigator.userLanguage).map( + language => language.split('-')[0], + ), ); let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase(); diff --git a/src/js/controls.js b/src/js/controls.js index d0e6874d..e7779c71 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -23,9 +23,7 @@ const controls = { // Get icon URL getIconUrl() { const url = new URL(this.config.iconUrl, window.location); - const cors = - url.host !== window.location.host || - (browser.isIE && !window.svg4everybody); + const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody); return { url: this.config.iconUrl, @@ -36,82 +34,37 @@ const controls = { // Find the UI controls findElements() { try { - this.elements.controls = getElement.call( - this, - this.config.selectors.controls.wrapper, - ); + this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper); // Buttons this.elements.buttons = { - play: getElements.call( - this, - this.config.selectors.buttons.play, - ), - pause: getElement.call( - this, - this.config.selectors.buttons.pause, - ), - restart: getElement.call( - this, - this.config.selectors.buttons.restart, - ), - rewind: getElement.call( - this, - this.config.selectors.buttons.rewind, - ), - fastForward: getElement.call( - this, - this.config.selectors.buttons.fastForward, - ), + play: getElements.call(this, this.config.selectors.buttons.play), + pause: getElement.call(this, this.config.selectors.buttons.pause), + restart: getElement.call(this, this.config.selectors.buttons.restart), + rewind: getElement.call(this, this.config.selectors.buttons.rewind), + fastForward: getElement.call(this, this.config.selectors.buttons.fastForward), mute: getElement.call(this, this.config.selectors.buttons.mute), pip: getElement.call(this, this.config.selectors.buttons.pip), - airplay: getElement.call( - this, - this.config.selectors.buttons.airplay, - ), - settings: getElement.call( - this, - this.config.selectors.buttons.settings, - ), - captions: getElement.call( - this, - this.config.selectors.buttons.captions, - ), - fullscreen: getElement.call( - this, - this.config.selectors.buttons.fullscreen, - ), + airplay: getElement.call(this, this.config.selectors.buttons.airplay), + settings: getElement.call(this, this.config.selectors.buttons.settings), + captions: getElement.call(this, this.config.selectors.buttons.captions), + fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen), }; // Progress - this.elements.progress = getElement.call( - this, - this.config.selectors.progress, - ); + this.elements.progress = getElement.call(this, this.config.selectors.progress); // Inputs this.elements.inputs = { seek: getElement.call(this, this.config.selectors.inputs.seek), - volume: getElement.call( - this, - this.config.selectors.inputs.volume, - ), + volume: getElement.call(this, this.config.selectors.inputs.volume), }; // Display this.elements.display = { - buffer: getElement.call( - this, - this.config.selectors.display.buffer, - ), - currentTime: getElement.call( - this, - this.config.selectors.display.currentTime, - ), - duration: getElement.call( - this, - this.config.selectors.display.duration, - ), + buffer: getElement.call(this, this.config.selectors.display.buffer), + currentTime: getElement.call(this, this.config.selectors.display.currentTime), + duration: getElement.call(this, this.config.selectors.display.duration), }; // Seek tooltip @@ -124,10 +77,7 @@ const controls = { return true; } catch (error) { // Log it - this.debug.warn( - 'It looks like there is a problem with your custom controls HTML', - error, - ); + this.debug.warn('It looks like there is a problem with your custom controls HTML', error); // Restore native video controls this.toggleNativeControls(true); @@ -140,9 +90,7 @@ const controls = { createIcon(type, attributes) { const namespace = 'http://www.w3.org/2000/svg'; const iconUrl = controls.getIconUrl.call(this); - const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${ - this.config.iconPrefix - }`; + const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`; // Create const icon = document.createElementNS(namespace, 'svg'); @@ -164,11 +112,7 @@ const controls = { if ('href' in use) { use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path); } else { - use.setAttributeNS( - 'http://www.w3.org/1999/xlink', - 'xlink:href', - path, - ); + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); } // Add to @@ -187,9 +131,7 @@ const controls = { const text = universals[type] || i18n.get(type, this.config); const attributes = Object.assign({}, attr, { - class: [attr.class, this.config.classNames.hidden] - .filter(Boolean) - .join(' '), + class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' '), }); return createElement('span', attributes, text); }, @@ -276,9 +218,7 @@ const controls = { break; case 'play-large': - attributes.class += ` ${ - this.config.classNames.control - }--overlaid`; + attributes.class += ` ${this.config.classNames.control}--overlaid`; type = 'play'; label = 'play'; icon = 'play'; @@ -320,13 +260,7 @@ const controls = { } // Merge attributes - extend( - attributes, - getAttributesFromSelector( - this.config.selectors.buttons[type], - attributes, - ), - ); + extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes)); setAttributes(button, attributes); @@ -426,16 +360,12 @@ const controls = { // Create time display createTime(type) { - const attributes = getAttributesFromSelector( - this.config.selectors.display[type], - ); + const attributes = getAttributesFromSelector(this.config.selectors.display[type]); const container = createElement( 'div', extend(attributes, { - class: `${this.config.classNames.display.time} ${ - attributes.class ? attributes.class : '' - }`.trim(), + class: `${this.config.classNames.display.time} ${attributes.class ? attributes.class : ''}`.trim(), 'aria-label': i18n.get(type, this.config), }), '00:00', @@ -470,10 +400,7 @@ const controls = { return; } - const isRadioButton = matches( - menuItem, - '[role="menuitemradio"]', - ); + const isRadioButton = matches(menuItem, '[role="menuitemradio"]'); // Show the respective menu if (!isRadioButton && [32, 39].includes(event.which)) { @@ -482,10 +409,7 @@ const controls = { let target; if (event.which !== 32) { - if ( - event.which === 40 || - (isRadioButton && event.which === 39) - ) { + if (event.which === 40 || (isRadioButton && event.which === 39)) { target = menuItem.nextElementSibling; if (!is.element(target)) { @@ -508,26 +432,15 @@ const controls = { }, // Create a settings menu item - createMenuItem({ - value, - list, - type, - title, - badge = null, - checked = false, - }) { - const attributes = getAttributesFromSelector( - this.config.selectors.inputs[type], - ); + createMenuItem({ value, list, type, title, badge = null, checked = false }) { + const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]); const menuItem = createElement( 'button', extend(attributes, { type: 'button', role: 'menuitemradio', - class: `${this.config.classNames.control} ${ - attributes.class ? attributes.class : '' - }`.trim(), + class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(), 'aria-checked': checked, value, }), @@ -555,15 +468,10 @@ const controls = { if (checked) { Array.from(menuItem.parentNode.children) .filter(node => matches(node, '[role="menuitemradio"]')) - .forEach(node => - node.setAttribute('aria-checked', 'false'), - ); + .forEach(node => node.setAttribute('aria-checked', 'false')); } - menuItem.setAttribute( - 'aria-checked', - checked ? 'true' : 'false', - ); + menuItem.setAttribute('aria-checked', checked ? 'true' : 'false'); }, }); @@ -597,11 +505,7 @@ const controls = { break; } - controls.showMenuPanel.call( - this, - 'home', - event.type === 'keyup', - ); + controls.showMenuPanel.call(this, 'home', event.type === 'keyup'); }, type, false, @@ -644,17 +548,12 @@ const controls = { // Update range if (is.element(this.elements.inputs.volume)) { - controls.setRange.call( - this, - this.elements.inputs.volume, - this.muted ? 0 : this.volume, - ); + controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume); } // Update mute state if (is.element(this.elements.buttons.mute)) { - this.elements.buttons.mute.pressed = - this.muted || this.volume === 0; + this.elements.buttons.mute.pressed = this.muted || this.volume === 0; } }, @@ -681,9 +580,7 @@ const controls = { const setProgress = (target, input) => { const value = is.number(input) ? input : 0; - const progress = is.element(target) - ? target - : this.elements.display.buffer; + const progress = is.element(target) ? target : this.elements.display.buffer; // Update value and label if (is.element(progress)) { @@ -707,11 +604,7 @@ const controls = { // Set seek range value only if it's a 'natural' time event if (event.type === 'timeupdate') { - controls.setRange.call( - this, - this.elements.inputs.seek, - value, - ); + controls.setRange.call(this, this.elements.inputs.seek, value); } break; @@ -719,10 +612,7 @@ const controls = { // Check buffer status case 'playing': case 'progress': - setProgress( - this.elements.display.buffer, - this.buffered * 100, - ); + setProgress(this.elements.display.buffer, this.buffered * 100); break; @@ -750,9 +640,7 @@ const controls = { const format = i18n.get('seekLabel', this.config); range.setAttribute( 'aria-valuetext', - format - .replace('{currentTime}', currentTime) - .replace('{duration}', duration), + format.replace('{currentTime}', currentTime).replace('{duration}', duration), ); } else if (matches(range, this.config.selectors.inputs.volume)) { const percent = range.value * 100; @@ -802,10 +690,7 @@ const controls = { if (is.event(event)) { percent = 100 / clientRect.width * (event.pageX - clientRect.left); } else if (hasClass(this.elements.display.seekTooltip, visible)) { - percent = parseFloat( - this.elements.display.seekTooltip.style.left, - 10, - ); + percent = parseFloat(this.elements.display.seekTooltip.style.left, 10); } else { return; } @@ -818,21 +703,14 @@ const controls = { } // Display the time a click would seek to - controls.updateTimeDisplay.call( - this, - this.elements.display.seekTooltip, - this.duration / 100 * percent, - ); + controls.updateTimeDisplay.call(this, this.elements.display.seekTooltip, this.duration / 100 * percent); // Set position this.elements.display.seekTooltip.style.left = `${percent}%`; // Show/hide the tooltip // If the event is a moues in/out and percentage is inside bounds - if ( - is.event(event) && - ['mouseenter', 'mouseleave'].includes(event.type) - ) { + if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) { toggle(event.type === 'mouseenter'); } }, @@ -840,9 +718,7 @@ const controls = { // Handle time change event timeUpdate(event) { // Only invert if only one time element is displayed and used for both duration and currentTime - const invert = - !is.element(this.elements.display.duration) && - this.config.invertTime; + const invert = !is.element(this.elements.display.duration) && this.config.invertTime; // Duration controls.updateTimeDisplay.call( @@ -864,10 +740,7 @@ const controls = { // Show the duration on metadataloaded or durationchange events durationUpdate() { // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false - if ( - !this.supported.ui || - (!this.config.invertTime && this.currentTime) - ) { + if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) { return; } @@ -883,10 +756,7 @@ const controls = { // Update ARIA values if (is.element(this.elements.inputs.seek)) { - this.elements.inputs.seek.setAttribute( - 'aria-valuemax', - this.duration, - ); + this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); } // If there's a spot to display duration @@ -894,20 +764,12 @@ const controls = { // If there's only one time display, display duration there if (!hasDuration && this.config.displayDuration && this.paused) { - controls.updateTimeDisplay.call( - this, - this.elements.display.currentTime, - this.duration, - ); + controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration); } // If there's a duration element, update content if (hasDuration) { - controls.updateTimeDisplay.call( - this, - this.elements.display.duration, - this.duration, - ); + controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration); } // Update the tooltip (if visible) @@ -936,13 +798,8 @@ const controls = { } // Unsupported value - if ( - !is.empty(this.options[setting]) && - !this.options[setting].includes(value) - ) { - this.debug.warn( - `Unsupported value of '${value}' for ${setting}`, - ); + if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) { + this.debug.warn(`Unsupported value of '${value}' for ${setting}`); return; } @@ -964,9 +821,7 @@ const controls = { } // Update the label - const label = this.elements.settings.buttons[setting].querySelector( - `.${this.config.classNames.menu.value}`, - ); + const 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 @@ -981,16 +836,11 @@ const controls = { getLabel(setting, value) { switch (setting) { case 'speed': - return value === 1 - ? i18n.get('normal', this.config) - : `${value}×`; + return value === 1 ? i18n.get('normal', this.config) : `${value}×`; case 'quality': if (is.number(value)) { - const label = i18n.get( - `qualityLabel.${value}`, - this.config, - ); + const label = i18n.get(`qualityLabel.${value}`, this.config); if (!label.length) { return `${value}p`; @@ -1017,20 +867,15 @@ const controls = { } const type = 'quality'; - const list = this.elements.settings.panels.quality.querySelector( - '[role="menu"]', - ); + const list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); // Set options if passed and filter based on uniqueness and config if (is.array(options)) { - this.options.quality = dedupe(options).filter(quality => - this.config.quality.options.includes(quality), - ); + this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality)); } // Toggle the pane and tab - const toggle = - !is.empty(this.options.quality) && this.options.quality.length > 1; + const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1; controls.toggleMenuButton.call(this, type, toggle); // Empty the menu @@ -1130,9 +975,7 @@ const controls = { // TODO: Captions or language? Currently it's mixed const type = 'captions'; - const list = this.elements.settings.panels.captions.querySelector( - '[role="menu"]', - ); + const list = this.elements.settings.panels.captions.querySelector('[role="menu"]'); const tracks = captions.getTracks.call(this); const toggle = Boolean(tracks.length); @@ -1155,9 +998,7 @@ const controls = { value, checked: this.captions.toggled && this.currentTrack === value, title: captions.getLabel.call(this, track), - badge: - track.language && - controls.createBadge.call(this, track.language.toUpperCase()), + badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()), list, type: 'language', })); @@ -1185,9 +1026,7 @@ const controls = { } const type = 'speed'; - const list = this.elements.settings.panels.speed.querySelector( - '[role="menu"]', - ); + const list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Set the speed options if (is.array(options)) { @@ -1197,13 +1036,10 @@ const controls = { } // Set options if passed and filter based on config - this.options.speed = this.options.speed.filter(speed => - this.config.speed.options.includes(speed), - ); + this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed)); // Toggle the pane and tab - const toggle = - !is.empty(this.options.speed) && this.options.speed.length > 1; + const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; controls.toggleMenuButton.call(this, type, toggle); // Empty the menu @@ -1233,9 +1069,7 @@ const controls = { // Check if we need to hide/show the settings menu checkMenu() { const { buttons } = this.elements.settings; - const visible = - !is.empty(buttons) && - Object.values(buttons).some(button => !button.hidden); + const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden); toggleHidden(this.elements.settings.menu, !visible); }, @@ -1250,13 +1084,10 @@ const controls = { return; } - const show = is.boolean(input) - ? input - : is.element(popup) && popup.hasAttribute('hidden'); + const show = is.boolean(input) ? input : is.element(popup) && popup.hasAttribute('hidden'); if (is.event(input)) { - const isMenuItem = - is.element(popup) && popup.contains(input.target); + const isMenuItem = is.element(popup) && popup.contains(input.target); const isButton = input.target === this.elements.buttons.settings; // If the click was inside the form or if the click @@ -1281,17 +1112,11 @@ const controls = { if (is.element(popup)) { toggleHidden(popup, !show); - toggleClass( - this.elements.container, - this.config.classNames.menu.open, - show, - ); + toggleClass(this.elements.container, this.config.classNames.menu.open, show); // Focus the first item if key interaction if (show && is.event(input) && input.type === 'keyup') { - const pane = Object.values(this.elements.settings.panels).find( - pane => !pane.hidden, - ); + const pane = Object.values(this.elements.settings.panels).find(pane => !pane.hidden); const firstItem = pane.querySelector('[role^="menuitem"]'); setFocus.call(this, firstItem, true); @@ -1324,9 +1149,7 @@ const controls = { // Show a panel in the menu showMenuPanel(type = '', tabFocus = false) { - const target = document.getElementById( - `plyr-settings-${this.id}-${type}`, - ); + const target = document.getElementById(`plyr-settings-${this.id}-${type}`); // Nothing to show, bail if (!is.element(target)) { @@ -1335,9 +1158,7 @@ const controls = { // Hide all other panels const container = target.parentNode; - const current = Array.from(container.children).find( - node => !node.hidden, - ); + const current = Array.from(container.children).find(node => !node.hidden); // If we can do fancy animations, we'll animate the height/width if (support.transitions && !support.reducedMotion) { @@ -1351,10 +1172,7 @@ const controls = { // Restore auto height/width const restore = event => { // We're only bothered about height and width on the container - if ( - event.target !== container || - !['width', 'height'].includes(event.propertyName) - ) { + if (event.target !== container || !['width', 'height'].includes(event.propertyName)) { return; } @@ -1389,10 +1207,7 @@ const controls = { // TODO: Set order based on order in the config.controls array? create(data) { // Create the container - const container = createElement( - 'div', - getAttributesFromSelector(this.config.selectors.controls.wrapper), - ); + const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper)); // Restart button if (this.config.controls.includes('restart')) { @@ -1411,17 +1226,12 @@ const controls = { // Fast forward button if (this.config.controls.includes('fast-forward')) { - container.appendChild( - controls.createButton.call(this, 'fast-forward'), - ); + container.appendChild(controls.createButton.call(this, 'fast-forward')); } // Progress if (this.config.controls.includes('progress')) { - const progress = createElement( - 'div', - getAttributesFromSelector(this.config.selectors.progress), - ); + const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress)); // Seek range slider progress.appendChild( @@ -1455,9 +1265,7 @@ const controls = { // Media current time display if (this.config.controls.includes('current-time')) { - container.appendChild( - controls.createTime.call(this, 'currentTime'), - ); + container.appendChild(controls.createTime.call(this, 'currentTime')); } // Media duration display @@ -1505,10 +1313,7 @@ const controls = { } // Settings button / menu - if ( - this.config.controls.includes('settings') && - !is.empty(this.config.settings) - ) { + if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) { const control = createElement('div', { class: 'plyr__menu', hidden: '', @@ -1550,20 +1355,13 @@ const controls = { // TODO: bundle this with the createMenuItem helper and bindings const menuItem = createElement( 'button', - extend( - getAttributesFromSelector( - this.config.selectors.buttons.settings, - ), - { - type: 'button', - class: `${this.config.classNames.control} ${ - this.config.classNames.control - }--forward`, - role: 'menuitem', - 'aria-haspopup': true, - hidden: '', - }, - ), + extend(getAttributesFromSelector(this.config.selectors.buttons.settings), { + type: 'button', + class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`, + role: 'menuitem', + 'aria-haspopup': true, + hidden: '', + }), ); // Bind menu shortcuts for keyboard users @@ -1574,11 +1372,7 @@ const controls = { controls.showMenuPanel.call(this, type, false); }); - const flex = createElement( - 'span', - null, - i18n.get(type, this.config), - ); + const flex = createElement('span', null, i18n.get(type, this.config)); const value = createElement('span', { class: this.config.classNames.menu.value, @@ -1600,9 +1394,7 @@ const controls = { // Back button const backButton = createElement('button', { type: 'button', - class: `${this.config.classNames.control} ${ - this.config.classNames.control - }--back`, + class: `${this.config.classNames.control} ${this.config.classNames.control}--back`, }); // Visible label @@ -1688,25 +1480,18 @@ const controls = { // Toggle fullscreen button if (this.config.controls.includes('fullscreen')) { - container.appendChild( - controls.createButton.call(this, 'fullscreen'), - ); + container.appendChild(controls.createButton.call(this, 'fullscreen')); } // Larger overlaid play button if (this.config.controls.includes('play-large')) { - this.elements.container.appendChild( - controls.createButton.call(this, 'play-large'), - ); + this.elements.container.appendChild(controls.createButton.call(this, 'play-large')); } this.elements.controls = container; if (this.isHTML5) { - controls.setQualityMenu.call( - this, - html5.getQualityOptions.call(this), - ); + controls.setQualityMenu.call(this, html5.getQualityOptions.call(this)); } controls.setSpeedMenu.call(this); @@ -1793,9 +1578,7 @@ const controls = { // Inject to custom location if (is.string(this.config.selectors.controls.container)) { - target = document.querySelector( - this.config.selectors.controls.container, - ); + target = document.querySelector(this.config.selectors.controls.container); } // Inject into the container by default @@ -1804,9 +1587,7 @@ const controls = { } // Inject controls HTML (needs to be before captions, hence "afterbegin") - const insertMethod = is.element(container) - ? 'insertAdjacentElement' - : 'insertAdjacentHTML'; + const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML'; target[insertMethod]('afterbegin', container); // Find the elements if need be @@ -1822,9 +1603,7 @@ const controls = { // Setup tooltips if (this.config.tooltips.controls) { const { classNames, selectors } = this.config; - const selector = `${selectors.controls.wrapper} ${ - selectors.labels - } .${classNames.hidden}`; + const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`; const labels = getElements.call(this, selector); Array.from(labels).forEach(label => { diff --git a/src/js/listeners.js b/src/js/listeners.js index 881393ba..c1305bcd 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -6,14 +6,7 @@ import controls from './controls'; import ui from './ui'; import { repaint } from './utils/animation'; import browser from './utils/browser'; -import { - getElement, - getElements, - hasClass, - matches, - toggleClass, - toggleHidden, -} from './utils/elements'; +import { getElement, getElements, hasClass, matches, toggleClass, toggleHidden } from './utils/elements'; import { on, once, toggleListener, triggerEvent } from './utils/events'; import is from './utils/is'; @@ -69,38 +62,13 @@ class Listeners { return; } - if ( - event.which === 32 && - matches(focused, 'button, [role^="menuitem"]') - ) { + if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) { return; } } // Which keycodes should we prevent default - const preventDefault = [ - 32, - 37, - 38, - 39, - 40, - 48, - 49, - 50, - 51, - 52, - 53, - 54, - 56, - 57, - 67, - 70, - 73, - 75, - 76, - 77, - 79, - ]; + const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79]; // If the code is found prevent default (e.g. prevent scrolling for arrows) if (preventDefault.includes(code)) { @@ -195,11 +163,7 @@ class Listeners { // Escape is handle natively when in full screen // So we only need to worry about non native - if ( - !player.fullscreen.enabled && - player.fullscreen.active && - code === 27 - ) { + if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) { player.fullscreen.toggle(); } @@ -222,11 +186,7 @@ class Listeners { player.touch = true; // Add touch class - toggleClass( - player.elements.container, - player.config.classNames.isTouch, - true, - ); + toggleClass(player.elements.container, player.config.classNames.isTouch, true); } setTabFocus(event) { @@ -272,11 +232,7 @@ class Listeners { return; } - toggleClass( - document.activeElement, - player.config.classNames.tabFocus, - true, - ); + toggleClass(document.activeElement, player.config.classNames.tabFocus, true); }, 10); } @@ -286,38 +242,17 @@ class Listeners { // Keyboard shortcuts if (player.config.keyboard.global) { - toggleListener.call( - player, - window, - 'keydown keyup', - this.handleKey, - toggle, - false, - ); + toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false); } // Click anywhere closes menu - toggleListener.call( - player, - document.body, - 'click', - this.toggleMenu, - toggle, - ); + toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle); // Detect touch by events once.call(player, document.body, 'touchstart', this.firstTouch); // Tab focus detection - toggleListener.call( - player, - document.body, - 'keydown focus blur', - this.setTabFocus, - toggle, - false, - true, - ); + toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true); } // Container listeners @@ -326,13 +261,7 @@ class Listeners { // Keyboard shortcuts if (!player.config.keyboard.global && player.config.keyboard.focused) { - on.call( - player, - player.elements.container, - 'keydown keyup', - this.handleKey, - false, - ); + on.call(player, player.elements.container, 'keydown keyup', this.handleKey, false); } // Toggle controls on mouse events and entering fullscreen @@ -350,9 +279,7 @@ class Listeners { } // Show, then hide after a timeout unless another control event occurs - const show = ['touchstart', 'touchmove', 'mousemove'].includes( - event.type, - ); + const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type); let delay = 0; @@ -366,10 +293,7 @@ class Listeners { clearTimeout(player.timers.controls); // Set new timer to prevent flicker when seeking - player.timers.controls = setTimeout( - () => ui.toggleControls.call(player, false), - delay, - ); + player.timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay); }, ); } @@ -379,16 +303,11 @@ class Listeners { const { player } = this; // Time change on media - on.call(player, player.media, 'timeupdate seeking seeked', event => - controls.timeUpdate.call(player, event), - ); + on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event)); // Display duration - on.call( - player, - player.media, - 'durationchange loadeddata loadedmetadata', - event => controls.durationUpdate.call(player, event), + on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event => + controls.durationUpdate.call(player, event), ); // Check for audio tracks on load @@ -408,30 +327,20 @@ class Listeners { }); // Check for buffer progress - on.call( - player, - player.media, - 'progress playing seeking seeked', - event => controls.updateProgress.call(player, event), + on.call(player, player.media, 'progress playing seeking seeked', event => + controls.updateProgress.call(player, event), ); // Handle volume changes - on.call(player, player.media, 'volumechange', event => - controls.updateVolume.call(player, event), - ); + on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event)); // Handle play/pause - on.call( - player, - player.media, - 'playing play pause ended emptied timeupdate', - event => ui.checkPlaying.call(player, event), + on.call(player, player.media, 'playing play pause ended emptied timeupdate', event => + ui.checkPlaying.call(player, event), ); // Loading state - on.call(player, player.media, 'waiting canplay seeked playing', event => - ui.checkLoading.call(player, event), - ); + on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event)); // If autoplay, then load advertisement if required // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows @@ -443,23 +352,14 @@ class Listeners { // If ads are enabled, wait for them first if (player.ads.enabled && !player.ads.initialized) { // Wait for manager response - player.ads.managerPromise - .then(() => player.ads.play()) - .catch(() => player.play()); + player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play()); } }); // Click video - if ( - player.supported.ui && - player.config.clickToPlay && - !player.isAudio - ) { + if (player.supported.ui && player.config.clickToPlay && !player.isAudio) { // Re-fetch the wrapper - const wrapper = getElement.call( - player, - `.${player.config.classNames.video}`, - ); + const wrapper = getElement.call(player, `.${player.config.classNames.video}`); // Bail if there's no wrapper (this should never happen) if (!is.element(wrapper)) { @@ -467,42 +367,31 @@ class Listeners { } // On click play, pause ore restart - on.call( - player, - player.elements.container, - 'click touchstart', - event => { - const targets = [player.elements.container, wrapper]; + on.call(player, player.elements.container, 'click touchstart', event => { + const targets = [player.elements.container, wrapper]; - // Ignore if click if not container or in video wrapper - if ( - !targets.includes(event.target) && - !wrapper.contains(event.target) - ) { - return; - } + // Ignore if click if not container or in video wrapper + if (!targets.includes(event.target) && !wrapper.contains(event.target)) { + return; + } - // First touch on touch devices will just show controls (if we're hiding controls) - // If controls are shown then it'll toggle like a pointer device - if ( - player.config.hideControls && - player.touch && - hasClass( - player.elements.container, - player.config.classNames.hideControls, - ) - ) { - return; - } + // First touch on touch devices will just show controls (if we're hiding controls) + // If controls are shown then it'll toggle like a pointer device + if ( + player.config.hideControls && + player.touch && + hasClass(player.elements.container, player.config.classNames.hideControls) + ) { + return; + } - if (player.ended) { - player.restart(); - player.play(); - } else { - player.togglePlay(); - } - }, - ); + if (player.ended) { + player.restart(); + player.play(); + } else { + player.togglePlay(); + } + }); } // Disable right click @@ -545,19 +434,12 @@ class Listeners { // Quality change on.call(player, player.media, 'qualitychange', event => { // Update UI - controls.updateSetting.call( - player, - 'quality', - null, - event.detail.quality, - ); + controls.updateSetting.call(player, 'quality', null, event.detail.quality); }); // Proxy events to container // Bubble up key events for Edge - const proxyEvents = player.config.events - .concat(['keyup', 'keydown']) - .join(' '); + const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' '); on.call(player, player.media, proxyEvents, event => { let { detail = {} } = event; @@ -567,13 +449,7 @@ class Listeners { detail = player.media.error; } - triggerEvent.call( - player, - player.elements.container, - event.type, - true, - detail, - ); + triggerEvent.call(player, player.elements.container, event.type, true, detail); }); } @@ -625,28 +501,13 @@ class Listeners { } // Pause - this.bind( - player.elements.buttons.restart, - 'click', - player.restart, - 'restart', - ); + this.bind(player.elements.buttons.restart, 'click', player.restart, 'restart'); // Rewind - this.bind( - player.elements.buttons.rewind, - 'click', - player.rewind, - 'rewind', - ); + this.bind(player.elements.buttons.rewind, 'click', player.rewind, 'rewind'); // Rewind - this.bind( - player.elements.buttons.fastForward, - 'click', - player.forward, - 'fastForward', - ); + this.bind(player.elements.buttons.fastForward, 'click', player.forward, 'fastForward'); // Mute toggle this.bind( @@ -659,9 +520,7 @@ class Listeners { ); // Captions toggle - this.bind(player.elements.buttons.captions, 'click', () => - player.toggleCaptions(), - ); + this.bind(player.elements.buttons.captions, 'click', () => player.toggleCaptions()); // Fullscreen toggle this.bind( @@ -684,12 +543,7 @@ class Listeners { ); // Airplay - this.bind( - player.elements.buttons.airplay, - 'click', - player.airplay, - 'airplay', - ); + this.bind(player.elements.buttons.airplay, 'click', player.airplay, 'airplay'); // Settings menu - click toggle this.bind(player.elements.buttons.settings, 'click', event => { @@ -731,39 +585,30 @@ class Listeners { }); // Pause while seeking - this.bind( - player.elements.inputs.seek, - 'mousedown mouseup keydown keyup touchstart touchend', - event => { - const seek = event.currentTarget; - const code = event.keyCode ? event.keyCode : event.which; - const eventType = event.type; - const attribute = 'play-on-seeked'; + this.bind(player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => { + const seek = event.currentTarget; + const code = event.keyCode ? event.keyCode : event.which; + const eventType = event.type; + const attribute = 'play-on-seeked'; - if ( - (eventType === 'keydown' || eventType === 'keyup') && - (code !== 39 && code !== 37) - ) { - return; - } - // Was playing before? - const play = seek.hasAttribute(attribute); + if ((eventType === 'keydown' || eventType === 'keyup') && (code !== 39 && code !== 37)) { + return; + } + // Was playing before? + const play = seek.hasAttribute(attribute); - // Done seeking - const done = ['mouseup', 'touchend', 'keyup'].includes( - event.type, - ); + // Done seeking + const done = ['mouseup', 'touchend', 'keyup'].includes(event.type); - // If we're done seeking and it was playing, resume playback - if (play && done) { - seek.removeAttribute(attribute); - player.play(); - } else if (!done && player.playing) { - seek.setAttribute(attribute, ''); - player.pause(); - } - }, - ); + // If we're done seeking and it was playing, resume playback + if (play && done) { + seek.removeAttribute(attribute); + player.play(); + } else if (!done && player.playing) { + seek.setAttribute(attribute, ''); + player.pause(); + } + }); // Fix range inputs on iOS // Super weird iOS bug where after you interact with an
with attributes - this.provider = this.media.getAttribute( - this.config.attributes.embed.provider, - ); + this.provider = this.media.getAttribute(this.config.attributes.embed.provider); // Remove attribute - this.media.removeAttribute( - this.config.attributes.embed.provider, - ); + this.media.removeAttribute(this.config.attributes.embed.provider); } // Unsupported or missing provider - if ( - is.empty(this.provider) || - !Object.keys(providers).includes(this.provider) - ) { + if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) { this.debug.error('Setup failed: Invalid provider'); return; } @@ -235,10 +222,7 @@ class Plyr { if (this.media.hasAttribute('autoplay')) { this.config.autoplay = true; } - if ( - this.media.hasAttribute('playsinline') || - this.media.hasAttribute('webkit-playsinline') - ) { + if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) { this.config.playsinline = true; } if (this.media.hasAttribute('muted')) { @@ -256,11 +240,7 @@ class Plyr { } // Check for support again but with type - this.supported = support.check( - this.type, - this.provider, - this.config.playsinline, - ); + this.supported = support.check(this.type, this.provider, this.config.playsinline); // If no support for even API, bail if (!this.supported.api) { @@ -293,14 +273,9 @@ class Plyr { // Listen for events if debugging if (this.config.debug) { - on.call( - this, - this.elements.container, - this.config.events.join(' '), - event => { - this.debug.log(`event: ${event.type}`); - }, - ); + on.call(this, this.elements.container, this.config.events.join(' '), event => { + this.debug.log(`event: ${event.type}`); + }); } // Setup interface @@ -450,9 +425,7 @@ class Plyr { * @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime */ rewind(seekTime) { - this.currentTime = - this.currentTime - - (is.number(seekTime) ? seekTime : this.config.seekTime); + this.currentTime = this.currentTime - (is.number(seekTime) ? seekTime : this.config.seekTime); } /** @@ -460,9 +433,7 @@ class Plyr { * @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime */ forward(seekTime) { - this.currentTime = - this.currentTime + - (is.number(seekTime) ? seekTime : this.config.seekTime); + this.currentTime = this.currentTime + (is.number(seekTime) ? seekTime : this.config.seekTime); } /** @@ -479,9 +450,7 @@ class Plyr { const inputIsValid = is.number(input) && input > 0; // Set - this.media.currentTime = inputIsValid - ? Math.min(input, this.duration) - : 0; + this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0; // Logging this.debug.log(`Seeking to ${this.currentTime} seconds`); @@ -531,10 +500,7 @@ class Plyr { // Media duration can be NaN or Infinity before the media has loaded const realDuration = (this.media || {}).duration; - const duration = - !is.number(realDuration) || realDuration === Infinity - ? 0 - : realDuration; + const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration; // If config duration is funky, use regular duration return fauxDuration || duration; @@ -728,9 +694,7 @@ class Plyr { if (!options.includes(quality)) { const value = closest(options, quality); - this.debug.warn( - `Unsupported quality option: ${quality}, using ${value} instead`, - ); + this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`); quality = value; } @@ -929,9 +893,7 @@ class Plyr { const toggle = is.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state - this.media.webkitSetPresentationMode( - toggle ? states.pip : states.inline, - ); + this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline); } /** @@ -964,27 +926,16 @@ class Plyr { // Don't toggle if missing UI support or if it's audio if (this.supported.ui && !this.isAudio) { // Get state before change - const isHidden = hasClass( - this.elements.container, - this.config.classNames.hideControls, - ); + const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls); // Negate the argument if not undefined since adding the class to hides the controls const force = typeof toggle === 'undefined' ? undefined : !toggle; // Apply and get updated state - const hiding = toggleClass( - this.elements.container, - this.config.classNames.hideControls, - force, - ); + const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force); // Close menu - if ( - hiding && - this.config.controls.includes('settings') && - !is.empty(this.config.settings) - ) { + if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) { controls.toggleMenu.call(this, false); } @@ -1074,12 +1025,7 @@ class Plyr { replaceElement(this.elements.original, this.elements.container); // Event - triggerEvent.call( - this, - this.elements.original, - 'destroyed', - true, - ); + triggerEvent.call(this, this.elements.original, 'destroyed', true); // Callback if (is.function(callback)) { diff --git a/src/js/support.js b/src/js/support.js index 4681f5c7..6395293f 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -25,13 +25,9 @@ const support = { // Check for support // Basic functionality vs full UI check(type, provider, playsinline) { - const canPlayInline = - browser.isIPhone && playsinline && support.playsinline; + const canPlayInline = browser.isIPhone && playsinline && support.playsinline; const api = support[type] || provider !== 'html5'; - const ui = - api && - support.rangeInput && - (type !== 'video' || !browser.isIPhone || canPlayInline); + const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline); return { api, @@ -41,9 +37,7 @@ const support = { // Picture-in-picture support // Safari only currently - pip: (() => - !browser.isIPhone && - is.function(createElement('video').webkitSetPresentationMode))(), + pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(), // Airplay support // Safari only currently @@ -75,9 +69,7 @@ const support = { } try { - return Boolean( - type && this.media.canPlayType(type).replace(/no/, ''), - ); + return Boolean(type && this.media.canPlayType(type).replace(/no/, '')); } catch (err) { return false; } @@ -102,9 +94,7 @@ const support = { // Reduced motion iOS & MacOS setting // https://webkit.org/blog/7551/responsive-design-for-motion/ - reducedMotion: - 'matchMedia' in window && - window.matchMedia('(prefers-reduced-motion)').matches, + reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches, }; export default support; diff --git a/src/js/ui.js b/src/js/ui.js index 8c61d805..34fe7e82 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -14,16 +14,8 @@ import loadImage from './utils/loadImage'; const ui = { addStyleHook() { - toggleClass( - this.elements.container, - this.config.selectors.container.replace('.', ''), - true, - ); - toggleClass( - this.elements.container, - this.config.classNames.uiSupported, - this.supported.ui, - ); + toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true); + toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui); }, // Toggle native HTML5 media controls @@ -43,9 +35,7 @@ const ui = { // Don't setup interface if no support if (!this.supported.ui) { - this.debug.warn( - `Basic support only for ${this.provider} ${this.type}`, - ); + this.debug.warn(`Basic support only for ${this.provider} ${this.type}`); // Restore native controls ui.toggleNativeControls.call(this, true); @@ -103,25 +93,13 @@ const ui = { ); // Check for airplay support - toggleClass( - this.elements.container, - this.config.classNames.airplay.supported, - support.airplay && this.isHTML5, - ); + toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5); // Add iOS class - toggleClass( - this.elements.container, - this.config.classNames.isIos, - browser.isIos, - ); + toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); // Add touch class - toggleClass( - this.elements.container, - this.config.classNames.isTouch, - this.touch, - ); + toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); // Ready for API calls this.ready = true; @@ -171,9 +149,7 @@ const ui = { } // Default to media type - const title = !is.empty(this.config.title) - ? this.config.title - : 'video'; + const title = !is.empty(this.config.title) ? this.config.title : 'video'; const format = i18n.get('frameTitle', this.config); iframe.setAttribute('title', format.replace('{title}', title)); @@ -182,11 +158,7 @@ const ui = { // Toggle poster togglePoster(enable) { - toggleClass( - this.elements.container, - this.config.classNames.posterEnabled, - enable, - ); + toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable); }, // Set the poster image (async) @@ -217,9 +189,7 @@ const ui = { .then(() => { // Prevent race conditions if (poster !== this.poster) { - throw new Error( - 'setPoster cancelled by later call to setPoster', - ); + throw new Error('setPoster cancelled by later call to setPoster'); } }) .then(() => { @@ -237,21 +207,9 @@ const ui = { // Check playing state checkPlaying(event) { // Class hooks - toggleClass( - this.elements.container, - this.config.classNames.playing, - this.playing, - ); - toggleClass( - this.elements.container, - this.config.classNames.paused, - this.paused, - ); - toggleClass( - this.elements.container, - this.config.classNames.stopped, - this.stopped, - ); + toggleClass(this.elements.container, this.config.classNames.playing, this.playing); + toggleClass(this.elements.container, this.config.classNames.paused, this.paused); + toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped); // Set state Array.from(this.elements.buttons.play || []).forEach(target => { @@ -277,11 +235,7 @@ const ui = { // Timer to prevent flicker when seeking this.timers.loading = setTimeout(() => { // Update progress bar loading class state - toggleClass( - this.elements.container, - this.config.classNames.loading, - this.loading, - ); + toggleClass(this.elements.container, this.config.classNames.loading, this.loading); // Update controls visibility ui.toggleControls.call(this); @@ -294,15 +248,7 @@ const ui = { if (controls && this.config.hideControls) { // Show controls if force, loading, paused, or button interaction, otherwise hide - this.toggleControls( - Boolean( - force || - this.loading || - this.paused || - controls.pressed || - controls.hover, - ), - ); + this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover)); } }, }; diff --git a/src/js/utils/events.js b/src/js/utils/events.js index 9820fcae..9f734f04 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -27,21 +27,9 @@ const supportsPassiveListeners = (() => { })(); // Toggle event listener -export function toggleListener( - element, - event, - callback, - toggle = false, - passive = true, - capture = false, -) { +export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) { // Bail if no element, event, or callback - if ( - !element || - !('addEventListener' in element) || - is.empty(event) || - !is.function(callback) - ) { + if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) { return; } @@ -69,74 +57,28 @@ export function toggleListener( this.eventListeners.push({ element, type, callback, options }); } - element[toggle ? 'addEventListener' : 'removeEventListener']( - type, - callback, - options, - ); + element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options); }); } // Bind event handler -export function on( - element, - events = '', - callback, - passive = true, - capture = false, -) { - toggleListener.call( - this, - element, - events, - callback, - true, - passive, - capture, - ); +export function on(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, true, passive, capture); } // Unbind event handler -export function off( - element, - events = '', - callback, - passive = true, - capture = false, -) { - toggleListener.call( - this, - element, - events, - callback, - false, - passive, - capture, - ); +export function off(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, false, passive, capture); } // Bind once-only event handler -export function once( - element, - events = '', - callback, - passive = true, - capture = false, -) { +export function once(element, events = '', callback, passive = true, capture = false) { function onceCallback(...args) { off(element, events, onceCallback, passive, capture); callback.apply(this, args); } - toggleListener.call( - this, - element, - events, - onceCallback, - true, - passive, - capture, - ); + toggleListener.call(this, element, events, onceCallback, true, passive, capture); } // Trigger event @@ -173,9 +115,6 @@ export function unbindListeners() { // Run method when / if player is ready export function ready() { return new Promise( - resolve => - this.ready - ? setTimeout(resolve, 0) - : on.call(this, this.elements.container, 'ready', resolve), + resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)), ).then(() => {}); }