Merge pull request #862 from jitsi/make-settings-sections-configurable

Make settings sections configurable

index.html

@@ -175,9 +175,9 @@
                 </div>
                 <div id="settings_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="settings.title"></div>
-                    <select class="first" id="languages_selectbox"></select>
+                    <select id="languages_selectbox" class="first hide"></select>
-                    <div class="subTitle" data-i18n="settings.audioVideo"></div>
+                    <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
-                    <div id="devicesOptions">
+                    <div id="devicesOptions" class="hide">
                         <div class="sideToolbarBlock first">
                             <label class="first" data-i18n="settings.selectCamera"></label>
                             <select id="selectCamera"></select>
@@ -191,8 +191,8 @@
                             <select  id="selectAudioOutput"></select>
                         </div>
                     </div>
-                    <div class="subTitle" data-i18n="settings.moderator"></div>
+                    <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                    <div id = "startMutedOptions">
+                    <div id = "startMutedOptions" class="hide">
                         <div class="sideToolbarBlock first">
                             <input type="checkbox" id="startAudioMuted">
                             <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
@@ -202,7 +202,7 @@
                             <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
                         </div>
                     </div>
-                    <div id="followMeOptions" class="sideToolbarBlock">
+                    <div id="followMeOptions" class="sideToolbarBlock hide">
                         <input type="checkbox" id="followMeCheckBox">
                         <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
                     </div>

interface_config.js

