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

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 && (
-          <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>
-        )}
+        {joinButton}
       </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