Xinwen Deng / aem-src

/*
 *
 * ADOBE CONFIDENTIAL
 * __________________
 *
 *  Copyright 2014 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 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.
 */

/* globals Promise */

define('screens/player/ui/adminview-configuration', [
    'underscore',
    'jquery',
    'later',
    './baseview',
    'screens/player/ui/touchtracker',
    'screens/player/shared/serviceadmin',
    'screens/player/firmware/preferences/preferences',
    'screens/player/runtime/impl/video-service',
    'screens/player/firmware/cache/cache',
    'screens/player/store/store',
    'screens/player/firmware/core/statusmodel/statusmodel',
    'screens/player/firmware/update/update',
    'screens/player/firmware/core/firmware/firmware',
    'screens/player/ui/dialog'
], function(_, $, later, BaseView, TouchTracker, ServiceAdmin, Preferences, VideoService, Cache, Store, StatusModel, Update, Firmware, Dialog) {
    'use strict';

    // mask string for password.
    var PASSWORD_MASK = '**********';

    var DEFAULT_OPTIONS = {
    };

    var WARNING_MESSAGE_FIRMWARE_RESET = 'Resetting the firmware will downgrade the player to its factory firmware. Are you sure you want to continue?';
    var WARNING_MESSAGE_PREFERENCES_RESET = 'Resetting the preferences will load the default preferences. Are you sure you want to continue?';
    var WARNING_MESSAGE_FACTORY_RESET = 'Resetting to factory will reset ALL CONFIGURATIONS. Are you sure you want to continue?';

    // Put all properties you want to see being renderered here.
    function _createInitialRenderProps(options) {
        return {
            updateFirmware: {
                isEnabled: false,
                statusMessage: ''
            }
        };
    }

    var ConfigAdminView = BaseView.extend(/** @lends ConfigAdminView.prototype */{

        template: function() {
            var store = ServiceAdmin.getService(Store.serviceName);
            var preferences = store.getState()[Preferences.NAMESPACE];
            var videoService = ServiceAdmin.getService(VideoService.serviceName);
            var obj = {
                adminUIChecked: (function() {
                    if (typeof preferences.enableAdminUI !== 'undefined') {
                        return preferences.enableAdminUI ? 'checked' : '';
                    }
                    return null;
                }()),
                osdChecked: (function() {
                    if (typeof preferences.enableOSD !== 'undefined') {
                        return preferences.enableOSD ? 'checked' : '';
                    }
                    return null;
                }()),
                activityUIChecked: preferences.enableActivityUI ? 'checked' : '',
                isNativeVideoAvailable: videoService ? videoService.isNativeVideoAvailable() : false,
                nativeVideoChecked: preferences.enableNativeVideo ? 'checked' : '',
                remoteDbgChecked: preferences.enableRemoteInspect ? 'checked' : '',
                passwordMask: preferences.password ? PASSWORD_MASK : '',
                preferences: preferences,
                kiosk: window.KioskPlugin && this.kioskModeEnabled,
                showRemoteInspection: !!window.XWalk,
                props: this._renderProps
            };

            var html = '<h1>Device Configuration</h1>';

            html += '<h2>Preferences</h2>';
            html += '<form id="preferences"><table class="aem-ScreensPlayer-admin-configurationView-preferences">';
            html += '<tr><td>Server:</td><td><input type="url" pattern="https?://.+" name="server" class="aem-ScreensPlayer-configurationView-serverUrl" value="' + preferences.server + '" required></td></tr>';
            html += '<tr><td>Device:</td><td><input type="text" name="device" class="aem-ScreensPlayer-configurationView-deviceId" value="' + preferences.device + '"></td></tr>';
            html += '<tr><td>User:</td><td><input type="text" name="user" class="aem-ScreensPlayer-configurationView-userName" value="' + preferences.user + '"></td></tr>';
            html += '<tr><td>Password:</td><td><input type="password" name="password" class="aem-ScreensPlayer-configurationView-passwordMask" value="' + obj.passwordMask + '"></td></tr>';
            html += '<tr><td>Resolution:</td><td><input type="text" pattern="auto|[1-9][0-9]{2,4}x[1-9][0-9]{2,4}" name="resolution" class="aem-ScreensPlayer-configurationView-resolution" value="' + preferences.resolution + '" required></td></tr>';
            html += '<tr><td>Reboot Schedule:</td><td><input type="text" name="rebootSchedule" class="aem-ScreensPlayer-configurationView-rebootSchedule" value="' + preferences.rebootSchedule + '" required></td></tr>';
            html += (obj.adminUIChecked !== null) ? '<tr><td>Admin&nbsp;Menu:</td><td><input type="checkbox" ' + obj.adminUIChecked + ' name="enableAdminUI" class="aem-ScreensPlayer-configurationView-enableAdminUI"></td></tr>' : '';
            html += (obj.osdChecked !== null) ? '<tr><td>Channel&nbsp;Switcher:</td><td><input type="checkbox" ' + obj.osdChecked + ' name="enableOSD" class="aem-ScreensPlayer-configurationView-enableOSD"></td></tr>' : '';
            html += (obj.activityUIChecked !== null) ? '<tr><td>Activity UI:</td><td><input type="checkbox" ' + obj.activityUIChecked + ' name="enableActivityUI" class="aem-ScreensPlayer-configurationView-enableActivityUI"></td></tr>' : '';

            // Preference to use Native Video Playback if available. Default unchecked.
            html += (obj.isNativeVideoAvailable === true) ? '<tr><td>Use&nbsp;Native&nbsp;Video:</td><td><input type="checkbox" ' + obj.nativeVideoChecked + ' name="enableNativeVideo" class="aem-ScreensPlayer-configurationView-enableNativeVideo">&nbsp;(experimental)</td></tr>' : '';

            // currently only show preference if remote debugging for crosswalk builds
            html += (obj.showRemoteInspection) ? '<tr><td>Remote&nbsp;Inspection:</td><td><input type="checkbox" ' + obj.remoteDbgChecked + ' name="enableRemoteInspect" class="aem-ScreensPlayer-configurationView-enableRemoteInspect"></td></tr>' : '';

            html += '<tr><td></td><td><button id="btn-reset" type="reset">Cancel</button><button id="btn-save" type="submit">Save</button></td></tr>';
            html += '</table></form>';
            html += '<h2>Input</h2>';
            html += '<h3><button id="btn-touch-test">Test Touch Input</button></h3>';
            html += '<h2>Reload</h2>';
            html += '<h3><button id="btn-reload">Reload Player</button></h3>';

            // Add a "Firmware update" Button when enabled
            html += '<h2>Update Firmware: </h2>';
            html += (obj.props.updateFirmware.isEnabled) ? '<h3><button id="btn-update-firmware">' + obj.props.updateFirmware.statusMessage + '</button></h3>' : '<h3 class="firmware-update-statusMessage">Not enabled</h3>';

            // Add a button to exit Kiosk mode when the app is used as an Android launcher
            html += (obj.kiosk) ? '<h2>Kiosk Mode</h2><div><button class="screens-Kiosk-exitBtn">Exit</button></div>' : '';

            html += '<h2>Reset</h2>';
            html += '<h3>';
            html += '<button id="btn-reset-firmware">Firmware</button>';
            html += '<button id="btn-reset-preferences">Preferences</button>';
            html += '<button id="btn-reset-factory">To Factory</button>';
            html += '</h3>';
            return html;
        },

        className: 'aem-ScreensPlayer-admin-view',

        events: {
            'submit #preferences': 'savePreferences',
            'click #btn-reset-firmware': 'resetFirmware',
            'click #btn-reset-preferences': 'resetPreferences',
            'click #btn-reset-factory': 'resetToFactory',
            'click #btn-touch-test': 'openTouchTest',
            'click #btn-reload': 'reloadPlayer',
            'click #btn-update-firmware': 'updateFirmware'
        },

        /**
         * @classdesc View that renders the admin menu
         * @class AdminView
         * @extends BaseView
         *
         * @param {Object} [options] An object of configurable options.
         */
        constructor: function(options) {
            this._initOptions(options, DEFAULT_OPTIONS);
            ConfigAdminView.__super__.constructor.apply(this, arguments);

            // This property tracks all the props relevant for rendering a template.
            this._renderProps = _createInitialRenderProps(this.options);

            var self = this;

            var store = ServiceAdmin.getService(Store.serviceName);

            // Toggle the kiosk exit button if the app is used as an Android launcher
            window.KioskPlugin && window.KioskPlugin.isInKiosk(function(isInKiosk) {
                self.kioskModeEnabled = isInKiosk;
                self.render();
            });
            $(document).on('click', '.screens-Kiosk-exitBtn', function(ev) {
                window.KioskPlugin && window.KioskPlugin.exitKiosk();
            });

            this.$el.on('show', this.onShow.bind(this));
            this.$el.on('hide', this.onHide.bind(this));

            ServiceAdmin.onServiceHighestRankedStart(Update.serviceName, function(update) {
                var statusmodel = store.getState()[StatusModel.NAMESPACE];
                // Check that the device is registered, authenticated, that the link is up and updates are supported
                self._renderProps.updateFirmware.isEnabled = self.isFirmwareUpdateEnabled(statusmodel, update);
                self._updateFirmware = function() {
                    update.nextStep();
                };
            });

            // HTML5 form validation for the reboot schedule property
            $(document).on('change', '.aem-ScreensPlayer-configurationView-rebootSchedule', function(ev) {
                var value = $(ev.target).val();

                // Check if anyone of the default values
                if ((/off|false|no|never|-1/).test(value)) {
                    return;
                }
                // Validate text expression
                var schedule = later.parse.text(value);
                var isValidTextExpression = schedule.error === -1;

                // Validate cron expression
                // TODO: this is a trivial regexp that needs to be improved for a better UX
                var cronRegExp = /^([0-9,\/\-\*]+)(\s[0-9,\/\-\*]+){5}$/;
                var isValidCronExpression = value.match(cronRegExp);

                ev.target.setCustomValidity(isValidTextExpression || isValidCronExpression ? '' : 'Please set correct format for reboot schedule');
            });
        },

        destroy: function() {
            this.onHide();
        },

        /**
         * Will reset the firmware to the original shipped version and reboot the player.
         * @param {Boolean} [noConfirmation] Visual confirmation dialog is not shown before execution.
         */
        resetFirmware: function(noConfirmation) {
            function reset() {
                var flags = {};
                flags[Cache.FLAGS.REBOOT_ON_COMPLETE] = true;
                var cacheSvc = ServiceAdmin.getService(Cache.serviceName);
                cacheSvc.resetFirmware(flags);
            }
            if (noConfirmation === true) { // eslint-disable-line no-alert
                reset();
            } else {
                var dialog = new Dialog();
                dialog.confirm(WARNING_MESSAGE_FIRMWARE_RESET).then(function(isConfirmed) {
                    if (isConfirmed) {
                        reset();
                    }
                });
            }
        },

        /**
         * Will reset the preferences to the default preferences and reboot the player.
         * @param {Boolean} [noConfirmation] Visual confirmation dialog is not shown before execution.
         */
        resetPreferences: function(noConfirmation) {
            function reset() {
                var preferencesSvc = ServiceAdmin.getService(Preferences.serviceName);
                var flags = {};
                flags[Preferences.FLAGS.REBOOT_ON_COMPLETE] = true;
                preferencesSvc.reset(flags);
            }
            if (noConfirmation === true) { // eslint-disable-line no-alert
                reset();
            } else {
                var dialog = new Dialog();
                dialog.confirm(WARNING_MESSAGE_PREFERENCES_RESET).then(function(isConfirmed) {
                    if (isConfirmed) {
                        reset();
                    }
                });
            }
        },

        /**
         * Will reset the preferences to the default preferences, clear all caches and reboot the player.
         * @param {Boolean} [noConfirmation] Visual confirmation dialog is not shown before execution.
         */
        resetToFactory: function(noConfirmation) {
            function reset() {
                var store = ServiceAdmin.getService(Store.serviceName);

                var handlerPreferencesCleared = store.subscribe(function() { // wait for preferences to be cleared
                    store.unsubscribe(handlerPreferencesCleared);

                    var handlerCacheCleared = store.subscribe(function(cacheState) { // wait for firmware to be cleared
                        if (!cacheState.clearing) {
                            var flags = {};
                            flags[Cache.FLAGS.REBOOT_ON_COMPLETE] = true;
                            store.unsubscribe(handlerCacheCleared);
                            var cacheSvc = ServiceAdmin.getService(Cache.serviceName);
                            cacheSvc.clearAll(flags);
                        }
                    }, Cache.NAMESPACE);

                    var cacheSvc = ServiceAdmin.getService(Cache.serviceName);
                    cacheSvc.resetFirmware();
                }, Preferences.NAMESPACE);

                var preferencesSvc = ServiceAdmin.getService(Preferences.serviceName);
                preferencesSvc.reset();
            }

            if (noConfirmation === true) {
                reset();
            } else {
                var dialog = new Dialog();
                dialog.confirm(WARNING_MESSAGE_FACTORY_RESET).then(function(isConfirmed) {
                    if (isConfirmed) {
                        reset();
                    }
                });
            }

        },

        render: function() {
            this.$el.html(this.template());
            return this;
        },

        isFirmwareUpdateEnabled: function(statusmodel, update) {
            if (!statusmodel || !update) {
                return false;
            }

            return (statusmodel.registrationState === 'REGISTERED') &&
                (!!statusmodel.linkUp) && (!!statusmodel.linkAuthenticated) && update.hasStepByStepSupport();
        },

        renderOnStatusModelChange: function(statusmodel) {
            var update = ServiceAdmin.getService(Update.serviceName);
            // Check that the device is registered, authenticated, that the link is up and updates are supported
            var firmwareUpdateEnabled = this.isFirmwareUpdateEnabled(statusmodel, update);
            if (firmwareUpdateEnabled !== this._renderProps.updateFirmware.isEnabled) {
                this._renderProps.updateFirmware.isEnabled = firmwareUpdateEnabled;
                this.render();
            }
        },

        renderOnUpdateStoreChange: function(state) {
            var stateStatusMessageMap = Object.create(null);
            stateStatusMessageMap[Update.STATES.INITIALIZED] = 'Check for updates';
            stateStatusMessageMap[Update.STATES.CHECKING] = 'Checking for updates...';
            stateStatusMessageMap[Update.STATES.HAS_UPDATES] = 'Updates available. Click to update.';
            stateStatusMessageMap[Update.STATES.UP_TO_DATE] = 'Up to date. Check for updates';
            stateStatusMessageMap[Update.STATES.UPDATING] = 'Downloading updates...';
            stateStatusMessageMap[Update.STATES.UPDATED] = 'Updates installed. Click to reload.';
            stateStatusMessageMap[Update.STATES.ERROR] = 'An Error occurred. Please try again and click to reload.';
            var statusMessage = stateStatusMessageMap[state.progress];
            this._renderProps.updateFirmware.statusMessage = statusMessage ? statusMessage : 'Update ' + state.progress;
            this.render();
        },

        /**
         * Event handler for when this view's contents are hidden
         */
        onHide: function() {
            var store = ServiceAdmin.getService(Store.serviceName);
            if (this._updateChangeListener) {
                store.unsubscribe(this._updateChangeListener);
            }
            if (this._statusModelChangeListener) {
                store.unsubscribe(this._statusModelChangeListener);
                this._statusModelChangeListener = null;
            }
            if (this._preferencesChangeListener) {
                store.unsubscribe(this._preferencesChangeListener);
                this._preferencesChangeListener = null;
            }
        },

        /**
         * Event handler for when this view's contents are shown
         */
        onShow: function() {
            var store = ServiceAdmin.getService(Store.serviceName);
            var storeState = store.getState();

            if (this._updateChangeListener) {
                store.unsubscribe(this._updateChangeListener);
            }
            if (this._statusModelChangeListener) {
                store.unsubscribe(this._statusModelChangeListener);
            }
            if (this._preferencesChangeListener) {
                store.unsubscribe(this._preferencesChangeListener);
            }

            this._statusModelChangeListener = store.subscribe(this.renderOnStatusModelChange.bind(this), StatusModel.NAMESPACE);
            this._preferencesChangeListener = store.subscribe(this.render.bind(this), Preferences.NAMESPACE);
            this._updateChangeListener = store.subscribe(this.renderOnUpdateStoreChange.bind(this), Update.NAMESPACE);

            this.renderOnUpdateStoreChange(storeState[Update.NAMESPACE]);
            this.renderOnStatusModelChange(storeState[StatusModel.NAMESPACE]);
            this.render();
        },

        openTouchTest: function() {
            if (!this._tracker) {
                this._tracker = new TouchTracker().render();
            }
            this._tracker.show();
        },

        savePreferences: function() {
            var p = {};
            if (this.$el) {
                var $form = this.$el.find('form');
                p = {
                    server: $form.find('input[name=server]').val(),
                    device: $form.find('input[name=device]').val(),
                    user: $form.find('input[name=user]').val(),
                    password: $form.find('input[name=password]').val(),
                    resolution: $form.find('input[name=resolution]').val(),
                    rebootSchedule: $form.find('input[name=rebootSchedule]').val(),
                    enableRemoteInspect: $form.find('input[name=enableRemoteInspect]').is(':checked')
                };
                if ($form.find('input[name=enableAdminUI]').length) {
                    p.enableAdminUI = $form.find('input[name=enableAdminUI]').is(':checked');
                }
                if ($form.find('input[name=enableOSD]').length) {
                    p.enableOSD = $form.find('input[name=enableOSD]').is(':checked');
                }
                if ($form.find('input[name=enableActivityUI]').length) {
                    p.enableActivityUI = $form.find('input[name=enableActivityUI]').is(':checked');
                }
                if ($form.find('input[name=enableNativeVideo]').length) {
                    p.enableNativeVideo = $form.find('input[name=enableNativeVideo]').is(':checked');
                }
                if (p.password === PASSWORD_MASK) {
                    delete p.password;
                }
            }

            var preferencesService = ServiceAdmin.getService(Preferences.serviceName);
            var flags = {};
            flags[Preferences.FLAGS.REBOOT_ON_SAVE] = true;
            preferencesService.save(p, flags);
            return false;
        },

        updateFirmware: function() {
            // This function is supposed to be overitten if the UpdateService
            // can be loaded.
            this._updateFirmware();
        },

        reloadPlayer: function() {
            var firmware = ServiceAdmin.getService(Firmware.serviceName);

            firmware.reboot();
        }

    });

    // return module exports
    return ConfigAdminView;
});