@@ -21,6 +21,7 @@ var interfaceConfig = {
     // to easily override values or remove them using regex
     MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
     TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
     // Determines how the video would fit the screen. 'both' would fit the whole
     // screen, 'height' would fit the original video height to the height of the
     // screen, 'width' would fit the original video width to the width of the

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,4 +1,4 @@
-/* global APP, $, JitsiMeetJS */
+/* global APP, $, JitsiMeetJS, interfaceConfig */
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import languages from "../../../../service/translation/languages";
@@ -6,6 +6,7 @@ import Settings from '../../../settings/Settings';
 
 /**
  * Generate html select options for available languages.
+ *
  * @param {string[]} items available languages
  * @param {string} [currentLang] current language
  * @returns {string}
@@ -28,6 +29,7 @@ function generateLanguagesOptions(items, currentLang) {
 
 /**
  * Generate html select options for available physical devices.
+ *
  * @param {{ deviceId, label }[]} items available devices
  * @param {string} [selectedId] id of selected device
  * @param {boolean} permissionGranted if permission to use selected device type
@@ -62,46 +64,59 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
 
 export default {
     init (emitter) {
-        // START MUTED
+        if (UIUtil.isSettingEnabled('devices')) {
-        $("#startMutedOptions").change(function () {
+            // DEVICES LIST
-            let startAudioMuted = $("#startAudioMuted").is(":checked");
+            JitsiMeetJS.mediaDevices.isDeviceListAvailable()
-            let startVideoMuted = $("#startVideoMuted").is(":checked");
+                .then((isDeviceListAvailable) => {
-            emitter.emit(
+                    if (isDeviceListAvailable &&
-                UIEvents.START_MUTED_CHANGED,
+                        JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
-                startAudioMuted,
+                        this._initializeDeviceSelectionSettings(emitter);
-                startVideoMuted
+                    }
-            );
+                });
-        });
 
-        // FOLLOW ME
+            // Only show the subtitle if this isn't the only setting section.
-        $("#followMeOptions").change(function () {
+            if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
-            let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
+                UIUtil.showElement("deviceOptionsTitle");
-            emitter.emit(
-                UIEvents.FOLLOW_ME_ENABLED,
-                isFollowMeEnabled
-            );
-        });
 
-        // LANGUAGES BOX
+            UIUtil.showElement("devicesOptions");
-        let languagesBox = $("#languages_selectbox");
+        }
-        languagesBox.html(generateLanguagesOptions(
-            languages.getLanguages(),
-            APP.translation.getCurrentLanguage()
-        ));
-        APP.translation.translateElement(languagesBox);
-        languagesBox.change(function () {
-            emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val());
-        });
 
-
+        if (UIUtil.isSettingEnabled('language')) {
-        // DEVICES LIST
+            //LANGUAGES BOX
-        JitsiMeetJS.mediaDevices.isDeviceListAvailable()
+            let languagesBox = $("#languages_selectbox");
-            .then((isDeviceListAvailable) => {
+            languagesBox.html(generateLanguagesOptions(
-                if (isDeviceListAvailable &&
+                languages.getLanguages(),
-                    JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
+                APP.translation.getCurrentLanguage()
-                    this._initializeDeviceSelectionSettings(emitter);
+            ));
-                }
+            APP.translation.translateElement(languagesBox);
+            languagesBox.change(function () {
+                emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val());
             });
+
+            UIUtil.showElement("languages_selectbox");
+        }
+
+        if (UIUtil.isSettingEnabled('moderator')) {
+            // START MUTED
+            $("#startMutedOptions").change(function () {
+                let startAudioMuted = $("#startAudioMuted").is(":checked");
+                let startVideoMuted = $("#startVideoMuted").is(":checked");
+                emitter.emit(
+                    UIEvents.START_MUTED_CHANGED,
+                    startAudioMuted,
+                    startVideoMuted
+                );
+            });
+
+            // FOLLOW ME
+            $("#followMeOptions").change(function () {
+                let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
+                emitter.emit(
+                    UIEvents.FOLLOW_ME_ENABLED,
+                    isFollowMeEnabled
+                );
+            });
+        }
     },
 
     _initializeDeviceSelectionSettings(emitter) {
@@ -133,10 +148,19 @@ export default {
      * @param {boolean} show
      */
     showStartMutedOptions (show) {
-        if (show) {
+        if (show && UIUtil.isSettingEnabled('moderator')) {
-            $("#startMutedOptions").css("display", "block");
+            // Only show the subtitle if this isn't the only setting section.
+            if (!$("#moderatorOptionsTitle").is(":visible")
+                && interfaceConfig.SETTINGS_SECTIONS.length > 1)
+                UIUtil.showElement("moderatorOptionsTitle");
+
+            UIUtil.showElement("startMutedOptions");
         } else {
-            $("#startMutedOptions").css("display", "none");
+            // Only show the subtitle if this isn't the only setting section.
+            if ($("#moderatorOptionsTitle").is(":visible"))
+                UIUtil.hideElement("moderatorOptionsTitle");
+
+            UIUtil.hideElement("startMutedOptions");
         }
     },
 
@@ -151,10 +175,10 @@ export default {
      * @param {boolean} show {true} to show those options, {false} to hide them
      */
     showFollowMeOptions (show) {
-        if (show) {
+        if (show && UIUtil.isSettingEnabled('moderator')) {
-            $("#followMeOptions").css("display", "block");
+            UIUtil.showElement("followMeOptions");
         } else {
-            $("#followMeOptions").css("display", "none");
+            UIUtil.hideElement("followMeOptions");
         }
     },
 

modules/UI/util/UIUtil.js

@@ -104,9 +104,51 @@
         }
     },
 
+    /**
+     * Indicates if a toolbar button is enabled.
+     * @param name the name of the setting section as defined in
+     * interface_config.js and Toolbar.js
+     * @returns {boolean} {true} to indicate that the given toolbar button
+     * is enabled, {false} - otherwise
+     */
     isButtonEnabled: function (name) {
         return interfaceConfig.TOOLBAR_BUTTONS.indexOf(name) !== -1;
     },
+    /**
+     * Indicates if the setting section is enabled.
+     *
+     * @param name the name of the setting section as defined in
+     * interface_config.js and SettingsMenu.js
+     * @returns {boolean} {true} to indicate that the given setting section
+     * is enabled, {false} - otherwise
+     */
+    isSettingEnabled: function (name) {
+        return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1;
+    },
+
+    /**
+     * Shows the element given by id.
+     *
+     * @param {String} the identifier of the element to show
+     */
+    showElement(id) {
+        if ($("#"+id).hasClass("hide"))
+            $("#"+id).removeClass("hide");
+
+        $("#"+id).addClass("show");
+    },
+
+    /**
+     * Hides the element given by id.
+     *
+     * @param {String} the identifier of the element to hide
+     */
+    hideElement(id) {
+        if ($("#"+id).hasClass("show"))
+            $("#"+id).removeClass("show");
+
+        $("#"+id).addClass("hide");
+    },
 
     hideDisabledButtons: function (mappings) {
         var selector = Object.keys(mappings)