feat: lobby feature

The lobby feature adds the possibility to lock a meeting and only allow people in after virtually knocking and going through formal approval

conference.js

@@ -296,12 +296,6 @@ class ConferenceConnector {
         logger.error('CONFERENCE FAILED:', err, ...params);
 
         switch (err) {
-        case JitsiConferenceErrors.CONNECTION_ERROR: {
-            const [ msg ] = params;
-
-            APP.UI.notifyConnectionFailed(msg);
-            break;
-        }
 
         case JitsiConferenceErrors.NOT_ALLOWED_ERROR: {
             // let's show some auth not allowed page
@@ -336,14 +330,6 @@ class ConferenceConnector {
             APP.UI.notifyGracefulShutdown();
             break;
 
-        case JitsiConferenceErrors.CONFERENCE_DESTROYED: {
-            const [ reason ] = params;
-
-            APP.UI.hideStats();
-            APP.UI.notifyConferenceDestroyed(reason);
-            break;
-        }
-
         // FIXME FOCUS_DISCONNECTED is a confusing event name.
         // What really happens there is that the library is not ready yet,
         // because Jicofo is not available, but it is going to give it another

css/_lobby.scss

@@ -0,0 +1,211 @@
+#lobby-screen {
+    align-items: center;
+    color: $overflowMenuItemColor;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.2em;
+    margin: 48px 36px;
+
+    span {
+        padding: 8px 0;
+    }
+
+    .title {
+        color: $defaultColor;
+        font-size: 2em;
+    }
+
+    .roomName {
+        font-size: 1em;
+    }
+
+    .participantInfo {
+        align-items: center;
+        align-self: stretch;
+        border: 1px solid #B8C7E0;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+        margin: 24px 0;
+        padding: 34px 0;
+
+        &:hover {
+            padding-top: 0px;
+
+            .editButton {
+                display: flex;
+            }
+        }
+
+        .editButton {
+            align-self: stretch;
+            display: none;
+            justify-content: flex-end;
+            padding: 5px;
+            position: relative;
+
+            button {
+                background-color: transparent;
+                border-width: 0;
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        .displayName {
+            color: $defaultColor;
+            font-size: 1.3em;
+        }
+    }
+
+    .form {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        margin: 32px 0;
+
+        input {
+            margin: 5px 0 15px 0;
+        }
+
+        span {
+            color: white;
+            font-size: 1.3em;
+            text-align: center;
+        }
+    }
+
+    .joiningContainer {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin: 36px 0;
+
+        span {
+            margin-top: 36px;
+            text-align: center;
+        }
+    }
+}
+
+#lobby-dialog {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    margin: 32px 0;
+
+    .description {
+        margin-bottom: 18px;
+    }
+
+    .field {
+        display: flex;
+        flex-direction: row;
+
+        :first-child {
+            align-items: center;
+            display: flex;
+            padding-right: 15px;
+        }
+
+        :last-child {
+            flex: 1;
+        }
+    }
+}
+
+#knocking-participant-list {
+    background-color: $newToolbarBackgroundColor;
+    border: 1px solid rgba(255, 255, 255, .4);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    margin: 20px;
+    position: fixed;
+    top: 20;
+    transition: top 1s ease;
+    z-index: 100;
+
+    &.toolbox-visible {
+        // Same as toolbox subject position
+        top: 120px;
+    }
+
+    .title {
+        background-color: rgba(0, 0, 0, .2);
+        font-size: 1.2em;
+        padding: 15px
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0 15px 15px 15px;
+
+        li {
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+            margin: 8px 0;
+
+            .details {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                justify-content: space-evenly;
+                margin: 0 30px 0 10px;
+            }
+
+            button {
+                align-self: unset;
+                margin: 0 5px;
+            }
+        }
+    }
+}
+
+// Common styles
+
+#lobby-dialog, #lobby-screen, #knocking-participant-list {
+    input {
+        align-self: stretch;
+        background-color: transparent;
+        border: 1px solid #B8C7E0;
+        border-radius: 4px;
+        color: white;
+        padding: 12px 8px;
+
+        &:focus {
+            border-color: rgb(3, 118, 218);
+        }
+    }
+
+    button {
+        align-self: stretch;
+        margin: 8px 0;
+        padding: 12px;
+        transition: .2s transform ease;
+
+        &:disabled {
+            opacity: .5;
+        }
+
+        &:hover {
+            transform: scale(1.05);
+
+            &:disabled {
+                transform: none;
+            }
+        }
+
+        &.borderLess {
+            background-color: transparent;
+            border-width: 0;
+        }
+
+        &.primary {
+            background-color: rgb(3, 118, 218);
+            border-width: 0;
+        }
+    }
+}

css/main.scss

@@ -76,6 +76,7 @@ $flagsImagePath: "../images/";
 @import 'filmstrip/vertical_filmstrip';
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'labels';
+@import 'lobby';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
 @import 'deep-linking/main';

interface_config.js

@@ -48,7 +48,7 @@ var interfaceConfig = {
      */
     TOOLBAR_BUTTONS: [
         'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
-        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
+        'fodeviceselection', 'hangup', 'lobby', 'profile', 'chat', 'recording',
         'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
         'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
         'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone',

lang/main.json

@@ -675,6 +675,7 @@
             "help": "Help",
             "invite": "Invite people",
             "kick": "Kick participant",
+            "lobbyButton": "Enable/disable lobby mode",
             "localRecording": "Toggle local recording controls",
             "lockRoom": "Toggle meeting password",
             "moreActions": "Toggle more actions menu",
@@ -722,6 +723,8 @@
         "hangup": "Leave",
         "help": "Help",
         "invite": "Invite people",
+        "lobbyButtonDisable": "Disable lobby mode",
+        "lobbyButtonEnable": "Enable lobby mode",
         "login": "Login",
         "logout": "Logout",
         "lowerYourHand": "Lower your hand",
@@ -861,5 +864,29 @@
     },
     "helpView": {
         "header": "Help center"
+    },
+    "lobby": {
+        "allow": "Allow",
+        "backToKnockModeButton": "No password, knock instead",
+        "dialogTitle": "Lobby mode",
+        "disableDialogContent": "Lobby mode is currently enabled. This feature ensures that unwanted participants can't join your meeting. Do you want to disable it?",
+        "disableDialogSubmit": "Disable",
+        "emailField": "Enter your email address",
+        "enableDialogPasswordField": "Set password (optional)",
+        "enableDialogSubmit": "Enable",
+        "enableDialogText": "Lobby mode lets you protect your meeting by only allowing people to enter after a formal approve of a moderator or by entering an optional predefined password.",
+        "enterPasswordButton": "Enter meeting password",
+        "joiningMessage": "You'll join the meeting as soon as someone accepts your request",
+        "joinWithPasswordMessage": "Trying to join with password, please wait...",
+        "joinRejectedMessage": "Your join request was rejected by a moderator.",
+        "joinTitle": "Join Meeting",
+        "joiningTitle": "Asking to join",
+        "joiningWithPasswordTitle": "Joining",
+        "knockButton": "Ask to Join",
+        "knockTitle": "Someone wants to join the meeting",
+        "nameField": "Enter your name",
+        "passwordField": "Enter password",
+        "passwordJoinButton": "Join",
+        "reject": "Reject"
     }
 }

modules/UI/UI.js

@@ -98,19 +98,6 @@ UI.notifyReservationError = function(code, msg) {
     });
 };
 
