diff --git a/conference.js b/conference.js index 201174586..3065373e0 100644 --- a/conference.js +++ b/conference.js @@ -332,10 +332,9 @@ export default { // update list of available devices if (JitsiMeetJS.isDeviceListAvailable() && JitsiMeetJS.isDeviceChangeAvailable()) { - JitsiMeetJS.enumerateDevices((devices) => { - this.availableDevices = devices; - APP.UI.onAvailableDevicesChanged(); - }); + JitsiMeetJS.enumerateDevices( + devices => APP.UI.onAvailableDevicesChanged(devices) + ); } // XXX The API will take care of disconnecting from the XMPP server // (and, thus, leaving the room) on unload. @@ -399,10 +398,6 @@ export default { listMembersIds () { return room.getParticipants().map(p => p.getId()); }, - /** - * List of available cameras and microphones. - */ - availableDevices: [], /** * Check if SIP is supported. * @returns {boolean} @@ -413,12 +408,6 @@ export default { get membersCount () { return room.getParticipants().length + 1; }, - get startAudioMuted () { - return room && room.getStartMutedPolicy().audio; - }, - get startVideoMuted () { - return room && room.getStartMutedPolicy().video; - }, /** * Returns true if the callstats integration is enabled, otherwise returns * false. @@ -665,7 +654,6 @@ export default { room.on(ConferenceEvents.USER_JOINED, (id, user) => { console.log('USER %s connnected', id, user); APP.API.notifyUserJoined(id); - // FIXME email??? APP.UI.addUser(id, user.getDisplayName()); // chek the roles for the new user and reflect them @@ -887,7 +875,13 @@ export default { }); }); - APP.UI.addListener(UIEvents.EMAIL_CHANGED, (email) => { + APP.UI.addListener(UIEvents.EMAIL_CHANGED, (email = '') => { + email = email.trim(); + + if (email === APP.settings.getEmail()) { + return; + } + APP.settings.setEmail(email); APP.UI.setUserAvatar(room.myUserId(), email); sendEmail(email); @@ -910,14 +904,16 @@ export default { APP.UI.addListener(UIEvents.START_MUTED_CHANGED, (startAudioMuted, startVideoMuted) => { - room.setStartMutedPolicy({audio: startAudioMuted, - video: startVideoMuted}); + room.setStartMutedPolicy({ + audio: startAudioMuted, + video: startVideoMuted + }); } ); room.on( ConferenceEvents.START_MUTED_POLICY_CHANGED, - (policy) => { - APP.UI.onStartMutedChanged(); + ({ audio, video }) => { + APP.UI.onStartMutedChanged(audio, video); } ); room.on(ConferenceEvents.STARTED_MUTED, () => { diff --git a/css/settingsmenu.css b/css/settingsmenu.css index 3d342cca6..c990dfb4a 100644 --- a/css/settingsmenu.css +++ b/css/settingsmenu.css @@ -27,13 +27,6 @@ margin-right: auto; } -#settingsmenu button { - width: 45%; - left: 26%; - padding: 0; - margin-top: 10px; -} - #settingsmenu #avatar { width: 24%; left: 38%; @@ -45,8 +38,9 @@ padding: 34px; } -#languages_selectbox{ +#languages_selectbox { height: 40px; + cursor: pointer; } @@ -54,6 +48,10 @@ padding-left: 10%; text-indent: -10%; + margin-top: 10px; + + display: none; /* hide by default */ + /* clearfix */ overflow: auto; zoom: 1; @@ -70,10 +68,12 @@ .startMutedLabel { width: 94%; float: left; + cursor: pointer; } #devicesOptions { display: none; + margin-top: 10px; } #devicesOptions label { @@ -87,4 +87,5 @@ #devicesOptions select { height: 40px; + cursor: pointer; } diff --git a/index.html b/index.html index 22b2e0a3f..c476b1547 100644 --- a/index.html +++ b/index.html @@ -219,6 +219,7 @@
+
-
diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 601dc7aba..a507ccbc8 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -212,10 +212,10 @@ UI.showChatError = function (err, msg) { */ UI.changeDisplayName = function (id, displayName) { ContactList.onDisplayNameChange(id, displayName); - SettingsMenu.onDisplayNameChange(id, displayName); VideoLayout.onDisplayNameChanged(id, displayName); - if (APP.conference.isLocalId(id)) { + if (APP.conference.isLocalId(id) || id === 'localVideoContainer') { + SettingsMenu.changeDisplayName(displayName); Chat.setChatConversationMode(!!displayName); } }; @@ -256,10 +256,6 @@ UI.mucJoined = function () { * Setup some UI event listeners. */ function registerListeners() { - UI.addListener(UIEvents.EMAIL_CHANGED, function (email) { - UI.setUserAvatar(APP.conference.localId, email); - }); - UI.addListener(UIEvents.PREZI_CLICKED, function () { preziManager.handlePreziButtonClicked(); }); @@ -538,7 +534,7 @@ UI.updateLocalRole = function (isModerator) { Toolbar.showSipCallButton(isModerator); Toolbar.showRecordingButton(isModerator); - SettingsMenu.onRoleChanged(); + SettingsMenu.showStartMutedOptions(isModerator); if (isModerator) { messageHandler.notify(null, "notify.me", 'connected', "notify.moderator"); @@ -1037,8 +1033,8 @@ UI.stopPrezi = function (userId) { } }; -UI.onStartMutedChanged = function () { - SettingsMenu.onStartMutedChanged(); +UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) { + SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted); }; /** @@ -1046,7 +1042,7 @@ UI.onStartMutedChanged = function () { * @param {object[]} devices new list of available devices */ UI.onAvailableDevicesChanged = function (devices) { - SettingsMenu.onAvailableDevicesChanged(devices); + SettingsMenu.changeDevicesList(devices); }; /** diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js index 6fe56bba3..d77e3ac70 100644 --- a/modules/UI/side_pannels/SidePanelToggler.js +++ b/modules/UI/side_pannels/SidePanelToggler.js @@ -154,10 +154,7 @@ var PanelToggler = { toggle(SettingsMenu, '#settingsmenu', null, - function() { - $('#setDisplayName').val(Settings.getDisplayName()); - $('#setEmail').val(Settings.getEmail()); - }, + function() {}, null); }, diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 35a6dac14..b2baecd0a 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -4,23 +4,34 @@ import UIEvents from "../../../../service/UI/UIEvents"; import languages from "../../../../service/translation/languages"; import Settings from '../../../settings/Settings'; -function generateLanguagesSelectBox() { - var currentLang = APP.translation.getCurrentLanguage(); - var html = '"; + let attrsStr = UIUtil.attrsToString(attrs); + return ``; + }).join('\n'); } +/** + * Generate html select options for available physical devices. + * @param {{ deviceId, label }[]} items available devices + * @param {string} [selectedId] id of selected device + * @returns {string} + */ function generateDevicesOptions(items, selectedId) { return items.map(function (item) { let attrs = { @@ -39,89 +50,121 @@ function generateDevicesOptions(items, selectedId) { export default { init (emitter) { - function update() { - let displayName = $('#setDisplayName').val(); - emitter.emit(UIEvents.NICKNAME_CHANGED, displayName); + // DISPLAY NAME + function updateDisplayName () { + emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val()); + } + $('#setDisplayName') + .val(Settings.getDisplayName()) + .keyup(function (event) { + if (event.keyCode === 13) { // enter + updateDisplayName(); + } + }) + .focusout(updateDisplayName); - let language = $("#languages_selectbox").val(); - if (language !== Settings.getLanguage()) { - emitter.emit(UIEvents.LANG_CHANGED, language); + + // EMAIL + function updateEmail () { + emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val()); + } + $('#setEmail') + .val(Settings.getEmail()) + .keyup(function (event) { + if (event.keyCode === 13) { // enter + updateEmail(); } + }).focusout(updateEmail); - let email = UIUtil.escapeHtml($('#setEmail').val()); - if (email !== Settings.getEmail()) { - emitter.emit(UIEvents.EMAIL_CHANGED, email); - } + // START MUTED + $("#startMutedOptions").change(function () { let startAudioMuted = $("#startAudioMuted").is(":checked"); let startVideoMuted = $("#startVideoMuted").is(":checked"); - if (startAudioMuted !== APP.conference.startAudioMuted - || startVideoMuted !== APP.conference.startVideoMuted) { - emitter.emit( - UIEvents.START_MUTED_CHANGED, - startAudioMuted, - startVideoMuted - ); - } + emitter.emit( + UIEvents.START_MUTED_CHANGED, + startAudioMuted, + startVideoMuted + ); + }); - let cameraDeviceId = $('#selectCamera').val(); + + // 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()); + }); + + + // DEVICES LIST + this.changeDevicesList([]); + $('#selectCamera').change(function () { + let cameraDeviceId = $(this).val(); if (cameraDeviceId !== Settings.getCameraDeviceId()) { emitter.emit(UIEvents.VIDEO_DEVICE_CHANGED, cameraDeviceId); } - - let micDeviceId = $('#selectMic').val(); + }); + $('#selectMic').change(function () { + let micDeviceId = $(this).val(); if (micDeviceId !== Settings.getMicDeviceId()) { emitter.emit(UIEvents.AUDIO_DEVICE_CHANGED, micDeviceId); } - } - - let startMutedBlock = $("#startMutedOptions"); - startMutedBlock.before(generateLanguagesSelectBox()); - APP.translation.translateElement($("#languages_selectbox")); - - this.onAvailableDevicesChanged(); - this.onRoleChanged(); - this.onStartMutedChanged(); - - $("#updateSettings").click(update); - $('#settingsmenu>input').keyup(function(event){ - if (event.keyCode === 13) {//enter - update(); - } }); }, - onRoleChanged () { - if(APP.conference.isModerator) { + /** + * If start audio muted/start video muted options should be visible or not. + * @param {boolean} show + */ + showStartMutedOptions (show) { + if (show) { $("#startMutedOptions").css("display", "block"); - } - else { + } else { $("#startMutedOptions").css("display", "none"); } }, - onStartMutedChanged () { - $("#startAudioMuted").attr("checked", APP.conference.startAudioMuted); - $("#startVideoMuted").attr("checked", APP.conference.startVideoMuted); + updateStartMutedBox (startAudioMuted, startVideoMuted) { + $("#startAudioMuted").attr("checked", startAudioMuted); + $("#startVideoMuted").attr("checked", startVideoMuted); }, + /** + * Check if settings menu is visible or not. + * @returns {boolean} + */ isVisible () { return $('#settingsmenu').is(':visible'); }, - onDisplayNameChange (id, newDisplayName) { - if(id === 'localVideoContainer' || APP.conference.isLocalId(id)) { - $('#setDisplayName').val(newDisplayName); - } + /** + * Change user display name in the settings menu. + * @param {string} newDisplayName + */ + changeDisplayName (newDisplayName) { + $('#setDisplayName').val(newDisplayName); }, + /** + * Change user avatar in the settings menu. + * @param {string} avatarUrl url of the new avatar + */ changeAvatar (avatarUrl) { $('#avatar').attr('src', avatarUrl); }, - onAvailableDevicesChanged () { - let devices = APP.conference.availableDevices; + /** + * Change available cameras/microphones or hide selects completely if + * no devices available. + * @param {{ deviceId, label, kind }[]} devices list of available devices + */ + changeDevicesList (devices) { if (!devices.length) { $('#devicesOptions').hide(); return; diff --git a/modules/settings/Settings.js b/modules/settings/Settings.js index 8b9a545f7..8ba6a7d30 100644 --- a/modules/settings/Settings.js +++ b/modules/settings/Settings.js @@ -30,7 +30,7 @@ if (supportsLocalStorage()) { console.log("generated id", window.localStorage.jitsiMeetId); } - email = window.localStorage.email || ''; + email = UIUtil.unescapeHtml(window.localStorage.email || ''); displayName = UIUtil.unescapeHtml(window.localStorage.displayname || ''); language = window.localStorage.language; cameraDeviceId = window.localStorage.cameraDeviceId || ''; @@ -68,8 +68,7 @@ export default { */ setEmail: function (newEmail) { email = newEmail; - window.localStorage.email = newEmail; - return email; + window.localStorage.email = UIUtil.escapeHtml(newEmail); }, /**