Add list of participants to the lobby, and add basic blocking for max participants

_locales/en/messages.json

@@ -1166,6 +1166,10 @@
     "message": "Join Call",
     "description": "Button label in the call lobby for joining a call"
   },
+  "calling__call-is-full": {
+    "message": "Call is full",
+    "description": "Button label in the call lobby when you can't join because the call is full"
+  },
   "calling__button--video-disabled": {
     "message": "Camera disabled",
     "description": "Button tooltip label when the camera is disabled"

stylesheets/_modules.scss

@@ -6454,6 +6454,10 @@ button.module-image__border-overlay:focus {
     margin-left: 8px;
     margin-right: 8px;
     width: 160px;
+
+    &[disabled] {
+      opacity: 0.5;
+    }
   }
 
   &__video {

ts/components/CallManager.stories.tsx

@@ -101,6 +101,8 @@ story.add('Ongoing Direct Call', () => (
         },
         activeCallState: getCallState(),
         conversation: getConversation(),
+        isCallFull: false,
+        groupCallPeekedParticipants: [],
         groupCallParticipants: [],
       },
     })}
@@ -125,6 +127,8 @@ story.add('Ongoing Group Call', () => (
         },
         activeCallState: getCallState(),
         conversation: getConversation(),
+        isCallFull: false,
+        groupCallPeekedParticipants: [],
         groupCallParticipants: [],
       },
     })}
@@ -151,6 +155,8 @@ story.add('Call Request Needed', () => (
         }),
         activeCallState: getCallState(),
         conversation: getConversation(),
+        isCallFull: false,
+        groupCallPeekedParticipants: [],
         groupCallParticipants: [],
       },
     })}

ts/components/CallManager.tsx

@@ -96,7 +96,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
     call,
     activeCallState,
     conversation,
+    groupCallPeekedParticipants,
     groupCallParticipants,
