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;