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

Make settings sections configurable

This commit is contained in:
yanas 2016-09-13 17:37:09 -05:00
parent 4075a5f4f7
commit 45496b7592
4 changed files with 93 additions and 43 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>
<div id="settings_container" class="sideToolbarContainer__inner"> <div id="settings_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="settings.title"></div> <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"> <div class="sideToolbarBlock first">
<label class="first" data-i18n="settings.selectCamera"></label> <label class="first" data-i18n="settings.selectCamera"></label>
<select id="selectCamera"></select> <select id="selectCamera"></select>
@ -191,8 +191,8 @@
<select id="selectAudioOutput"></select> <select id="selectAudioOutput"></select>
</div> </div>
</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"> <div class="sideToolbarBlock first">
<input type="checkbox" id="startAudioMuted"> <input type="checkbox" id="startAudioMuted">
<label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label> <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
@ -202,7 +202,7 @@
<label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label> <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
</div> </div>
</div> </div>
<div id="followMeOptions" class="sideToolbarBlock"> <div id="followMeOptions" class="sideToolbarBlock hide">
<input type="checkbox" id="followMeCheckBox"> <input type="checkbox" id="followMeCheckBox">
<label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label> <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
</div> </div>

1
interface_config.js
View File

@ -21,6 +21,7 @@ var interfaceConfig = {
// to easily override values or remove them using regex // to easily override values or remove them using regex
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line 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 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 // 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, '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 // screen, 'width' would fit the original video width to the width of the

96
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 UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents"; import UIEvents from "../../../../service/UI/UIEvents";
import languages from "../../../../service/translation/languages"; import languages from "../../../../service/translation/languages";
@ -6,6 +6,7 @@ import Settings from '../../../settings/Settings';
/** /**
* Generate html select options for available languages. * Generate html select options for available languages.
*
* @param {string[]} items available languages * @param {string[]} items available languages
* @param {string} [currentLang] current language * @param {string} [currentLang] current language
* @returns {string} * @returns {string}
@ -28,6 +29,7 @@ function generateLanguagesOptions(items, currentLang) {
/** /**
* Generate html select options for available physical devices. * Generate html select options for available physical devices.
*
* @param {{ deviceId, label }[]} items available devices * @param {{ deviceId, label }[]} items available devices
* @param {string} [selectedId] id of selected device * @param {string} [selectedId] id of selected device
* @param {boolean} permissionGranted if permission to use selected device type * @param {boolean} permissionGranted if permission to use selected device type
@ -62,46 +64,66 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
export default { export default {
init (emitter) { 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 is the only setting section.
$("#followMeOptions").change(function () { if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
let isFollowMeEnabled = $("#followMeCheckBox").is(":checked"); UIUtil.showHiddenElement("deviceOptionsTitle");
emitter.emit(
UIEvents.FOLLOW_ME_ENABLED,
isFollowMeEnabled
);
});
// LANGUAGES BOX UIUtil.showHiddenElement("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.showHiddenElement("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
);
});
// Only show the subtitle if this is the only setting section.
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.showHiddenElement("moderatorOptionsTitle");
UIUtil.showHiddenElement("startMutedOptions");
UIUtil.showHiddenElement("followMeOptions");
}
}, },
_initializeDeviceSelectionSettings(emitter) { _initializeDeviceSelectionSettings(emitter) {

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

@ -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) { isButtonEnabled: function (name) {
return interfaceConfig.TOOLBAR_BUTTONS.indexOf(name) !== -1; 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) { hideDisabledButtons: function (mappings) {
var selector = Object.keys(mappings) var selector = Object.keys(mappings)