feat(lobby): lobby chat

lobby chat support
knocking participants list updates
knocking participants conditonal checks to show message button
handle lobby chat message events
lobby messages from or to moderators only

Co-authored-by: Fecri Kaan Ulubey <f.kaan93@gmail.com>

conference.js

@@ -126,6 +126,7 @@ import {
     maybeOpenFeedbackDialog,
     submitFeedback
 } from './react/features/feedback';
+import { maybeSetLobbyChatMessageListener } from './react/features/lobby/actions.any';
 import {
     isModerationNotificationDisplayed,
     showNotification,
@@ -2102,6 +2103,10 @@ export default {
             if (this.isLocalId(id)) {
                 logger.info(`My role changed, new role: ${role}`);
 
+                if (role === 'moderator') {
+                    APP.store.dispatch(maybeSetLobbyChatMessageListener());
+                }
+
                 APP.store.dispatch(localParticipantRoleChanged(role));
                 APP.API.notifyUserRoleChanged(id, role);
             } else {

config.js

@@ -473,6 +473,9 @@ var config = {
     // If Lobby is enabled starts knocking automatically.
     // autoKnockLobby: false,
 
+    // Enable lobby chat.
+    // enableLobbyChat: true,
+
     // DEPRECATED! Use `breakoutRooms.hideAddRoomButton` instead.
     // Hides add breakout room button
     // hideAddRoomButton: false,

css/_chat.scss

@@ -85,6 +85,10 @@
             fill: white;
         }
     }
+
+    &.lobby-chat-recipient {
+        background-color: $chatLobbyMessageBackgroundColor;
+    }
 }
 
 
@@ -455,6 +459,9 @@
             &.privatemessage {
                 background-color: $chatPrivateMessageBackgroundColor;
             }
+            &.lobbymessage {
+                background-color: $chatLobbyMessageBackgroundColor;
+            }
         }
 
         .display-name {
@@ -494,6 +501,10 @@
                 justify-content: center;
                 padding: 5px;
 
+                &.lobbychatmessageactions {
+                    border-left-color: $chatLobbyActionsSeparatorColor;
+                }
+
                 .toolbox-icon {
                     cursor: pointer;
                 }
@@ -511,6 +522,9 @@
         &.privatemessage {
             background-color: $chatPrivateMessageBackgroundColor;
         }
+        &.lobbymessage {
+            background-color: $chatLobbyMessageBackgroundColor;
+        }
     }
 }
 

css/_variables.scss

@@ -83,6 +83,8 @@ $modalTextColor: #333;
 $chatActionsSeparatorColor: rgb(173, 105, 112);
 $chatBackgroundColor: #131519;
 $chatInputSeparatorColor: #A4B8D1;
+$chatLobbyMessageBackgroundColor: #6A50D3;
+$chatLobbyActionsSeparatorColor: #6A50D3;
 $chatLocalMessageBackgroundColor: #484A4F;
 $chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
 $chatRemoteMessageBackgroundColor:  #242528;

css/premeeting/_lobby.scss

@@ -12,11 +12,29 @@
             margin: 8px;
         }
 
+        .lobby-chat-container {
+            background-color: $chatBackgroundColor;
+            width: 100%;
+            height: 314px;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            margin-bottom: 16px;
+            border-radius: 5px;
+            .lobby-chat-header {
+                display: none;
+            }
+        }
+
         .joining-message {
             color: white;
             margin: 24px auto;
             text-align: center;
         }
+
+        .open-chat-button {
+            display: none;
+        }
     }
 }
 
@@ -40,3 +58,149 @@
         }
     }
 }
