Minor: rename a <CallingHeader> prop for clarity

ts/components/CallScreen.tsx

@@ -232,7 +232,7 @@ export const CallScreen: React.FC<PropsType> = ({
           i18n={i18n}
           isGroupCall={call.callMode === CallMode.Group}
           message={headerMessage}
-          remoteParticipants={participantCount}
+          participantCount={participantCount}
           showParticipantsList={showParticipantsList}
           title={headerTitle}
           toggleParticipants={toggleParticipants}

ts/components/CallingHeader.stories.tsx

@@ -17,9 +17,9 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
   isGroupCall: boolean('isGroupCall', Boolean(overrideProps.isGroupCall)),
   message: overrideProps.message,
-  remoteParticipants: number(
+  participantCount: number(
-    'remoteParticipants',
+    'participantCount',
-    overrideProps.remoteParticipants || 0
+    overrideProps.participantCount || 0
   ),
   showParticipantsList: boolean(
     'showParticipantsList',
@@ -44,7 +44,7 @@ story.add('With Participants', () => (
     {...createProps({
       canPip: true,
       isGroupCall: true,
-      remoteParticipants: 10,
+      participantCount: 10,
     })}
   />
 ));
@@ -54,7 +54,7 @@ story.add('With Participants (shown)', () => (
     {...createProps({
       canPip: true,
       isGroupCall: true,
-      remoteParticipants: 10,
+      participantCount: 10,
       showParticipantsList: true,
     })}
   />

ts/components/CallingHeader.tsx

@@ -11,7 +11,7 @@ export type PropsType = {
   i18n: LocalizerType;
   isGroupCall?: boolean;
   message?: string;
-  remoteParticipants?: number;
+  participantCount: number;
   showParticipantsList: boolean;
   title?: string;
   toggleParticipants?: () => void;
@@ -24,7 +24,7 @@ export const CallingHeader = ({
   i18n,
   isGroupCall = false,
   message,
-  remoteParticipants,
+  participantCount,
   showParticipantsList,
   title,
   toggleParticipants,
@@ -42,14 +42,12 @@ export const CallingHeader = ({
       {isGroupCall ? (
         <div className="module-calling-tools__button">
           <Tooltip
-            content={i18n('calling__participants', [
+            content={i18n('calling__participants', [String(participantCount)])}
-              String(remoteParticipants),
-            ])}
             theme={TooltipTheme.Dark}
           >
             <button
               aria-label={i18n('calling__participants', [
-                String(remoteParticipants),
+                String(participantCount),
               ])}
               className={classNames(
                 'module-calling-button__participants--container',
@@ -62,7 +60,7 @@ export const CallingHeader = ({
             >
               <i className="module-calling-button__participants" />
               <span className="module-calling-button__participants--count">
-                {remoteParticipants}
+                {participantCount}
               </span>
             </button>
           </Tooltip>

ts/components/CallingLobby.tsx

@@ -159,7 +159,7 @@ export const CallingLobby = ({
         title={conversation.title}
         i18n={i18n}
         isGroupCall={isGroupCall}
-        remoteParticipants={participantNames.length}
+        participantCount={participantNames.length}
         showParticipantsList={showParticipantsList}
         toggleParticipants={toggleParticipants}
         toggleSettings={toggleSettings}