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);
},
/**