/*
	Author: Jeremy Espinosa
	Filename: youtube.js
	Description: To have controls on youtube videos on Iframe
	Dependencies:
		- jQuery
		- YouTube Iframe API
	How to use:
		1. Each iframe must have an ID
		2. iframe must have this attribute allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" to make the playVideo() work
		2. Sample HTML:
		<div class="banner-video js-video">
			<div class="banner-video__container">
				<iframe id="video-placeholder1" width="958" height="539" src="https://www.youtube.com/embed/YyMiZCXRMQY?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				<div class="banner-video__overlay js-video-action">
					<div class="banner-video__action"></div>
				</div>
			</div>
		</div>
*/

;(function($) {
    'use strict'

    B2C.youtube = {
        init: function(option) {
            // set default
            this._default = {
                target: '.js-video',
                targetAction: '.js-video-action'
            }

            this._option = $.extend(true, this._default, option)

            if (!$(this._option.target).length) return

            this.domCache()
            this.onloadYoutube()
        },

        domCache: function() {
            this.$target = $(this._option.target)
        },

        onloadYoutube: function() {
            const self = this
            let tag = document.createElement('script'),
                scriptTag = document.getElementsByTagName('script')[0],
                player,
                players = []

            // added youtube iframe api to manipulate the youtube on iframe
            tag.src = 'https://www.youtube.com/iframe_api'
            scriptTag.parentNode.insertBefore(tag, scriptTag)

            window.onYouTubeIframeAPIReady = function() {
                self.$target.find('iframe').each(function() {
                    let iframeId = $(this).prop('id')

                    player = new YT.Player(iframeId, {
                        events: {
                            onReady: onPlayerReady,
                            onStateChange: onPlayerStateChange
                        }
                    })

                    // added the player to an array for each player to have an instance
                    players.push(player)
                })
            }

            window.onPlayerReady = function(e) {
                let $element = $(e.target.a)[0]

                // this play the video when the overlay/play icon is clicked
                $($element)
                    .parents(self._option.target)
                    .find(self._option.targetAction)
                    .on('click', function() {
                        $(this).fadeOut()
                        e.target.playVideo()
                    })
            }

            window.onPlayerStateChange = function(e) {
                // this will check if the youtube is playing
                // it will stop other videos if other video started playing
                if (e.data === YT.PlayerState.PLAYING) {
                    let tempId = e.target.a.id
                    for (let i = 0; i < players.length; i++) {
                        if (players[i].a.id !== tempId) players[i].pauseVideo()
                    }
                }
            }
        }
    }

    // initialize youtube
    const defaultVideo = Object.create(B2C.youtube)

    defaultVideo.init()
})(jQuery)
