Merge pull request #520 from isymchych/improve-settings

Apply new settings without clickint "Update" button

conference.js

             // 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.
     listMembersIds () {
         return room.getParticipants().map(p => p.getId());
     },
-    /**
-     * List of available cameras and microphones.
-     */
-    availableDevices: [],
     /**
      * Check if SIP is supported.
      * @returns {boolean}
     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.
         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
             });
         });
 
-        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);
 
         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, () => {

css/settingsmenu.css

     margin-right: auto;
 }
 
-#settingsmenu button {
-    width: 45%;
-    left: 26%;
-    padding: 0;
-    margin-top: 10px;
-}
-
 #settingsmenu #avatar {
     width: 24%;
     left: 38%;
     padding: 34px;
 }
 
-#languages_selectbox{
+#languages_selectbox {
     height: 40px;
+    cursor: pointer;
 }
 
 
     padding-left: 10%;
     text-indent: -10%;
 
+    margin-top: 10px;
+
+    display: none; /* hide by default */
+
     /* clearfix */
     overflow: auto;
     zoom: 1;
 .startMutedLabel {
     width: 94%;
     float: left;
+    cursor: pointer;
 }
 
 #devicesOptions {
     display: none;
+    margin-top: 10px;
 }
 
 #devicesOptions label {
 
 #devicesOptions select {
     height: 40px;
+    cursor: pointer;
 }

index.html

             <div class="arrow-up"></div>
             <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
             <input type="text" id="setEmail" placeholder="E-Mail">
+            <select id="languages_selectbox"></select>
             <div id = "startMutedOptions">
                 <label class = "startMutedLabel">
                     <input type="checkbox" id="startAudioMuted">
                     <select id="selectMic"></select>
                 </label>
             </div>
-            <button id="updateSettings" data-i18n="settings.update"></button>
             <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
         </div>
         <div class="feedbackButton">

modules/UI/UI.js

  */
 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);
     }
 };
  * 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();
     });
 
     Toolbar.showSipCallButton(isModerator);
     Toolbar.showRecordingButton(isModerator);
-    SettingsMenu.onRoleChanged();
+    SettingsMenu.showStartMutedOptions(isModerator);
 
     if (isModerator) {
         messageHandler.notify(null, "notify.me", 'connected', "notify.moderator");
   }
 };
 
-UI.onStartMutedChanged = function () {
-    SettingsMenu.onStartMutedChanged();
+UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
+    SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
 };
 
 /**
  * @param {object[]} devices new list of available devices
  */
 UI.onAvailableDevicesChanged = function (devices) {
-    SettingsMenu.onAvailableDevicesChanged(devices);
+    SettingsMenu.changeDevicesList(devices);
 };
 
 /**

modules/UI/side_pannels/SidePanelToggler.js

         toggle(SettingsMenu,
             '#settingsmenu',
             null,
-            function() {
-                $('#setDisplayName').val(Settings.getDisplayName());
-                $('#setEmail').val(Settings.getEmail());
-            },
+            function() {},
             null);
     },
 

modules/UI/side_pannels/settings/SettingsMenu.js

 import languages from "../../../../service/translation/languages";
 import Settings from '../../../settings/Settings';
 
-function generateLanguagesSelectBox() {
-    var currentLang = APP.translation.getCurrentLanguage();
-    var html = '<select id="languages_selectbox">';
-    var langArray = languages.getLanguages();
-    for(var i = 0; i < langArray.length; i++) {
-        var lang = langArray[i];
-        html += "<option ";
-        if(lang === currentLang)
-            html += "selected ";
-        html += "value=\"" + lang + "\" data-i18n='languages:" + lang + "'>";
-        html += "</option>";
+/**
+ * Generate html select options for available languages.
+ * @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}`
+        };
 
-    }
+        if (lang === currentLang) {
+            attrs.selected = 'selected';
+        }
 
-    return html + "</select>";
+        let attrsStr = UIUtil.attrsToString(attrs);
+        return `<option ${attrsStr}></option>`;
+    }).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 = {
 
 export default {
     init (emitter) {
-        function update() {
-            let displayName = $('#setDisplayName').val();
 
-            emitter.emit(UIEvents.NICKNAME_CHANGED, displayName);
-
-            let language = $("#languages_selectbox").val();
-            if (language !== Settings.getLanguage()) {
-                emitter.emit(UIEvents.LANG_CHANGED, language);
+        // 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);
+
+
+        // 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;

modules/settings/Settings.js

         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 || '';
      */
     setEmail: function (newEmail) {
         email = newEmail;
-        window.localStorage.email = newEmail;
-        return email;
+        window.localStorage.email = UIUtil.escapeHtml(newEmail);
     },
 
     /**