Source: components/settings.js

  1. define('application/components/settings', [
  2.     'rofl/widgets/component',
  3.     'rofl/widgets/label',
  4.     'rofl/widgets/container',
  5.     'rofl/lib/l10n',
  6.     'antie/runtimecontext',
  7.     'rofl/lib/utils',
  8.     'rofl/events/keyevent',
  9.     'rofl/analytics/web/google',
  10.     'rofl/widgets/horizontallist',
  11.     'application/widgets/clock',
  12.     'application/widgets/settings/button',
  13.     'antie/storageprovider',
  14.     'application/managers/feature',
  15.     'application/managers/session'
  16. ], function (
  17.     Component,
  18.     Label,
  19.     Container,
  20.     L10N,
  21.     RuntimeContext,
  22.     Utils,
  23.     KeyEvent,
  24.     GoogleAnalytics,
  25.     HorizontalList,
  26.     Clock,
  27.     Button,
  28.     StorageProvider,
  29.     FeatureManager,
  30.     SessionManager
  31. ) {
  32.     'use strict';
  34.     var l10n = L10N.getInstance(),
  35.         application = RuntimeContext.getCurrentApplication(),
  36.         Settings,
  37.         GA = GoogleAnalytics.getInstance(),
  38.         device = RuntimeContext.getDevice(),
  39.         sessionManager = SessionManager.getInstance(),
  40.         version = application.getConfiguration().version,
  41.         storage;
  43.     Settings = Component.extend({
  45.         /**
  46.          * Initialises the component.
  47.          */
  48.         init: function init () {
  49.             init.base.call(this, 'settings');
  50.             storage = device.getStorage(StorageProvider.STORAGE_TYPE_SESSION, 'storage');
  52.             this._build();
  54.             this._parentalSetting = false;
  55.             this._subtitlesSetting = false;
  57.             this._lastFocusedWidget = null;
  59.             this._createVersionLabel();
  60.             this._getParentalSetting();
  61.             this._getSubtitlesSetting();
  63.             this._onKeyDownBound = Utils.bind(this._onKeyDown, this);
  64.             this._onSelectBound = Utils.bind(this._onSelect, this);
  65.         },
  67.         /**
  68.          * Creates the version label.
  69.          *
  70.          * @private
  71.          */
  72.         _createVersionLabel: function () {
  73.             var versionText = l10n.get('menu.version') + ' ' + version,
  74.                 versionLabel = new Label({ text: versionText, classNames: ['version'] });
  76.             this.appendChildWidget(versionLabel);
  77.         },
  79.         /**
  80.          * Builds the component.
  81.          *
  82.          * @private
  83.          */
  84.         _build: function () {
  85.             this._buildBackButton();
  86.             this._buildGradient();
  87.             this._buildTitle();
  88.             this._buildClock();
  89.             this._buildSettingsButtons();
  90.         },
  92.         /**
  93.          * Builds the top bar list.
  94.          *
  95.          * @private
  96.          */
  97.         _buildBackButton: function () {
  98.             var topBar = this._topBar = new HorizontalList(),
  99.                 branding = this._branding = new Container();
  101.             branding.addClass('page-branding');
  102.             topBar.addClass('topbar');
  103.             topBar.appendChildWidget(branding);
  104.             this.appendChildWidget(topBar);
  105.         },
  107.         /**
  108.          * Builds the top bar list.
  109.          *
  110.          * @private
  111.          */
  112.         _buildGradient: function () {
  113.             var gradient = this._gradient = new Container();
  115.             gradient.addClass('gradient');
  117.             this._topBar.appendChildWidget(gradient);
  118.         },
  120.         /**
  121.          * Builds the title.
  122.          *
  123.          * @private
  124.          */
  125.         _buildTitle: function () {
  126.             var title = this._title = new Label({ text: l10n.get('settings.title'), classNames: ['top-title'] });
  128.             this._branding.appendChildWidget(title);
  129.         },
  131.         /**
  132.          * Builds the clock.
  133.          *
  134.          * @private
  135.          */
  136.         _buildClock: function () {
  137.             var clock = this._clock = new Clock();
  139.             clock.addClass('header-clock');
  140.             this._topBar.appendChildWidget(clock);
  141.         },
  143.         /**
  144.          * Builds settings buttons.
  145.          *
  146.          * @private
  147.          */
  148.         _buildSettingsButtons: function () {
  149.             var buttonsList = this._buttonsList = new HorizontalList('settings-actions'),
  150.                 buttonChildLock = this._buttonChildLock = new Button(l10n.get('settings.buttons.child_lock'), 'child-lock'),
  151.                 buttonSubtitles = this._buttonSubtitles = new Button(l10n.get('settings.buttons.subtitles'), 'subtitles'),
  152.                 buttonLogout = new Button(l10n.get('settings.buttons.logout'), 'logout');
  154.             buttonChildLock.getLabelIcon().addClass('icon-lock');
  155.             buttonSubtitles.getLabelIcon().addClass('icon-subtitles');
  156.             buttonLogout.getLabelIcon().addClass('icon-logout');
  158.             buttonChildLock.setOnOffValue(this._getParentalSetting());
  159.             buttonSubtitles.setOnOffValue(this._getSubtitlesSetting());
  161.             if (FeatureManager.getInstance().isParentalEnabled()) {
  162.                 buttonsList.appendChildWidget(buttonChildLock);
  163.             }
  165.             if (FeatureManager.getInstance().isSubtitlesEnabled()) {
  166.                 buttonsList.appendChildWidget(buttonSubtitles);
  167.             }
  169.             buttonsList.appendChildWidget(buttonLogout);
  171.             this.appendChildWidget(buttonsList);
  172.         },
  174.         /**
  175.          * Handle KeyEvent.
  176.          *
  177.          * @param {KeyEvent} e - KeyEvent instance.
  178.          * @private
  179.          */
  180.         _onKeyDown: function (e) {
  182.             switch (e.keyCode) {
  183.                 case KeyEvent.VK_LEFT:
  184.                     e.stopPropagation();
  186.                     application.focusMenu('main');
  187.                     break;
  188.                 case KeyEvent.VK_RIGHT:
  189.                     e.stopPropagation();
  190.                     break;
  191.                 case KeyEvent.VK_BACK:
  192.                     this._onClose();
  193.                     break;
  194.             }
  195.         },
  197.         /**
  198.          * Stores settings value to storage.
  199.          *
  200.          * @param {boolean} value - Value.
  201.          * @private
  202.          */
  203.         _storeSubtitlesSetting: function (value) {
  204.             storage.setItem('subtitles', value);
  205.             this._subtitlesSetting = value;
  207.             this._setEventListeners();
  208.             this._buttonSubtitles.setOnOffValue(value);
  209.         },
  211.         /**
  212.          * Returns subtitles setting.
  213.          *
  214.          * @returns {boolean|*} Subtitles setting.
  215.          * @private
  216.          */
  217.         _getSubtitlesSetting: function () {
  218.             this._subtitlesSetting = storage.getItem('subtitles');
  220.             return this._subtitlesSetting;
  221.         },
  223.         /**
  224.          * Stores settings value to storage.
  225.          *
  226.          * @param {boolean} value - Value.
  227.          * @private
  228.          */
  229.         _storeParentalSetting: function (value) {
  230.             storage.setItem('parental', value);
  231.             this._parentalSetting = value;
  233.             if (value) {
  234.                 sessionManager.setUserPin(null);
  235.             }
  237.             this._setEventListeners();
  238.             this._buttonChildLock.setOnOffValue(value);
  239.         },
  241.         /**
  242.          * Returns childlock setting.
  243.          *
  244.          * @returns {boolean|*} Childlock setting.
  245.          * @private
  246.          */
  247.         _getParentalSetting: function () {
  248.             this._parentalSetting = storage.getItem('parental');
  250.             return this._parentalSetting;
  251.         },
  253.         /**
  254.          * Callback when modal closes.
  255.          *
  256.          * @private
  257.          */
  258.         _closeModalCallback: function () {
  260.             this._setEventListeners();
  261.             this._lastFocusedWidget.focus();
  262.         },
  264.         /**
  265.          * Reopens settings modal.
  266.          *
  267.          * @private
  268.          */
  269.         _reopenChildLockModal: function () {
  270.             application.route('settingsmodal', {
  271.                 title: l10n.get('settings.parental.title'),
  272.                 subtitle: l10n.get('settings.parental.subtitle'),
  273.                 description: l10n.get('settings.parental.description'),
  274.                 onOff: this._parentalSetting,
  275.                 iconClass: 'icon-lock',
  276.                 pinCallback: Utils.bind(this._checkPIN, this),
  277.                 closeModalCallback: Utils.bind(this._closeModalCallback, this)
  278.             });
  279.         },
  281.         /**
  282.          * Check pin.
  283.          *
  284.          * @param {string} value - Pin value.
  285.          * @private
  286.          */
  287.         _checkPIN: function (value) {
  288.             application.route('parentalpin', {
  289.                 successCallback: Utils.bind(function () {
  290.                     this._lastFocusedWidget.focus();
  291.                     this._storeParentalSetting(value);
  292.                 }, this),
  293.                 escapeCallback: Utils.bind(this._reopenChildLockModal, this),
  294.                 description: l10n.get('settings.parental.modal_description'),
  295.                 errorCallback: Utils.bind(function (result) {
  297.                     if (Utils.getNested(result, 'resultObj', 'remainingAttempts') === 0) {
  299.                         this.focus();
  300.                         this._setEventListeners();
  301.                     }
  302.                 }, this)
  303.             });
  305.         },
  307.         /**
  308.          * OnSelect event.
  309.          *
  310.          * @param {Object} e - Event.
  311.          * @private
  312.          */
  313.         _onSelect: function (e) {
  314.             var selectedId = e.target.id;
  316.             this._lastFocusedWidget = e.target;
  318.             switch (selectedId) {
  319.                 case 'logout':
  320.                     application.route('logout');
  321.                     break;
  322.                 case 'child-lock':
  323.                     this._removeEventListeners();
  324.                     application.route('settingsmodal', {
  325.                         title: l10n.get('settings.parental.title'),
  326.                         subtitle: l10n.get('settings.parental.subtitle'),
  327.                         description: l10n.get('settings.parental.description'),
  328.                         onOff: this._parentalSetting,
  329.                         callback: Utils.bind(this._storeParentalSetting, this),
  330.                         iconClass: 'icon-lock',
  331.                         pinCallback: Utils.bind(this._checkPIN, this),
  332.                         closeModalCallback: Utils.bind(this._closeModalCallback, this)
  333.                     });
  334.                     break;
  335.                 case 'subtitles':
  336.                     this._removeEventListeners();
  337.                     application.route('settingsmodal', {
  338.                         title: l10n.get('settings.subtitles.title'),
  339.                         subtitle: l10n.get('settings.subtitles.title'),
  340.                         description: l10n.get('settings.subtitles.description'),
  341.                         onOff: this._subtitlesSetting,
  342.                         callback: Utils.bind(this._storeSubtitlesSetting, this),
  343.                         iconClass: 'icon-subtitles',
  344.                         closeModalCallback: Utils.bind(this._closeModalCallback, this)
  345.                     });
  346.                     break;
  347.             }
  348.         },
  350.         /**
  351.          * BeforeShow event.
  352.          */
  353.         onBeforeShow: function () {
  355.             this._setEventListeners();
  356.             GA.onPageView('settings');
  357.             this._buttonsList.setActiveChildIndex(0);
  358.             this._buttonsList.focus();
  359.             application.hideLoader();
  360.             this._lastFocusedWidget = application.getFocussedWidget();
  361.             this._buttonChildLock.setOnOffValue(this._getParentalSetting());
  362.         },
  364.         /**
  365.          * BeforeHide event.
  366.          */
  367.         onBeforeHide: function () {
  368.             this._removeEventListeners();
  369.         },
  371.         /**
  372.          * Sets the event listeners.
  373.          *
  374.          * @private
  375.          */
  376.         _setEventListeners: function () {
  377.             if (this._listening) {
  378.                 return;
  379.             }
  381.             this._listening = true;
  382.             this.addEventListener('keydown', this._onKeyDownBound);
  383.             this._buttonsList.addEventListener('select', this._onSelectBound);
  384.         },
  386.         /**
  387.          * Removes the event listeners.
  388.          *
  389.          * @private
  390.          */
  391.         _removeEventListeners: function () {
  392.             if (this._listening) {
  393.                 this._listening = false;
  394.                 this.removeEventListener('keydown', this._onKeyDownBound);
  395.                 this.removeEventListener('select', this._onSelectBound);
  396.             }
  397.         },
  399.         /**
  400.          * Executes the close functionality.
  401.          */
  402.         _onClose: function () {
  404.             // Go back and focus the player.
  405.             application.focusMenu('main');
  406.         }
  407.     });
  409.     return Settings;
  410. });