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

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -1,8 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   selectAppData,
   selectAppDataByPath,
   selectAudioTrackByPeerID,
+  selectPermissions,
+  selectPolls,
   selectSessionStore,
   selectTrackByID,
   selectVideoTrackByPeerID,
@@ -11,7 +13,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, SESSION_STORE_KEY } from '../../common/constants';
+import { APP_DATA, POLL_STATE, SESSION_STORE_KEY } from '../../common/constants';
 
 /**
  * fields saved related to UI settings in store's app data can be
@@ -69,8 +71,18 @@ export const useUrlToEmbed = () => {
   return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
 };
 
-export const usePDFAnnotator = () => {
-  return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state;
+export const usePDFConfig = () => {
+  return useHMSStore(selectAppData(APP_DATA.pdfConfig));
+};
+
+export const useResetPDFConfig = () => {
+  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
+  return useCallback(() => setPDFConfig(), [setPDFConfig]);
+};
+
+export const useResetEmbedConfig = () => {
+  const [, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
+  return () => setEmbedConfig();
 };
 export const usePinnedTrack = () => {
   const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
@@ -153,3 +165,35 @@ const useSetAppData = ({ key1, key2 }) => {
   );
   return setValue;
 };
+
+export const useShowPolls = () => {
+  const permissions = useHMSStore(selectPermissions);
+  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+
+  const showPolls = useMemo(() => {
+    return permissions?.pollWrite || (permissions?.pollRead && polls?.length > 0);
+  }, [permissions?.pollRead, permissions?.pollWrite, polls?.length]);
+
+  return { showPolls };
+};
+
+export const usePollViewState = () => {
+  const [pollState, setPollState] = useSetAppDataByKey(APP_DATA.pollState);
+
+  const setPollView = useCallback(
+    view => {
+      setPollState({
+        [POLL_STATE.pollInView]: pollState?.pollInView,
+        [POLL_STATE.view]: view,
+      });
+    },
+    [pollState?.pollInView, setPollState],
+  );
+
+  return {
+    setPollState,
+    setPollView,
+    pollInView: pollState?.pollInView,
+    view: pollState?.view,
+  };
+};

package/src/Prebuilt/components/{conference.jsx → ConferenceScreen.tsx}

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { usePrevious } from 'react-use';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import {
   HMSRoomState,
   selectAppData,
@@ -11,38 +10,40 @@ import {
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
+// @ts-ignore: No implicit Any
 import { ActivatedPIP } from './PIP/PIPComponent';
+// @ts-ignore: No implicit Any
 import { PictureInPicture } from './PIP/PIPManager';
 import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
-const Conference = () => {
-  const navigate = useNavigate();
-  const { roomId, role } = useParams();
+export const ConferenceScreen = () => {
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
-  const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
   const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
-  const headerRef = useRef();
-  const footerRef = useRef();
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const footerRef = useRef<HTMLDivElement | null>(null);
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
-  const dropdownListRef = useRef();
+  const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice) {
@@ -52,12 +53,12 @@ const Conference = () => {
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
 
   useEffect(() => {
-    let timeout = null;
+    let timeout: undefined | ReturnType<typeof setTimeout>;
     dropdownListRef.current = dropdownList || [];
-    if (dropdownListRef.current.length === 0) {
+    if (dropdownListRef.current && dropdownListRef.current.length === 0) {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        if (dropdownListRef.current.length === 0) {
+        if (dropdownListRef.current && dropdownListRef.current.length === 0) {
           setHideControls(isMobileDevice);
         }
       }, 5000);
@@ -67,23 +68,6 @@ const Conference = () => {
     };
   }, [dropdownList, hideControls, isMobileDevice]);
 
-  useEffect(() => {
-    if (!roomId) {
-      navigate(`/`);
-      return;
-    }
-    if (!isPreviewScreenEnabled) {
-      return;
-    }
-    if (
-      !prevState &&
-      !(roomState === HMSRoomState.Connecting || roomState === HMSRoomState.Reconnecting || isConnectedToRoom)
-    ) {
-      if (role) navigate(`/preview/${roomId || ''}/${role}`);
-      else navigate(`/preview/${roomId || ''}`);
-    }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-
   useEffect(() => {
     if (
       authTokenInAppData &&
@@ -94,10 +78,10 @@ const Conference = () => {
     ) {
       hmsActions
         .join({
-          userName,
+          userName: userName || '',
           authToken: authTokenInAppData,
           initEndpoint: endpoints?.init,
-          initialSettings: {
+          settings: {
             isAudioMuted: !isPreviewScreenEnabled,
             isVideoMuted: !isPreviewScreenEnabled,
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
@@ -111,9 +95,9 @@ const Conference = () => {
   useEffect(() => {
     onJoinFunc?.();
     return () => {
-      PictureInPicture.stop().catch(error => console.error('stopping pip', error));
+      PictureInPicture.stop().catch((error: unknown) => console.error('stopping pip', (error as Error).message));
     };
-  }, []);
+  }, [onJoinFunc]);
 
   if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
     return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
@@ -140,7 +124,7 @@ const Conference = () => {
             }}
             data-testid="header"
           >
-            <Header elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Header />
           </Box>
         )}
         <Box
@@ -148,7 +132,10 @@ const Conference = () => {
             w: '100%',
             flex: '1 1 0',
             minHeight: 0,
-            px: screenProps?.elements?.video_tile_layout?.grid?.edge_to_edge ? 0 : '$10', // TODO: padding to be controlled by section/element
+            // @ts-ignore
+            px: (screenProps?.elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid?.edge_to_edge
+              ? 0
+              : '$10', // TODO: padding to be controlled by section/element
             paddingBottom: 'env(safe-area-inset-bottom)',
             '@lg': {
               px: 0,
@@ -158,13 +145,15 @@ const Conference = () => {
           data-testid="conferencing"
           onClick={toggleControls}
         >
-          <VideoStreamingSection
-            screenType={screenProps.screenType}
-            elements={screenProps.elements}
-            hideControls={hideControls}
-          />
+          {screenProps.elements ? (
+            <VideoStreamingSection
+              screenType={screenProps.screenType}
+              elements={screenProps.elements}
+              hideControls={hideControls}
+            />
+          ) : null}
         </Box>
-        {!screenProps.hideSections.includes('footer') && (
+        {!screenProps.hideSections.includes('footer') && screenProps.elements && (
           <Box
             ref={footerRef}
             css={{
@@ -190,5 +179,3 @@ const Conference = () => {
     </>
   );
 };
-
-export default Conference;

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

@@ -24,9 +24,12 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
+import { PollsToggle } from './PollsToggle';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
+import { useShowPolls } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 // @ts-ignore: No implicit Any
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
@@ -46,6 +49,7 @@ export const Footer = ({
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const { showPolls } = useShowPolls();
 
   useEffect(() => {
     if (!isChatOpen && openByDefault) {
@@ -108,6 +112,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
+        {showPolls && <PollsToggle />}
         {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />

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

@@ -1,32 +1,80 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 import { useMeasure } from 'react-use';
-import { FixedSizeList } from 'react-window';
+import { VariableSizeList } from 'react-window';
 import { selectIsConnectedToRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
 import { Loading } from '../../../Loading';
 import { Text } from '../../../Text';
 // @ts-ignore: No implicit Any
-import { ParticipantSearch } from './ParticipantList';
-import { itemKey, ROW_HEIGHT, VirtualizedParticipantItem } from './RoleAccordion';
+import { Participant, ParticipantSearch } from './ParticipantList';
+import { ItemData, itemKey, ROW_HEIGHT } from './RoleAccordion';
 // @ts-ignore: No implicit Any
 import { useSidepaneReset } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
+const LoadMoreParticipants = ({
+  hasNext,
+  loadMore,
+  style,
+}: {
+  hasNext: boolean;
+  loadMore: () => Promise<void>;
+  style: React.CSSProperties;
+}) => {
+  const { ref, inView } = useInView();
+  const [inProgress, setInProgress] = useState(false);
+
+  useEffect(() => {
+    if (hasNext && inView && !inProgress) {
+      setInProgress(true);
+      loadMore()
+        .catch(console.error)
+        .finally(() => setInProgress(false));
+    }
+  }, [hasNext, loadMore, inView, inProgress]);
+  return (
+    <Flex ref={ref} style={style} align="center" justify="center">
+      {inProgress ? <Loading size={16} /> : null}
+    </Flex>
+  );
+};
+
+const VirtualizedParticipantItem = React.memo(
+  ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: ItemData & { hasNext: boolean; loadMorePeers: () => Promise<void> };
+    style: React.CSSProperties;
+  }) => {
+    if (!data.peerList[index]) {
+      return <LoadMoreParticipants hasNext={data.hasNext} loadMore={data.loadMorePeers} style={style} />;
+    }
+    return (
+      <Participant
+        key={data.peerList[index].id}
+        peer={data.peerList[index]}
+        isConnected={data.isConnected}
+        style={style}
+      />
+    );
+  },
+);
+
 export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
-  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
+  const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
   const [search, setSearch] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(false);
   const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [ref, { width }] = useMeasure<HTMLDivElement>();
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const height = ROW_HEIGHT * peers.length;
+  const height = ROW_HEIGHT * (filteredPeers.length + 1);
   const resetSidePane = useSidepaneReset();
-  const hasNext = total > peers.length;
 
   useEffect(() => {
     loadPeers();
@@ -60,33 +108,16 @@ export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string;
           </Text>
         </Flex>
         <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
-          <FixedSizeList
-            itemSize={ROW_HEIGHT}
-            itemData={{ peerList: filteredPeers, isConnected: isConnected === true }}
+          <VariableSizeList
+            itemSize={index => (index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT)}
+            itemData={{ peerList: filteredPeers, hasNext: hasNext(), loadMorePeers, isConnected: isConnected === true }}
             itemKey={itemKey}
-            itemCount={filteredPeers.length}
+            itemCount={filteredPeers.length + 1}
             width={width}
             height={height}
-            outerRef={containerRef}
           >
             {VirtualizedParticipantItem}
-          </FixedSizeList>
-          {hasNext ? (
-            <Flex justify="center" css={{ w: '100%' }}>
-              <Button
-                css={{ w: 'max-content', p: '$4' }}
-                onClick={() => {
-                  setIsLoading(true);
-                  loadMorePeers()
-                    .catch(console.error)
-                    .finally(() => setIsLoading(false));
-                }}
-                disabled={isLoading}
-              >
-                {isLoading ? <Loading size={16} /> : 'Load More'}
-              </Button>
-            </Flex>
-          ) : null}
+          </VariableSizeList>
         </Box>
       </Flex>
     </Flex>

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

@@ -176,7 +176,7 @@ const VirtualizedParticipants = ({
   );
 };
 
-export const Participant = ({ peer, isConnected }) => {
+export const Participant = ({ peer, isConnected, style }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   return (
     <Flex
@@ -191,6 +191,7 @@ export const Participant = ({ peer, isConnected }) => {
       align="center"
       justify="between"
       data-testid={'participant_' + peer.name}
+      style={style}
     >
       <Text
         variant="sm"

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { QuizIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
+import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, usePollViewToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const PollsToggle = () => {
+  const isPollsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.POLLS);
+  const togglePollView = usePollViewToggle();
+
+  return (
+    <Tooltip key="polls" title={`${isPollsOpen ? 'Close' : 'Open'} polls and quizzes`}>
+      <IconButton onClick={togglePollView} active={!isPollsOpen} data-testid="polls_btn">
+        <QuizIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -21,7 +21,7 @@ export interface ItemData {
 }
 
 export function itemKey(index: number, data: ItemData) {
-  return data.peerList[index].id;
+  return data.peerList[index]?.id;
 }
 
 export const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
@@ -64,8 +64,8 @@ export const RoleAccordion = ({
     return null;
   }
 
-  const height = ROW_HEIGHT * (peers.length || peerList.length);
   const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const height = ROW_HEIGHT * peersInAccordion.length;
   const hasNext = total > peersInAccordion.length;
 
   if (peersInAccordion.length === 0) {

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