Make settings sections configurable
This commit is contained in:
yanas
parent
4075a5f4f7
commit
45496b7592
12
index.html
12
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>
|
||||
<div class="subTitle" data-i18n="settings.audioVideo"></div>
|
||||
<div id="devicesOptions">
|
||||
<select id="languages_selectbox" class="first hide"></select>
|
||||
<div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
|
||||
<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 = "startMutedOptions">
|
||||
<div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,6 +64,39 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
|
|||
|
||||
export default {
|
||||
init (emitter) {
|
||||
if (UIUtil.isSettingEnabled('devices')) {
|
||||
// DEVICES LIST
|
||||
JitsiMeetJS.mediaDevices.isDeviceListAvailable()
|
||||
.then((isDeviceListAvailable) => {
|
||||
if (isDeviceListAvailable &&
|
||||
JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
|
||||
this._initializeDeviceSelectionSettings(emitter);
|
||||
}
|
||||
});
|
||||
|
||||
// Only show the subtitle if this is the only setting section.
|
||||
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
||||
UIUtil.showHiddenElement("deviceOptionsTitle");
|
||||
|
||||
UIUtil.showHiddenElement("devicesOptions");
|
||||
}
|
||||
|
||||
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.showHiddenElement("languages_selectbox");
|
||||
}
|
||||
|
||||
if (UIUtil.isSettingEnabled('moderator')) {
|
||||
// START MUTED
|
||||
$("#startMutedOptions").change(function () {
|
||||
let startAudioMuted = $("#startAudioMuted").is(":checked");
|
||||
|
|
@ -82,26 +117,13 @@ export default {
|
|||
);
|
||||
});
|
||||
|
||||
// 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());
|
||||
});
|
||||
// Only show the subtitle if this is the only setting section.
|
||||
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
|
||||
UIUtil.showHiddenElement("moderatorOptionsTitle");
|
||||
|
||||
|
||||
// DEVICES LIST
|
||||
JitsiMeetJS.mediaDevices.isDeviceListAvailable()
|
||||
.then((isDeviceListAvailable) => {
|
||||
if (isDeviceListAvailable &&
|
||||
JitsiMeetJS.mediaDevices.isDeviceChangeAvailable()) {
|
||||
this._initializeDeviceSelectionSettings(emitter);
|
||||
UIUtil.showHiddenElement("startMutedOptions");
|
||||
UIUtil.showHiddenElement("followMeOptions");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_initializeDeviceSelectionSettings(emitter) {
|
||||
|
|
|
|||
|
|
@ -104,9 +104,36 @@
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
showHiddenElement(id) {
|
||||
$("#"+id).toggleClass("hide").toggleClass("show");
|
||||
},
|
||||
|
||||
hideDisabledButtons: function (mappings) {
|
||||
var selector = Object.keys(mappings)
|
||||
|
|
|
|||
Loading…
Reference in New Issue