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

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

@@ -1,30 +1,30 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
-import { HMSPeer, HMSPeerListIterator, useHMSActions } from '@100mslive/react-sdk';
-import { AddCircleIcon } from '@100mslive/react-icons';
+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';
-import Chip from '../Chip';
 // @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 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) {
-  return data.peerList[index].id;
+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} />;
 });
 
@@ -34,101 +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 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);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
+  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
+  const isOffStageRole = roleName && offStageRoles.includes(roleName);
 
-  const loadNext = useCallback(() => {
-    if (!roleName || roleName === 'Hand Raised') {
+  useEffect(() => {
+    if (!isOffStageRole || !isLargeRoom) {
       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]);
+    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 * peerList.length;
+  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const height = ROW_HEIGHT * peersInAccordion.length;
+  const hasNext = total > peersInAccordion.length;
+
+  if (peersInAccordion.length === 0) {
+    return null;
+  }
 
   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>
-            {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>
-    </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/Header/StreamActions.tsx

@@ -17,6 +17,7 @@ import { Sheet } from '../../../Sheet';
 import { ToastManager } from '../Toast/ToastManager';
 // @ts-ignore
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 // @ts-ignore
@@ -29,13 +30,14 @@ export const LiveStatus = () => {
   const hlsState = useHMSStore(selectHLSState);
   const isMobile = useMedia(cssConfig.media.md);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
+  const { screenType } = useRoomLayoutConferencingScreen();
   const [liveTime, setLiveTime] = useState(0);
 
   const startTimer = useCallback(() => {
     intervalRef.current = setInterval(() => {
-      if (hlsState?.running && hlsState?.variants[0]?.startedAt) {
-        setLiveTime(Date.now() - hlsState.variants[0].startedAt.getTime());
+      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];
+      if (hlsState?.running && timeStamp) {
+        setLiveTime(Date.now() - timeStamp.getTime());
       }
     }, 1000);
   }, [hlsState?.running, hlsState?.variants]);

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

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

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

@@ -18,7 +18,6 @@ import { config as cssConfig } from '../../../Theme';
 import { ToastManager } from '../Toast/ToastManager';
 import { DesktopLeaveRoom } from './DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MwebLeaveRoom';
-import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 
 export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -34,7 +33,6 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   );
   const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
-  const { redirectToLeave } = useRedirectToLeave();
 
   const stopStream = async () => {
     try {
@@ -48,7 +46,6 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   };
   const endRoom = () => {
     hmsActions.endRoom(false, 'End Room');
-    redirectToLeave();
   };
 
   const leaveRoom = async ({ endstream = false }) => {
@@ -56,7 +53,6 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
       await stopStream();
     }
     hmsActions.leave();
-    redirectToLeave();
   };
 
   if (!permissions || !isConnected) {

package/src/Prebuilt/components/{PostLeave.jsx → LeaveScreen.tsx}

@@ -1,21 +1,18 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { ExitIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
-import { useHMSPrebuiltContext } from '../AppContext';
+import { useHMSAppStateContext } from '../AppStateContext';
 import { Header } from './Header';
-import { useRoomLayoutPreviewScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
 import { textEllipsis } from '../../utils';
 
-const PostLeave = () => {
-  const navigate = useNavigate();
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { roomCode } = useHMSPrebuiltContext();
-  const { roomId, role } = useParams();
+export const LeaveScreen = () => {
+  const { rejoin } = useHMSAppStateContext();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return (
     <Flex direction="column" css={{ size: '100%' }}>
@@ -57,9 +54,7 @@ const PostLeave = () => {
           </Text>
           <Button
             onClick={() => {
-              let redirectUrl = `${isPreviewScreenEnabled ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
-              if (role && roomId) redirectUrl += '/' + role;
-              navigate(redirectUrl);
+              rejoin();
               ToastManager.clearAllToast();
             }}
             data-testid="join_again_btn"
@@ -72,5 +67,3 @@ const PostLeave = () => {
     </Flex>
   );
 };
-
-export default PostLeave;

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

@@ -3,7 +3,6 @@ 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';
@@ -59,12 +58,12 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
           <ChangeNameContent {...props} />
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

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

@@ -1,7 +1,6 @@
 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';
 
@@ -31,7 +30,7 @@ export function EmbedUrlModal({ onOpenChange }) {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
           <Dialog.Title
@@ -76,7 +75,7 @@ export function EmbedUrlModal({ onOpenChange }) {
             </Button>
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 }

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -18,6 +18,7 @@ import {
   HandIcon,
   HandRaiseSlashedIcon,
   PeopleIcon,
+  QuizIcon,
   RecordIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
@@ -40,7 +41,9 @@ import { ChangeNameModal } from '../ChangeNameModal';
 // @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
-import { useSidepaneToggle } from '../../AppData/useSidepane';
+import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
@@ -82,6 +85,8 @@ export const MwebOptions = ({
   const [showRecordingOn, setShowRecordingOn] = useState(false);
   const [isRecordingLoading, setIsRecordingLoading] = useState(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const { showPolls } = useShowPolls();
+  const togglePollView = usePollViewToggle();
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
@@ -192,6 +197,18 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
+            {showPolls && (
+              <ActionTile.Root
+                onClick={() => {
+                  togglePollView();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <QuizIcon />
+                <ActionTile.Title>Polls and Quizzes</ActionTile.Title>
+              </ActionTile.Root>
+            )}
+
             {elements?.brb && (
               <ActionTile.Root
                 active={isBRBOn}

package/src/Prebuilt/components/{MwebLandscapePrompt.jsx → MwebLandscapePrompt.tsx}

@@ -4,29 +4,28 @@ 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);
+    const handleRotation = () => {
+      const angle = window.screen.orientation.angle;
+      const type = window.screen.orientation.type;
+      // Angle check needed to diff bw mobile and desktop
+      setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape'));
     };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
+    handleRotation();
+    window.screen.orientation.addEventListener('change', handleRotation);
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.screen.orientation.removeEventListener('change', handleRotation);
     };
   }, []);
 
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
           <Box>
@@ -52,7 +51,7 @@ export const MwebLandscapePrompt = () => {
             </Flex>
           </Box>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Notifications/{AutoplayBlockedModal.jsx → AutoplayBlockedModal.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useAutoplayError } from '@100mslive/react-sdk';
-import { Button, Dialog, Text } from '../../../';
+import { Button, Dialog, Text } from '../../..';
+// @ts-ignore: No implicit Any
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
 
 export function AutoplayBlockedModal() {

package/src/Prebuilt/components/Notifications/{HLSFailureModal.jsx → HLSFailureModal.tsx}

@@ -1,33 +1,35 @@
 import React, { useCallback, useState } from 'react';
-import { selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectHLSState, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Text } from '../../../Text';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
+// @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { APP_DATA } from '../../common/constants';
 
 export function HLSFailureModal() {
-  const { hlsError } = useHMSStore(selectHLSState).error || false;
+  const hlsError = useHMSStore(selectHLSState).error || false;
   const [openModal, setOpenModal] = useState(!!hlsError);
   const hmsActions = useHMSActions();
+  const { isRTMPRunning } = useRecordingStreaming();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback(async () => {
     try {
-      if (isHLSStarted) {
+      if (isHLSStarted || isRTMPRunning) {
         return;
       }
       setHLSStarted(true);
       await hmsActions.startHLSStreaming({});
     } catch (error) {
-      if (error.message.includes('invalid input')) {
+      if ((error as Error).message.includes('invalid input')) {
         await startHLS();
         return;
       }
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSStarted, setHLSStarted]);
+  }, [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);
 
   return hlsError ? (
     <Dialog.Root
@@ -38,7 +40,7 @@ export function HLSFailureModal() {
         }
       }}
     >
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
           <Dialog.Title
@@ -66,7 +68,7 @@ export function HLSFailureModal() {
             </Button>
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/Notifications/{InitErrorModal.jsx → InitErrorModal.tsx}

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Text } from '../../../';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { Text } from '../../..';
+// @ts-ignore: No implicit Any
 import { ErrorDialog } from '../../primitives/DialogContent';
 
-export const InitErrorModal = ({ notification }) => {
+export const InitErrorModal = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
   const [showModal, setShowModal] = useState(false);
   const [info, setInfo] = useState({ title: 'Init Error', description: '' });