@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.1

package/src/Prebuilt/components/Chat/{ChatFooter.jsx → ChatFooter.tsx}

@@ -1,13 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../../';
+import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../..';
+// @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // import { ChatSelectorContainer } from './ChatSelectorContainer';
+// @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
+// @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 
 const TextArea = styled('textarea', {
@@ -28,7 +32,7 @@ const TextArea = styled('textarea', {
   },
 });
 
-function EmojiPicker({ onSelect }) {
+function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   const [showEmoji, setShowEmoji] = useState(false);
   const ref = useEmojiPickerStyles(showEmoji);
   return (
@@ -62,14 +66,26 @@ function EmojiPicker({ onSelect }) {
   );
 }
 
-export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selection, screenType */ }) => {
+export const ChatFooter = ({
+  role,
+  peerId,
+  onSend,
+  children /* onSelect, selection, screenType */,
+}: {
+  role: any;
+  peerId: string;
+  onSend: any;
+  children: ReactNode;
+}) => {
   const hmsActions = useHMSActions();
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isOverlayChat = elements?.chat?.is_overlay;
 
   const sendMessage = useCallback(async () => {
-    const message = inputRef.current.value;
+    const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
       return;
     }
@@ -86,7 +102,8 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         onSend();
       }, 0);
     } catch (error) {
-      ToastManager.addToast({ title: error.message });
+      const err = error as Error;
+      ToastManager.addToast({ title: err.message });
     }
   }, [role, peerId, hmsActions, onSend]);
 
