main/EmbedPlayerLoader.js

import EmbedPlayer from './classes/EmbedPlayer';
import customEvent from '../utils/customEvent';
import delegateEvent from '../utils/delegateEvent';
import Messenger from './Messenger';

/**
 * Loads video embeds that are present on the page.
 * Set's up a listener to check if video embeds are loaded dynamically via a liveblog.
 * Creates a EmbedPlayer instance for each video.
 *
 * @module EmbedPlayerLoader
 * @prop {string} initSelector - Selector for all video embeds on the page
 * @prop {string} dynamicRegionSelector - Selector for page area(s) where videos may be added
 */
const EmbedPlayerLoader = {
	initSelector: '[data-displayinline-type="video"]',
	dynamicRegionSelector: '#wpcom-liveblog-container',

	/**
	 * Load video embeds present on the page.
	 * Listen for video embeds added via a liveblog.
	 *
	 * @method init
	 */
	init() {
		const $players = document.querySelectorAll( this.initSelector );

		let autoplay = false;

		// initialize each player element
		[].forEach.call( $players, ( $player ) => {
			const $embedPlayer = new EmbedPlayer( $player );
			$embedPlayer.init();
			autoplay = autoplay || $player.dataset.autoplay;
		});

		// Fire custom event once all embed players have been initialized.
		customEvent.fire( window, 'embedPlayersInit', {
			hasAutoplay: autoplay,
		});

		// watch for liveblog players that are dynamically added
		delegateEvent( this.dynamicRegionSelector, 'click', this.initSelector, ( e, $player ) => {
			// don't do this if we've already initialized this object
			if ( ! $player.dataset.displayinlineInit ) {
				const $embedPlayer = new EmbedPlayer( $player );
				$embedPlayer.init();
				$embedPlayer.start();
			}
		});

		// Register iframe receiver for communicating with video player in the iframe.
		Messenger.registerReceiver( 'gnca_video', EmbedPlayer );
	},
};

export default EmbedPlayerLoader;