main/SendToNews.js

import customEvent from '../utils/customEvent';
import positionSticky from '../utils/positionSticky';
import InView from '../utils/classes/InView';

/**
 * SendToNews
 *
 * Dynamically initiate send to news player
 *
 * @module SendToNews
 */

const SendToNews = {
	selectors: {
		player: '.c-video--sendToNews',
		script: 'script[data-type="s2nScript"]',
	},

	/**
	 * If position sticky is supported, load send to news player right away.
	 * Otherwise, set up in view listener to load the player in view
	 * for better user experience on IE as player doesn't stick on IE.
	 *
	 * @method init
	 */
	init() {
		let watcher = null;
		[].forEach.call( document.querySelectorAll( this.selectors.player ), ( $player ) => {
			if ( positionSticky.supported() ) {
				this.loadPlayer( false, $player );
			} else {
				$player.addEventListener( customEvent.IN_VIEW, evt => this.loadPlayer( evt, $player ) );

				// set up in view watcher for Send to news player
				if ( ! watcher ) {
					watcher = new InView({
						threshold: 0.1,
					}, 'sendToNewsWatcher' );
					watcher.init();
				}

				watcher.startWatching( $player );
			}
		});
	},

	/**
	 * Load the send to news player script.
	 *
	 * @method loadPlayer
	 * @param {event} event - in view event, false if function not triggered by in view
	 * @param {HTMLElement} $player - player DOM element
	 */
	loadPlayer( event, $player ) {
		if ( ! event || ( event.detail && event.detail.isInView ) ) {
			const $script = $player.querySelector( this.selectors.script );
			if ( $script && ! $script.src && $script.dataset.src ) {
				// Triggered by in view, turn off async.
				if ( event ) {
					$script.removeAttribute( 'async' );
				}

				$script.src = $script.dataset.src;
				$script.dataset.src = '';
			}
		}
	},
};

export default SendToNews;