+
+#notification-participant-list {
+    background-color: $newToolbarBackgroundColor;
+    border: 1px solid rgba(255, 255, 255, .4);
+    border-radius: 8px;
+    left: 0;
+    margin: 20px;
+    max-height: 600px;
+    overflow: hidden;
+    overflow-y: auto;
+    position: fixed;
+    top: 30px;
+    z-index: $toolbarZ + 1;
+
+    &:empty {
+        border: none;
+    }
+
+    &.toolbox-visible {
+        // Same as toolbox subject position
+        top: 120px;
+    }
+
+    &.avoid-chat {
+        left: 315px;
+    }
+
+    .title {
+        background-color: rgba(0, 0, 0, .2);
+        font-size: 1.2em;
+        padding: 15px
+    }
+
+    button {
+        align-self: stretch;
+        margin-bottom: 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;
+        }
+    }
+}
+
+.knocking-participants-container {
+    list-style-type: none;
+    padding: 0 15px 15px 15px;
+}
+
+.knocking-participant {
+    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;
+    }
+}
+
+@media (max-width: 300px) {
+    #knocking-participant-list {
+        margin: 0;
+        text-align: center;
+        width: 100%;
+
+        .avatar {
+            display: none;
+        }
+    }
+
+    .knocking-participant {
+        flex-direction: column;
+
+        .details {
+            margin: 0;
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    .lobby-screen-content {
+
+        .lobby-chat-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 255;
+
+            &.hidden {
+                display: none;
+            }
+
+            .lobby-chat-header {
+                display: flex;
+                flex-direction: row;
+                padding-top: 20px;
+                padding-left: 16px;
+                padding-right: 16px;
+
+                .title {
+                    flex: 1;
+                    color: #fff;
+                    font-size: 20px;
+                    font-weight: 600;
+                    line-height: 28px;
+                    letter-spacing: -1.2%;
+                }
+            }
+        }
+
+        .open-chat-button {
+            display: block;
+        }
+    }
+}

lang/main-tr.json

@@ -68,6 +68,7 @@
         "enter": "Odaya gir",
         "error": "Hata: Mesajınız gönderilmedi. Neden: {{error}}",
         "fieldPlaceHolder": "Mesajınızı buraya yazın",
+        "lobbyChatMessageTo": "{{recipient}} adlı kişiye lobi mesajı",
         "message": "Mesaj",
         "messageAccessibleTitle": "{{user}} diyor:",
         "messageAccessibleTitleMe": "ben diyorum:",
@@ -526,6 +527,7 @@
         "admitAll": "Hepsini kabul et",
         "allow": "İzin ver",
         "backToKnockModeButton": "Parola yok, bunun yerine katılmayı isteyin",
+        "chat": "Sohbet et",
         "dialogTitle": "Lobi modu",
         "disableDialogContent": "Lobi modu şu anda etkin. Bu özellik, istenmeyen katılımcıların toplantınıza katılamamasını sağlar. Devre dışı bırakmak istiyor musunuz?",
         "disableDialogSubmit": "Devre Dışı",
@@ -546,6 +548,8 @@
         "knockButton": "Katılmak için sor",
         "knockTitle": "Birisi toplantıya katılmak istiyor",
         "knockingParticipantList": "Kapıyı çalan katılımcı listesi",
+        "lobbyChatStartedNotification": "{{moderator}} {{attendee}} adlı kişiyle lobi mesajlaşması başlattı",
+        "lobbyChatStartedTitle": "{{moderator}} sizinle lobi mesajlaşması başlattı",
         "nameField": "Adınızı giriniz",
         "notificationLobbyAccessDenied": "{{targetParticipantName}} adlı katılımcı {{originParticipantName}} tarafından reddedildi",
         "notificationLobbyAccessGranted": "{{targetParticipantName}} adlı katılımcı {{originParticipantName}} tarafından kabul edildi",

lang/main.json

@@ -83,6 +83,7 @@
         "enter": "Enter room",
         "error": "Error: your message was not sent. Reason: {{error}}",
         "fieldPlaceHolder": "Type your message here",
+        "lobbyChatMessageTo": "Lobby chat message to {{recipient}}",
         "message": "Message",
         "messageAccessibleTitle": "{{user}} says:",
         "messageAccessibleTitleMe": "me says:",
@@ -529,6 +530,7 @@
         "admitAll": "Admit all",
         "allow": "Allow",
         "backToKnockModeButton": "Ask to join",
