haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Make settings sections configurable
This commit is contained in:
Дамян Минков 2016-09-13 20:46:03 -05:00 committed by GitHub
parent 4075a5f4f7 9ce83250da
commit c18b80c43f
4 changed files with 116 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -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>

1
interface_config.js
View File

@ -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

110
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -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");
}
},

42
modules/UI/util/UIUtil.js
View File

@ -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)