@100mslive/roomkit-react 0.1.7 → 0.1.8

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
-import { HMSPeer } from '@100mslive/react-sdk';
+import { HMSPeer, selectIsLargeRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
+import { ChevronRightIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
-import { Box, Flex } from '../../../Layout';
+import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 // @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
@@ -11,18 +12,19 @@ import { RoleOptions } from './RoleOptions';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
-const ROW_HEIGHT = 50;
+export const ROW_HEIGHT = 50;
+const ITER_TIMER = 5000;
 
-interface ItemData {
+export interface ItemData {
   peerList: HMSPeer[];
   isConnected: boolean;
 }
 
-function itemKey(index: number, data: ItemData) {
+export function itemKey(index: number, data: ItemData) {
   return data.peerList[index].id;
 }
 
-const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
+export const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
   return <Participant key={data.peerList[index].id} peer={data.peerList[index]} isConnected={data.isConnected} />;
 });
 
@@ -32,63 +34,103 @@ export const RoleAccordion = ({
   isConnected,
   filter,
   isHandRaisedAccordion = false,
+  offStageRoles,
+  onActive,
 }: ItemData & {
   roleName: string;
   isHandRaisedAccordion?: boolean;
   filter?: { search: string };
+  offStageRoles: string[];
+  onActive?: (role: string) => void;
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
+  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
+  const isOffStageRole = roleName && offStageRoles.includes(roleName);
 
-  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) {
+  useEffect(() => {
+    if (!isOffStageRole || !isLargeRoom) {
+      return;
+    }
+    loadPeers();
+    const interval = setInterval(() => {
+      loadPeers();
+    }, ITER_TIMER);
+    return () => clearInterval(interval);
+  }, [isOffStageRole, isLargeRoom]); //eslint-disable-line
+
+  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
+    return null;
+  }
+
+  const height = ROW_HEIGHT * (peers.length || peerList.length);
+  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const hasNext = total > peersInAccordion.length;
+
+  if (peersInAccordion.length === 0) {
     return null;
   }
-  const height = ROW_HEIGHT * peerList.length;
 
   return (
-    <Flex direction="column" css={{ '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
-      <Accordion.Root
-        type="single"
-        collapsible
-        defaultValue={roleName}
-        css={{ borderRadius: '$1', border: '1px solid $border_bright' }}
+    <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
+      <Accordion.Header
+        iconStyles={{ c: '$on_surface_high' }}
+        css={{
+          textTransform: 'capitalize',
+          p: '$6 $8',
+          fontSize: '$sm',
+          fontWeight: '$semiBold',
+          c: '$on_surface_medium',
+          borderRadius: '$1',
+          border: '1px solid $border_default',
+          '&[data-state="open"]': {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        }}
       >
-        <Accordion.Item value={roleName}>
-          <Accordion.Header
-            iconStyles={{ c: '$on_surface_high' }}
+        <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
+          <Text
+            variant="sm"
+            css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
+          >
+            {roleName} {`(${getFormattedCount(isLargeRoom && isOffStageRole ? total : peerList.length)})`}
+          </Text>
+          <RoleOptions roleName={roleName} peerList={peersInAccordion} />
+        </Flex>
+      </Accordion.Header>
+      <Accordion.Content contentStyles={{ border: '1px solid $border_default', borderTop: 'none' }}>
+        <FixedSizeList
+          itemSize={ROW_HEIGHT}
+          itemData={{ peerList: peersInAccordion, isConnected }}
+          itemKey={itemKey}
+          itemCount={peersInAccordion.length}
+          width={width}
+          height={height}
+        >
+          {VirtualizedParticipantItem}
+        </FixedSizeList>
+        {offStageRoles?.includes(roleName) && hasNext ? (
+          <Flex
+            align="center"
+            justify="end"
             css={{
-              textTransform: 'capitalize',
-              p: '$6 $8',
-              fontSize: '$sm',
-              fontWeight: '$semiBold',
-              c: '$on_surface_medium',
+              gap: '$1',
+              cursor: 'pointer',
+              color: '$on_surface_high',
+              p: '$6',
+              borderTop: '1px solid $border_default',
             }}
+            onClick={() => onActive?.(roleName)}
           >
-            <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
-              <Text
-                variant="sm"
-                css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
-              >
-                {roleName} {`(${getFormattedCount(peerList.length)})`}
-              </Text>
-              <RoleOptions roleName={roleName} peerList={peerList} />
-            </Flex>
-          </Accordion.Header>
-          <Accordion.Content>
-            <Box css={{ borderTop: '1px solid $border_default' }} />
-            <FixedSizeList
-              itemSize={ROW_HEIGHT}
-              itemData={{ peerList, isConnected }}
-              itemKey={itemKey}
-              itemCount={peerList.length}
-              width={width}
-              height={height}
-            >
-              {VirtualizedParticipantItem}
-            </FixedSizeList>
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    </Flex>
+            <Text variant="sm" css={{ color: 'inherit' }}>
+              View All
+            </Text>
+            <ChevronRightIcon />
+          </Flex>
+        ) : null}
+      </Accordion.Content>
+    </Accordion.Item>
   );
 };

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

@@ -46,7 +46,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   const canRemoveRoleFromRoom =
     permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
 
-  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
     return null;
   }
 

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';
@@ -135,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
@@ -145,16 +148,16 @@ export const DesktopLeaveRoom = ({
               isModal
             />
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
 
       <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Overlay />
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.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/HeadlessEndRoomListener.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+// @ts-ignore
+import { useIsNotificationDisabled } from '../AppData/useUISettings';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
+
+export function HeadlessEndRoomListener() {
+  const notification = useHMSNotifications();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  useEffect(() => {
+    if (!notification || !isNotificationDisabled) {
+      return;
+    }
+    if ([HMSNotificationTypes.ROOM_ENDED, HMSNotificationTypes.REMOVED_FROM_ROOM].includes(notification.type)) {
+      redirectToLeave(1000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notification]);
+
+  return <></>;
+}

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

@@ -104,7 +104,7 @@ export function Notifications() {
               close: false,
             });
           }
-          // goto leave for terminal if any action is not performed within 2secs
+          // goto leave for terminal if any action is not performed within 1s
           // if network is still unavailable going to preview will throw an error
           redirectToLeave(1000);
           return;

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/PrebuiltTileElements.tsx

@@ -0,0 +1,5 @@
+import { styled } from '../../Theme';
+import { StyledVideoTile } from '../../VideoTile';
+
+export const PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: '$12', width: '$12' });
+export const PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: '$12', width: '$12' });

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

@@ -11,9 +11,12 @@ import {
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming,
+  // @ts-ignore: No implicit Any
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 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';
@@ -28,11 +31,10 @@ import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
 // @ts-ignore: No implicit Any
 import { Logo } from '../Header/HeaderComponents';
+import { PrebuiltAudioIndicator } from '../PrebuiltTileElements';
 // @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';
@@ -233,7 +235,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
-              <Avatar name={name} data-testid="preview_avatar_tile" />
+              <Avatar name={name} data-testid="preview_avatar_tile" size="medium" />
             </StyledVideoTile.AvatarContainer>
           ) : null}
         </>
@@ -242,11 +244,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : null}
 
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
+        <PrebuiltAudioIndicator>
+          <MicOffIcon height={16} width={16} />
+        </PrebuiltAudioIndicator>
       ) : (
-        <AudioLevel trackId={localPeer?.audioTrack} />
+        <PrebuiltAudioIndicator>
+          <AudioLevel trackId={localPeer?.audioTrack} />
+        </PrebuiltAudioIndicator>
       )}
     </StyledVideoTile.Container>
   );

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>
   );
 };

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
 import { Sheet } from '../../../Sheet';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 
 export const RequestPrompt = ({
   open = true,
@@ -34,7 +35,7 @@ export const RequestPrompt = ({
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ p: '$10' }}>
           <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
@@ -43,7 +44,7 @@ export const RequestPrompt = ({
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
           <RequestActions actionText={actionText} onAction={onAction} />
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -9,6 +9,7 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -186,7 +187,7 @@ const DesktopSettingModal = ({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -256,7 +257,7 @@ const DesktopSettingModal = ({
             </IconButton>
           </Dialog.Close>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
@@ -21,7 +22,7 @@ const StartRecording = ({ open, onOpenChange }) => {
   if (isBrowserRecordingOn) {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Content
             css={{
               width: 'min(400px,80%)',
@@ -66,7 +67,7 @@ const StartRecording = ({ open, onOpenChange }) => {
               </Button>
             </Flex>
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
     );
   }