﻿
var videoJsInitilized = false;
function loadVideoJSAndCSS(targetElement, seminarId) {

        if ($('body').find('script[src$="videojs-seek-buttons.js"]').length == 0) {
            $('body').append('<script src="/Scripts/Helpers/Util.js?t=1"/></script>')
            .append('<script src="/Scripts/videoplayer/videojs/7.0.5/video.js"/></script>')
            //.append('<script src="/Scripts/videoplayer/videojs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"/></script>')
            //.append('<script src="/Scripts/videoplayer/videojs/quality-levels/2.0.5/videojs-contrib-quality-levels.js"/></script>')
            .append('<script src="/Scripts/videoplayer/videojs/videojs-errors/videojs-errors.js"/></script>')
            .append('<script src="/Scripts/videoplayer/videojs/videojs-seek-buttons/videojs-seek-buttons.js"></script>');
        $('head').append("<link href='/Scripts/videoplayer/videojs/7.0.5/video-js.min.css' rel='stylesheet'/>")
            .append("<link href='/Scripts/videoplayer/videojs/videojs-seek-buttons/videojs-seek-buttons.css' rel='stylesheet' />")
            .append("<link href='/Scripts/videoplayer/videojs/videojs-errors/videojs-errors.css' rel='stylesheet' />");
    }
    checkVideoJsInitilize(targetElement, seminarId);
}

function checkVideoJsInitilize(targetElement, seminarId) {
    if (!videoJsInitilized && typeof videojs == "undefined") {
        setTimeout(function () { checkVideoJsInitilize(targetElement, seminarId) }, 500);
    } else {
        videoJsInitilized = true;        
        var DemoViewerModel = PlayDemoVideoModel(seminarId, targetElement);
    }
}

$('body').on("click", ".btnPlayDemoVideo", function () {    
    var targetElement = $(this).closest('.divImageThumbnail').prev('.clsPlayDemoVideo');
    $(this).closest('.divImageThumbnail').find('.btnPlayDemoVideo').hide();
    $(this).closest('.divImageThumbnail').find('.demoVideoSpinner').show();
    var seminarId = $(this).attr('data-seminarId');
    setTimeout(function () {
        loadVideoJSAndCSS(targetElement, seminarId);
    }, 100);
});


