[Beta blocking] Fix missing pinned icon when it is the only icon (#4751)

* Fix missing pinned icon when it is the only icon for a remote participant * Change files
Azure · Jun 18, 2024 · 324e0ca · 324e0ca
1 parent e8e57c5
commit 324e0ca
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/change-beta/@azure-communication-react-6d999d69-0527-4c82-96c8-3dd5dded13a2.json b/change-beta/@azure-communication-react-6d999d69-0527-4c82-96c8-3dd5dded13a2.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Fix missing pinned icon when it is the only icon for a remote participant",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-6d999d69-0527-4c82-96c8-3dd5dded13a2.json b/change/@azure-communication-react-6d999d69-0527-4c82-96c8-3dd5dded13a2.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Fix missing pinned icon when it is the only icon for a remote participant",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/ParticipantList.tsx b/packages/react-components/src/components/ParticipantList.tsx
@@ -152,8 +152,10 @@ const onRenderParticipantDefault = (
 
   const callingPalette = (theme as unknown as CallingTheme).callingPalette;
 
+  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);
+
   const onRenderIcon =
-    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand
+    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand || isPinned
       ? () => (
           <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>
             {callingParticipant.raisedHand && (
@@ -189,9 +191,7 @@ const onRenderParticipantDefault = (
             )}
             {callingParticipant.spotlight && <Icon iconName="ParticipantItemSpotlighted" className={iconStyles} />}
 
-            {pinnedParticipants && pinnedParticipants?.includes(participant.userId) && (
-              <Icon iconName="ParticipantItemPinned" className={iconStyles} />
-            )}
+            {isPinned && <Icon iconName="ParticipantItemPinned" className={iconStyles} />}
           </Stack>
         )
       : () => null;