@@ -113,7 +130,7 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         <Flex
           align="center"
           css={{
-            bg: isMobile ? '$surface_dim' : '$surface_default',
+            bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
             minHeight: '$16',
             maxHeight: '$24',
             position: 'relative',
@@ -130,9 +147,15 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         >
           {children}
           <TextArea
+            css={{
+              c: '$on_surface_high',
+              '&:valid ~ .send-msg': { color: '$on_surface_high' },
+              '& ~ .send-msg': { color: '$on_surface_low' },
+            }}
             placeholder="Send a message...."
             ref={inputRef}
-            autoFocus
+            required
+            autoFocus={!isMobile}
             onKeyPress={async event => {
               if (event.key === 'Enter') {
                 if (!event.shiftKey) {
@@ -149,19 +172,21 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
           />
           {!isMobile ? (
             <EmojiPicker
-              onSelect={emoji => {
-                inputRef.current.value += ` ${emoji.native} `;
+              onSelect={(emoji: any) => {
+                if (inputRef.current) {
+                  inputRef.current.value += ` ${emoji.native} `;
+                }
               }}
             />
           ) : null}
           <BaseIconButton
+            className="send-msg"
             onClick={sendMessage}
             css={{
               ml: 'auto',
               height: 'max-content',
               mr: '$4',
-              color: '$on_surface_low',
-              '&:hover': { c: '$on_surface_high' },
+              '&:hover': { c: isMobile ? '' : '$on_surface_medium' },
             }}
             data-testid="send_msg_btn"
           >

package/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
-import { Flex, IconButton, Tabs } from '../../..';
+import { Flex, IconButton, Tabs, Text } from '../../..';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSidepaneToggle } from '../AppData/useSidepane';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -19,6 +20,10 @@ export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OP
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const [activeTab, setActiveTab] = useState(activeTabValue);
   const peerCount = useHMSStore(selectPeerCount);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const showChat = !!elements?.chat;
+  const showParticipants = !!elements?.participant_list;
+  const hideTabs = !(showChat && showParticipants);
 
   return (
     <Flex
@@ -28,32 +33,38 @@ export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OP
         h: '$16',
       }}
     >
-      <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
-        <Tabs.Root value={activeTab} onValueChange={setActiveTab} css={{ w: '100%' }}>
-          <Tabs.List css={{ w: '100%', p: '$2' }}>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.CHAT}
-              onClick={toggleChat}
-              css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-              }}
-            >
-              Chat
-            </Tabs.Trigger>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-              onClick={toggleParticipants}
-              css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
-              }}
-            >
-              Participants ({peerCount})
-            </Tabs.Trigger>
-          </Tabs.List>
-        </Tabs.Root>
-      </Flex>
+      {hideTabs ? (
+        <Text variant="sm" css={{ fontWeight: '$semiBold', c: '$on_surface_high' }}>
+          {showChat ? 'Chat' : `Participants (${peerCount})`}
+        </Text>
+      ) : (
+        <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
+          <Tabs.Root value={activeTab} onValueChange={setActiveTab} css={{ w: '100%' }}>
+            <Tabs.List css={{ w: '100%', p: '$2' }}>
+              <Tabs.Trigger
+                value={SIDE_PANE_OPTIONS.CHAT}
+                onClick={toggleChat}
+                css={{
+                  ...tabTriggerCSS,
+                  color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+                }}
+              >
+                Chat
+              </Tabs.Trigger>
+              <Tabs.Trigger
+                value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+                onClick={toggleParticipants}
+                css={{
+                  ...tabTriggerCSS,
+                  color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                }}
+              >
+                Participants ({peerCount})
+              </Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+        </Flex>
+      )}
       <IconButton
         css={{ ml: 'auto' }}
         onClick={e => {

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -9,16 +9,17 @@ export const useEmojiPickerStyles = showing => {
         const style = document.createElement('style');
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-on_primary_high);
+            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
             --em-rgb-input: var(--hms-ui-colors-on_primary_high);
-            --em-color-border: var(--hms-ui-colors-surface_default);
-            --color-b: var(--hms-ui-colors-on_primary_high);
+            --em-color-border: var(--hms-ui-colors-surface_bright);
+            --color-b: var(--hms-ui-colors-on_surface_high);
             --rgb-background: transparent;
-            color: var(--hms-ui-colors-on_primary_high);
+            color: var(--hms-ui-colors-on_surface_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
             background-color: var(--hms-ui-colors-surface_bright);
+            margin-top: 0.5rem;
           }
         `;
         root?.appendChild(style);

package/src/Prebuilt/components/Connection/{ConnectionIndicator.jsx → ConnectionIndicator.tsx}

@@ -1,7 +1,8 @@
 import React from 'react';
 import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { PoorConnectivityIcon } from '@100mslive/react-icons';
-import { styled, Tooltip, useTheme } from '../../../';
+import { styled, Tooltip, useTheme } from '../../..';
+// @ts-ignore
 import { getColor, getTooltipText } from './connectionQualityUtils';
 
 const Wrapper = styled('span', {
@@ -10,7 +11,6 @@ const Wrapper = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '$background_dim',
   borderRadius: '$round',
   variants: {
     isTile: {
@@ -22,7 +22,15 @@ const Wrapper = styled('span', {
   },
 });
 
-export const ConnectionIndicator = ({ peerId, isTile = false }) => {
+export const ConnectionIndicator = ({
+  peerId,
+  isTile = false,
+  hideBg = false,
+}: {
+  peerId: string;
+  isTile?: boolean;
+  hideBg?: boolean;
+}) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
   const defaultColor = theme.colors.surface_brighter;
@@ -41,7 +49,7 @@ export const ConnectionIndicator = ({ peerId, isTile = false }) => {
   const size = isTile ? 12 : 16;
   return (
     <Tooltip title={getTooltipText(downlinkQuality)}>
-      <Wrapper isTile={isTile} data-testid="tile_network">
+      <Wrapper isTile={isTile} data-testid="tile_network" css={{ backgroundColor: hideBg ? '' : '$surface_bright' }}>
         <svg
           width={size}
           height={size}

package/src/Prebuilt/components/Connection/{TileConnection.jsx → TileConnection.tsx}

@@ -1,9 +1,23 @@
 import React from 'react';
 import { PinIcon, SpotlightIcon } from '@100mslive/react-icons';
-import { Flex, styled, Text, textEllipsis } from '../../../';
+import { Flex, styled, Text, textEllipsis } from '../../..';
 import { ConnectionIndicator } from './ConnectionIndicator';
 
-const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned }) => {
+const TileConnection = ({
+  name,
+  peerId,
+  hideLabel,
+  width,
+  spotlighted,
+  pinned,
+}: {
+  name: string;
+  peerId: string;
+  hideLabel: boolean;
+  width?: number;
+  spotlighted?: boolean;
+  pinned?: boolean;
+}) => {
   return (
     <Wrapper>
       {!hideLabel ? (
@@ -11,26 +25,26 @@ const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned })
           <Flex align="center">
             {pinned && (
               <IconWrapper>
-                <PinIcon width="15" height="15" css={{ display: 'block' }} />
+                <PinIcon width="15" height="15" />
               </IconWrapper>
             )}
             {spotlighted && (
               <IconWrapper>
-                <SpotlightIcon width="15" height="15" css={{ display: 'block' }} />
+                <SpotlightIcon width="15" height="15" />
               </IconWrapper>
             )}
             <Text
               css={{
                 c: '$on_surface_high',
                 verticalAlign: 'baseline',
-                ...textEllipsis(width - 60),
+                ...(width ? textEllipsis(width - 60) : {}),
               }}
               variant="xs"
             >
               {name}
             </Text>
           </Flex>
-          <ConnectionIndicator isTile peerId={peerId} />
+          <ConnectionIndicator isTile peerId={peerId} hideBg />
         </>
       ) : null}
     </Wrapper>

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -34,13 +34,8 @@ export const EmojiReaction = () => {
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
 
-  const onEmojiEvent = useCallback(data => {
-    window.showFlyingEmoji(data?.emojiId, data?.senderId);
-  }, []);
-
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
-    onEvent: onEmojiEvent,
   });
 
   const sendReaction = async emojiId => {
@@ -51,6 +46,7 @@ export const EmojiReaction = () => {
     };
     // TODO: RT find a way to figure out hls-viewer roles
     sendEvent(data, { roleNames: roles });
+    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });
     /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([

package/src/Prebuilt/components/Footer/{ChatToggle.jsx → ChatToggle.tsx}

@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
 import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../../';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ openByDefault }: { openByDefault: boolean }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
+  useEffect(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleChat, openByDefault]);
+
   return (
     <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
       <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -22,6 +24,8 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
+// @ts-ignore: No implicit Any
+const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 export const Footer = ({
   screenType,
@@ -31,6 +35,9 @@ export const Footer = ({
   elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isOverlayChat = !!elements?.chat?.is_overlay;
+  const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   return (
     <AppFooter.Root
@@ -40,7 +47,8 @@ export const Footer = ({
           justifyContent: 'center',
           gap: '$10',
           position: 'relative',
-          zIndex: 20,
+          // To prevent it from showing over the sidepane if chat type is not overlay
+          zIndex: isOverlayChat ? 20 : 1,
         },
       }}
     >
@@ -55,6 +63,7 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
+        {isMobile ? null : <Suspense fallback={<></>}>{isVideoOn ? <VirtualBackground /> : null}</Suspense>}
       </AppFooter.Left>
       <AppFooter.Center
         css={{
@@ -67,21 +76,21 @@ export const Footer = ({
         {isMobile ? (
           <>
             {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
-            {elements?.chat && <ChatToggle />}
+            {elements?.chat && <ChatToggle openByDefault={openByDefault} />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>
         ) : (
           <>
             <ScreenshareToggle />
-            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            <RaiseHand />
             {elements?.emoji_reactions && <EmojiReaction />}
             <LeaveRoom screenType={screenType} />
           </>
         )}
       </AppFooter.Center>
       <AppFooter.Right>
-        {elements?.chat && <ChatToggle />}
-        <ParticipantCount />
+        {!isMobile && elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+        {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />
       </AppFooter.Right>
     </AppFooter.Root>

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -21,12 +21,11 @@ import {
 } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
-import { RoleChangeModal } from '../RoleChangeModal';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
 import { isInternalRole } from '../../common/utils';
@@ -46,7 +45,6 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
-  const [selectedPeerId, setSelectedPeerId] = useState(null);
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -75,16 +73,7 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
-          setSelectedPeerId={setSelectedPeerId}
         />
-        {selectedPeerId && (
-          <RoleChangeModal
-            peerId={selectedPeerId}
-            onOpenChange={value => {
-              !value && setSelectedPeerId(null);
-            }}
-          />
-        )}
       </Flex>
     </Fragment>
   );
@@ -126,13 +115,7 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({
-  peersOrderedByRoles = {},
-  isConnected,
-  setSelectedPeerId,
-  filter,
-  handRaisedList = [],
-}) => {
+const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
   return (
     <Flex
       direction="column"
@@ -149,7 +132,6 @@ const VirtualizedParticipants = ({
         roleName="Hand Raised"
         filter={filter}
         isConnected={isConnected}
-        setSelectedPeerId={setSelectedPeerId}
         isHandRaisedAccordion
       />
       {Object.keys(peersOrderedByRoles).map(role => (
@@ -158,7 +140,6 @@ const VirtualizedParticipants = ({
           peerList={peersOrderedByRoles[role]}
           roleName={role}
           isConnected={isConnected}
-          setSelectedPeerId={setSelectedPeerId}
           filter={filter}
         />
       ))}
@@ -166,7 +147,7 @@ const VirtualizedParticipants = ({
   );
 };
 
-export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
+export const Participant = ({ peer, isConnected }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   return (
     <Flex
@@ -186,14 +167,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
-        <ParticipantActions
-          peerId={peer.id}
-          isLocal={peer.id === localPeerId}
-          role={peer.roleName}
-          onSettings={() => {
-            setSelectedPeerId(peer.id);
-          }}
-        />
+        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
       ) : null}
     </Flex>
   );
@@ -202,7 +176,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
 /**
  * shows settings to change for a participant like changing their role
  */
-const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => {
+const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
   const shouldShowMoreActions = canChangeRole;
@@ -214,7 +188,6 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       css={{
         flexShrink: 0,
         gap: '$8',
-        mt: '$2',
       }}
     >
       <ConnectionIndicator peerId={peerId} />
@@ -238,24 +211,26 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       ) : null}
 
       {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? (
-        <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />
+        <ParticipantMoreActions peerId={peerId} role={role} />
       ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role }) => {
   const hmsActions = useHMSActions();
   const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const layout = useRoomLayout();
+  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = [],
-  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
-  const canBringToStage = off_stage_roles.includes(role);
+  } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
+  const shouldShowStageRoleChange =
+    canChangeRole &&
+    ((isInStage && remove_from_stage_label) || (off_stage_roles?.includes(role) && bring_to_stage_label));
   const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
   const localPeerId = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerId === peerId;
@@ -263,7 +238,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
 
   const handleStageAction = async () => {
     if (isInStage) {
-      hmsActions.changeRoleOfPeer(peerId, prevRole || off_stage_roles[0]);
+      prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
     } else {
       await hmsActions.changeRoleOfPeer(peerId, on_stage_role);
     }
@@ -296,21 +271,14 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
       </Dropdown.Trigger>
       <Dropdown.Portal>
         <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
-          {canChangeRole && canBringToStage ? (
+          {shouldShowStageRoleChange ? (
             <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
               <ChangeRoleIcon />
               <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
                 {isInStage ? remove_from_stage_label : bring_to_stage_label}
               </Text>
             </Dropdown.Item>
-          ) : (
-            <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => onRoleChange(peerId)}>
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
-                Change Role
-              </Text>
-            </Dropdown.Item>
-          )}
+          ) : null}
 
           {!isLocal && canRemoveOthers && (
             <Dropdown.Item