Fix pinned participant limit to update when pinned participants are removed from call

change-beta/@azure-communication-react-bc0335ce-d6b2-4690-8c96-e886b66c4472.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Fix pinned participant limit to update correctly when pinned participants are removed from call",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bc0335ce-d6b2-4690-8c96-e886b66c4472.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Fix pinned participant limit to update correctly when pinned participants are removed from call",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery.tsx

@@ -441,7 +441,14 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     });
   }, [props.pinnedParticipants, props.remoteParticipants]);
   // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
-  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;
+  const pinnedParticipants = useMemo(
+    () =>
+      props.pinnedParticipants ??
+      pinnedParticipantsState.filter((pinnedParticipantId) =>
+        remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId)
+      ),
+    [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]
+  );
 
   const showLocalVideoTileLabel =
     !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';
@@ -547,12 +554,12 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
         return;
       }
-      if (!pinnedParticipantsState.includes(userId)) {
-        setPinnedParticipantsState(pinnedParticipantsState.concat(userId));
+      if (!pinnedParticipants.includes(userId)) {
+        setPinnedParticipantsState(pinnedParticipants.concat(userId));
       }
       onPinParticipantHandler?.(userId);
     },
-    [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]
+    [pinnedParticipants, setPinnedParticipantsState, onPinParticipantHandler]
   );
   const onUnpinParticipant = useCallback(
     (userId: string) => {

packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx

@@ -8,7 +8,7 @@ import { ActiveErrorMessage, ErrorBar, ParticipantMenuItemsCallback } from '@int
 /* @conditional-compile-remove(notifications) */
 import { ActiveNotification } from '@internal/react-components';
 import { VideoGalleryLayout } from '@internal/react-components';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useState } from 'react';
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { useLocale } from '../../localization';
@@ -34,6 +34,7 @@ import { DtmfDialpadPage } from './DtmfDialpadPage';
 import { showDtmfDialer } from '../utils/MediaGalleryUtils';
 import { getTargetCallees } from '../selectors/baseSelectors';
 import { Prompt, PromptProps } from '../components/Prompt';
+import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
 
 /**
  * @private
@@ -78,7 +79,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
     userSetOverflowGalleryPosition = 'Responsive',
     onSetUserSetOverflowGalleryPosition,
     onCloseChatPane,
-    pinnedParticipants,
+    pinnedParticipants = [],
     setPinnedParticipants,
     compositeAudioContext,
     disableAutoShowDtmfDialer = false
@@ -102,6 +103,16 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
 
   const strings = useLocale().strings.call;
 
+  const pinnedParticipantsChecked = useMemo(
+    () =>
+      pinnedParticipants.filter((pinnedParticipant) =>
+        remoteParticipantsConnected.find(
+          (remoteParticipant) => toFlatCommunicationIdentifier(remoteParticipant.identifier) === pinnedParticipant
+        )
+      ),
+    [pinnedParticipants, remoteParticipantsConnected]
+  );
+
   // Reduce the controls shown when mobile view is enabled.
   const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;
 
@@ -138,7 +149,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
           localVideoTileOptions={options?.localVideoTile}
           userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
           userSetGalleryLayout={galleryLayout}
-          pinnedParticipants={pinnedParticipants}
+          pinnedParticipants={pinnedParticipantsChecked}
           setPinnedParticipants={setPinnedParticipants}
           setIsPromptOpen={setIsPromptOpen}
           setPromptProps={setPromptProps}
@@ -193,7 +204,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
         setIsPromptOpen={setIsPromptOpen}
         setPromptProps={setPromptProps}
         hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}
-        pinnedParticipants={pinnedParticipants}
+        pinnedParticipants={pinnedParticipantsChecked}
         setPinnedParticipants={setPinnedParticipants}
       />
       {<Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />}

packages/storybook/stories/VideoGallery/VideoGallery.stories.tsx

@@ -526,9 +526,9 @@ const VideoGalleryStory = (args): JSX.Element => {
     .split(',')
     .map((p) => p.trim())
     .filter((p) => p)
-    .map((p, i) => {
+    .map((p) => {
       return {
-        userId: `user${i}`,
+        userId: `userId-${p}`,
         displayName: p,
         videoStream: { isAvailable: true }
       };