B4BY.588

: / home / sportmx / www / wp-content / plugins / facebook-conversion-pixel /
Filename : video.js
back
if ( typeof fcaPcOptions === 'object' && fcaPcOptions.video_enabled ) {

	class EventEmitter {

		constructor() {
			this.events = {}
		}

		on(event, listener) {
			if (typeof this.events[event] !== 'object') {
				this.events[event] = []
			}
			this.events[event].push(listener)
			return () => this.removeListener(event, listener)
		}

		removeListener(event, listener) {
			if (typeof this.events[event] === 'object') {
				const idx = this.events[event].indexOf(listener)
				if (idx > -1) {
					this.events[event].splice(idx, 1)
				}
			}
		}

		emit(event, ...args) {
			if (typeof this.events[event] === 'object') {
				this.events[event].forEach(listener => listener.apply(this, args))
			}
		}

		once(event, listener) {
			const remove = this.on(event, (...args) => {
				remove()
				listener.apply(this, args)
			})
		}
	}

	class FCA_PC_Video extends EventEmitter {

		constructor(selector) {
			super()

			this.video_ready = false

			if (typeof selector === undefined) {
				return
			}

			this.element = selector
			this.init()

		}

		init() {
			
			this.setup_events()
			this.type = this.video_type()
			this.load_api()
		}

		load_api() {
			switch (this.type) {
				case 'YOUTUBE':
					this.api_youtube_load()
					break
				case 'WISTIA':
					this.api_wistia_load()
					break
				case 'VIMEO':
					this.api_vimeo_load()
					break
			}
		}

		setup_events() {
			this.on( 'api_youtube_loaded', this.api_youtube_setup )
			this.on( 'api_vimeo_loaded', this.api_vimeo_setup )
			this.on( 'api_wistia_loaded', this.api_wistia_setup )
		}

		video_type() {
			let src = this.element.attr('src')

			if (src === '') {
				this.revoke( 'pixel cat video: video link not found.' )
				return false
			}

			if (src.indexOf('youtube.com') > -1) return 'YOUTUBE'
			if (src.indexOf('vimeo.com') > -1) return 'VIMEO'
			if (src.indexOf('fast.wistia.com') > -1) return 'WISTIA'
		}

		revoke( message ) {
			if ( fcaPcOptions.debug ) {
				console.log( message )
				console.log( 'pixel cat video: revoked ')
			}
			// Do some code that revoke video JS here.
		}

		//VIMEO

		api_vimeo_load() {
			jQuery.getScript( 'https://player.vimeo.com/api/player.js', () => {
				this.emit( 'api_vimeo_loaded' )
			} )
		}

		api_vimeo_setup() {
			let player_dom = this.element[0]
			try {
				this.api = new Vimeo.Player(player_dom)
				this.api.ready().then( () => {
					this.api_vimeo_ready()
				} )
			} catch ( e ) {
				if ( fcaPcOptions.debug)
					console.log( e.message )
				return
			}
		}

		api_vimeo_ready() {
			if (fcaPcOptions.debug) {
				console.log( 'Pixel Cat video: Vimeo video ready' )
			}

			this.video_ready = true

			this.api.getVideoId().then( id => {
				this.video_id = id
			} )

			this.api.getVideoTitle().then( title => {
				this.title = title
			} )

			this.api.getVideoUrl().then( url => {
				this.url = url
			} )

			this.api.getDuration().then( duration => {
				this.duration = duration
			} )

			this.events_triggered = {}

			this.api_vimeo_state_change()
		}

		api_vimeo_state_change() {
			this.api.on( 'play', event => {
				this.trigger_event( 'VideoPlay' )
				this.timer = setInterval( this.track_progress.bind(this), 1000 )
			} )

			this.api.on( 'pause', event => {
				this.trigger_event( 'VideoPause', { percentage_watched: this.percentage_watched() + '%' } )
				clearInterval( this.timer )
			} )

			this.api.on( 'ended', event => {
				this.trigger_event( 'VideoWatchToEnd' )
				clearInterval( this.timer )
			} )
		}

		//WISTIA

		api_wistia_load() {
			jQuery.getScript( '//fast.wistia.net/assets/external/E-v1.js', () => {
				this.emit( 'api_wistia_loaded' )
			} )
		}

		api_wistia_setup() {

			let player_dom = this.element

			let video_src = player_dom.attr('src')

			if (typeof video_src === 'undefined') {
				return
			}

			//GET VIDEO ID FROM URL

			const pattern = /(https:\/\/fast\.wistia\.com\/embed\/medias)\/(.*)\.jsonp/

			let match = video_src.match(pattern)

			if (match === null) {

				if ( fcaPcOptions.debug ) {
					console.log('no video id match')
				}

				return
			}

			this.url = match[1]

			let video_id = match[2]

			if ( typeof video_id === 'undefined' ) {
				if ( fcaPcOptions.debug ) {
					console.log ( 'pixel cat video: wistia video_id not found.' )
				}
				return
			}

			window._wq = window._wq || []

			this.api = window._wq

			this.api.push( {
				id: video_id,
				onReady: this.api_wistia_ready.bind(this)
			} )
		}

		api_wistia_ready( video ) {

			if ( fcaPcOptions.debug ) {
				console.log ( 'pixel cat video: wistia video ready.' )
			}

			this.video_ready = true
			this.api = video

			this.video_id = video.data.media.hashedId
			this.title = video.data.media.name !== undefined ? video.data.media.name : 'Untitled'
			this.url = this.url + '/' + this.video_id
			this.events_triggered = {}
			this.api_wistia_state_change.bind(this)()
		}

		api_wistia_state_change() {
			this.api.bind( 'play', event => {
				this.trigger_event( 'VideoPlay' )
			} )

			this.api.bind( 'pause', event => {
				this.trigger_event( 'VideoPause', { percentage_watched: this.percentage_watched() + '%' } )
			} )

			this.api.bind( 'percentwatchedchanged', ( percent, lastPercent ) => {
				this.track_progress()
			} )

			this.api.bind( 'end', event => {
				this.trigger_event( 'VideoWatchToEnd' )
			} )
		}

		//YOUTUBE

		api_youtube_load() {
			this.load_async_script( 'https://www.youtube.com/iframe_api' )
		}

		api_youtube_setup() {
			let player_dom = this.element[0]
			this.api = new YT.Player(player_dom, {
				events: {
					'onReady': this.api_youtube_ready.bind(this),
					'onStateChange': this.api_youtube_state_change.bind(this)
				}
			})
		}

		api_youtube_ready( event ) {

			if ( fcaPcOptions.debug ) {
				console.log( 'pixel cat video: youtube video ready')
			}

			// @todo: we will need to build this one in future to make sure the video is ready to use the object
			this.video_ready = true
			this.data = this.api.getVideoData()
			this.video_id = this.data.video_id
			this.title = this.data.title
			this.url = this.api.getVideoUrl()

			this.events_triggered = {}
		}

		api_youtube_state_change( event ) {
			if ( fcaPcOptions.debug ) {
				console.log( event )
			}

			switch ( event.data ) {
				case 0:
					// end video
					this.trigger_event( 'VideoWatchToEnd' )
					clearInterval( this.timer )
					break

				case 1:
					// play video
					this.trigger_event( 'VideoPlay' )
					// Since we check progress using range: ( percent >= 10 && percent < 25 )
					// So we do not need to set interval too fast. 1 - 2 seconds should be fine
					this.timer = setInterval( this.track_progress.bind(this), 1000 )
					break

				case 2:
					// pause video
					this.trigger_event( 'VideoPause',  { percentage_watched: this.percentage_watched() + '%' } )
					clearInterval( this.timer )
					break
			}
		}

		video_youtube_end() {
			if ( fcaPcOptions.debug ) {
				console.log( 'end' )
			}
		}

		load_async_script( url ) {
			let new_script = document.createElement('script')
			let first_script = document.getElementsByTagName('script')[0]
		
			new_script.src = url

	        first_script.parentNode.insertBefore(new_script, first_script)

			if ( fcaPcOptions.debug ) {
				console.log('pixel cat video: ' + url + ' has been loaded.')
			}
		}

		track_progress() {
			switch( this.video_type() ) {
				case 'YOUTUBE':
				case 'VIMEO':
				case 'WISTIA':
					this.video_track_progress()
					break

				// Other cases
			}
		}

		video_track_progress() {
			let percent = this.percentage_watched()

			if ( fcaPcOptions.debug ) {
				console.log( this.percentage_watched() )
			}

			// Need to cover all the cases and reduce interval time -> better performance
			// Use switch here for better code readable
			switch ( true ) {
				// 10% milestone
				case ( percent >= 10 && percent < 25 ):
					this.trigger_event('VideoWatch10Percent')
					break

				// 25% milestone
				case ( percent >= 25 && percent < 50 ):
					this.trigger_event('VideoWatch25Percent')
					break

				case ( percent >= 50 && percent < 75 ):
					this.trigger_event('VideoWatch50Percent')
					break

				case ( percent >= 75 && percent < 90 ):
					this.trigger_event('VideoWatch75Percent')
					break

				case ( percent >= 90 && percent < 100 ):
					this.trigger_event('VideoWatch90Percent')
					break
			}
		}

		video_params() {
			return {
				video_title: this.title,
				video_url: this.url,
				video_id: this.video_id
			}
		}

		percentage_watched() {
			switch( this.type ) {
				case 'YOUTUBE':
					return  Math.round( this.api.getCurrentTime() / this.api.getDuration() * 100 )
				
				case 'VIMEO':
					this.api.getCurrentTime().then( current_time => {
						this.current_time = current_time
					} )
					return  Math.round( this.current_time / this.duration * 100 )
					
				case 'WISTIA':
					return Math.round( this.api.time() / this.api.duration() * 100 )

				default:
					return false
			}
		}

		trigger_event( action, additional_params = {} ) {

			if ( this.events_triggered[action] ) { 
				return
			}

			let params = Object.assign( {}, this.video_params(), additional_params )

			this.emit( 'pixel_event', 'trackCustom', action, params )

			// Add exception for VideoPause event
			if (  action !== 'VideoPause' ) {
				this.events_triggered[action] = true
			}
		}


	}

	FCA_PC_Video.prototype.__proto__ = EventEmitter.prototype;

	function onYouTubeIframeAPIReady() {

		fcaPcVideos.forEach(video => {
			if (video.type !== 'YOUTUBE') {
				return
			}

			video.emit('api_youtube_loaded')	
		})
		
	}

	window.fcaPcVideos = [];

	// detect all videos on the page
	function detect_videos() {

		let videos = [];

		jQuery( 'iframe' ).each(function () {
			var char = jQuery(this)[0].src.includes( '?' ) ? '&' : '?'
			jQuery(this)[0].src = jQuery(this)[0].src + char + 'enablejsapi=1'
			videos.push(jQuery(this))
		})

		jQuery( 'script' ).each(function () {

			let src = jQuery(this).attr('src')

			if (typeof src === 'undefined') {
				return
			}

			if (src.indexOf('https://fast.wistia.com/embed/medias/') === -1) {
				return
			}

			videos.push(jQuery(this))

		})

		if (videos.length === 0) {

			if ( fcaPcOptions.debug ) {
				console.log('No videos detected')	
			}

			return
		}

		videos.forEach(function (video) {
			window.fcaPcVideos.push(new FCA_PC_Video(video))
		})

		
	}


	detect_videos()
	
}