jiti-meet/modules/UI/side_pannels/settings/SettingsMenu.js

225 lines
8.2 KiB
JavaScript
Raw Normal View History

/* global $, APP, AJS, interfaceConfig */
2017-03-01 02:55:12 +00:00
import { LANGUAGES } from "../../../../react/features/base/i18n";
import { openDeviceSelectionDialog }
from '../../../../react/features/device-selection';
2017-03-01 02:55:12 +00:00
import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents";
2016-11-02 14:58:43 +00:00
const sidePanelsContainerId = 'sideToolbarContainer';
const deviceSelectionButtonClasses
= 'button-control button-control_primary button-control_full-width';
2016-11-02 14:58:43 +00:00
const htmlStr = `
2016-10-25 13:16:15 +00:00
<div id="settings_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="settings.title"></div>
<form class="aui">
<div id="languagesSelectWrapper"
class="sideToolbarBlock first hide">
<select id="languagesSelect"></select>
</div>
<div id="deviceOptionsWrapper" class="hide">
<div id="deviceOptionsTitle" class="subTitle hide"
data-i18n="settings.audioVideo"></div>
<div class="sideToolbarBlock first">
<button
class="${deviceSelectionButtonClasses}"
data-i18n="deviceSelection.deviceSettings"
id="deviceSelection"
type="button"></button>
2016-10-25 13:16:15 +00:00
</div>
</div>
<div id="moderatorOptionsWrapper" class="hide">
<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>
</div>
<div class="sideToolbarBlock">
<input type="checkbox" id="startVideoMuted">
<label class="startMutedLabel" for="startVideoMuted"
data-i18n="settings.startVideoMuted"></label>
</div>
</div>
<div id="followMeOptions" class="hide">
<div class="sideToolbarBlock">
<input type="checkbox" id="followMeCheckBox">
<label class="followMeLabel" for="followMeCheckBox"
data-i18n="settings.followMe"></label>
</div>
</div>
</div>
</form>
2016-11-02 14:58:43 +00:00
</div>`;
2016-10-25 13:16:15 +00:00
function initHTML() {
2016-11-02 14:58:43 +00:00
$(`#${sidePanelsContainerId}`)
.append(htmlStr);
// make sure we translate the panel, as adding it can be after i18n
// library had initialized and translated already present html
APP.translation.translateElement($(`#${sidePanelsContainerId}`));
2016-10-25 13:16:15 +00:00
}
2016-03-02 15:39:39 +00:00
/**
* Generate html select options for available languages.
2016-09-13 22:37:09 +00:00
*
2016-03-02 15:39:39 +00:00
* @param {string[]} items available languages
* @param {string} [currentLang] current language
* @returns {string}
*/
function generateLanguagesOptions(items, currentLang) {
return items.map(function (lang) {
let attrs = {
value: lang,
'data-i18n': `languages:${lang}`
};
2016-03-02 15:39:39 +00:00
if (lang === currentLang) {
attrs.selected = 'selected';
}
2016-03-02 15:39:39 +00:00
let attrsStr = UIUtil.attrsToString(attrs);
return `<option ${attrsStr}></option>`;
2016-09-20 07:59:12 +00:00
}).join('');
}
2015-01-07 14:54:03 +00:00
2016-10-18 15:31:52 +00:00
/**
* Replace html select element to select2 custom dropdown
*
* @param {jQueryElement} $el native select element
* @param {function} onSelectedCb fired if item is selected
*/
2016-09-20 07:59:12 +00:00
function initSelect2($el, onSelectedCb) {
$el.auiSelect2({
minimumResultsForSearch: Infinity
2016-09-20 07:59:12 +00:00
});
if (typeof onSelectedCb === 'function') {
2016-09-20 07:59:12 +00:00
$el.change(onSelectedCb);
}
}
2015-01-07 14:54:03 +00:00
2015-12-31 15:23:23 +00:00
export default {
init (emitter) {
2016-10-25 13:16:15 +00:00
initHTML();
2016-09-20 07:59:12 +00:00
//LANGUAGES BOX
if (UIUtil.isSettingEnabled('language')) {
const wrapperId = 'languagesSelectWrapper';
const selectId = 'languagesSelect';
const selectEl = AJS.$(`#${selectId}`);
let selectInput;
selectEl.html(generateLanguagesOptions(
2017-03-01 02:55:12 +00:00
LANGUAGES,
2016-09-20 07:59:12 +00:00
APP.translation.getCurrentLanguage()
));
initSelect2(selectEl, () => {
const val = selectEl.val();
selectInput[0].dataset.i18n = `languages:${val}`;
APP.translation.translateElement(selectInput);
emitter.emit(UIEvents.LANG_CHANGED, val);
});
//find new selectInput element
selectInput = $(`#s2id_${selectId} .select2-chosen`);
//first select fix for languages options
selectInput[0].dataset.i18n =
`languages:${APP.translation.getCurrentLanguage()}`;
// translate selectInput, which is the currently selected language
// otherwise there will be no selected option
APP.translation.translateElement(selectInput);
2016-09-20 07:59:12 +00:00
APP.translation.translateElement(selectEl);
APP.translation.addLanguageChangedListener(
lng => selectInput[0].dataset.i18n = `languages:${lng}`);
UIUtil.setVisible(wrapperId, true);
2016-09-20 07:59:12 +00:00
}
// DEVICES LIST
2016-09-13 22:37:09 +00:00
if (UIUtil.isSettingEnabled('devices')) {
2016-09-20 07:59:12 +00:00
const wrapperId = 'deviceOptionsWrapper';
$('#deviceSelection').on('click', () =>
APP.store.dispatch(openDeviceSelectionDialog()));
2016-09-20 07:59:12 +00:00
// Only show the subtitle if this isn't the only setting section.
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.setVisible("deviceOptionsTitle", true);
2016-09-13 22:37:09 +00:00
UIUtil.setVisible(wrapperId, true);
2016-09-13 22:37:09 +00:00
}
2016-09-20 07:59:12 +00:00
// MODERATOR
2016-09-13 22:37:09 +00:00
if (UIUtil.isSettingEnabled('moderator')) {
2016-09-20 07:59:12 +00:00
const wrapperId = 'moderatorOptionsWrapper';
2016-09-13 22:37:09 +00:00
// START MUTED
$("#startMutedOptions").change(function () {
let startAudioMuted = $("#startAudioMuted").is(":checked");
let startVideoMuted = $("#startVideoMuted").is(":checked");
2016-09-20 07:59:12 +00:00
2016-09-13 22:37:09 +00:00
emitter.emit(
UIEvents.START_MUTED_CHANGED,
startAudioMuted,
startVideoMuted
);
});
2016-09-13 22:37:09 +00:00
// FOLLOW ME
const followMeToggle = document.getElementById('followMeCheckBox');
followMeToggle.addEventListener('change', () => {
const isFollowMeEnabled = followMeToggle.checked;
emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
2016-09-13 22:37:09 +00:00
});
2016-09-20 07:59:12 +00:00
UIUtil.setVisible(wrapperId, true);
2016-09-13 22:37:09 +00:00
}
},
2016-03-02 15:39:39 +00:00
/**
* If start audio muted/start video muted options should be visible or not.
* @param {boolean} show
*/
showStartMutedOptions (show) {
2016-09-14 00:44:47 +00:00
if (show && UIUtil.isSettingEnabled('moderator')) {
// Only show the subtitle if this isn't the only setting section.
2016-09-20 07:59:12 +00:00
if (!$("#moderatorOptionsTitle").is(":visible")
&& interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.setVisible("moderatorOptionsTitle", true);
2016-09-14 00:44:47 +00:00
UIUtil.setVisible("startMutedOptions", true);
2016-03-02 15:39:39 +00:00
} else {
2016-09-14 00:44:47 +00:00
// Only show the subtitle if this isn't the only setting section.
if ($("#moderatorOptionsTitle").is(":visible"))
UIUtil.setVisible("moderatorOptionsTitle", false);
2016-09-14 00:44:47 +00:00
UIUtil.setVisible("startMutedOptions", false);
2015-05-19 15:03:01 +00:00
}
},
2016-03-02 15:39:39 +00:00
updateStartMutedBox (startAudioMuted, startVideoMuted) {
$("#startAudioMuted").attr("checked", startAudioMuted);
$("#startVideoMuted").attr("checked", startVideoMuted);
2015-01-07 14:54:03 +00:00
},
/**
* Shows/hides the follow me options in the settings dialog.
*
* @param {boolean} show {true} to show those options, {false} to hide them
*/
showFollowMeOptions (show) {
UIUtil.setVisible(
2016-11-23 21:04:05 +00:00
"followMeOptions",
show && UIUtil.isSettingEnabled('moderator'));
},
2016-03-02 15:39:39 +00:00
/**
* Check if settings menu is visible or not.
* @returns {boolean}
*/
2015-12-31 15:23:23 +00:00
isVisible () {
return UIUtil.isVisible(document.getElementById("settings_container"));
2015-01-07 14:54:03 +00:00
}
};