+    isCallFull,
   } = activeCall;
   const {
     hasLocalAudio,
@@ -157,7 +159,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
   }
 
   if (showCallLobby) {
-    const participantNames = groupCallParticipants.map(participant =>
+    const participantNames = groupCallPeekedParticipants.map(participant =>
       participant.isSelf
         ? i18n('you')
         : participant.firstName || participant.title
@@ -171,6 +173,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
           hasLocalVideo={hasLocalVideo}
           i18n={i18n}
           isGroupCall={call.callMode === CallMode.Group}
+          isCallFull={isCallFull}
           me={me}
           onCallCanceled={cancelActiveCall}
           onJoinCall={joinActiveCall}

ts/components/CallScreen.stories.tsx

@@ -93,6 +93,8 @@ const createProps = (
       type: 'direct',
       lastUpdated: Date.now(),
     },
+    isCallFull: false,
+    groupCallPeekedParticipants: [],
     groupCallParticipants: overrideProps.groupCallParticipants || [],
   },
   // We allow `any` here because this is fake and actually comes from RingRTC, which we

ts/components/CallingLobby.tsx

@@ -24,6 +24,7 @@ export type PropsType = {
   hasLocalVideo: boolean;
   i18n: LocalizerType;
   isGroupCall: boolean;
+  isCallFull?: boolean;
   me: {
     avatarPath?: string;
     color?: ColorType;
@@ -46,6 +47,7 @@ export const CallingLobby = ({
   hasLocalVideo,
   i18n,
   isGroupCall = false,
+  isCallFull = false,
   me,
   onCallCanceled,
   onJoinCall,
@@ -112,6 +114,45 @@ export const CallingLobby = ({
     ? CallingButtonType.AUDIO_ON
     : CallingButtonType.AUDIO_OFF;
 
+  let joinButton: JSX.Element;
+  if (isCallFull) {
+    joinButton = (
+      <button
+        className="module-button__green module-calling-lobby__button"
+        disabled
+        tabIndex={0}
+        type="button"
+      >
+        {i18n('calling__call-is-full')}
+      </button>
+    );
+  } else if (isCallConnecting) {
+    joinButton = (
+      <button
+        className="module-button__green module-calling-lobby__button"
+        disabled
+        tabIndex={0}
+        type="button"
+      >
+        <Spinner svgSize="small" />
+      </button>
+    );
+  } else {
+    joinButton = (
+      <button
+        className="module-button__green module-calling-lobby__button"
+        onClick={() => {
+          setIsCallConnecting(true);
+          onJoinCall();
+        }}
+        tabIndex={0}
+        type="button"
+      >
+        {isGroupCall ? i18n('calling__join') : i18n('calling__start')}
+      </button>
+    );
+  }
+
   return (
     <div className="module-calling__container">
       <CallingHeader
@@ -191,29 +232,7 @@ export const CallingLobby = ({
         >
           {i18n('cancel')}
         </button>
-        {isCallConnecting && (
+        {joinButton}
-          <button
-            className="module-button__green module-calling-lobby__button"
-            disabled
-            tabIndex={0}
-            type="button"
-          >
-            <Spinner svgSize="small" />
-          </button>
-        )}
-        {!isCallConnecting && (
-          <button
-            className="module-button__green module-calling-lobby__button"
-            onClick={() => {
-              setIsCallConnecting(true);
-              onJoinCall();
-            }}
-            tabIndex={0}
-            type="button"
-          >
-            {isGroupCall ? i18n('calling__join') : i18n('calling__start')}
-          </button>
-        )}
       </div>
     </div>
   );

ts/components/CallingPip.stories.tsx

@@ -59,6 +59,8 @@ const createProps = (
     },
     call: activeCall.call || defaultCall,
     conversation: activeCall.conversation || conversation,
+    isCallFull: false,
+    groupCallPeekedParticipants: [],
     groupCallParticipants: [],
   },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

ts/state/ducks/calling.ts

@@ -17,6 +17,7 @@ import {
   ChangeIODevicePayloadType,
   GroupCallConnectionState,
   GroupCallJoinState,
+  GroupCallPeekedParticipantType,
   GroupCallRemoteParticipantType,
   MediaDeviceSettings,
 } from '../../types/Calling';
@@ -71,6 +72,8 @@ export interface ActiveCallType {
   activeCallState: ActiveCallStateType;
   call: DirectCallStateType | GroupCallStateType;
   conversation: ConversationType;
+  isCallFull: boolean;
+  groupCallPeekedParticipants: Array<GroupCallPeekedParticipantType>;
   groupCallParticipants: Array<GroupCallRemoteParticipantType>;
 }
 

ts/state/smart/CallManager.tsx

@@ -9,7 +9,11 @@ import { calling as callingService } from '../../services/calling';
 import { getMe, getConversationSelector } from '../selectors/conversations';
 import { getActiveCall, GroupCallParticipantInfoType } from '../ducks/calling';
 import { getIncomingCall } from '../selectors/calling';
-import { CallMode, GroupCallRemoteParticipantType } from '../../types/Calling';
+import {
+  CallMode,
+  GroupCallPeekedParticipantType,
+  GroupCallRemoteParticipantType,
+} from '../../types/Calling';
 import { StateType } from '../reducer';
 
 import { getIntl } from '../selectors/user';
@@ -47,8 +51,34 @@ const mapStateToActiveCallProp = (state: StateType) => {
     return undefined;
   }
 
+  // TODO: The way we deal with remote participants isn't ideal. See DESKTOP-949.
+  let isCallFull = false;
+  const groupCallPeekedParticipants: Array<GroupCallPeekedParticipantType> = [];
   const groupCallParticipants: Array<GroupCallRemoteParticipantType> = [];
-  if (call && call.callMode === CallMode.Group) {
+  if (call.callMode === CallMode.Group) {
+    isCallFull = call.peekInfo.deviceCount >= call.peekInfo.maxDevices;
+
+    call.peekInfo.conversationIds.forEach((conversationId: string) => {
+      const peekedConversation = conversationSelector(conversationId);
+
+      if (!peekedConversation) {
+        window.log.error(
+          'Peeked participant has no corresponding conversation'
+        );
+        return;
+      }
+
+      groupCallPeekedParticipants.push({
+        avatarPath: peekedConversation.avatarPath,
+        color: peekedConversation.color,
+        firstName: peekedConversation.firstName,
+        isSelf: conversationId === state.user.ourConversationId,
+        name: peekedConversation.name,
+        profileName: peekedConversation.profileName,
+        title: peekedConversation.title,
+      });
+    });
+
     call.remoteParticipants.forEach(
       (remoteParticipant: GroupCallParticipantInfoType) => {
         const remoteConversation = conversationSelector(
@@ -83,6 +113,8 @@ const mapStateToActiveCallProp = (state: StateType) => {
     activeCallState,
     call,
     conversation,
+    isCallFull,
+    groupCallPeekedParticipants,
     groupCallParticipants,
   };
 };

ts/types/Calling.ts

@@ -58,6 +58,16 @@ export enum GroupCallJoinState {
   Joined = 2,
 }
 
+// TODO: The way we deal with remote participants isn't ideal. See DESKTOP-949.
+export interface GroupCallPeekedParticipantType {
+  avatarPath?: string;
+  color?: ColorType;
+  firstName?: string;
+  isSelf: boolean;
+  name?: string;
+  profileName?: string;
+  title: string;
+}
 export interface GroupCallRemoteParticipantType {
   avatarPath?: string;
   color?: ColorType;

ts/util/lint/exceptions.json

@@ -14400,7 +14400,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallingLobby.tsx",
     "line": "  const localVideoRef = React.useRef(null);",
-    "lineNumber": 60,
+    "lineNumber": 62,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Used to get the local video element for rendering."