[Bugfix] add participant count to participant list and Composite peop…

…le pane (#2911) * add strings to component * add participant count to composites * Change files * Duplicate change files for beta release * build API files * update stable api * Update packages/react-composites CallWithChatComposite browser test snapshots * update title creation * fix cc * add test for large participant count * Update embed html bundle snapshots * Update packages/react-composites ChatComposite browser test snapshots * remove test.only * create large participant count test * fix lint * Update packages/react-composites CallWithChatComposite browser test snapshots * Update embed html bundle snapshots * Update packages/react-composites CallComposite browser test snapshots * fix test participant counts * fix lint * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * hide counter if count undefined * remove async useEffect * fix lint * fix API files * build API files * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites ChatComposite browser test snapshots * Update embed html bundle snapshots * Update packages/react-composites CallComposite browser test snapshots * fix stable API * fix comments * fix bad name * fix missing docs * update string behavior for subtitle * Update packages/react-composites CallWithChatComposite browser test snapshots --------- Signed-off-by: Donald McEachern <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Azure · Jul 26, 2023 · 203af3e · 203af3e
1 parent 56d459f
commit 203af3e
Show file tree

Hide file tree

Showing 120 changed files with 237 additions and 53 deletions.
diff --git a/change-beta/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json b/change-beta/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce total participant counts to participant list and people pane in composites",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json b/change/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce total participant counts to participant list and people pane in composites",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/calling-component-bindings/review/beta/calling-component-bindings.api.md b/packages/calling-component-bindings/review/beta/calling-component-bindings.api.md
@@ -271,6 +271,7 @@ export const microphoneButtonSelector: MicrophoneButtonSelector;
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

diff --git a/...ages/calling-component-bindings/review/stable/calling-component-bindings.api.md b/...ages/calling-component-bindings/review/stable/calling-component-bindings.api.md
@@ -196,6 +196,7 @@ export const microphoneButtonSelector: MicrophoneButtonSelector;
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

diff --git a/packages/calling-component-bindings/src/participantListSelector.ts b/packages/calling-component-bindings/src/participantListSelector.ts
@@ -17,6 +17,7 @@ import { memoizedConvertAllremoteParticipants } from './utils/participantListSel
 /* @conditional-compile-remove(rooms) */
 import { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
+import { getParticipantCount } from './baseSelectors';
 import { isPhoneNumberIdentifier } from '@azure/communication-common';
 /* @conditional-compile-remove(communication-common-beta-v3) */
 import { isMicrosoftBotIdentifier } from '@azure/communication-common';
@@ -92,6 +93,7 @@ export type ParticipantListSelector = (
 ) => {
   participants: CallParticipantListParticipant[];
   myUserId: string;
+  totalParticipantCount?: number;
 };
 
 /**
@@ -100,16 +102,18 @@ export type ParticipantListSelector = (
  * @public
  */
 export const participantListSelector: ParticipantListSelector = createSelector(
-  [getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted],
+  [getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted, getParticipantCount],
   (
     userId,
     displayName,
     remoteParticipants,
     isScreenSharingOn,
-    isMuted
+    isMuted,
+    partitipantCount
   ): {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
   } => {
     const participants = remoteParticipants
       ? convertRemoteParticipantsToParticipantListParticipants(
@@ -125,9 +129,13 @@ export const participantListSelector: ParticipantListSelector = createSelector(
       // Local participant can never remove themselves.
       isRemovable: false
     });
+    /* @conditional-compile-remove(total-participant-count) */
+    const totalParticipantCount = partitipantCount;
     return {
       participants: participants,
-      myUserId: userId
+      myUserId: userId,
+      /* @conditional-compile-remove(total-participant-count) */
+      totalParticipantCount: totalParticipantCount
     };
   }
 );

diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -1861,6 +1861,7 @@ export interface ComponentStrings {
     MicrophoneSitePermissionsDeniedSafari: SitePermissionsStrings;
     MicrophoneSitePermissionsRequest: SitePermissionsStrings;
     participantItem: ParticipantItemStrings;
+    ParticipantList: ParticipantListStrings;
     participantsButton: ParticipantsButtonStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
@@ -3196,15 +3197,23 @@ export type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     styles?: ParticipantListStyles;
     showParticipantOverflowTooltip?: boolean;
+    totalParticipantCount?: number;
+    strings?: ParticipantListStrings;
     participantAriaLabelledBy?: string;
 };
 
 // @public
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
+// @beta
+export interface ParticipantListStrings {
+    overflowParticipantCount?: string;
+}
+
 // @public
 export interface ParticipantListStyles extends BaseCustomStyles {
     participantItemStyles?: ParticipantListItemStyles;

diff --git a/packages/communication-react/review/stable/communication-react.api.md b/packages/communication-react/review/stable/communication-react.api.md
@@ -2216,6 +2216,7 @@ export type ParticipantListProps = {
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

diff --git a/packages/communication-react/src/index.ts b/packages/communication-react/src/index.ts
@@ -151,6 +151,9 @@ export type {
   MicrophoneSitePermissionsProps
 } from '../../react-components/src';
 
+/* @conditional-compile-remove(total-participant-count) */
+export type { ParticipantListStrings } from '../../react-components/src';
+
 /* @conditional-compile-remove(mention) */
 export type {
   MentionOptions,

diff --git a/packages/react-components/review/beta/react-components.api.md b/packages/react-components/review/beta/react-components.api.md
@@ -618,6 +618,7 @@ export interface ComponentStrings {
     MicrophoneSitePermissionsDeniedSafari: SitePermissionsStrings;
     MicrophoneSitePermissionsRequest: SitePermissionsStrings;
     participantItem: ParticipantItemStrings;
+    ParticipantList: ParticipantListStrings;
     participantsButton: ParticipantsButtonStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
@@ -1618,9 +1619,16 @@ export type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     styles?: ParticipantListStyles;
     showParticipantOverflowTooltip?: boolean;
+    totalParticipantCount?: number;
+    strings?: ParticipantListStrings;
     participantAriaLabelledBy?: string;
 };
 
+// @beta
+export interface ParticipantListStrings {
+    overflowParticipantCount?: string;
+}
+
 // @public
 export interface ParticipantListStyles extends BaseCustomStyles {
     participantItemStyles?: ParticipantListItemStyles;

diff --git a/packages/react-components/src/components/ParticipantList.tsx b/packages/react-components/src/components/ParticipantList.tsx
@@ -10,6 +10,8 @@ import {
   PersonaPresence,
   Stack
 } from '@fluentui/react';
+/* @conditional-compile-remove(total-participant-count) */
+import { Text } from '@fluentui/react';
 import React, { useCallback, useMemo } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
@@ -23,6 +25,7 @@ import {
 } from '../types';
 import { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 import { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';
+import { _formatString } from '@internal/acs-ui-common';
 
 /**
  * Styles for the {@link ParticipantList} {@link ParticipantItem}.
@@ -44,6 +47,19 @@ export interface ParticipantListStyles extends BaseCustomStyles {
   participantItemStyles?: ParticipantListItemStyles;
 }
 
+/* @conditional-compile-remove(total-participant-count) */
+/**
+ * Strings for the {@link ParticipantList}.
+ *
+ * @beta
+ */
+export interface ParticipantListStrings {
+  /**
+   * String for rendering the count of participants not contained in the displayed participant list
+   */
+  overflowParticipantCount?: string;
+}
+
 /**
  * A callback for providing custom menu items for each participant in {@link ParticipantList}.
  *
@@ -85,6 +101,12 @@ export type ParticipantListProps = {
   styles?: ParticipantListStyles;
   /** Optional value to determine if the tooltip should be shown for participants or not */
   showParticipantOverflowTooltip?: boolean;
+  /* @conditional-compile-remove(total-participant-count) */
+  /** Total number of people in the call. This number can be larger than the remote participant count. */
+  totalParticipantCount?: number;
+  /* @conditional-compile-remove(total-participant-count) */
+  /** Strings for the participant list */
+  strings?: ParticipantListStrings;
   /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
   participantAriaLabelledBy?: string;
 };
@@ -190,11 +212,17 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
     onRenderParticipant,
     onFetchParticipantMenuItems,
     showParticipantOverflowTooltip,
+    /* @conditional-compile-remove(total-participant-count) */
+    totalParticipantCount,
+    /* @conditional-compile-remove(total-participant-count) */
+    strings,
     participantAriaLabelledBy
   } = props;
 
   const ids = useIdentifiers();
-  const strings = useLocale().strings.participantItem;
+  const participantItemStrings = useLocale().strings.participantItem;
+  /* @conditional-compile-remove(total-participant-count) */
+  const participantListStrings = useLocale().strings.ParticipantList;
 
   const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {
     return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
@@ -209,7 +237,7 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
       if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {
         menuItems.push({
           key: 'remove',
-          text: strings.removeButtonLabel,
+          text: participantItemStrings.removeButtonLabel,
           onClick: () => onRemoveParticipant(participant.userId),
           itemProps: {
             styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles
@@ -230,22 +258,27 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
       onFetchParticipantMenuItems,
       onRemoveParticipant,
       props.styles?.participantItemStyles?.participantSubMenuItemsStyles,
-      strings.removeButtonLabel
+      participantItemStrings.removeButtonLabel
     ]
   );
 
   const participantItemStyles = useMemo(
     () => merge(participantListItemStyle, props.styles?.participantItemStyles),
     [props.styles?.participantItemStyles]
   );
+
+  /* @conditional-compile-remove(total-participant-count) */
+  const overflowParticipantCountString =
+    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;
+
   return (
     <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>
       {displayedParticipants.map((participant: ParticipantListParticipant) =>
         onRenderParticipant
           ? onRenderParticipant(participant)
           : onRenderParticipantDefault(
               participant,
-              strings,
+              participantItemStrings,
               myUserId,
               onRenderAvatar,
               createParticipantMenuItems,
@@ -255,6 +288,17 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
               participantAriaLabelledBy
             )
       )}
+      {
+        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
+          totalParticipantCount &&
+          totalParticipantCount > displayedParticipants.length && (
+            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>
+              {_formatString(overflowParticipantCountString, {
+                overflowCount: `${totalParticipantCount - displayedParticipants.length}`
+              })}
+            </Text>
+          )
+      }
     </Stack>
   );
 };
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
@@ -59,6 +59,9 @@ export type {
   ParticipantMenuItemsCallback
 } from './ParticipantList';
 
+/* @conditional-compile-remove(total-participant-count) */
+export type { ParticipantListStrings } from './ParticipantList';
+
 export { Announcer } from './Announcer';
 export type { AnnouncerProps } from './Announcer';
 

diff --git a/packages/react-components/src/localization/LocalizationProvider.tsx b/packages/react-components/src/localization/LocalizationProvider.tsx
@@ -39,6 +39,8 @@ import { UnsupportedBrowserVersionStrings } from '../components/UnsupportedBrows
 import { UnsupportedOperatingSystemStrings } from '../components/UnsupportedOperatingSystem';
 /* @conditional-compile-remove(vertical-gallery) */
 import { VerticalGalleryStrings } from '../components/VerticalGallery';
+/* @conditional-compile-remove(total-participant-count) */
+import { ParticipantListStrings } from '../components/ParticipantList';
 /* @conditional-compile-remove(mention) */
 import { MentionPopoverStrings } from '../components/MentionPopover';
 
@@ -159,6 +161,9 @@ export interface ComponentStrings {
    * Strings for the VerticalGallery.
    */
   VerticalGallery: VerticalGalleryStrings;
+  /* @conditional-compile-remove(total-participant-count) */
+  /** Strings for the participant list component */
+  ParticipantList: ParticipantListStrings;
 }
 
 /**

diff --git a/packages/react-components/src/localization/locales/ar-SA/strings.json b/packages/react-components/src/localization/locales/ar-SA/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "الصفحة السابقة",
     "rightNavButtonAriaLabel": "الصفحة التالية"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/cs-CZ/strings.json b/packages/react-components/src/localization/locales/cs-CZ/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "předchozí stránka",
     "rightNavButtonAriaLabel": "další stránka"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/de-DE/strings.json b/packages/react-components/src/localization/locales/de-DE/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "Vorherige Seite",
     "rightNavButtonAriaLabel": "Nächste Seite"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/en-GB/strings.json b/packages/react-components/src/localization/locales/en-GB/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "previous page",
     "rightNavButtonAriaLabel": "next page"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/en-US/strings.json b/packages/react-components/src/localization/locales/en-US/strings.json
@@ -9,6 +9,9 @@
     "participantStateRinging": "Calling...",
     "participantStateHold": "On hold"
   },
+  "ParticipantList": {
+    "overflowParticipantCount": "+{overflowCount} more"
+  },
   "typingIndicator": {
     "singleUser": "{user} is typing ...",
     "multipleUsers": "{users} are typing ...",

diff --git a/packages/react-components/src/localization/locales/es-ES/strings.json b/packages/react-components/src/localization/locales/es-ES/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "página anterior",
     "rightNavButtonAriaLabel": "página siguiente"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/fi-FI/strings.json b/packages/react-components/src/localization/locales/fi-FI/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "edellinen sivu",
     "rightNavButtonAriaLabel": "seuraava sivu"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/fr-FR/strings.json b/packages/react-components/src/localization/locales/fr-FR/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "page précédente",
     "rightNavButtonAriaLabel": "page suivante"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/he-IL/strings.json b/packages/react-components/src/localization/locales/he-IL/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "הדף הקודם",
     "rightNavButtonAriaLabel": "הדף הבא"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/it-IT/strings.json b/packages/react-components/src/localization/locales/it-IT/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "Pagina precedente",
     "rightNavButtonAriaLabel": "Pagina successiva"
   }
-}
+}
diff --git a/packages/react-components/src/localization/locales/ja-JP/strings.json b/packages/react-components/src/localization/locales/ja-JP/strings.json
@@ -328,4 +328,4 @@
     "leftNavButtonAriaLabel": "前のページ",
     "rightNavButtonAriaLabel": "次のページ"
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -328,4 +328,4 @@ @@
         "leftNavButtonAriaLabel": "الصفحة السابقة",
         "rightNavButtonAriaLabel": "الصفحة التالية"
       }
-    }
+    }