@penskemediacorp/larva-js 1.24.1 → 1.26.0

package/src/interface/ProfileFilter/__test__/ProfileFilter.test.js

@@ -30,34 +30,34 @@ describe( 'initProfileFilter', () => {
 	initProfileFilter();
 
 	it( 'initializes the class', () => {
-		let obj = document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
+		const obj =
+			document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
 
 		assert.equal( typeof obj, 'object' );
 	} );
-
 } );
 
 describe( 'ProfileFilter', () => {
-	var pf = new ProfileFilter( document.querySelector( '.js-ProfileFilter' ) );
+	const pf = new ProfileFilter(
+		document.querySelector( '.js-ProfileFilter' )
+	);
 
-	var allCheckboxes = [ ... document.querySelectorAll( 'input[type="checkbox"]' ) ];
+	const allCheckboxes = [
+		...document.querySelectorAll( 'input[type="checkbox"]' ),
+	];
 
-	var checkedBoxes = [
-		allCheckboxes[2], // top200location, new-york
-		allCheckboxes[4], // collectingarea, llamas
-		allCheckboxes[5]  // collectingarea, coffee
+	const checkedBoxes = [
+		allCheckboxes[ 2 ], // top200location, new-york
+		allCheckboxes[ 4 ], // collectingarea, llamas
+		allCheckboxes[ 5 ], // collectingarea, coffee
 	];
 
 	it( 'gets initial query from url', () => {
-
 		// let obj = document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
 		const windowLocationSearchMock = '?filter_top200year=2020%2C2019';
 		const expectedObject = {
-			'page': 1,
-			'filter_top200year': [
-				'2020',
-				'2019'
-			]
+			page: 1,
+			filter_top200year: [ '2020', '2019' ],
 		};
 
 		pf.setQueryObject( windowLocationSearchMock );
@@ -89,14 +89,9 @@ describe( 'ProfileFilter', () => {
 
 	it( 'creates an object with the names/values from checked boxes', () => {
 		const expectedObject = {
-			'filter_top200location': [
-				'new-york'
-			],
-			'filter_collectingarea': [
-				'llamas',
-				'coffee'
-			],
-			'page': 1
+			filter_top200location: [ 'new-york' ],
+			filter_collectingarea: [ 'llamas', 'coffee' ],
+			page: 1,
 		};
 
 		pf.setQueryObject();
@@ -106,13 +101,16 @@ describe( 'ProfileFilter', () => {
 	} );
 
 	it( 'creates query string from the object', () => {
-		const expectedUrl = 'filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			'filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		assert.equal( pf.createQueryStringFromObject(), expectedUrl );
 	} );
 
 	it( 'updates the action URL', () => {
-		const expectedUrl = pf.actionUrl + '?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			pf.actionUrl +
+			'?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		pf.updateActionAttr();
 
@@ -120,21 +118,25 @@ describe( 'ProfileFilter', () => {
 	} );
 
 	it( 'gets url to fetch from rest api', () => {
-		const expectedUrl = pf.restUrlBase + '?top200location=new-york&collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			pf.restUrlBase +
+			'?top200location=new-york&collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		assert.equal( pf.getRestEndpointUrl(), expectedUrl );
 	} );
 
 	it( 'increments the paged value when clicked', () => {
-
 		pf.increasePage();
 
 		assert.equal( pf.page, 2 );
 	} );
 
 	it( 'updates the fetch url with new paged value', () => {
-		const expectedUrl = pf.restUrlBase + '?top200location=new-york&collectingarea=llamas%2Ccoffee&page=2'; // comma is encoded
-		const searchUrlStub = '?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1';
+		const expectedUrl =
+			pf.restUrlBase +
+			'?top200location=new-york&collectingarea=llamas%2Ccoffee&page=2'; // comma is encoded
+		const searchUrlStub =
+			'?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1';
 
 		pf.setQueryObject( searchUrlStub ); // This would be called by loadMoreClick
 
@@ -145,14 +147,19 @@ describe( 'ProfileFilter', () => {
 		pf.maxPages = 2; // this.queryObject.page is currently 2
 		pf.maybeHideLoadMore();
 
-		assert.equal( pf.loadMoreButton.classList.contains( 'a-hidden' ), true );
+		assert.equal(
+			pf.loadMoreButton.classList.contains( 'a-hidden' ),
+			true
+		);
 	} );
 
 	it( 'shows load more if there are more pages', () => {
 		pf.maxPages = 6; // this.queryObject.page is currently 2
 		pf.maybeHideLoadMore();
 
-		assert.equal( pf.loadMoreButton.classList.contains( 'a-hidden' ), false );
+		assert.equal(
+			pf.loadMoreButton.classList.contains( 'a-hidden' ),
+			false
+		);
 	} );
-
 } );

package/src/interface/ProfileFilter/index.js

@@ -1,6 +1,6 @@
 import ProfileFilter from './ProfileFilter';
 
 export default function initProfileFilter() {
-	const filters = [ ... document.querySelectorAll( '.js-ProfileFilter' ) ];
-	filters.forEach( el => el.ProfileFilter = new ProfileFilter( el ) );
+	const filters = [ ...document.querySelectorAll( '.js-ProfileFilter' ) ];
+	filters.forEach( ( el ) => ( el.ProfileFilter = new ProfileFilter( el ) ) );
 }

package/src/interface/SelectNav/SelectNav.js

@@ -10,25 +10,27 @@
  * It is build to work with the patterns `o-select-nav` and `c-select-option`
  *
  * @since 11-22-2019
-*/
+ */
 
 export default class SelectNav {
-
 	constructor( el ) {
-
 		this.el = el;
 
 		this.selectEl = el.querySelector( '.js-SelectNav-select' );
 
 		// If there is a class js-SelectNav-redirect, then only redirect.
 		if ( el.classList.contains( 'js-SelectNav-redirect' ) ) {
-			this.selectEl.addEventListener( 'change', this.onChange.bind( this ) );
+			this.selectEl.addEventListener(
+				'change',
+				this.onChange.bind( this )
+			);
 		}
-
 	}
 
 	onChange() {
-		const redirectTo = this.selectEl.options[ this.selectEl.selectedIndex ].dataset.selectUrl;
+		const redirectTo =
+			this.selectEl.options[ this.selectEl.selectedIndex ].dataset
+				.selectUrl;
 		if ( redirectTo ) {
 			window.location.href = redirectTo;
 		}

package/src/interface/SelectNav/index.js

@@ -2,8 +2,7 @@ import SelectNav from './SelectNav';
 
 // Initialize all SelectNav.
 export default function initSelectNav() {
+	const SelectNavs = [ ...document.querySelectorAll( '.js-SelectNav' ) ];
 
-	const SelectNavs = [ ... document.querySelectorAll( '.js-SelectNav' ) ];
-
-	SelectNavs.forEach( el => new SelectNav( el ) );
+	SelectNavs.forEach( ( el ) => new SelectNav( el ) );
 }

package/src/interface/SideSkinAd/SideSkinAd.js

@@ -9,13 +9,11 @@
  * Use a counter to ensure this script only runs one time.
  **/
 
-
 import removeDesktopXlClasses from '../../utils/removeDesktopXlClasses';
 
 // TODO: Should refactor to follow our exporting classes pattern, and
 // include the conditions from index.js in the class
 export default function reflowForSideSkinAd() {
-
 	if ( undefined === window.pmc_side_skin_classes_removed ) {
 		document.documentElement.classList.add( 'has-side-skins' );
 		removeDesktopXlClasses();

package/src/interface/SideSkinAd/index.js

@@ -1,31 +1,31 @@
 // eslint-disable camelcase
 import reflowForSideSkinAd from './SideSkinAd';
 
-export default function initSideSkinAd ( e ) {
-
+export default function initSideSkinAd( e ) {
 	const parametersMessagePattern = 'pmcadm:dfp:skinad:parameters';
 	let serializedParameters = '';
 	let atlasSkinObj = '';
 
 	if ( 'object' === typeof window.pmc_dfp_skin ) {
 		atlasSkinObj = window.pmc_dfp_skin;
-	} else {
-		if ( undefined !== window.pmc && undefined !== window.pmc.skinAds ) {
-			atlasSkinObj = window.pmc.skinAds;
-		}
+	} else if ( undefined !== window.pmc && undefined !== window.pmc.skinAds ) {
+		atlasSkinObj = window.pmc.skinAds;
 	}
 
 	if ( 'string' === typeof e.data && 'object' === typeof atlasSkinObj ) {
-		if ( parametersMessagePattern === e.data.substring( 0, parametersMessagePattern.length ) ) {
-			serializedParameters = e.data.substring( parametersMessagePattern.length );
+		if (
+			parametersMessagePattern ===
+			e.data.substring( 0, parametersMessagePattern.length )
+		) {
+			serializedParameters = e.data.substring(
+				parametersMessagePattern.length
+			);
 
 			if ( serializedParameters ) {
-
 				reflowForSideSkinAd();
 
 				atlasSkinObj.refresh_skin_rails();
 			}
-
 		}
 	}
 }

package/src/interface/TabsManager/TabsManager.js

@@ -4,10 +4,9 @@
  * @todo Add hover support
  * @see https://bitbucket.org/penskemediacorp/pmc-indiewire-2016/src/master/assets/src/js/modules/TabsManager/TabsManager.js
  *
-*/
+ */
 
 export default class TabsManager {
-
 	/**
 	 * Initialize
 	 *
@@ -17,17 +16,20 @@ export default class TabsManager {
 		this.el = el;
 		this.customInteraction = 'click';
 		this.toggleEl = this.el.querySelectorAll( '.js-TabsToggle' );
-		this.panels = [ ... this.el.querySelectorAll( '.js-TabsPanel' ) ];
+		this.panels = [ ...this.el.querySelectorAll( '.js-TabsPanel' ) ];
 
 		this.onClick = this.onClick.bind( this );
 		this.toggle = this.toggle.bind( this );
 		this.deactivatePanels = this.deactivatePanels.bind( this );
 
-		this.toggleEl.forEach( toggle => toggle.addEventListener( 'click', this.onClick ) );
+		this.toggleEl.forEach( ( toggle ) =>
+			toggle.addEventListener( 'click', this.onClick )
+		);
 	}
 
 	/**
 	 * Trigger Toggle event
+	 *
 	 * @param {event} event Triggered event
 	 */
 	onClick( event ) {
@@ -42,6 +44,7 @@ export default class TabsManager {
 
 	/**
 	 * Find and activate desired tab panel
+	 *
 	 * @param {event} event Previously triggered event
 	 */
 	toggle( event ) {
@@ -73,12 +76,14 @@ export default class TabsManager {
 	 * Remove active status from all items
 	 */
 	deactivatePanels() {
-		const toggles = this.el.querySelectorAll( '.js-TabsToggle.is-active, .js-TabsPanel.is-active' );
+		const toggles = this.el.querySelectorAll(
+			'.js-TabsToggle.is-active, .js-TabsPanel.is-active'
+		);
 
 		if ( ! toggles || 0 === toggles.length ) {
 			return;
 		}
 
-		toggles.forEach( item => item.classList.remove( 'is-active' ) );
+		toggles.forEach( ( item ) => item.classList.remove( 'is-active' ) );
 	}
 }

package/src/interface/TabsManager/index.js

@@ -4,6 +4,6 @@ export default function initTabsManager() {
 	const tabs = [ ...document.querySelectorAll( '.js-Tabs' ) ];
 
 	if ( tabs.length ) {
-		tabs.forEach( el => el.pmcTabsManager = new TabsManager( el ) );
+		tabs.forEach( ( el ) => ( el.pmcTabsManager = new TabsManager( el ) ) );
 	}
 }

package/src/interface/Tooltip/Tooltip.js

@@ -18,7 +18,6 @@
  */
 
 export default class Tooltip {
-
 	/**
 	 * Class constructor
 	 *

package/src/interface/VideoShowcase/VideoShowcase.js

@@ -21,18 +21,21 @@ import initCollapsibles from '../Collapsible';
  */
 
 export default class VideoShowcase {
-
 	constructor( el ) {
 		this.el = el;
 
 		// All triggers that contain video IDs to be played on click.
-		this.triggers = [ ... el.querySelectorAll( '[data-video-showcase-trigger]' ) ];
+		this.triggers = [
+			...el.querySelectorAll( '[data-video-showcase-trigger]' ),
+		];
 
 		// The main player that also, optionally may be a trigger. It should contain an iframe and #jwplayerContainer.
 		this.player = el.querySelector( '[data-video-showcase-player]' );
 
 		// Elements within the player that will be hidden after the first play.
-		this.elementsToHide = [ ... this.el.querySelectorAll( '.is-to-be-hidden' ) ];
+		this.elementsToHide = [
+			...this.el.querySelectorAll( '.is-to-be-hidden' ),
+		];
 
 		// Attributes that will be removed from the player once it is initialized. Only relevant for players that are
 		// also triggers.
@@ -42,13 +45,13 @@ export default class VideoShowcase {
 			'data-video-showcase-dek',
 			'data-video-showcase-permalink',
 			'data-video-showcase-type',
-			'href'
+			'href',
 		];
 
 		/**
 		 * State.
 		 *
-		 * @type {object}
+		 * @type {Object}
 		 * @property {boolean} isPlayerSetup - Whether or not the player has been setup or played. Set in onFirstTimePlay()
 		 * @property {string} videoID - A Youtube or JWPlayer ID extracted from a `data-video-showcase-trigger` e.g. f1FX5wvC3DA
 		 * @property {string} videoType - "youtube" or "jwplayer" from `data-video-showcase-type`
@@ -57,7 +60,7 @@ export default class VideoShowcase {
 			isPlayerSetup: false,
 			hasSocialShare: false,
 			videoID: '',
-			videoType: ''
+			videoType: '',
 		};
 
 		/**
@@ -65,7 +68,7 @@ export default class VideoShowcase {
 		 *
 		 * Note: the title and dek are using class selectors so they can be added to existing patterns.
 		 *
-		 * @type {object}
+		 * @type {Object}
 		 * @property {element} title - A anchor element that will receive both a permalink and heading text.
 		 * @property {element} dek - An element containing a direct child paragraph that will support the dek text.
 		 * @property {element} iframe - The iframe that will recieve an src when a trigger with the Youtube video type is clicked.
@@ -74,19 +77,30 @@ export default class VideoShowcase {
 		 */
 		this.playerUI = {
 			title: el.querySelector( '.js-VideoShowcase-title' ),
-			sponsoredBadge: el.querySelector( '.js-video-showcase-sponsored-badge' ),
+			sponsoredBadge: el.querySelector(
+				'.js-video-showcase-sponsored-badge'
+			),
 			dek: el.querySelector( '.js-VideoShowcase-dek' ),
 			iframe: el.querySelector( '[data-video-showcase-iframe]' ),
-			jwplayerContainer: el.querySelector( '[data-video-showcase-jwplayer], #jwplayerContainer' ),
-			social: el.querySelector( '[data-video-showcase-player-social-share]' )
+			jwplayerContainer: el.querySelector(
+				'[data-video-showcase-jwplayer], #jwplayerContainer'
+			),
+			social: el.querySelector(
+				'[data-video-showcase-player-social-share]'
+			),
 		};
 
 		this.init();
-		if (this.player.dataset.videoShowcaseAutoplay) {
-			this.handleTriggerClick(null, this.triggers[0]);
+		if ( this.player.dataset.videoShowcaseAutoplay ) {
+			this.handleTriggerClick( null, this.triggers[ 0 ] );
 		} else {
-			delegateEvent( this.el, 'click', '[data-video-showcase-trigger]', this.handleTriggerClick.bind( this ) );
-		}	
+			delegateEvent(
+				this.el,
+				'click',
+				'[data-video-showcase-trigger]',
+				this.handleTriggerClick.bind( this )
+			);
+		}
 	}
 
 	/**
@@ -111,7 +125,7 @@ export default class VideoShowcase {
 	 *
 	 * @param {element} el - A trigger.
 	 *
-	 * @return {object} - An object containing the data needed to update the player.
+	 * @return {Object} - An object containing the data needed to update the player.
 	 * @property {string} title - Title text from the `data-video-showcase-title`
 	 * @property {string} dek - Dek text from the `data-video-showcase-dek`
 	 * @property {string} permalink - Link from `data-video-showcase-permalink`
@@ -127,12 +141,14 @@ export default class VideoShowcase {
 			sponsored: el.dataset.videoShowcaseSponsored,
 			dek: el.dataset.videoShowcaseDek,
 			permalink: el.dataset.videoShowcasePermalink,
-			socialString: ( function( data ) {
+			socialString: ( function ( data ) {
 				if ( window.wp && hasSocialShare ) {
-					let template = wp.template( `trigger-social-share-${triggerID}` );
+					const template = wp.template(
+						`trigger-social-share-${ triggerID }`
+					);
 					return template( data );
 				}
-			}() )
+			} )(),
 		};
 	}
 
@@ -142,14 +158,14 @@ export default class VideoShowcase {
 	 * Apply the assembled data to the UI.
 	 *
 	 * @param {element} el - A trigger.
-	 * @param {object} data - An object of data from getPlayerCardData.
+	 * @param {Object} data - An object of data from getPlayerCardData.
 	 */
 
 	updatePlayerCardData( el, data ) {
 		if ( this.playerUI.title && data.title ) {
 			this.playerUI.title.innerText = data.title;
 		}
-		
+
 		if ( this.playerUI.title && data.permalink ) {
 			this.playerUI.title.setAttribute( 'href', data.permalink );
 		}
@@ -172,7 +188,9 @@ export default class VideoShowcase {
 	}
 
 	updateCardSocialShare( html ) {
-		this.playerUI.social.removeChild( this.playerUI.social.querySelector( 'ul' ) );
+		this.playerUI.social.removeChild(
+			this.playerUI.social.querySelector( 'ul' )
+		);
 
 		// NOTE: html comes from JS template with escaped data.
 		this.playerUI.social.insertAdjacentHTML( 'beforeend', html );
@@ -189,17 +207,16 @@ export default class VideoShowcase {
 	 * @param {string} type - "youtube" or "jwplayer"
 	 */
 	returnUrl( id, type ) {
-
 		if ( 'youtube' === type ) {
-			return `https://www.youtube.com/embed/${id}`;
+			return `https://www.youtube.com/embed/${ id }`;
 		}
 
 		if ( 'jwplayer' === type ) {
-			return `https://content.jwplatform.com/feeds/${id}.json`;
+			return `https://content.jwplatform.com/feeds/${ id }.json`;
 		}
 
 		if ( 'twitch' === type ) {
-			return `https://player.twitch.tv/?video=${id}`;
+			return `https://player.twitch.tv/?video=${ id }`;
 		}
 	}
 
@@ -210,7 +227,10 @@ export default class VideoShowcase {
 	 */
 	playYoutube( youtubeUrl ) {
 		this.playerUI.iframe.removeAttribute( 'hidden' );
-		this.playerUI.iframe.setAttribute( 'src', `${youtubeUrl}?rel=0&autoplay=1&showinfo=0&controls=2&rel=0&modestbranding=0` );
+		this.playerUI.iframe.setAttribute(
+			'src',
+			`${ youtubeUrl }?rel=0&autoplay=1&showinfo=0&controls=2&rel=0&modestbranding=0`
+		);
 	}
 
 	/**
@@ -218,9 +238,12 @@ export default class VideoShowcase {
 	 *
 	 * @param {string} twitchUrl - A Twitch embed URL from returnUrl.
 	 */
-	 playTwitch( twitchUrl ) {
+	playTwitch( twitchUrl ) {
 		this.playerUI.iframe.removeAttribute( 'hidden' );
-		this.playerUI.iframe.setAttribute( 'src', `${twitchUrl}&autoplay=true&parent=${window.location.hostname}` );
+		this.playerUI.iframe.setAttribute(
+			'src',
+			`${ twitchUrl }&autoplay=true&parent=${ window.location.hostname }`
+		);
 	}
 
 	/**
@@ -232,21 +255,21 @@ export default class VideoShowcase {
 	 * getPlaylist() first to retrieve an individual video, then play it, but this was working.
 	 *
 	 * @link https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/#playlist
-	 *
+	 * @param playlistUrl
 	 * @param {string} jwplayerUrl - A Youtube embed URL from returnUrl.
 	 */
 	playJW( playlistUrl ) {
-
 		this.playerUI.jwplayerContainer.removeAttribute( 'hidden' );
 
 		if ( window.pmc_jwplayer ) {
-			window.pmc_jwplayer( this.playerUI.jwplayerContainer.id ).setup({
-				'playlist': playlistUrl,
-				'aspectratio': '16:9'
-			}).play();
-
+			window
+				.pmc_jwplayer( this.playerUI.jwplayerContainer.id )
+				.setup( {
+					playlist: playlistUrl,
+					aspectratio: '16:9',
+				} )
+				.play();
 		}
-
 	}
 
 	/**
@@ -258,11 +281,11 @@ export default class VideoShowcase {
 	 * @param {element} el - Clicked trigger element.
 	 */
 	handleTriggerClick( e, el ) {
-		if (e) {
+		if ( e ) {
 			e.preventDefault();
 		}
 
-		let previousVideoType = this.state.videoType;
+		const previousVideoType = this.state.videoType;
 
 		this.state.videoType = el.dataset.videoShowcaseType;
 		this.state.videoID = el.dataset.videoShowcaseTrigger;
@@ -282,7 +305,7 @@ export default class VideoShowcase {
 	 * @param {string} type - "youtube" or "jwplayer" or "twitch"
 	 */
 	playVideo( id, type ) {
-		let url = this.returnUrl( id, type );
+		const url = this.returnUrl( id, type );
 
 		if ( 'youtube' === type ) {
 			this.playYoutube( url );
@@ -300,11 +323,14 @@ export default class VideoShowcase {
 	// Remove any trigger-related data attributes and hide any elements that are not relevant for the player.
 	onFirstTimePlay() {
 		if ( false === this.state.isPlayerSetup ) {
-
-			this.el.dispatchEvent( new CustomEvent('firstVideoPlay') );
-
-			this.elementsToHide.forEach( e => e.setAttribute( 'hidden', '' ) );
-			this.attributesToRemoveFromPlayer.forEach( attr => this.player.parentNode.removeAttribute( attr ) );
+			this.el.dispatchEvent( new CustomEvent( 'firstVideoPlay' ) );
+
+			this.elementsToHide.forEach( ( e ) =>
+				e.setAttribute( 'hidden', '' )
+			);
+			this.attributesToRemoveFromPlayer.forEach( ( attr ) =>
+				this.player.parentNode.removeAttribute( attr )
+			);
 			this.state.isPlayerSetup = true;
 		}
 	}
@@ -317,7 +343,9 @@ export default class VideoShowcase {
 	 * @param {string} id - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
 	 */
 	updatePlayerUI( id ) {
-		const clickedTrigger = this.el.querySelector( `[data-video-showcase-trigger="${id}"]` );
+		const clickedTrigger = this.el.querySelector(
+			`[data-video-showcase-trigger="${ id }"]`
+		);
 		const data = this.getPlayerCardData( clickedTrigger );
 
 		this.setActiveTrigger( id );
@@ -336,7 +364,6 @@ export default class VideoShowcase {
 	 * @param {string} pastType - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
 	 */
 	resetPlayer( pastType ) {
-
 		if ( 'jwplayer' === pastType && window.pmc_jwplayer ) {
 			window.pmc_jwplayer( 'jwplayerContainer' ).remove();
 			this.playerUI.jwplayerContainer.setAttribute( 'hidden', '' );
@@ -350,7 +377,7 @@ export default class VideoShowcase {
 
 	// Remove `is-playing` class from all triggers.
 	resetAllTriggers() {
-		this.triggers.forEach( el => el.classList.remove( 'is-playing' ) );
+		this.triggers.forEach( ( el ) => el.classList.remove( 'is-playing' ) );
 	}
 
 	/**
@@ -359,7 +386,9 @@ export default class VideoShowcase {
 	 * @param {string} id - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
 	 */
 	setActiveTrigger( id ) {
-		let trigger = this.el.querySelector( `[data-video-showcase-trigger="${id}"]` );
+		const trigger = this.el.querySelector(
+			`[data-video-showcase-trigger="${ id }"]`
+		);
 
 		this.resetAllTriggers();
 
@@ -367,5 +396,4 @@ export default class VideoShowcase {
 			trigger.classList.add( 'is-playing' );
 		}
 	}
-
 }

package/src/interface/VideoShowcase/index.js

@@ -1,9 +1,13 @@
 import VideoShowcase from './VideoShowcase';
 
 export default function initVideoShowcase() {
-	const videoShowcases = [ ... document.querySelectorAll( '[data-video-showcase]' ) ];
+	const videoShowcases = [
+		...document.querySelectorAll( '[data-video-showcase]' ),
+	];
 
 	if ( videoShowcases.length ) {
-		videoShowcases.forEach( el => el.pmcVideoShowcase = new VideoShowcase( el ) );
+		videoShowcases.forEach(
+			( el ) => ( el.pmcVideoShowcase = new VideoShowcase( el ) )
+		);
 	}
 }