Merge pull request #1167 from jitsi/fix_anonymous_domain

Fix the UI when anonymous domain auth is in use

conference.js

@@ -294,9 +294,10 @@ function changeLocalDisplayName(nickname = '') {
 }
 
 class ConferenceConnector {
-    constructor(resolve, reject) {
+    constructor(resolve, reject, invite) {
         this._resolve = resolve;
         this._reject = reject;
+        this._invite = invite;
         this.reconnectTimeout = null;
         room.on(ConferenceEvents.CONFERENCE_JOINED,
             this._handleConferenceJoined.bind(this));
@@ -340,7 +341,8 @@ class ConferenceConnector {
             }, 5000);
 
             // notify user that auth is required
-            AuthHandler.requireAuth(room, this.invite.getRoomLocker().password);
+            AuthHandler.requireAuth(
+                room, this._invite.getRoomLocker().password);
             break;
 
         case ConferenceErrors.RESERVATION_ERROR:
@@ -521,7 +523,8 @@ export default {
                 // XXX The API will take care of disconnecting from the XMPP
                 // server (and, thus, leaving the room) on unload.
                 return new Promise((resolve, reject) => {
-                    (new ConferenceConnector(resolve, reject)).connect();
+                    (new ConferenceConnector(
+                        resolve, reject, this.invite)).connect();
                 });
         });
     },

modules/UI/UI.js

