HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/topswtw.komma.pro/wwwroot/js/app/modules/youtubeHandler.js
/* ==========================================================================
    Youtube handler
 ========================================================================== */

define([],function() {

    var getScript = function (source, callback) {
        var script = document.createElement('script');
        script.async = 1;

        var scripts = document.getElementsByTagName('script');
        var prior = scripts[scripts.length - 1];

        script.onload = script.onreadystatechange = function (_, isAbort) {
            if (isAbort || !script.readyState || /loaded|compvare/.test(script.readyState)) {
                script.onload = script.onreadystatechange = null;
                script = undefined;

                if (!isAbort) {
                    if (callback) callback();
                }
            }
        };

        script.src = source;
        prior.parentNode.insertBefore(script, prior);
    };

    var YoutubeHandler = {

        youtubeClass : '.youtube-player',
        players: [],

        init : function()
        {
            // Get the youtube players containers
            var youtubePlayers = document.querySelectorAll(YoutubeHandler.youtubeClass);
            var youtubePlayersAmount = youtubePlayers.length;

            for(var i = 0; i < youtubePlayersAmount; i++){

                var youtubePlayer = youtubePlayers[i];


                var youtubePlayerId = youtubePlayer.getAttribute('id');
                if(youtubePlayerId !== null )
                {
                    // Strip the necessary data from the html and create objects from it
                    var youtubeElement = {
                        id: youtubePlayer.getAttribute('id'),
                        link: youtubePlayer.getAttribute('data-youtube-link'),
                        autoPlay: parseInt(youtubePlayer.getAttribute('data-auto-play')),
                    };

                    YoutubeHandler.players.push(youtubeElement);
                }
                else{
                    console.log("Element not include because there isn't a id on the player");
                    console.log(youtubePlayer);
                }
            }

            if(youtubePlayersAmount >= 1) YoutubeHandler.initYoutube();

        },

        /**
         * Check if external script is loaded
         *
         */
        initYoutube: function() {
            // See if YT variable exists
            if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
                // Setup API ready function
                window.onYouTubePlayerAPIReady = function() {
                    YoutubeHandler.loadPlayers();
                };
                // Load external script
                getScript('https://www.youtube.com/iframe_api');
                // If YT already exists load player
            } else {
                YoutubeHandler.loadPlayers();
            }
        },

        /**
         * Create the Youtube player(s) with parameters
         * And rewrite the players to key them by the element id
         *
         */
        loadPlayers: function() {

            var players = [];

            var youtubePlayersAmount = YoutubeHandler.players.length;
            for(var i = 0; i < youtubePlayersAmount; i++){

                var youtubePlayer = YoutubeHandler.players[i];

                // Load player
                youtubePlayer.player = new YT.Player(youtubePlayer.id,{
                    height: 1080,
                    width: 1920,
                    videoId: youtubePlayer.link,
                    host: 'https://www.youtube-nocookie.com',
                    playerVars: {
                        // modestbranding: 1,
                        // showinfo: 0,
                        rel: 0,
                        disablekb: 1,
                        controls: 1,
                        iv_load_policy: 3,
                        autoplay: youtubePlayer.autoPlay
                    },
                    events: {
                        'onReady': YoutubeHandler.onReady,
                        'onStateChange': YoutubeHandler.onStateChange
                    }
                });

                players[youtubePlayer.id] = youtubePlayer;

            }

            YoutubeHandler.players = players;

        },

        /**
         * When player is ready to play
         */
        onReady : function(event) {

            var playerContainerId = event.target.getIframe().getAttribute('id');
            var player = YoutubeHandler.players[playerContainerId].player;

            player.setPlaybackQuality('hd720');

            // Show video
            // setTimeout(function(){ $('#' + playerContainerId).stop().animate({ opacity: 1 },1000) },800);

            // If not on tabvar or mobile, play on high quality
            // player.mute();
            // player.playVideo();
            // player.setPlaybackQuality('hd1080');
        },

        /**
         * Listener for Youtube state change
         */
        onStateChange : function(event) {

            var playerContainerId = event.target.getIframe().getAttribute('id');
            var player = YoutubeHandler.players[playerContainerId].player;

            var videoState = event.data;

            player.setPlaybackQuality('hd720');

            if (event.data === YT.PlayerState.ENDED )
            {
                player.stopVideo();
            }

            if (event.data === YT.PlayerState.PAUSED )
            {
                setTimeout(function () {
                    if(player.getPlayerState() === YT.PlayerState.PAUSED){
                        player.stopVideo();
                    }
                }, 300);
            }
        }
    };

    YoutubeHandler.init();

});