var PlayDemoVideoModel = function (seminarId, targetElement) {

    var self = this;
    self.seminarId = seminarId;
    self.targetElement = targetElement;
    self.demoMediaClip = null;
    self.demoStartTime = null;
    self.curMediaClip = null;
    self.playerInitialized = false;
    self.hls;


    self.init = function () {
        if (typeof vidPlayer != "undefined") {
            vidPlayer.dispose()
            $('.divImageThumbnail').show();
        }            
        $.ajax({
            type: 'GET',
            url: '/ShowtimeWidget/GetDemoViewSeminar',
            dataType: 'json',
            global: false,
            data: {
                'SeminarId': self.seminarId
            },
            success: function (data) {
                $('.demoVideoSpinner').hide();
                $('.btnPlayDemoVideo').show();
                if (data != null && data.mediaClip != null && data.mediaClip.length > 0) {
                    self.demoMediaClip = data.mediaClip;
                    //demoSlides = data.SlidesList;
                    self.demoStartTime = data.DemoStartTime != undefined && data.DemoStartTime != null ? data.DemoStartTime : 0;
                    self.compositionCompleteForDemoVideo();
                } else {
                    alert('Video not configured yet, please try later.');
                    return;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('.demoVideoSpinner').hide();
                $('.btnPlayDemoVideo').show();
                console.log("error: getting seminar");
            }
        });
    }



    self.demoGetMediaclipByStartTime = function () {
        if (self.demoMediaClip != null && self.demoMediaClip != undefined && self.demoMediaClip.length > 0) {
            var mcs = jQuery.grep(self.demoMediaClip, function (n, i) {
                return (n.TotalDurationByOrder + n.TotalDuration) >= self.demoStartTime;
            });
            mcs = mcs.sort(function (a, b) { return ((b.TotalDurationByOrder + b.TotalDuration) - (a.TotalDurationByOrder + a.TotalDuration)); }).pop();
            if (mcs) {
                var inpoint = (self.demoStartTime - mcs.TotalDurationByOrder) + mcs.InPoint;
                if (self.curMediaClip != null && self.curMediaClip == mcs && vidPlayer) {
                    vidPlayer.currentTime(inpoint);
                } else {
                    //gotoMediaClipForReplay(mcs, inpoint);
                    self.gotoMediaClipForDemoVideo(mcs, inpoint);
                }
            } else {
                self.handleCompleteForDemoVideo();
            }
        }
    }

    self.gotoMediaClipForDemoVideo = function (mediaClip, pos) {
        if (self.playerInitialized) {
            pos = pos || null;
            if (self.curMediaClip != null && self.curMediaClip === mediaClip) {
                togoPos = pos;
            } else {
                self.curMediaClip = mediaClip;

                if (self.curMediaClip != null) {
                    curVidMediaClipId = self.curMediaClip.MediaClipId;

                    vidPlayer.reset();
                    Helper.VIDEOJS.removeAllRemoteTextTrack(vidPlayer);

                    if (self.curMediaClip.Media.Ttml != null) {
                        vidPlayer.src({ "src": Helper.VIDEOJS.prepareMediaURL(self.curMediaClip.Media.Source), "type": Helper.VIDEOJS.getType(self.curMediaClip.Media.Source) });
                        //Helper.VIDEOJS.addRemoteTextTrack(vidPlayer, { "src": "/getter.ashx?url=" + self.curMediaClip.Media.Ttml.replace(".ttml", ".vtt"), "srclang": "en", "label": "English Captions", "kind": "captions" });
                    } else {
                        vidPlayer.src({ "src": Helper.VIDEOJS.prepareMediaURL(self.curMediaClip.Media.Source), "type": Helper.VIDEOJS.getType(self.curMediaClip.Media.Source) });
                    }
                    togoPos = pos;
                }
            }
        }

    }



    var isPlayed = false;
    self.intializeMediaForDemo = function () {

        if (!isPlayed) {
            isPlayed = true;
            vidPlayer.volume(1.0);
            self.demoGetMediaclipByStartTime();
        }
    }

    self.updateState = function () {
        if (typeof vidPlayer.getCurrentState == "function") {
            curVidState = vidPlayer.getCurrentState();
        } else {
            curVidState = Helper.VIDEOJS.getCurrentState(vidPlayer) || "Idle";
        }
        if (curVidState !== getLastState()) {
            vidPlayerProcess.push({
                state: curVidState,
                time: new Date()
            });
        }
    }

    self.compositionCompleteForDemoVideo = function () {
        if (!$(self.targetElement).find("#media-video").length) {
            var vidTag = '<video id="media-video" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" crossorigin="anonymous"></video>';
            $(self.targetElement).html(vidTag);
            $(self.targetElement).next('.divImageThumbnail').hide();
            $(self.targetElement).show();
        }
        $(self.targetElement).show();
        //$("#mediaView").removeClass("col-md-6").addClass("col-md-12");
        //$('a[data-href="eventlog"]').hide();
        //$('.seminarImportantNotice').hide();


        if (self.demoMediaClip != null) {
            allmediaTotalDuration = self.sumOfMediaClipTotalDuration(self.demoMediaClip, 0);
            if (allmediaTotalDuration === 0 || self.demoStartTime > allmediaTotalDuration) {
                self.handleCompleteForDemoVideo();
            }


            var videoSource = "https://media1.ce21.com/677911b0-a8bb-4e59-ae8a-83d140df485b/test_169_v2.ism/manifest(format=m3u8-cmaf)";

            videojs("media-video", {
                techOrder: ["html5"],
                aspectRatio: '16:9',
                preload: "auto",
                autoplay: true,
                controls: true,
                disablePictureInPicture: true,
                controlBar: {
                    audioTrackButton: false,
                    playToggle: true,
                    pictureInPictureToggle: false,
                    remainingTimeDisplay: false,
                    progressControl: false,
                    volumeMenuButton: { inline: false, vertical: true },
                    fullscreenToggle: false
                },
                sources: [{ "src": Helper.VIDEOJS.prepareMediaURL(videoSource), "type": Helper.VIDEOJS.getType(videoSource) }],
                html5: { hls: { overrideNative: true, useNetworkInformationApi: true, useDevicePixelRatio: true }, nativeAudioTracks: false, nativeVideoTracks: false }
            }).ready(function () {
                //this.hlsQualitySelector({ displayCurrentQuality: true }); //Commented due to issue mentioned on Monday#7144653939
                vidPlayer = this;

                this.on("error", function (err) {
                    var msg = this.error().message;
                    var errNo = this.error().code;
                    var duration = this.duration();

                    if ((errNo == "4") && (duration == "0")) {

                        if (msg.toLowerCase() == "no compatible source was found for this media." && false) {
                            setErrorHtml();
                        }
                    }

                });

                self.hls = this.tech({ IWillNotUseThisInPlugins: true }).hls;
                self.playerInitialized = true;
                self.intializeMediaForDemo();
                self.updateState;

                //$(targetElement).removeClass("clsPlayDemoVideo");

                this.on("timeupdate", function () {
                    if (self.curMediaClip != null) {
                        if (vidPlayer.getCurrentState() !== "IDLE") {

                            //Go to the togoPos if available. 
                            var rs = 0;
                            try { rs = this.tech_['readyState'](); } catch (e) { }
                            if (togoPos) {
                                if (togoPos > vidPlayer.duration() && vidPlayer.duration() > 0) {
                                    self.handleCompleteForDemoVideo();
                                    togoPos = null;
                                    return;
                                } else {
                                    try {
                                        console.log('seeked: togoPos' + togoPos);
                                        this.tech_['setCurrentTime'](togoPos);
                                        if (self.curMediaClip && togoPos >= curMediaClip.InPoint && togoPos <= curMediaClip.OutPoint) {
                                            seekBlock = true;
                                        }
                                        togoPos = null;
                                    } catch (e) { }
                                }
                            }

                            //Slides
                            curVidTimeCode = curMediaClip.TriggerTime + (this.currentTime() - curMediaClip.InPoint);
                            //console.log(secondsToTimeFormat(curVidTimeCode));

                            var currentPos = (curMediaClip.TotalDurationByOrder + (this.currentTime() - curMediaClip.InPoint));
                            var remaningSeconds = (self.demoStartTime + (3 * 60)) - currentPos;

                           
                            //if demo video complete then get message and close
                            if (remaningSeconds <= 0) {
                                self.handleCompleteForDemoVideo();
                            }

                            //curDemoMsg = ' Demo ends in ' + secondsToTimeFormat(remaningSeconds < 0 ? 0 : remaningSeconds);
                            //if ($("#demoTimer-" + self.seminarId).length > 0) {
                            //    $("#demoTimer-" + self.seminarId + "'>p").html(curDemoMsg);
                            //    if (vidPlayer.isFullscreen()) {
                            //        if (!$("#alert_panel")) $("#media-video").append('<div class="alert_panel"><p></p></div>');
                            //        $("#alert_panel>p").text(curDemoMsg);
                            //    }
                            //} else {
                            //    var text = '<div id="demoTimer-'+ self.seminarId + '"  class="demo-12"><p>' + curDemoMsg + ' </p></div>'
                            //    //$("#media-container").append(text);
                            //    if (vidPlayer.isFullscreen()) {
                            //        if (!$("#alert_panel")) $("#media-video").append('<div class="alert_panel"><p></p></div>');
                            //        $("#alert_panel>p").text(curDemoMsg);
                            //    }
                            //}
                        }

                        //Prevent playing beyond the the outPoint.    
                        if (self.curMediaClip && curMediaClip.OutPoint) {
                            if (this.currentTime() > Number(curMediaClip.OutPoint)) {
                                self.nextPlayDemoVideo();
                            }
                        }

                        //Prevent playing before the keyframe before the inPoint.
                        if (self.curMediaClip && curMediaClip.InPoint) {
                            if (this.currentTime() < Number(curMediaClip.InPoint)) {
                                if (!seekBlock) {
                                    seekBlock = true;
                                    vidPlayer.currentTime(Number(curMediaClip.InPoint));
                                }
                            } else {
                                seekBlock = false;
                            }
                        }
                    }
                });

                this.on("ended", function () {
                    self.updateState;
                    self.nextPlayDemoVideo();
                });

                this.on("loadeddata", function () {

                    self.updateState;
                    if (self.playerInitialized) {
                        seekBlock = false;
                        setTimeout(function () { if (vidPlayer.getCurrentState() === "IDLE") vidPlayer.play(); }, 100);
                    }
                    //loadSavedQuality();
                });

                this.on("pause", function () {
                    // this.play();
                    //self.updateState;
                });




                //#region Player Polyfill

                this.getCurrentQuality = function () {
                    return hls.selectPlaylist().attributes.RESOLUTION.height + "p";
                }

                this.setCurrentQuality = function (level) {

                }

                this.getRenderingMode = function () {
                    return vidPlayer.techName_.toLowerCase();
                }

                this.getCurrentState = function () {
                    if (!vidPlayer.paused()) return "PLAYING";
                    if (vidPlayer.paused()) return "PAUSED";
                    if (vidPlayer.seeking() && vidPlayer.bufferedPercent() > 0) return "BUFFERING";
                    if (vidPlayer.readyState() > 1) return "IDLE";
                    return undefined;
                }
                
                //#endregion

            });
        }

        //timeout cuts down on triggered events
        var resizeTimeout;
        $(window).resize(function () {
            clearTimeout(resizeTimeout);
            if (vidPlayer)
                resizeTimeout = setTimeout(vidPlayer.resizePlayer, 500);
        });
    }

    self.sumOfMediaClipTotalDuration = function (mediaClips, order) {

        var duration = 0;

        if (mediaClips != null && mediaClips != undefined && mediaClips.length > 0) {
            if (order > 0) {
                jQuery.each(mediaClips, function (index, element) {
                    duration += element.TotalDuration;
                });
            } else {
                jQuery.each(mediaClips, function (index, element) {
                    duration += element.TotalDuration;
                });
            }
        }
        return duration;
    }

    self.handleCompleteForDemoVideo = function () {

        if (self.playerInitialized) {
            vidPlayer.paused();
            //vidPlayer.dispose(); 
        }        
        $(self.targetElement).next('.divImageThumbnail').show();
        $(self.targetElement).hide().html('');

    }
    self.nextPlayDemoVideo = function () {
        if (demoMediaClip != null && demoMediaClip.indexOf(curMediaClip) + 1 < demoMediaClip.length) {
            self.gotoMediaClipForDemoVideo(demoMediaClip[demoMediaClip.indexOf(curMediaClip) + 1], null);
        } else {
            self.handleCompleteForDemoVideo();
        }
    }


    init();
}

function secondsToTimeFormat(totalSec) {
    return totalSec.toString().toHHMMSS();
}

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second param
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) { hours = "0" + hours; }
    if (minutes < 10) { minutes = "0" + minutes; }
    if (seconds < 10) { seconds = "0" + seconds; }
    var time = '';
    if (hours > 0) {
        time = hours + ':' + minutes + ':' + seconds;
    } else {
        time = minutes + ':' + seconds;
    }
    return time;
}

$("body").on('click', '.eventCalendar', function () {
    $.magnificPopup.open({
        items: {
            src: $(this).attr("href")
        },
        type: 'iframe',
        closeOnBgClick: false,
        mainClass: 'pop500r',
    });
    return false;
}); 