@@ -443,10 +443,10 @@ UI.start = function () {
         // Display notice message at the top of the toolbar
         if (config.noticeMessage) {
             $('#noticeText').text(config.noticeMessage);
-            UIUtil.showElement('notice');
+            UIUtil.setVisible('notice', true);
         }
     } else {
-        UIUtil.hideElement('mainToolbarContainer');
+        UIUtil.setVisible('mainToolbarContainer', false);
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         JitsiPopover.enabled = false;
@@ -1105,13 +1105,13 @@ UI.updateAuthInfo = function (isAuthEnabled, login) {
     let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
     let loggedIn = !!login;
 
-    Toolbar.showAuthenticateButton(showAuth);
+    Profile.showAuthenticationButtons(showAuth);
 
     if (showAuth) {
-        Toolbar.setAuthenticatedIdentity(login);
+        Profile.setAuthenticatedIdentity(login);
 
-        Toolbar.showLoginButton(!loggedIn);
-        Toolbar.showLogoutButton(loggedIn);
+        Profile.showLoginButton(!loggedIn);
+        Profile.showLogoutButton(loggedIn);
     }
 };
 

modules/UI/recording/Recording.js

@@ -392,11 +392,7 @@ var Recording = {
         let shouldShow = show && _isRecordingButtonEnabled();
         let id = 'toolbar_button_record';
 
-        if (shouldShow) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
+        UIUtil.setVisible(id, shouldShow);
     },
 
     /**
@@ -480,11 +476,8 @@ var Recording = {
 
         // Recording spinner
         let spinnerId = 'recordingSpinner';
-        if(recordingState === Status.RETRYING) {
-            UIUtil.showElement(spinnerId);
-        } else {
-            UIUtil.hideElement(spinnerId);
-        }
+        UIUtil.setVisible(
+            spinnerId, recordingState === Status.RETRYING);
     },
     // checks whether recording is enabled and whether we have params
     // to start automatically recording

modules/UI/side_pannels/chat/Chat.js

@@ -306,18 +306,14 @@ var Chat = {
      * @param subject the subject
      */
     setSubject (subject) {
-        let toggleFunction;
         if (subject) {
             subject = subject.trim();
         }
 
-        toggleFunction = subject ? UIUtil.showElement : UIUtil.hideElement;
-        toggleFunction = toggleFunction.bind(UIUtil);
-
         let subjectId = 'subject';
         let html = linkify(UIUtil.escapeHtml(subject));
         $(`#${subjectId}`).html(html);
-        toggleFunction(subjectId);
+        UIUtil.setVisible(subjectId, subject && subject.length > 0);
     },
 
     /**

modules/UI/side_pannels/profile/Profile.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, APP, JitsiMeetJS */
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import Settings from '../../../settings/Settings';
@@ -18,15 +18,15 @@ const htmlStr = `
             <input id="setEmail" type="text" class="input-control" 
                 data-i18n="[placeholder]profile.setEmailInput">
         </div>
-        <div id="authenticationContainer" 
+        <div id="profile_auth_container" 
              class="sideToolbarBlock auth_container">
             <p data-i18n="toolbar.authenticate"></p>
             <ul>
-                <li id="toolbar_auth_identity"></li>
-                <li id="toolbar_button_login">
+                <li id="profile_auth_identity"></li>
+                <li id="profile_button_login">
                     <a class="authButton" data-i18n="toolbar.login"></a>
                 </li>
-                <li id="toolbar_button_logout">
+                <li id="profile_button_logout">
                     <a class="authButton" data-i18n="toolbar.logout"></a>
                 </li>
             </ul>
@@ -68,6 +68,34 @@ export default {
                     updateEmail();
                 }
             }).focusout(updateEmail);
+
+        // LOGIN
+        function loginClicked () {
+            JitsiMeetJS.analytics.sendEvent('authenticate.login.clicked');
+            emitter.emit(UIEvents.AUTH_CLICKED);
+        }
+
+        $('#profile_button_login').click(loginClicked);
+
+        // LOGOUT
+        function logoutClicked () {
+            let titleKey = "dialog.logoutTitle";
+            let msgKey = "dialog.logoutQuestion";
+            JitsiMeetJS.analytics.sendEvent('authenticate.logout.clicked');
+            // Ask for confirmation
+            APP.UI.messageHandler.openTwoButtonDialog({
+                titleKey: titleKey,
+                msgKey: msgKey,
+                leftButtonKey: "dialog.Yes",
+                submitFunction: function (evt, yes) {
+                    if (yes) {
+                        emitter.emit(UIEvents.LOGOUT);
+                    }
+                }
+            });
+        }
+
+        $('#profile_button_logout').click(logoutClicked);
     },
 
     /**
@@ -92,5 +120,46 @@ export default {
      */
     changeAvatar (avatarUrl) {
         $('#avatar').attr('src', avatarUrl);
+    },
+
+    /**
+     * Shows or hides authentication related buttons
+     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
+     */
+    showAuthenticationButtons (show) {
+        let id = 'profile_auth_container';
+        UIUtil.setVisible(id, show);
+    },
+
+    /**
+     * Shows/hides login button.
+     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
+     */
+    showLoginButton (show) {
+        let id = 'profile_button_login';
+
+        UIUtil.setVisible(id, show);
+    },
+
+    /**
+     * Shows/hides logout button.
+     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
+     */
+    showLogoutButton (show) {
+        let id = 'profile_button_logout';
+
+        UIUtil.setVisible(id, show);
+    },
+
+    /**
+     * Displays user's authenticated identity name (login).
+     * @param {string} authIdentity identity name to be displayed.
+     */
+    setAuthenticatedIdentity (authIdentity) {
+        let id = 'profile_auth_identity';
+
+        UIUtil.setVisible(id, !!authIdentity);
+
+        $(`#${id}`).text(authIdentity ? authIdentity : '');
     }
 };

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -166,7 +166,7 @@ export default {
             APP.translation.addLanguageChangedListener(
                 lng => selectInput[0].dataset.i18n = `languages:${lng}`);
 
-            UIUtil.showElement(wrapperId);
+            UIUtil.setVisible(wrapperId, true);
         }
         // DEVICES LIST
         if (UIUtil.isSettingEnabled('devices')) {
@@ -181,9 +181,9 @@ export default {
                 });
             // Only show the subtitle if this isn't the only setting section.
             if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
-                UIUtil.showElement("deviceOptionsTitle");
+                UIUtil.setVisible("deviceOptionsTitle", true);
 
-            UIUtil.showElement(wrapperId);
+            UIUtil.setVisible(wrapperId, true);
         }
         // MODERATOR
         if (UIUtil.isSettingEnabled('moderator')) {
@@ -208,7 +208,7 @@ export default {
                 emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
             });
 
-            UIUtil.showElement(wrapperId);
+            UIUtil.setVisible(wrapperId, true);
         }
     },
 
