Code Eko Studio Complex

ekostudio-experiment2.js

'use strict';
define([],function() {
    let loadingScreen = {
        playBlocker: '#button_loading_screen_1327f4',
        playNormal: '#button_loading_screen_5ba756',
        playHover: '#button_loading_screen_2cf0a7'
    };
    
    let uids = {
        realityTopLayer: '#button_menu_layer_ae3db9',
        dreamBottomLayer: '#button_menu_layer_91c8e0',
        instruction: '#button_menu_layer_0a3fff'
    };

    let settings = {
        isLoadedAndUse: false,
        width: 0,
        heigth: 0,
        timeouts: [],
        delay: null,
        $canvas: null,
        isClickable: false,
        isEnded: false,
        timer: 0,
        everySec: 5000,
        isAbleToPlay: false,

        // # jQuery
        hide: {display: 'none', visibility: 'hidden'},
        show: {display: 'block', visibility: 'visible' },
        // # Helper Function
        forceScaleBoxing: (ctx) => {
            ctx.playerOptions = ctx.playerOptions || {};
            ctx.playerOptions.scaling = 'boxing';
            ctx.playerOptions.panAndScanMinVisibleHeight = 0;
            ctx.playerOptions.panAndScanMinVisibleWidth = 0;
        },
        // # Cache
        cache: {
            reality: null,
            dream: null,
            instruction: null,
            suggestedVideo: null
        }
    };


















    /*
    |====================================================
    |   LOADING INTRO SCREEN
    |====================================================
    */
    function initLoadingScreen(player){
        let delay = setTimeout( () => {
            clearTimeout(delay);
            
            let normal = jQuery(loadingScreen.playNormal);
            
            let hover  = jQuery(loadingScreen.playHover); 
            
            normal.css(settings.show);
            
            hover.css(settings.hide);

            jQuery(loadingScreen.playBlocker).mouseenter( () => {
                hover.css(settings.show);
            }).mouseleave( () => {
                hover.css(settings.hide);
            });
        }, 500);
    }


















    /*
    |====================================================
    |   VIDEO & SCEEN CSS 
    |====================================================
    */
    function applyVideoCSS(){
        let $screen = jQuery('#interpolateScreen');
        let $video  = jQuery('#goldiVideo');

        $screen.css({
            'position': 'absolute',
            'top': '-50%',
            'left': '-50%',
            'width': '200%',
            'height': '200%',  
        });

        $video.css({
            'position': 'absolute',
            'top': 0,
            'bottom': 0,
            'right': 0,
            'left': 0,
            'margin': 'auto',
            'min-height': '50%',
            'min-width': '50%',        
        });
    }



















    /*
    |====================================================
    |   PLAY SCREEN
    |====================================================
    */
    function publishPlayEvents(vid){
        let playOnce  = false;
        vid.onplaying = function onplaying(){
            if(!playOnce) {
                playOnce = true;

                let delay = setTimeout( function (){
                    clearTimeout(delay);

                    if(settings.isEnded) return;

                    settings.isAbleToPlay = true; 
                    console.log('CLEAR: 1st play attempt'); 
                    
                    // Default Frame after loaded
                    vid.currentTime = 0;
                    vid.pause();

                }, 1000 * 0.99);
            }
        };
    }



















    function initPlugins(player){

        player.initPlugin('overlays');
        player.initPlugin('control');

        /*
        |====================================================
        |   CREATE VIDEO INSTANCE
        |====================================================
        */

        const isDesktop = InterludePlayer.environment.isDesktop;
        const screenInterpolateSrc = (isDesktop) ? 'SD_Med_1028' : 'TH_Devices_Low_250';
        
        let videoTag = `
            <video id="goldiVideo" playsinline preload muted crossorigin="anonymous" eq-attached="true">
                <source src="https://d1ux84wfod9ezj.cloudfront.net/efu/TH/upload/fee4be4cff93fd3855138329279eef5c.mp4/fee4be4cff93fd3855138329279eef5c.mp4v3.${screenInterpolateSrc}.mp4" type="video/mp4" >
            </video>
        `;

        let interpolateScreen = document.createElement("div");
            interpolateScreen.setAttribute("id", "interpolateScreen");
        
        player.overlays.add('interpolateScreen', interpolateScreen);
        player.overlays.hide('interpolateScreen');

        let videoContainer = jQuery('#interpolateScreen');
            videoContainer.append(videoTag);

        /*
        |====================================================
        |   MANAGE FORCE LOADING VIDEO
        |====================================================
        */
        
        applyVideoCSS();
        
        let $vid      = jQuery('#goldiVideo');
        let vid       = $vid.get(0);
        let vidHeight = $vid.height();
        let isPlaying = false;

        let forceLoad = function forceLoad(){
            // Reset Values
            vid.load();
            playOnce                     = false;
            settings.isEnded             = false;

            isPlaying = vid.currentTime > 0 && !vid.paused && !vid.ended && vid.readyState > 2;
            
            if(!isPlaying){
                vid.currentTime = 0;
                vid.play();  
                console.log('TRY: 1st play attempt');
                settings.isAbleToPlay = false;
                publishPlayEvents(vid);
            }
        };

        player.on('nodestart', function nodestart(node) { 
            if(!settings.isLoadedAndUse){
                console.log('PLAYER_NODESTART', vidHeight );
                forceLoad();
                settings.isLoadedAndUse = true;
            }
        });

        $vid.on('loadeddata', function loadeddata() { 
            if(!settings.isLoadedAndUse){
                console.log('VIDEO_LOADEDDATA', vid );
                forceLoad();
                settings.isLoadedAndUse = true;
            }
        });

    //end initPlugins
    }



















    /*
    |====================================================
    |   SHARE OVERLAY
    |====================================================
    */
    function initShareOverlay(player){
        let styleEndFrame = {
            height: '250px',
            width: '250px',
            border: '2px dotted red',
            position: 'absolute',
            top: '50%',
            left: '50%',
            '-webkit-transform' : 'translate(-50%,-50%)',
            '-ms-transform'     : 'translate(-50%,-50%)',
            '-moz-transform'    : 'translate(-50%,-50%)',
            'transform'         : 'translate(-50%,-50%)'
        };

        let styleReplayBtn = {
            height: '100px',
            width: '100px',
            float: 'left',
            border: '2px dotted green',
            'background-image': 'url(https://d1ux84wfod9ezj.cloudfront.net/efu/upload/d3f6999e28f32037292061fae02159d7.png)',
            'background-repeat' : 'no-repeat',
            'background-size' : 'contain'
        };

        let styleShareBtn = {
            height: '100px',
            width: '100px',
            float: 'right',
            border: '2px dotted blue'
        };

        let replayBtn = document.createElement('div');
        replayBtn.setAttribute('id', 'replayBtn');

        let shareBtn = document.createElement('div');
        shareBtn.setAttribute('id', 'shareBtn');

        let endFrameCont = document.createElement('div');
        endFrameCont.setAttribute('id', 'endFrameCont');

        // Add childrens
        endFrameCont.appendChild(replayBtn);
        endFrameCont.appendChild(shareBtn);

        player.overlays.add('endFrameCont', endFrameCont);
        player.overlays.hide('endFrameCont');

        jQuery('#endFrameCont').css(styleEndFrame);
        jQuery('#replayBtn').css(styleReplayBtn);
        jQuery('#shareBtn').css(styleShareBtn);

        jQuery('#endFrameCont').on('click','div', function(e){
            var currId = $(this).attr("id");
            
            if(currId === "replayBtn"){
                player.currentChannel = 0;
                player.overlays.hide('endFrameCont');
                                
                let delay = setTimeout( () => {
                    clearTimeout(delay);
                    settings.cache.reality.css(settings.show);
                    settings.cache.dream.css(settings.hide);
                    player.play();
                }, 100);
                
                // player.overlays.hide('endFrameCont');
                // let d = setTimeout( () => {
                //     player.play();
                //     settings.cache.reality.css(settings.show);
                //     settings.cache.dream.css(settings.hide);
                //     settings.isEnded = false;    
                //     settings.isClickable = true;
                //     player.currentChannel = 0;
                //     clearTimeout(d);
                // }, 500);
            }
        });
    }



















    /*
    |====================================================
    |   HOOKS & EVENTS
    |====================================================
    */
    function initHooks(player){

        let $vid = jQuery('#goldiVideo');

        // # RESIZE CONTAINER
        player.on('containerresize', () => {
            if(!$vid) return;
                applyVideoCSS();
        });

        // # RESIZE VIDEO
        player.on('resize', () => {
            if(!$vid) return;
                applyVideoCSS();
        });

        // # WHEN PAUSE 
        player.on('pause', () => {
            if(!$vid) return;
                // alert('Eko Is Paused');
        });

        // # PLAY | REPLAY 
        player.on('play', () => {
            if(!$vid) return;
            
            if(settings.isEnded){
                $vid.get(0).load();
                clearWindowTimeouts();

                // ...
                // alert('Eko Is Replay');
            } else {

                // ...
                // alert('Eko Is Play');
            }
        });        

        // # TIMEUPDATE:0.01
        let parallel = player.repository.get('node_parallel_617266');
            
            parallel.on('timeupdate:0.01', () => {
                settings.isEnded = false;
                settings.isClickable = true;

                if (player.overlays.has('endFrameCont')) {
                    player.overlays.hide('endFrameCont');
                }

                let delay = setTimeout( () => {
                    clearTimeout(delay);
                    settings.cache.instruction.css(settings.show);
                }, settings.everySec );
            });

        // # TIMEUPDATE
        player.on('timeupdate', () => {
            applyVideoCSS();
            
            if(player.currentTime > 3 ) { // 18
                settings.isClickable = true;
            }
            
            if(player.currentTime > 9 ) { // 65
                settings.isClickable = false;
                // settings.isEnded = true;
            }
        });

        // # ENDED
        player.on('ended', () => {
            
            settings.cache.reality.css(settings.show);
            settings.cache.dream.css(settings.hide);
            settings.cache.instruction.css(settings.hide);
            settings.cache.suggestedVideo.css(settings.hide);

            settings.isEnded        = true;
            settings.isClickable    = false;
            settings.isLoadedAndUse = false;
            
            player.overlays.hide('interpolateScreen');

            player.overlays.show('endFrameCont');
            
            clearWindowTimeouts();
        });
    }



















 
    function initEvents(player){
        // # Interactive
        settings.cache.reality = jQuery(`${uids.realityTopLayer}`); // , ${uids.realityIcon}`);
        settings.cache.dream   = jQuery(`${uids.dreamBottomLayer}`); // , ${uids.dreamIcon}`);
        // # End SuggestedVideo
        settings.cache.suggestedVideo = jQuery('.ec-endscreenBox, .ec-screenSide');
        // # Instruction
        settings.cache.instruction = jQuery(uids.instruction);
        settings.cache.instruction.css(settings.hide);
        // # Default ~ set reality showned and dream hidden
        settings.cache.dream.css(settings.hide);

        /*
        |====================================================
        |   MANAGE VIDEO INTERPOLATOR
        |====================================================
        */

        let shifter = function(callback){
            let vid = jQuery('#goldiVideo').get(0);
            let isPlaying = vid.currentTime > 0 && !vid.paused && !vid.ended && vid.readyState > 2;
            let playOnce = false;

            vid.onplaying = function(){
                if(!playOnce) {
                    playOnce = true;
                    player.switch(1);
                    
                    let delay = setTimeout(function(){
                        clearTimeout(delay); console.log('clearing onTap');
                        player.overlays.hide('interpolateScreen');
                        
                        vid.currentTime = 0;
                        vid.pause();

                        if(settings.isEnded) return;

                        callback();
                    }, (1000 * 0.99) );
                }
            };

            if(!isPlaying){
                vid.play();
                player.overlays.show('interpolateScreen');
            }
        };

        /*
        |====================================================
        |   USER CLICK IT WILL SHIFT TO DIFFERENT CHANNEL
        |====================================================
        */

        settings.cache.reality.on('click', () => {
            if(player.currentChannel === 0 && settings.isClickable === true && settings.isEnded === false && settings.isAbleToPlay === true ){
                manageInstruction();
                shifter( function(){
                    settings.cache.reality.css(settings.hide);
                    settings.cache.dream.css(settings.show);
                });
            }
        });

        settings.cache.dream.on('click', () => {
           if(player.currentChannel === 1 && settings.isClickable === true && settings.isEnded === false && settings.isAbleToPlay === true ){
                manageInstruction();
                player.switch(0);
                settings.cache.reality.css(settings.show);
                settings.cache.dream.css(settings.hide);
            } 
        });
    }


















    /*
    |====================================================
    |   CLEAR WINDOW TIMEOUTS
    |====================================================
    */
    function clearWindowTimeouts(){
        let id = window.setTimeout(function() {}, 0);
        while (id--) {
            window.clearTimeout(id);
        }
    }


















    /*
    |====================================================
    |   HIDE SHOW INSTRUCTIONS 
    |====================================================
    */
    function manageInstruction(){
        if(!settings.cache.instruction) return;
            settings.cache.instruction.css(settings.hide);
        
        clearWindowTimeouts();

        let delay = setTimeout( () => {
                clearTimeout(delay);
                if(!settings.isClickable) return;
                if(settings.isEnded)      return;

                settings.cache.instruction.css(settings.show);
            }, settings.everySec );
    }
 


















    /*
    |====================================================
    |   EMBED DYNAMIC CSS & JAVASCRIPT 
    |====================================================
    */
    function initCSSandSCRIPTS(){
        var css = `
        .IIV::-webkit-media-controls-play-button,
            video::-webkit-media-controls-start-playback-button {
                opacity: 0;
                pointer-events: none;
                width: 5px;
            }
        `,
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet){
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }
        // # CREATE STYLE TAG
        head.appendChild(style);
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.charset = 'utf-8';
        script.defer = true;
        script.async = true;
        script.onload = function () {
            console.log('The <script> is loaded, use for goog le analytics');
        };
        script.text = ["console.log('analytics');",""].join('');
        // # CREATE SCRIPT TAG
        head.appendChild(script);
    }
  


















     return {
        onInit: function(player, ctx){
            // # Remove Skip buttons
            if(player.initedPlugins.skip){
                player.skip.skipToDecisionsEnabled = false;
                player.skip.forwardEnabled = false;
                player.skip.backEnabled = false;
                skipButtons = document.getElementsByClassName('ec-skipBtn');
                skipButtons[0].style.display = 'none';
                skipButtons[1].style.display = 'none';
            }
            console.info('===onInit');

            settings.forceScaleBoxing(ctx);

            initCSSandSCRIPTS();
            
            initLoadingScreen(player);
            
            initPlugins(player);
            
            initEvents(player);
            
            initHooks(player);

            initShareOverlay(player);
        },
        
        onLoad: function(ctx) {
            console.info('===onLoad');
            settings.forceScaleBoxing(ctx);
            return ctx.when.promise( (resolve, reject) => {
                ctx.loadJS(
                        [
                        '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'
                        ],{
                            success: () => { resolve(); },
                            erorr: () => { reject(); }
                        }
                    );
            });
        }
    };
});