Xinwen Deng / aem-src

/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2015 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */
define('screens/player/ui/connectivity', [
    'jquery',
    './tooltip',
    'screens/player/firmware/core/bridge'
], function($, Tooltip, Bridge) {
    'use strict';

    /**
     * Default options for the component.
     *
     * @typedef {Object} Connectivity.ConnectivityOptions
     * @type {Object}
     * @property {Object} [tooltip]                 Options for the tooltip.
     * @property {String} [tooltip.title]           Title to add to the tooltip.
     * @property {String} [tooltip.content]         Text to add to the tooltip.
     * @property {String} [tooltip.css]             A css class to add to the tooltip.
     * @property {Object} [displayLayout]           The display configuration
     * @property {Number} [displayLayout.numRows]   Number of rows of displays
     * @property {Number} [displayLayout.numCols]   Number of columns of displays
     * @property {String} [type]                    Connectivity indicator type ('disabled', 'spinner*, 'minimal')
     * @property {String} [typeDefault]             Connectivity default indicator type ('disabled', 'spinner'*, 'minimal')
     */
    var DEFAULTS = {
        tooltip: {
            title: 'AEM',
            content: 'Screens',
            css: 'aem-ScreensPlayer-tooltip--loading'
        },
        displayLayout: {
            numRows: 1,
            numCols: 1
        },
        type: '',
        typeDefault: 'spinner',
        bridge: null
    };

    /**
     * Get the overlay for the component.
     *
     * @return {Overlay|null} The initialized overlay, or null
     */
    var getOverlay = function() {
        if (!this.overlay) {
            this.overlay = this.options.overlay;
        }
        return this.overlay || null;
    };

    /**
     * Gets the tooltip for the player if it exists.
     *
     * @return {Tooltip|null} The initialised tooltip
     */
    var getTooltip = function() {
        if (!this.tooltip) {
            this.tooltip = Tooltip && new Tooltip({
                    title: this.options.tooltip.title,
                    content: this.options.tooltip.content,
                    css: this.options.tooltip.css,
                    displayLayout: this.options.displayLayout
                });
        }
        return this.tooltip || null;
    };

    var getMinimalIndicator = function() {
        if (!this.$mini) {
            this.$mini = $('<div/>').addClass('aem-ScreensPlayer-mini-indicator').appendTo($('body'));
        }
        return this.$mini;
    };

    var handleBridgeLinkUp = function() {
        this.hideLoadingIndicator();
    };

    var handleBridgeLinkDown = function() {
        switch (this.type) {
            case 'spinner':
                this.showLoadingIndicator();
                break;
            case 'minimal':
                this.showMinimalIndicator();
                break;
        }
    };

    var handleBridgeData = function(data) {
        try {
            this.type = data.device ? data.device.offlineIndicator : this.options.typeDefault;
            console.log('Offline indicator type set to: ' + this.type);
        } catch (e) {
            console.error(e);
        }
    };

    /**
     * Connectivity checker for the player.
     *
     * @class Connectivity
     *
     * @param {Connectivity.ConnectivityOptions} [options]   Options for the component.
     */
    var Connectivity = function(options) {
        this.options = $.extend({}, DEFAULTS, options);

        // FIXME: need to rework the connectivity state display. we should only show the spinner:
        // - during startup until the handshake is done
        // - if a online channel is selected, but the link is down

        this.options.bridge.on(Bridge.events.STARTED, handleBridgeLinkDown.bind(this));
        this.options.bridge.on(Bridge.events.HANDSHAKE_COMPLETED, handleBridgeLinkUp.bind(this));
        // this.options.bridge.on('bridge-fallback', handleBridgeLinkUp.bind(this));
        // this.options.bridge.on('bridge-link-up', handleBridgeLinkUp.bind(this));
        // this.options.bridge.on('bridge-link-down', handleBridgeLinkDown.bind(this));
        this.options.bridge.on(Bridge.events.DATA, handleBridgeData.bind(this));
        this.type = this.options.type || this.options.typeDefault;
    };

    /**
     * Show the loading indicator.
     * @memberof Connectivity
     *
     * @param  {Function} [cb] Callback function
     */
    Connectivity.prototype.showLoadingIndicator = function(cb) {
        var overlay = getOverlay.call(this);
        if (overlay) {
            overlay.show();
        } else {
            console.warn('Overlay module not loaded');
        }
        var tooltip = getTooltip.call(this);
        if (tooltip) {
            tooltip.show(false, cb);
        } else {
            console.warn('Tooltip module not loaded');
        }
    };

    /**
     * Show the loading indicator.
     * @memberof Connectivity
     */
    Connectivity.prototype.showMinimalIndicator = function() {
        var $mini = getMinimalIndicator.call(this);
        $mini.show();
    };

    /**
     * Hide the loading indicator.
     * @memberof Connectivity
     */
    Connectivity.prototype.hideLoadingIndicator = function() {
        if (this.tooltip) {
            this.tooltip.hide();
        }
        if (this.overlay) {
            this.overlay.hide();
        }
        if (this.$mini) {
            this.$mini.hide();
        }
    };

    /**
     * Destroy the connectivity checker.
     * @memberof Connectivity
     */
    Connectivity.prototype.destroy = function() {
        if (this.tooltip) {
            this.tooltip.destroy();
            this.tooltip = null;
        }
        if (this.overlay) {
            this.overlay = null;
        }
    };

    return Connectivity;

});