diff --git a/interface_config.js b/interface_config.js
index 95164e3a5..8187486e3 100644
--- a/interface_config.js
+++ b/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
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index f7182336d..d6e69f717 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/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
- $("#startMutedOptions").change(function () {
- let startAudioMuted = $("#startAudioMuted").is(":checked");
- let startVideoMuted = $("#startVideoMuted").is(":checked");
- emitter.emit(
- UIEvents.START_MUTED_CHANGED,
- startAudioMuted,
- startVideoMuted
- );
- });
+ if (UIUtil.isSettingEnabled('devices')) {
+ // DEVICES LIST
+ JitsiMeetJS.mediaDevices.isDeviceListAvailable()
+ .then((isDeviceListAvailable) => {
+ if (isDeviceListAvailable &&
+ JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
+ this._initializeDeviceSelectionSettings(emitter);
+ }
+ });
- // FOLLOW ME
- $("#followMeOptions").change(function () {
- let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
- emitter.emit(
- UIEvents.FOLLOW_ME_ENABLED,
- isFollowMeEnabled
- );
- });
+ // Only show the subtitle if this isn't the only setting section.
+ if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
+ UIUtil.showElement("deviceOptionsTitle");
- // LANGUAGES BOX
- 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());
- });
+ UIUtil.showElement("devicesOptions");
+ }
-
- // DEVICES LIST
- JitsiMeetJS.mediaDevices.isDeviceListAvailable()
- .then((isDeviceListAvailable) => {
- if (isDeviceListAvailable &&
- JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
- this._initializeDeviceSelectionSettings(emitter);
- }
+ if (UIUtil.isSettingEnabled('language')) {
+ //LANGUAGES BOX
+ 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());
});
+
+ 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) {
- $("#startMutedOptions").css("display", "block");
+ if (show && UIUtil.isSettingEnabled('moderator')) {
+ // 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) {
- $("#followMeOptions").css("display", "block");
+ if (show && UIUtil.isSettingEnabled('moderator')) {
+ UIUtil.showElement("followMeOptions");
} else {
- $("#followMeOptions").css("display", "none");
+ UIUtil.hideElement("followMeOptions");
}
},
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 94d66dbc6..321de2be9 100644
--- a/modules/UI/util/UIUtil.js
+++ b/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)