Update publish-alpha (#2881)

* fix: role change UI (#2877) * fix: design parity * fix: border * fix: handle role change for single role scenario (#2880) --------- Co-authored-by: Kaustubh Kumar <[email protected]>
100mslive · May 7, 2024 · 57edd58 · 57edd58
1 parent d1f3685
commit 57edd58
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx
@@ -4,6 +4,7 @@ import {
   HMSPeer,
   HMSPeerType,
   HMSRoleName,
+  selectAvailableRoleNames,
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
   selectIsLargeRoom,
@@ -372,6 +373,7 @@ const ParticipantMoreActions = ({ peerId, role }: { peerId: string; role: string
   } = usePeerOnStageActions({ peerId, role });
   const canChangeRole = !!useHMSStore(selectPermissions)?.changeRole;
   const [openRoleChangeModal, setOpenRoleChangeModal] = useState(false);
+  const roles = useHMSStore(selectAvailableRoleNames);
 
   return (
     <>
@@ -409,7 +411,7 @@ const ParticipantMoreActions = ({ peerId, role }: { peerId: string; role: string
               </Dropdown.Item>
             ) : null}
 
-            {canChangeRole ? (
+            {canChangeRole && roles.length > 1 ? (
               <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => setOpenRoleChangeModal(true)}>
                 <PersonSettingsIcon />
                 <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>

diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.tsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.tsx
@@ -5,6 +5,7 @@ import {
   HMSSimulcastLayerDefinition,
   HMSTrackID,
   HMSVideoTrack,
+  selectAvailableRoleNames,
   selectPermissions,
   selectSessionStore,
   selectTrackByID,
@@ -247,6 +248,7 @@ export const TileMenuContent = ({
   const canChangeRole = !!permissions?.changeRole;
   const removeOthers = !!permissions?.removeOthers;
   const { userName } = useHMSPrebuiltContext();
+  const roles = useHMSStore(selectAvailableRoleNames);
 
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
     audioTrackID,
@@ -315,7 +317,7 @@ export const TileMenuContent = ({
         </StyledMenuTile.ItemButton>
       ) : null}
 
-      {canChangeRole ? (
+      {canChangeRole && roles.length > 1 ? (
         <StyledMenuTile.ItemButton
           className={dragClassName}
           css={spacingCSS}