+        "chat": "Chat",
         "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",
@@ -549,6 +551,8 @@
         "knockButton": "Ask to Join",
         "knockTitle": "Someone wants to join the meeting",
         "knockingParticipantList": "Knocking participant list",
+        "lobbyChatStartedNotification": "{{moderator}} started a lobby chat with {{attendee}}",
+        "lobbyChatStartedTitle": "{{moderator}} has started a lobby chat with you.",
         "nameField": "Enter your name",
         "notificationLobbyAccessDenied": "{{targetParticipantName}} has been rejected to join by {{originParticipantName}}",
         "notificationLobbyAccessGranted": "{{targetParticipantName}} has been allowed to join by {{originParticipantName}}",

react/features/base/color-scheme/defaultScheme.js

@@ -17,6 +17,8 @@ export default {
     'Chat': {
         displayName: 'rgb(94, 109, 121)',
         localMsgBackground: 'rgb(215, 230, 249)',
+        lobbyMsgBackground: 'rgb(106, 80, 211)',
+        lobbyMsgNotice: 'rgb(16, 10, 41)',
         privateMsgBackground: 'rgb(250, 219, 219)',
         privateMsgNotice: 'rgb(186, 39, 58)',
         remoteMsgBackground: 'rgb(241, 242, 246)',

react/features/base/conference/middleware.any.js

@@ -9,6 +9,7 @@ import {
     sendAnalytics
 } from '../../analytics';
 import { reloadNow } from '../../app/actions';
+import { removeLobbyChatParticipant } from '../../chat/actions.any';
 import { openDisplayNamePrompt } from '../../display-name';
 import { NOTIFICATION_TIMEOUT_TYPE, showErrorNotification } from '../../notifications';
 import { CONNECTION_ESTABLISHED, CONNECTION_FAILED, connectionDisconnected } from '../connection';
@@ -212,6 +213,8 @@ function _conferenceJoined({ dispatch, getState }, next, action) {
     const { pendingSubjectChange } = getState()['features/base/conference'];
     const { requireDisplayName, disableBeforeUnloadHandlers = false } = getState()['features/base/config'];
 
+    dispatch(removeLobbyChatParticipant(true));
+
     pendingSubjectChange && dispatch(setSubject(pendingSubjectChange));
 
     // FIXME: Very dirty solution. This will work on web only.

react/features/base/config/configWhitelist.js

@@ -142,6 +142,7 @@ export default [
     'enableInsecureRoomNameWarning',
     'enableLayerSuspension',
     'enableLipSync',
+    'enableLobbyChat',
     'enableOpusRed',
     'enableRemb',
     'enableSaveLogs',

react/features/chat/actionTypes.js

@@ -84,3 +84,32 @@ export const SET_PRIVATE_MESSAGE_RECIPIENT = 'SET_PRIVATE_MESSAGE_RECIPIENT';
  * }
  */
 export const SET_IS_POLL_TAB_FOCUSED = 'SET_IS_POLL_TAB_FOCUSED';
+
+/**
+ * The type of action which sets the current recipient for lobby messages.
+ *
+ * {
+ *     participant: Object,
+ *     type: SET_LOBBY_CHAT_RECIPIENT
+ * }
+ */
+ export const SET_LOBBY_CHAT_RECIPIENT = 'SET_LOBBY_CHAT_RECIPIENT';
+
+ /**
+  * The type of action sets the state of lobby messaging status.
+  *
+  * {
+  *     type: SET_LOBBY_CHAT_ACTIVE_STATE
+  *     payload: boolean
+  * }
+  */
+ export const SET_LOBBY_CHAT_ACTIVE_STATE = 'SET_LOBBY_CHAT_ACTIVE_STATE';
+
+ /**
+  * The type of action removes the lobby messaging from participant.
+  *
+  * {
+  *     type: REMOVE_LOBBY_CHAT_PARTICIPANT
+  * }
+  */
+ export const REMOVE_LOBBY_CHAT_PARTICIPANT = 'REMOVE_LOBBY_CHAT_PARTICIPANT';