@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.8-alpha.0

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

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
-import { HMSPeer } from '@100mslive/react-sdk';
+import { HMSPeer, HMSPeerListIterator, useHMSActions } from '@100mslive/react-sdk';
+import { AddCircleIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+import Chip from '../Chip';
 // @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
@@ -38,11 +40,34 @@ export const RoleAccordion = ({
   filter?: { search: string };
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const actions = useHMSActions();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
+  const [hasNext, setHasNext] = useState(false);
+  const iteratorRef = useRef<HMSPeerListIterator | null>(null);
 
-  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) {
+  const loadNext = useCallback(() => {
+    if (!roleName || roleName === 'Hand Raised') {
+      return;
+    }
+    if (!iteratorRef.current) {
+      iteratorRef.current = actions.getPeerListIterator({ role: roleName });
+    }
+    iteratorRef.current
+      .next()
+      .catch(console.error)
+      .finally(() => {
+        setHasNext(iteratorRef.current ? iteratorRef.current.hasNext() : false);
+      });
+  }, [actions, roleName]);
+
+  useEffect(() => {
+    loadNext();
+  }, [loadNext]);
+
+  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
     return null;
   }
+
   const height = ROW_HEIGHT * peerList.length;
 
   return (
@@ -86,6 +111,21 @@ export const RoleAccordion = ({
             >
               {VirtualizedParticipantItem}
             </FixedSizeList>
+            {hasNext ? (
+              <Chip
+                icon={<AddCircleIcon />}
+                content="Load More"
+                onClick={loadNext}
+                backgroundColor="$secondary_default"
+                css={{
+                  w: 'max-content',
+                  borderRadius: '$size$9',
+                  m: '$2 auto',
+                  p: '$4',
+                  cursor: 'pointer',
+                }}
+              />
+            ) : null}
           </Accordion.Content>
         </Accordion.Item>
       </Accordion.Root>

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -1,11 +1,14 @@
 import React, { Fragment, useState } from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
+// @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Tooltip } from '../../../Tooltip';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { EndSessionContent } from './EndSessionContent';
 import { LeaveIconButton, MenuTriggerButton } from './LeaveAtoms';
 import { LeaveCard } from './LeaveCard';
@@ -29,6 +32,7 @@ export const DesktopLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -38,7 +42,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
+      {showLeaveOptions ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -47,9 +51,7 @@ export const DesktopLeaveRoom = ({
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
             }}
-            onClick={() => {
-              leaveRoom({ endstream: false });
-            }}
+            onClick={() => setShowLeaveRoomAlert(true)}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -74,7 +76,7 @@ export const DesktopLeaveRoom = ({
               <Dropdown.Item
                 css={{
                   bg: '$surface_dim',
-                  color: '$on_surface_low',
+                  color: '$on_surface_medium',
                   '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
                 }}
                 onClick={() => leaveRoom({ endstream: false })}
@@ -92,42 +94,37 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {permissions?.endRoom || permissions?.hlsStreaming ? (
-                <Dropdown.Item
-                  css={{
-                    bg: '$alert_error_dim',
-                    color: '$alert_error_bright',
-                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+
+              <Dropdown.Item
+                css={{
+                  bg: '$alert_error_dim',
+                  color: '$alert_error_bright',
+                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                }}
+                data-testid="end_room_btn"
+              >
+                <LeaveCard
+                  title={showStream ? 'End Stream' : 'End Session'}
+                  subtitle={`The ${
+                    showStream ? 'stream' : 'session'
+                  } will end for everyone. You can't undo this action.`}
+                  bg=""
+                  titleColor="$alert_error_brighter"
+                  icon={<StopIcon height={24} width={24} />}
+                  onClick={() => {
+                    setOpen(false);
+                    setShowEndStreamAlert(true);
                   }}
-                  data-testid="end_room_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'End Stream' : 'End Session'}
-                    subtitle={`The ${
-                      showStream ? 'stream' : 'session'
-                    } will end for everyone. You can't undo this action.`}
-                    bg=""
-                    titleColor="$alert_error_brighter"
-                    icon={<StopIcon height={24} width={24} />}
-                    onClick={() => {
-                      setOpen(false);
-                      setShowEndStreamAlert(true);
-                    }}
-                    css={{ p: 0 }}
-                  />
-                </Dropdown.Item>
-              ) : null}
+                  css={{ p: 0 }}
+                />
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown.Root>
         </Flex>
       ) : (
         <LeaveIconButton
           onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
+            setShowLeaveRoomAlert(true);
           }}
           key="LeaveRoom"
           data-testid="leave_room_btn"
@@ -141,7 +138,7 @@ export const DesktopLeaveRoom = ({
       )}
 
       <Dialog.Root open={showEndStreamAlert} modal={false}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Overlay />
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
@@ -151,19 +148,17 @@ export const DesktopLeaveRoom = ({
               isModal
             />
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
 
-      {screenType === 'hls_live_streaming' ? (
-        <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-          <Dialog.Portal>
-            <Dialog.Overlay />
-            <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-              <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
-            </Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Root>
-      ) : null}
+      <Dialog.Root open={showLeaveRoomAlert} modal={false}>
+        <PrebuiltDialogPortal>
+          <Dialog.Overlay />
+          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
+          </Dialog.Content>
+        </PrebuiltDialogPortal>
+      </Dialog.Root>
     </Fragment>
   );
 };

package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -30,6 +30,7 @@ export const MwebLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open, name: 'LeaveRoom' });
 
@@ -39,7 +40,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' ? (
+      {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -70,36 +71,24 @@ export const MwebLeaveRoom = ({
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
 
-            {permissions?.endRoom || permissions?.hlsStreaming ? (
-              <LeaveCard
-                title={showStream ? 'End Stream' : 'End Session'}
-                subtitle={`The will end the ${
-                  showStream ? 'stream' : 'session'
-                } for everyone. You can't undo this action.`}
-                bg="$alert_error_dim"
-                titleColor="$alert_error_brighter"
-                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
-                icon={<StopIcon height={24} width={24} />}
-                onClick={() => {
-                  setOpen(false);
-                  setShowEndStreamAlert(true);
-                }}
-              />
-            ) : null}
+            <LeaveCard
+              title={showStream ? 'End Stream' : 'End Session'}
+              subtitle={`The will end the ${
+                showStream ? 'stream' : 'session'
+              } for everyone. You can't undo this action.`}
+              bg="$alert_error_dim"
+              titleColor="$alert_error_brighter"
+              css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
+              icon={<StopIcon height={24} width={24} />}
+              onClick={() => {
+                setOpen(false);
+                setShowEndStreamAlert(true);
+              }}
+            />
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton
-          key="LeaveRoom"
-          data-testid="leave_room_btn"
-          onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
-          }}
-        >
+        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -116,13 +105,12 @@ export const MwebLeaveRoom = ({
           />
         </Sheet.Content>
       </Sheet.Root>
-      {screenType === 'hls_live_streaming' ? (
-        <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-          <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
-            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : null}
+
+      <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+          <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
+        </Sheet.Content>
+      </Sheet.Root>
     </Fragment>
   );
 };

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx

@@ -3,6 +3,7 @@ import { useMedia } from 'react-use';
 import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig, Dialog } from '../../../';
 import { Sheet } from '../../../Sheet';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ToastManager } from '../Toast/ToastManager';
 import { ChangeNameContent } from './ChangeNameContent';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
@@ -58,12 +59,12 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
           <ChangeNameContent {...props} />
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { LinkIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Dropdown, Flex, Input, Text } from '../../../';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
@@ -30,7 +31,7 @@ export function EmbedUrlModal({ onOpenChange }) {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
           <Dialog.Title
@@ -75,7 +76,7 @@ export function EmbedUrlModal({ onOpenChange }) {
             </Button>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 }

package/src/Prebuilt/components/MwebLandscapePrompt.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { RefreshIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Text } from '../../Text';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
+import { isAndroid, isIOS } from '../common/constants';
+
+export const MwebLandscapePrompt = () => {
+  const isMobile = isAndroid || isIOS;
+  const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setShowMwebLandscapePrompt(isMobile && window.innerHeight < window.innerWidth);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
+      <PrebuiltDialogPortal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+          <Box>
+            <Flex
+              css={{
+                color: '$primary_default',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <RefreshIcon style={{ marginRight: '0.5rem' }} />
+              <Text variant="lg" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                Please rotate your device
+              </Text>
+            </Flex>
+            <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
+              We do not support landscape mode as of now, please use the app in portrait mode for the best experience.
+            </Text>
+            <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
+              <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setShowMwebLandscapePrompt(false)}>
+                Continue anyway
+              </Button>
+            </Flex>
+          </Box>
+        </Dialog.Content>
+      </PrebuiltDialogPortal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/Notifications/HLSFailureModal.jsx

@@ -4,6 +4,7 @@ import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Text } from '../../../Text';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
@@ -37,7 +38,7 @@ export function HLSFailureModal() {
         }
       }}
     >
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
           <Dialog.Title
@@ -65,7 +66,7 @@ export function HLSFailureModal() {
             </Button>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/Notifications/PermissionErrorModal.jsx

@@ -4,6 +4,7 @@ import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'
 import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
 import androidPermissionAlert from '../../images/android-perm-1.png';
 import iosPermissions from '../../images/ios-perm-0.png';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
@@ -39,7 +40,7 @@ export function PermissionErrorModal() {
 
   return deviceType ? (
     <Dialog.Root open={!!deviceType}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>
           <Dialog.Title
@@ -118,7 +119,7 @@ export function PermissionErrorModal() {
             </Flex>
           ) : null}
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/PrebuiltDialogPortal.tsx

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+import { Dialog } from '../../Modal';
+
+export const PrebuiltDialogPortal = ({ children }: { children: ReactNode }) => (
+  <Dialog.Portal container={document.getElementById('prebuilt-container')}>{children}</Dialog.Portal>
+);

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -14,6 +14,7 @@ import {
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
+import { AudioLevel } from '../../../AudioLevel';
 import { useHMSPrebuiltContext } from '../../AppContext';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
@@ -31,8 +32,6 @@ import { Logo } from '../Header/HeaderComponents';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
 // @ts-ignore: No implicit Any
-import { AudioLevel } from '../VideoTile';
-// @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
@@ -170,7 +169,7 @@ const PreviewJoin = ({
           <PreviewTile name={name} error={previewError} />
         </Flex>
       ) : null}
-      <Box css={{ w: '100%', maxWidth: `${aspectRatio * 360}px` }}>
+      <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
         <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
         <PreviewForm
           name={name}
@@ -230,6 +229,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
             trackId={localPeer.videoTrack}
             data-testid="preview_tile"
           />
+
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={name} data-testid="preview_avatar_tile" />
@@ -239,12 +239,15 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : !error ? (
         <FullPageProgress />
       ) : null}
+
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <StyledVideoTile.AudioIndicator>
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
-        <AudioLevel trackId={localPeer?.audioTrack} />
+        <StyledVideoTile.AudioIndicator size="medium">
+          <AudioLevel trackId={localPeer?.audioTrack} />
+        </StyledVideoTile.AudioIndicator>
       )}
     </StyledVideoTile.Container>
   );
@@ -255,7 +258,7 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
 
   return (
     <Flex
-      justify="between"
+      justify={hideSettings && isMobile ? 'center' : 'between'}
       css={{
         width: '100%',
         mt: '$8',

package/src/Prebuilt/components/RaiseHand.jsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import { selectHasPeerHandRaised, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = () => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
-  const actions = useHMSActions();
-
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton
-        active={!isHandRaised}
-        onClick={() => {
-          isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
-        }}
-      >
+      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -9,6 +9,7 @@ import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { useFilteredRoles } from '../common/hooks';
 import { textEllipsis } from '../../utils';
@@ -47,7 +48,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
   const peerNameMaxWidth = 200;
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
           <Dialog.Title css={{ p: 0 }} asChild>
@@ -179,7 +180,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
             </Box>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };