芝麻web文件管理V1.00

编辑当前文件:/home/mgatv524/www/midiatech/web/dist/preview/html-preview.js

/*
 * Xibo - Digital Signage - http://www.xibo.org.uk
 * Copyright (C) 2014-17 Spring Signage Ltd
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version. 
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */

/* Int: Current logging level */
var LOG_LEVEL;

/* String: Client Version */
var VERSION = "1.8.3";

/* Int: Counter to ensure unique IDs */
var ID_COUNTER = 0;
function dsInit(layoutid, options, layoutPreview) {
    LOG_LEVEL = 10;
    /* Hide the info and log divs */
    $(".preview-log").css("display", "none");
    $(".preview-info").css("display", "none");
    $(".preview-end").css("display", "none");

/* Setup a keypress handler for local commands */
    document.onkeypress = keyHandler;

playLog(0, "info", "Xibo HTML Preview v" + VERSION + " Starting Up", true);
    var preload = {
        addedFiles: [],
        preloader: html5Preloader(),
        addFiles: function (url) { // Wrapped add files method, checking if the files were added already and save a list
            if(!this.addedFiles.includes(url)) {
                this.preloader.addFiles(url);
                this.addedFiles.push(url);
            }
        }
    };

new Layout(layoutid, options, preload, layoutPreview);
}

/* Generate a unique ID for region DIVs, media nodes etc */
function nextId() {
    if (ID_COUNTER > 500) {
        ID_COUNTER = 0;
    }
    
    ID_COUNTER = ID_COUNTER + 1;
    return ID_COUNTER;
}

/* OnScreen Log */
function playLog(logLevel, logClass, logMessage, logToScreen) {
    if (logLevel <= LOG_LEVEL)
    {
        var msg = timestamp() + " " + logClass.toUpperCase() + ": " + logMessage;
        if (logLevel > 0)
        {
            console.log(msg);
        }
        
        if (logToScreen) {
            //document.getElementById("log").innerHTML = msg;
            $('.preview-log').html(msg);
        }
    }
}

/* Timestamp Function for Logs */
function timestamp() {
    var str = "";

var currentTime = new Date();
    var day = currentTime.getDate();
    var month = currentTime.getMonth() + 1;
    var year = currentTime.getFullYear();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

if (minutes < 10) {
        minutes = "0" + minutes
    }
    if (seconds < 10) {
        seconds = "0" + seconds
    }
    str += day + "/" + month + "/" + year + " ";
    str += hours + ":" + minutes + ":" + seconds;
    return str;
}

/* Function to handle key presses */
function keyHandler(event) {
    var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
    var letter = String.fromCharCode(chCode);

if (letter == 'l') {
        var log = $(".preview-log");
        if (log.css("display") == 'none') {
            log.css("display", "block");
        }
        else {
            log.css("display", "none");
        }
    }
    /*else if (letter == 'i') {
        if ($("#info_"+self.id).css("display") == 'none') {
            sw = $("#screen_"+self.id).width();
            sh = $("#screen_"+self.id).height();
            
            x = Math.round((sw - 500) / 2);
            y = Math.round((sh - 400) / 2);
            
            if (x > 0) {
                $("#info_"+self.id).css("left", x);
            }
            
            if (y > 0) {
                $("#info_"+self.id).css("top", y);
            }
            
            $("#info_"+self.id).css("display", "block");
        }
        else {
            $("#info_"+self.id).css("display", "none");
        }
    }*/
}

function Layout(id, options, preload, layoutPreview) {
    /* Layout Object */
    /* Parses a layout and when run runs it in containerName */

var self = this;
    self.id = id;
    self.parseXlf = function(data) {
        playLog(10, "debug", "Parsing Layout " + self.id, false);
        self.containerName = "L" + self.id + "-" + nextId();
        
        // Set max z-index var
        self.regionMaxZIndex = 0;
        
        /* Create a hidden div to show the layout in */
        var screen = $('#screen_' + self.id) ;
        screen.append('<div id="' + self.containerName  + '"></div>');
        if (layoutPreview === false){
          screen.append('<a style="position:absolute;top:0;left:0;width:100%;height:100%;" target="_blank" href="'+ screen.parent().parent().attr('data-url') + '"></a>');
        }

var layout = $("#" + self.containerName);
        layout.css("display", "none");
        layout.css("outline", "red solid thin");
        
        /* Calculate the screen size */
        self.sw = screen.width();
        self.sh = screen.height();
        playLog(7, "debug", "Screen is (" + self.sw + "x" + self.sh + ") pixels");
        
        /* Find the Layout node in the XLF */
        self.layoutNode = data;
        
        /* Get Layout Size */
        self.xw = $(self.layoutNode).filter(":first").attr('width');
        self.xh = $(self.layoutNode).filter(":first").attr('height');
        self.zIndex = $(self.layoutNode).filter(":first").attr('zindex');
        playLog(7, "debug", "Layout is (" + self.xw + "x" + self.xh + ") pixels");
        
        /* Calculate Scale Factor */
        self.scaleFactor = Math.min((self.sw/self.xw), (self.sh/self.xh));
        self.sWidth = Math.round(self.xw * self.scaleFactor);
        self.sHeight = Math.round(self.xh * self.scaleFactor);
        self.offsetX = Math.abs(self.sw - self.sWidth) / 2;
        self.offsetY = Math.abs(self.sh - self.sHeight) / 2;
        playLog(7, "debug", "Scale Factor is " + self.scaleFactor);
        playLog(7, "debug", "Render will be (" + self.sWidth + "x" + self.sHeight + ") pixels");
        playLog(7, "debug", "Offset will be (" + self.offsetX + "," + self.offsetY + ") pixels");
        
        /* Scale the Layout Container */
        layout.css("width", self.sWidth + "px");
        layout.css("height", self.sHeight + "px");
        layout.css("position", "absolute");
        layout.css("left", self.offsetX + "px");
        layout.css("top", self.offsetY + "px");

if (self.zIndex != null)
            layout.css("z-index", self.zIndex);
        
        /* Set the layout background */
        self.bgColour = $(self.layoutNode).filter(":first").attr('bgcolor');
        self.bgImage = $(self.layoutNode).filter(":first").attr('background');
        
        if (!(self.bgImage == "" || self.bgImage == undefined)) {
            /* Extract the image ID from the filename */
            self.bgId = self.bgImage.substring(0, self.bgImage.indexOf('.'));

var tmpUrl = options.layoutBackgroundDownloadUrl.replace(":id", self.id) + '?preview=1';
            
            preload.addFiles(tmpUrl + "&width=" + self.sWidth + "&height=" + self.sHeight + "&dynamic&proportional=0");
            layout.css("background", "url('" + tmpUrl + "&width=" + self.sWidth + "&height=" + self.sHeight + "&dynamic&proportional=0')");
            layout.css("background-repeat", "no-repeat");
            layout.css("background-size", self.sWidth + "px " + self.sHeight + "px");
            layout.css("background-position", "0px 0px");
        }

// Set the background color
        layout.css("background-color", self.bgColour);
        
        $(self.layoutNode).find("region").each(function() {
            playLog(4, "debug", "Creating region " + $(this).attr('id'), false);

self.regionObjects.push(new Region(self, $(this).attr('id'), this, options, preload));
        });

playLog(4, "debug", "Layout " + self.id + " has " + self.regionObjects.length + " regions");
        self.ready = true;
        preload.addFiles(options.loaderUrl);

if (layoutPreview){
            // previewing only one layout in the layout preview page
            preload.preloader.on('finish', self.run);
        } else {
            // previewing a set of layouts in the campaign preview page
            self.run();
        }
    };

self.run = function() {
        playLog(4, "debug", "Running Layout ID " + self.id, false);
        if (self.ready) {
            $("#" + self.containerName).css("display", "block");
            $("#splash_" + self.id).css("display", "none");

for (var i = 0; i < self.regionObjects.length; i++) {
                playLog(4, "debug", "Running region " + self.regionObjects[i].id, false);
                self.regionObjects[i].run();
            }
        }
        else {
            playLog(4, "error", "Attempted to run Layout ID " + self.id + " before it was ready.", false);
        }
    };
    
    self.end = function() {
        /* Ask the layout to gracefully stop running now */
        for (var i = 0; i < self.regionObjects.length; i++) {
            self.regionObjects[i].end();
        }
    };
    
    self.destroy = function() {
        /* Forcibly remove the layout and destroy this object
           Layout Object may not be reused after this */
    };

self.regionExpired = function() {
        /* One of the regions on the layout expired
           Check if all the regions have expired, and if they did
           end the layout */
        playLog(5, "debug", "A region expired. Checking if all regions have expired.", false);
        
        self.allExpired = true;
        
        for (var i = 0; i < self.regionObjects.length; i++) {
            playLog(4, "debug", "Region " + self.regionObjects[i].id + ": " + self.regionObjects[i].complete, false);
            if (! self.regionObjects[i].complete) {
                self.allExpired = false;
            }
        }
        
        if (self.allExpired) {
            playLog(4, "debug", "All regions have expired", false);
            self.end();
        }
    };
    
    self.regionEnded = function() {
        /* One of the regions completed it's exit transition
           Check al the regions have completed exit transitions.
           If they did, bring on the next layout */
           
        playLog(5, "debug", "A region ended. Checking if all regions have ended.", false);
        
        self.allEnded = true;
        
        for (var i = 0; i < self.regionObjects.length; i++) {
            playLog(4, "debug", "Region " + self.regionObjects[i].id + ": " + self.regionObjects[i].ended, false);
            if (! self.regionObjects[i].ended) {
                self.allEnded = false;
            }
        }
        
        if (self.allEnded) {
            playLog(4, "debug", "All regions have ended", false);

self.stopAllMedia();

$("#end_" +  self.id).css("display", "block");
            //$("#" + self.containerName).remove();
        }

};
    
    self.stopAllMedia = function() {
        playLog(3, "debug", "Stop all media!");

for(var i = 0;i < self.regionObjects.length;i++) {
            var region = self.regionObjects[i];
            for(var j = 0;j < region.mediaObjects.length;j++) {
                var media = region.mediaObjects[j];
                media.stop();
            }
        }
    };
    
    self.ready = false;
    self.id = id;
    self.regionObjects = [];
    self.allExpired = false;
    
    playLog(3, "debug", "Loading Layout " + self.id , true);
    $.ajax({
        "type": "GET",
        "url": options.getXlfUrl,
        "success": self.parseXlf
    }); 
}

// If the region has finished, don't run/show media
        if(self.ended) {
            return;
        }
        
        newMedia.run();
        
        $("#" + newMedia.containerName).css("display", "block");
    };
    
    self.nextMedia = function() {
        /* The current media has finished running */
        /* Show the next item */
        
        if (self.ended) {
            return;
        }
        
        if (self.curMedia) {
            playLog(8, "debug", "nextMedia -> Old: " + self.curMedia.id);
            self.oldMedia = self.curMedia;
        }
        else {
            self.oldMedia = undefined;
        }
        
        self.currentMedia = self.currentMedia + 1;

if (self.currentMedia >= self.mediaObjects.length) {
            self.finished();
            self.currentMedia = 0;
        }
        
        playLog(8, "debug", "nextMedia -> Next up is media " + (self.currentMedia + 1) + " of " + self.mediaObjects.length);
        
        self.curMedia = self.mediaObjects[self.currentMedia];
        
        if (self.curMedia != undefined)
            playLog(8, "debug", "nextMedia -> New: " + self.curMedia.id);
        
        /* Do the transition */
        self.transitionNodes(self.oldMedia, self.curMedia);
    };
    
    self.run = function() {
        self.nextMedia();
    };
    
    self.sWidth = $(xml).attr("width") * self.layout.scaleFactor;
    self.sHeight = $(xml).attr("height") * self.layout.scaleFactor;
    self.offsetX = $(xml).attr("left") * self.layout.scaleFactor;
    self.offsetY = $(xml).attr("top") * self.layout.scaleFactor;
    self.zIndex = $(xml).attr("zindex");

$("#" + self.layout.containerName).append('<div id="' + self.containerName + '"></div>');
    
    /* Scale the Layout Container */
    $("#" + self.containerName).css("width", self.sWidth + "px");
    $("#" + self.containerName).css("height", self.sHeight + "px");
    $("#" + self.containerName).css("position", "absolute");
    $("#" + self.containerName).css("left", self.offsetX + "px");
    $("#" + self.containerName).css("top", self.offsetY + "px");

if (self.zIndex != null) {
        $("#" + self.containerName).css("z-index", self.zIndex);

// Set new layout max z-index value
        if(parseInt(self.zIndex) > self.layout.regionMaxZIndex) {
            self.layout.regionMaxZIndex = parseInt(self.zIndex);
        }
    }

playLog(4, "debug", "Created region " + self.id, false);
    playLog(7, "debug", "Render will be (" + self.sWidth + "x" + self.sHeight + ") pixels");
    playLog(7, "debug", "Offset will be (" + self.offsetX + "," + self.offsetY + ") pixels");
    
    $(self.xml).find("media").each(function() { 
        playLog(5, "debug", "Creating media " + $(this).attr('id'), false);
                                                self.mediaObjects.push(new media(self, $(this).attr('id'), this, options, preload));
                                              });
    
    // If the regions does not have any media change its background to transparent red
    if ($(self.xml).find("media").length == 0) {
        $self = $("#" + self.containerName);
        
        messageSize = (self.sWidth > self.sHeight ) ? self.sHeight : self.sWidth;
        
        $self.css("background-color", 'rgba(255, 0, 0, 0.25)');
        $self.append('<div class="empty-message" id="empty_' + self.containerName + '"></div>');
        
        $message = $("#empty_" + self.containerName);
        $message.append('<span class="empty-icon fa fa-exclamation-triangle" style="font-size:' + messageSize/4 + 'px"></span>');
        $message.append('<span class="empty-icon">' + emptyRegionMessage + '</span>');
    }     
                                              
    playLog(4, "debug", "Region " + self.id + " has " + self.mediaObjects.length + " media items");
}

function media(parent, id, xml, options, preload) {
    var self = this;
    self.region = parent;
    self.xml = xml;
    self.id = id;
    self.containerName = "M-" + self.id + "-" + nextId();
    self.iframeName = self.containerName + "-iframe";
    self.mediaType = $(self.xml).attr('type');
    self.render = $(self.xml).attr('render');
    self.attachedAudio = false;

if (self.render == undefined)
        self.render = "module";
    
    self.run = function() {

if(self.iframe != undefined) {
            $("#" + self.containerName).empty().append(self.iframe);
        }

playLog(5, "debug", "Running media " + self.id + " for " + self.duration + " seconds");
               
        if (self.mediaType == "video") {
            $("#" + self.containerName + "-vid").get(0).play();
        }
        
        if(self.mediaType == "audio") {
            $("#" + self.containerName + "-aud").get(0).play();
        }

if(self.attachedAudio) {
            $("#" + self.containerName + "-attached-aud").get(0).play();
        }
        
        if (self.duration == 0) {
            if (self.mediaType == "video") {
                $("#" + self.containerName + "-vid").bind('ended', self.region.nextMedia);
                $("#" + self.containerName + "-vid").bind('error', self.region.nextMedia);
                $("#" + self.containerName + "-vid").bind('click', self.region.nextMedia);
            } else if(self.mediaType == "audio") {
                $("#" + self.containerName + "-aud").bind('ended', self.region.nextMedia);
                $("#" + self.containerName + "-aud").bind('error', self.region.nextMedia);
                $("#" + self.containerName + "-aud").bind('click', self.region.nextMedia);
            }
            else {
                self.duration = 3;
                setTimeout(self.region.nextMedia, self.duration * 1000);
            }
        }
        else {
            setTimeout(self.region.nextMedia, self.duration * 1000);
        }
    };
    
    self.stop = function() {
        playLog(5, "debug", "Stop media " + self.id);

// Hide container
        $("#" + self.containerName).css("display", "none");

// Stop video
        if(self.mediaType == "video") {
            $("#" + self.containerName + "-vid").get(0).pause();
            $("#" + self.containerName + "-vid").get(0).currentTime = 0;
        }

// Stop audio
        if(self.mediaType == "audio") {
            $("#" + self.containerName + "-aud").get(0).pause();
            $("#" + self.containerName + "-aud").get(0).currentTime = 0;
        }

// Stop attached audio
        if(self.attachedAudio) {
            $("#" + self.containerName + "-attached-aud").get(0).pause();
            $("#" + self.containerName + "-attached-aud").get(0).currentTime = 0;
        }
    };
    
    /* Build Media Options */
    self.duration = $(self.xml).attr('duration');
    self.lkid = $(self.xml).attr('lkid');
    self.options = [];
    
    $(self.xml).find('options').children().each(function() {
        playLog(9, "debug", "Option " + this.nodeName.toLowerCase() + " -> " + $(this).text(), false);
        self.options[this.nodeName.toLowerCase()] = $(this).text();
    });
    
    // Show in fullscreen?
    if(self.options.showfullscreen === "1") {
        // Set dimensions as the layout ones
        self.divWidth = self.region.layout.sWidth;
        self.divHeight = self.region.layout.sHeight;
    } else {
        // Set dimensions as the region ones
        self.divWidth = self.region.sWidth;
        self.divHeight = self.region.sHeight;
    }

$("#" + self.region.containerName).append('<div id="' + self.containerName + '"></div>');

/* Scale the Content Container */
    var media = $("#" + self.containerName);
    media.css("display", "none");
    media.css("width", self.divWidth + "px");
    media.css("height", self.divHeight + "px");
    media.css("position", "absolute");
    media.css("background-size", "contain");
    media.css("background-repeat", "no-repeat");
    media.css("background-position", "center");

// If fullscreen, set position offset to origin ( negative of the region offset ) and set z-index over other elements
    if(self.options.showfullscreen === "1") {
        media.css("left", -self.region.offsetX + "px");
        media.css("top", -self.region.offsetY + "px");
        media.css("z-index", self.region.layout.regionMaxZIndex + 1);
    }

// Get media url and preload
        var tmpUrl2 = options.libraryDownloadUrl.replace(":id", mediaId);

//preload.getFile(tmpUrl2);
        if(preload.preloader.filesLoadedMap[tmpUrl2] != undefined) {
            preload.addFiles(tmpUrl2);
        }

// Set volume if defined
        if($audioUri.attr('volume') != undefined) {
            var volume = $audioUri.attr('volume') / 100;
            $audioObj.get(0).volume = volume;
        }
        
        // Loop
        $audioObj.prop('loop', $audioUri.get(0).getAttribute('loop') == "1");
        $audioObj.attr('id', self.containerName + '-attached-aud');
        //$audioUri.remove();
        $audioObj.append('<source src="' + tmpUrl2 + '">Unsupported Audio');

media.append($audioObj);
        self.attachedAudio = true;
    }
    
    playLog(5, "debug", "Created media " + self.id)
}