@@ -245,15 +245,15 @@ export default {
             // Only show the subtitle if this isn't the only setting section.
             if (!$("#moderatorOptionsTitle").is(":visible")
                     && interfaceConfig.SETTINGS_SECTIONS.length > 1)
-                UIUtil.showElement("moderatorOptionsTitle");
+                UIUtil.setVisible("moderatorOptionsTitle", true);
 
-            UIUtil.showElement("startMutedOptions");
+            UIUtil.setVisible("startMutedOptions", true);
         } else {
             // Only show the subtitle if this isn't the only setting section.
             if ($("#moderatorOptionsTitle").is(":visible"))
-                UIUtil.hideElement("moderatorOptionsTitle");
+                UIUtil.setVisible("moderatorOptionsTitle", false);
 
-            UIUtil.hideElement("startMutedOptions");
+            UIUtil.setVisible("startMutedOptions", false);
         }
     },
 
@@ -268,11 +268,9 @@ export default {
      * @param {boolean} show {true} to show those options, {false} to hide them
      */
     showFollowMeOptions (show) {
-        if (show && UIUtil.isSettingEnabled('moderator')) {
-            UIUtil.showElement("followMeOptions");
-        } else {
-            UIUtil.hideElement("followMeOptions");
-        }
+        UIUtil.setVisible(
+            "followMeOptions",
+            show && UIUtil.isSettingEnabled('moderator'));
     },
 
     /**

modules/UI/toolbars/Toolbar.js

@@ -97,26 +97,6 @@ const buttonHandlers = {
         JitsiMeetJS.analytics.sendEvent('toolbar.hangup');
         emitter.emit(UIEvents.HANGUP);
     },
-    "toolbar_button_login": function () {
-        JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.login.clicked');
-        emitter.emit(UIEvents.AUTH_CLICKED);
-    },
-    "toolbar_button_logout": function () {
-        let titleKey = "dialog.logoutTitle";
-        let msgKey = "dialog.logoutQuestion";
-        JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.logout.clicked');
-        // Ask for confirmation
-        APP.UI.messageHandler.openTwoButtonDialog({
-            titleKey,
-            msgKey,
-            leftButtonKey: "dialog.Yes",
-            submitFunction: function (evt, yes) {
-                if (yes) {
-                    emitter.emit(UIEvents.LOGOUT);
-                }
-            }
-        });
-    },
     "toolbar_button_raisehand": function () {
         JitsiMeetJS.analytics.sendEvent('toolbar.raiseHand.clicked');
         APP.conference.maybeToggleRaisedHand();
@@ -275,7 +255,9 @@ const defaultToolbarButtons = {
     'recording': {
         id: 'toolbar_button_record',
         tooltipKey: 'liveStreaming.buttonTooltip',
-        className: 'button'
+        className: 'button',
+        hidden: true // will be displayed once
+                     // the recording functionality is detected
     },
     'sharedvideo': {
         id: 'toolbar_button_sharedvideo',
@@ -290,7 +272,9 @@ const defaultToolbarButtons = {
     'sip': {
         id: 'toolbar_button_sip',
         tooltipKey: 'toolbar.sip',
-        className: 'button icon-telephone'
+        className: 'button icon-telephone',
+        hidden: true // will be displayed once
+                     // the SIP calls functionality is detected
     },
     'dialpad': {
         id: 'toolbar_button_dialpad',
@@ -397,18 +381,6 @@ Toolbar = {
     isEnabled() {
         return this.enabled;
     },
-    /**
-     * Shows or hides authentication button
-     * @param show <tt>true</tt> to show or <tt>false</tt> to hide
-     */
-    showAuthenticateButton (show) {
-        let id = 'authenticationContainer';
-        if (show) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
-    },
 
     showEtherpadButton () {
         if (!$('#toolbar_button_etherpad').is(":visible")) {
@@ -425,10 +397,8 @@ Toolbar = {
         if (shouldShow) {
             let el = document.getElementById(id);
             UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
         }
+        UIUtil.setVisible(id, shouldShow);
     },
 
     // checks whether desktop sharing is enabled and whether
@@ -446,63 +416,15 @@ Toolbar = {
             && UIUtil.isButtonEnabled('sip') && show;
         let id = 'toolbar_button_sip';
 
-        if (shouldShow) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
+        UIUtil.setVisible(id, shouldShow);
     },
 
     // Shows or hides the dialpad button
     showDialPadButton (show) {
         let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
         let id = 'toolbar_button_dialpad';
-        if (shouldShow) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
-    },
 
-    /**
-     * Displays user authenticated identity name(login).
-     * @param authIdentity identity name to be displayed.
-     */
-    setAuthenticatedIdentity (authIdentity) {
-        let id = 'toolbar_auth_identity';
-        if(authIdentity) {
-            UIUtil.showElement(id);
-            $(`#${id}`).text(authIdentity);
-        } else {
-            UIUtil.hideElement(id);
-            $(`#${id}`).text('');
-        }
-    },
-
-    /**
-     * Shows/hides login button.
-     * @param show <tt>true</tt> to show
-     */
-    showLoginButton (show) {
-        let id = 'toolbar_button_login';
-        if (show) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
-    },
-
-    /**
-     * Shows/hides logout button.
-     * @param show <tt>true</tt> to show
-     */
-    showLogoutButton (show) {
-        let id = 'toolbar_button_logout';
-        if (show) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
+        UIUtil.setVisible(id, shouldShow);
     },
 
     /**

modules/UI/util/MessageHandler.js

@@ -290,7 +290,15 @@ var messageHandler = {
             buttons: buttons,
             defaultButton: 1,
             promptspeed: 0,
-            loaded: loadedFunction,
+            loaded: function() {
+                if (loadedFunction) {
+                    loadedFunction.apply(this, arguments);
+                }
+                // Hide the close button
+                if (persistent) {
+                    $(".jqiclose", this).hide();
+                }
+            },
             submit: dontShowAgainSubmitFunctionWrapper(
                 dontShowAgain, submitFunction),
             close: closeFunction,

modules/UI/util/UIUtil.js

@@ -240,11 +240,13 @@ const IndicatorFontSizes = {
     },
 
     /**
-     * Shows the element given by id.
+     * Shows / hides the element given by id.
      *
-     * @param {String} the identifier of the element to show
+     * @param {string|HTMLElement} idOrElement the identifier or the element
+     *        to show/hide
+     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
      */
-    showElement(id) {
+    setVisible(id, visible) {
         let element;
         if (id instanceof HTMLElement) {
             element = id;
@@ -256,40 +258,20 @@ const IndicatorFontSizes = {
             return;
         }
 
-        if(element.classList.contains('hide')) {
+        if (!visible)
+            element.classList.add('hide');
+        else if (element.classList.contains('hide')) {
             element.classList.remove('hide');
         }
 
         let type = this._getElementDefaultDisplay(element.tagName);
         let className = SHOW_CLASSES[type];
-        element.classList.add(className);
-    },
 
-    /**
-     * Hides the element given by id.
-     *
-     * @param {String} the identifier of the element to hide
-     */
-    hideElement(id) {
-        let element;
-        if (id instanceof HTMLElement) {
-            element = id;
-        } else {
-            element = document.getElementById(id);
+        if (visible) {
+            element.classList.add(className);
         }
-
-        if (!element) {
-            return;
-        }
-
-        let type = this._getElementDefaultDisplay(element.tagName);
-        let className = SHOW_CLASSES[type];
-
-        if(element.classList.contains(className)) {
+        else if (element.classList.contains(className))
             element.classList.remove(className);
-        }
-
-        element.classList.add('hide');
     },
 
     /**
@@ -311,12 +293,13 @@ const IndicatorFontSizes = {
     /**
      * Shows / hides the element with the given jQuery selector.
      *
-     * @param {jQuery} selector the jQuery selector of the element to show/hide
+     * @param {jQuery} jquerySelector the jQuery selector of the element to
+     * show / shide
      * @param {boolean} isVisible
      */
-    setVisibility(selector, isVisible) {
-        if (selector && selector.length > 0) {
-            selector.css("visibility", isVisible ? "visible" : "hidden");
+    setVisibleBySelector(jquerySelector, isVisible) {
+        if (jquerySelector && jquerySelector.length > 0) {
+            jquerySelector.css("visibility", isVisible ? "visible" : "hidden");
         }
     },
 

modules/UI/videolayout/LargeVideoManager.js

@@ -333,13 +333,13 @@ export default class LargeVideoManager {
         }
 
         let id = 'localConnectionMessage';
+
+        UIUtil.setVisible(id, show);
+
         if (show) {
-            UIUtil.showElement(id);
             // Avatar message conflicts with 'videoConnectionMessage',
             // so it must be hidden
             this.showRemoteConnectionMessage(false);
-        } else {
-            UIUtil.hideElement(id);
         }
     }
 

modules/UI/videolayout/SmallVideo.js

@@ -215,13 +215,10 @@ SmallVideo.prototype.hideIndicator = function () {
  * @param {boolean} isMuted indicates if the muted element should be shown
  * or hidden
  */
-SmallVideo.prototype.showAudioIndicator = function(isMuted) {
+SmallVideo.prototype.showAudioIndicator = function (isMuted) {
     let mutedIndicator = this.getAudioMutedIndicator();
-    if (isMuted) {
-        UIUtil.showElement(mutedIndicator);
-    } else {
-        UIUtil.hideElement(mutedIndicator);
-    }
+
+    UIUtil.setVisible(mutedIndicator, isMuted);
 
     this.isAudioMuted = isMuted;
 };
@@ -270,11 +267,8 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
     this.updateView();
 
     let element = this.getVideoMutedIndicator();
-    if (isMuted) {
-        UIUtil.showElement(element);
-    } else {
-        UIUtil.hideElement(element);
-    }
+
+    UIUtil.setVisible(element, isMuted);
 };
 
 /**
@@ -511,24 +505,24 @@ SmallVideo.prototype.updateView = function () {
     // Determine whether video, avatar or blackness should be displayed
     let displayMode = this.selectDisplayMode();
     // Show/hide video.
-    UIUtil.setVisibility(   this.selectVideoElement(),
-                            (displayMode === DISPLAY_VIDEO
+    UIUtil.setVisibleBySelector(this.selectVideoElement(),
+                                (displayMode === DISPLAY_VIDEO
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME));
     // Show/hide the avatar.
-    UIUtil.setVisibility(   this.$avatar(),
-                            (displayMode === DISPLAY_AVATAR
+    UIUtil.setVisibleBySelector(this.$avatar(),
+                                (displayMode === DISPLAY_AVATAR
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // Show/hide the display name.
-    UIUtil.setVisibility(   this.$displayName(),
-                            !this.hideDisplayName
-                            && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
+    UIUtil.setVisibleBySelector(this.$displayName(),
+                                !this.hideDisplayName
+                                && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // show hide overlay when there is a video or avatar under
     // the display name
-    UIUtil.setVisibility(   $('#' + this.videoSpanId
+    UIUtil.setVisibleBySelector($('#' + this.videoSpanId
                                 + ' .videocontainer__hoverOverlay'),
-                            (displayMode === DISPLAY_AVATAR_WITH_NAME
+                                (displayMode === DISPLAY_AVATAR_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME));
 };
 
@@ -576,11 +570,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
         tooltip: 'speaker'
     });
 
-    if (show) {
-        UIUtil.showElement(indicatorSpan);
-    } else {
-        UIUtil.hideElement(indicatorSpan);
-    }
+    UIUtil.setVisible(indicatorSpan, show);
 };
 
 /**
@@ -604,11 +594,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
         tooltip: 'raisedHand'
     });
 
-    if (show) {
-        UIUtil.showElement(indicatorSpan);
-    } else {
-        UIUtil.hideElement(indicatorSpan);
-    }
+    UIUtil.setVisible(indicatorSpan, show);
 };
 
 /**

modules/UI/videolayout/VideoLayout.js

@@ -1150,11 +1150,7 @@ var VideoLayout = {
     updateResolutionLabel(isResolutionHD) {
         let id = 'videoResolutionLabel';
 
-        if (isResolutionHD) {
-            UIUtil.showElement(id);
-        } else {
-            UIUtil.hideElement(id);
-        }
+        UIUtil.setVisible(id, isResolutionHD);
     },
 
     /**