From aef5016451196ed93de84182764e9e5d66e6df8d Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Sun, 24 Sep 2023 22:03:36 +0530
Subject: [PATCH] fix: conditions for showing more actions

---
 .../components/Footer/ParticipantList.jsx     | 19 ++++++++++++++-----
 .../components/Footer/RoleAccordion.tsx       |  2 +-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
index f45557a0eb..311533f296 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx
@@ -181,7 +181,10 @@ export const Participant = ({ peer, isConnected }) => {
 const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
-  const shouldShowMoreActions = canChangeRole;
+  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_exp } = elements || {};
+  const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
 
   return (
@@ -212,15 +215,21 @@ const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
         </Flex>
       ) : null}
 
-      {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+      {shouldShowMoreActions && !isLocal ? (
+        <ParticipantMoreActions
+          peerId={peerId}
+          role={role}
+          elements={elements}
+          canChangeRole={canChangeRole}
+          canRemoveOthers={canRemoveOthers}
+        />
+      ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
   const hmsActions = useHMSActions();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
index cbd643b4df..9368fbf3da 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
@@ -116,7 +116,7 @@ export const RoleAccordion = ({
                 icon={<AddCircleIcon />}
                 content="Load More"
                 onClick={loadNext}
-                backgroundColor="$secodary_default"
+                backgroundColor="$secondary_default"
                 css={{
                   w: 'max-content',
                   borderRadius: '$size$9',