-/**
- * Notify user that conference was destroyed.
- * @param reason {string} the reason text
- */
-UI.notifyConferenceDestroyed = function(reason) {
-    // FIXME: use Session Terminated from translation, but
-    // 'reason' text comes from XMPP packet and is not translated
-    messageHandler.showError({
-        description: reason,
-        titleKey: 'dialog.sessTerminated'
-    });
-};
-
 /**
  * Change nickname for the user.
  * @param {string} id user id

react/features/app/actions.js

@@ -23,7 +23,7 @@ import {
     parseURIString,
     toURLString
 } from '../base/util';
-import { showNotification } from '../notifications';
+import { clearNotifications, showNotification } from '../notifications';
 import { setFatalError } from '../overlay';
 
 import {
@@ -79,6 +79,10 @@ export function appNavigate(uri: ?string) {
             dispatch(disconnect());
         }
 
+        // There are notifications now that gets displayed after we technically left
+        // the conference, but we're still on the conference screen.
+        dispatch(clearNotifications());
+
         dispatch(configWillLoad(locationURL, room));
 
         let protocol = location.protocol.toLowerCase();

react/features/app/components/AbstractApp.js

@@ -7,6 +7,7 @@ import '../../base/lastn'; // Register lastN middleware
 import { toURLString } from '../../base/util';
 import '../../follow-me';
 import { OverlayContainer } from '../../overlay';
+import '../../lobby'; // Import lobby function
 import '../../rejoin'; // Enable rejoin analytics
 import { appNavigate } from '../actions';
 import { getDefaultURL } from '../functions';

react/features/base/avatar/components/native/styles.js

@@ -70,7 +70,7 @@ export default {
 
     initialsText: (size: number = DEFAULT_SIZE) => {
         return {
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: 'white',
             fontSize: size * 0.45,
             fontWeight: '100'
         };

react/features/base/conference/actions.js

@@ -256,7 +256,7 @@ export function authStatusChanged(authEnabled: boolean, authLogin: string) {
  * }}
  * @public
  */
-export function conferenceFailed(conference: Object, error: string) {
+export function conferenceFailed(conference: Object, error: string, ...params: any) {
     return {
         type: CONFERENCE_FAILED,
         conference,
@@ -265,6 +265,7 @@ export function conferenceFailed(conference: Object, error: string) {
         // jitsi-meet needs it).
         error: {
             name: error,
+            params,
             recoverable: undefined
         }
     };

react/features/base/conference/functions.js

@@ -203,15 +203,15 @@ export function getConferenceTimestamp(stateful: Function | Object): number {
  * @returns {JitsiConference|undefined}
  */
 export function getCurrentConference(stateful: Function | Object) {
-    const { conference, joining, leaving, passwordRequired }
+    const { conference, joining, leaving, membersOnly, passwordRequired }
         = toState(stateful)['features/base/conference'];
 
     // There is a precendence
     if (conference) {
         return conference === leaving ? undefined : conference;
     }
 
-    return joining || passwordRequired;
+    return joining || passwordRequired || membersOnly;
 }
 
 /**