@100mslive/roomkit-react 0.3.23-alpha.0 → 0.3.24-alpha.0

package/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+
+export const RoleChangeNotification = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
+
+  useEffect(() => {
+    if (!notification?.data) {
+      return;
+    }
+    if (notification.data?.isLocal && notification.data?.roleName) {
+      ToastManager.addToast({
+        title: `You are now a ${notification.data.roleName}`,
+      });
+      updateRoomLayoutForRole?.(notification.data.roleName);
+    }
+  }, [notification]);
+
+  return null;
+};

package/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx

@@ -9,14 +9,16 @@ import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
+const notificationTypes = [
+  HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
+  HMSNotificationTypes.ROOM_ENDED,
+  HMSNotificationTypes.REMOVED_FROM_ROOM,
+];
+
 export const TrackBulkUnmuteModal = () => {
   const hmsActions = useHMSActions();
   const [muteNotification, setMuteNotification] = useState<HMSChangeMultiTrackStateRequest | null>(null);
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
 
   useEffect(() => {
     switch (notification?.type) {

package/src/Prebuilt/components/Notifications/TrackNotifications.tsx

@@ -1,17 +1,39 @@
 import { useEffect } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
 
 const notificationTypes = [
   HMSNotificationTypes.TRACK_ADDED,
   HMSNotificationTypes.TRACK_REMOVED,
   HMSNotificationTypes.TRACK_MUTED,
   HMSNotificationTypes.TRACK_UNMUTED,
+  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
 ];
+
 export const TrackNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   useEffect(() => {
     if (notification) {
-      console.debug(`[${notification.type}]`, notification);
+      switch (notification.type) {
+        case HMSNotificationTypes.TRACK_ADDED:
+        case HMSNotificationTypes.TRACK_REMOVED:
+        case HMSNotificationTypes.TRACK_MUTED:
+        case HMSNotificationTypes.TRACK_UNMUTED:
+          console.debug(`[${notification.type}]`, notification);
+          break;
+        case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
+          {
+            const track = notification.data?.track;
+            if (!notification.data.enabled) {
+              ToastManager.addToast({
+                title: `Your ${track.source} ${track.type} was muted by
+                  ${notification.data.requestedBy?.name}.`,
+              });
+            }
+          }
+          break;
+      }
     }
   }, [notification]);
 

package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx

@@ -8,20 +8,28 @@ import {
 import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+
+const notificationTypes = [
+  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
+  HMSNotificationTypes.ROOM_ENDED,
+  HMSNotificationTypes.REMOVED_FROM_ROOM,
+];
 
 export const TrackUnmuteModal = () => {
   const hmsActions = useHMSActions();
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
   const [muteNotification, setMuteNotification] = useState<HMSChangeTrackStateRequest | null>(null);
 
   useEffect(() => {
     switch (notification?.type) {
       case HMSNotificationTypes.REMOVED_FROM_ROOM:
       case HMSNotificationTypes.ROOM_ENDED:
+        ToastManager.addToast({
+          title: `${notification.message}. 
+              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
+        });
         setMuteNotification(null);
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -1,35 +1,45 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { match, P } from 'ts-pattern';
 import {
   selectHMSStats,
   selectLocalPeerID,
   selectPeersMap,
   selectTracksMap,
+  useHMSActions,
   useHMSStatsStore,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { Accordion } from '../../Accordion';
 import { HorizontalDivider } from '../../Divider';
 import { Dropdown } from '../../Dropdown';
 import { Label } from '../../Label';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
+import { Sheet } from '../../Sheet';
 import { formatBytes } from '../../Stats';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
+import { config as cssConfig } from '../../Theme';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
 import { useSetUiSettings } from './AppData/useUISettings';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { UI_SETTINGS } from '../common/constants';
 
-export const StatsForNerds = ({ onOpenChange }) => {
+export const StatsForNerds = ({ open, onOpenChange }) => {
+  const mediaQueryLg = cssConfig.media.md;
+  const isMobile = useMedia(mediaQueryLg);
+
   const tracksWithLabels = useTracksWithLabel();
   const statsOptions = useMemo(
     () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
     [tracksWithLabels],
   );
+  const hmsActions = useHMSActions();
+  const details = hmsActions.getDebugInfo();
   const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
   const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-  const [open, setOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const ref = useRef();
   const selectionBg = useDropdownSelection();
 
@@ -39,14 +49,92 @@ export const StatsForNerds = ({ onOpenChange }) => {
     }
   }, [tracksWithLabels, selectedStat]);
 
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+  return isMobile ? (
+    <Sheet.Root open={open} onOpenChange={onOpenChange}>
+      <Sheet.Content
+        css={{
+          bg: '$surface_dim',
+          overflowY: 'auto',
+          px: '$4',
+        }}
+      >
+        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
+          <Flex justify="between">
+            <Flex align="center" css={{ mb: '$1' }}>
+              <Text variant="h6" inline>
+                Stats For Nerds
+              </Text>
+            </Flex>
+            <Dialog.DefaultClose data-testid="stats_dialog_close_icon" />
+          </Flex>
+        </Sheet.Title>
+        <HorizontalDivider />
+        <Flex justify="start" gap={4} css={{ m: '$10 0' }}>
+          <Switch checked={showStatsOnTiles} onCheckedChange={setShowStatsOnTiles} />
+          <Text variant="body2" css={{ fontWeight: '$semiBold' }}>
+            Show Stats on Tiles
+          </Text>
+        </Flex>
+        {/* Select */}
+        <Flex
+          direction="column"
+          css={{
+            mb: '$12',
+            position: 'relative',
+            minWidth: 0,
+          }}
+        >
+          <Label variant="body2" css={{ c: '$on_surface_high' }}>
+            Stats For
+          </Label>
+          <Dropdown.Root data-testid="dialog_select_Stats For" open={openDropdown} onOpenChange={setOpenDropdown}>
+            <DialogDropdownTrigger
+              title={selectedStat.label || 'Select Stats'}
+              css={{ mt: '$4' }}
+              titleCSS={{ mx: 0 }}
+              open={openDropdown}
+              ref={ref}
+            />
+            <Dropdown.Portal>
+              <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
+                {statsOptions.map(option => {
+                  const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
+                  return (
+                    <Dropdown.Item
+                      key={`${option.id}-${option.layer || ''}`}
+                      onClick={() => {
+                        setSelectedStat(option);
+                      }}
+                      css={{
+                        px: '$9',
+                        bg: isSelected ? selectionBg : undefined,
+                        c: isSelected ? '$on_primary_high' : '$on_primary_high',
+                      }}
+                    >
+                      {option.label}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Content>
+            </Dropdown.Portal>
+          </Dropdown.Root>
+        </Flex>
+        {/* Stats */}
+        {selectedStat.id === 'local-peer' ? (
+          <LocalPeerStats />
+        ) : (
+          <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
+        )}
+      </Sheet.Content>
+    </Sheet.Root>
+  ) : (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
             width: 'min(500px, 95%)',
-            maxHeight: '100%',
+            height: 'min(656px, 90%)',
             overflowY: 'auto',
           }}
         >
@@ -70,6 +158,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             </Text>
           </Flex>
           {/* Select */}
+
           <Flex
             direction="column"
             css={{
@@ -81,12 +170,12 @@ export const StatsForNerds = ({ onOpenChange }) => {
             <Label variant="body2" css={{ c: '$on_surface_high' }}>
               Stats For
             </Label>
-            <Dropdown.Root data-testid="dialog_select_Stats For" open={open} onOpenChange={setOpen}>
+            <Dropdown.Root data-testid="dialog_select_Stats For" open={openDropdown} onOpenChange={setOpenDropdown}>
               <DialogDropdownTrigger
                 title={selectedStat.label || 'Select Stats'}
                 css={{ mt: '$4' }}
                 titleCSS={{ mx: 0 }}
-                open={open}
+                open={openDropdown}
                 ref={ref}
               />
               <Dropdown.Portal>
@@ -119,6 +208,9 @@ export const StatsForNerds = ({ onOpenChange }) => {
           ) : (
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
+          <Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
+            <DebugInfo details={details} />
+          </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -229,8 +321,29 @@ const TrackStats = ({ trackID, layer, local }) => {
   );
 };
 
-const StatsRow = React.memo(({ label, value }) => (
-  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
+const DebugInfo = ({ details }) => {
+  return (
+    <Accordion.Root type="single" collapsible css={{ w: '100%' }}>
+      <Accordion.Item value="Debug Info">
+        <Accordion.Header>
+          <Label variant="body2" css={{ c: '$on_surface_high' }}>
+            Debug Info
+          </Label>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Flex css={{ flexWrap: 'wrap', mt: '$10', gap: '$10' }}>
+            <StatsRow css={{ w: '100%' }} label="Websocket URL" value={details?.websocketURL} />
+            <StatsRow css={{ w: '100%' }} label="Init Endpoint" value={details?.initEndpoint} />
+            <StatsRow css={{ w: '100%' }} label="Enabled flags" value={details?.enabledFlags?.join(', ')} />
+          </Flex>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};
+
+const StatsRow = React.memo(({ label, value, css }) => (
+  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3', ...css }}>
     <Text
       variant="overline"
       css={{

package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
   selectLocalPeerID,
@@ -9,16 +9,22 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
+import FullPageProgress from '../FullPageProgress';
 import { EqualProminence } from './EqualProminence';
-import { RoleProminence } from './RoleProminence';
-import { ScreenshareLayout } from './ScreenshareLayout';
-import { WhiteboardLayout } from './WhiteboardLayout';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
 import PeersSorter from '../../common/PeersSorter';
 import { APP_DATA } from '../../common/constants';
+const RoleProminence = React.lazy(() =>
+  import('./RoleProminence').then(module => ({ default: module.RoleProminence })),
+);
+const ScreenshareLayout = React.lazy(() =>
+  import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })),
+);
+const WhiteboardLayout = React.lazy(() =>
+  import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })),
+);
 
 export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
@@ -108,38 +114,44 @@ export const GridLayout = ({
 
   if (peerSharing) {
     return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <ScreenshareLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <ScreenshareLayout
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   } else if (whiteboard?.open) {
     return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <WhiteboardLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <WhiteboardLayout
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   } else if (isRoleProminence) {
     return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <RoleProminence
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          prominentRoles={prominentRoles}
-          isInsetEnabled={isInsetEnabled}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <RoleProminence
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            prominentRoles={prominentRoles}
+            isInsetEnabled={isInsetEnabled}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   }
   return (

package/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -70,9 +70,9 @@ const SecondarySection = ({
             rootCSS={{
               padding: 0,
               maxWidth: 240,
-              aspectRatio: 16 / 9,
+              aspectRatio: '16 / 9',
               ...(hasSidebar ? { w: '100%' } : { h: '100%' }),
-              '@md': { aspectRatio: 1 },
+              '@md': { aspectRatio: '1' },
             }}
             objectFit="contain"
             {...tileLayoutProps}

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -25,7 +25,9 @@ const Root = ({
       bg: '$surface_bright',
       border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
       cursor: 'pointer',
-      '&:hover': { border: '4px solid $primary_dim' },
+      '@media (hover:hover)': {
+        '&:hover': { border: '4px solid $primary_dim' },
+      },
       ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
     }}
     onClick={async () => {

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -180,6 +180,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               onClick: async () => {
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+                if (isMobile) {
+                  toggleVB();
+                }
               },
               supported: true,
             },
@@ -235,6 +238,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             onClick: async () => {
               await VBHandler?.setBackground(mediaURL);
               hmsActions.setAppData(APP_DATA.background, mediaURL);
+              if (isMobile) {
+                toggleVB();
+              }
             },
             supported: true,
           }))}

package/src/Prebuilt/layouts/HLSView.jsx

@@ -286,6 +286,7 @@ const HLSView = () => {
         hlsPlayer.reset();
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hlsUrl, vanillaStore, hmsActions]);
 
   /**

package/src/Prebuilt/layouts/PDFView.jsx

@@ -19,6 +19,7 @@ export const PDFView = () => {
     return () => {
       resetConfig();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     (async () => {

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,14 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { match } from 'ts-pattern';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { Polls } from '../components/Polls/Polls';
-import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
 import { LayoutMode } from '../components/Settings/LayoutSettings';
-import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 import VideoTile from '../components/VideoTile';
-import { VBPicker } from '../components/VirtualBackground/VBPicker';
 import { Flex } from '../../Layout';
 import { config as cssConfig, styled } from '../../Theme';
 // @ts-ignore: No implicit Any
@@ -22,6 +18,16 @@ import {
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
+const SidePaneTabs = React.lazy(() =>
+  import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })),
+);
+const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls })));
+const RoomDetailsPane = React.lazy(() =>
+  import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })),
+);
+const VBPicker = React.lazy(() =>
+  import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })),
+);
 
 const Wrapper = styled('div', {
   w: '$100',
@@ -233,7 +239,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-      {SidepaneComponent}
+      <Suspense fallback={<></>}>{SidepaneComponent}</Suspense>
     </Flex>
   );
 };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -19,13 +19,7 @@ import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
 import { config } from '../../Theme';
-// @ts-ignore: No implicit Any
-import { EmbedView } from './EmbedView';
-// @ts-ignore: No implicit Any
-import { PDFView } from './PDFView';
 import SidePane from './SidePane';
-// @ts-ignore: No implicit Any
-import { WaitingView } from './WaitingView';
 import { CaptionsViewer } from '../plugins/CaptionsViewer';
 // @ts-ignore: No implicit Any
 import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings';
@@ -34,6 +28,11 @@ import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '.
 import { SESSION_STORE_KEY } from '../common/constants';
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
+// @ts-ignore: No implicit Any
+const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView })));
+// @ts-ignore: No implicit Any
+const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView })));
+const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView })));
 
 export const VideoStreamingSection = ({
   screenType,
@@ -79,18 +78,18 @@ export const VideoStreamingSection = ({
   }
 
   return (
-    <Suspense fallback={<FullPageProgress />}>
-      <Flex
-        css={{
-          size: '100%',
-          position: 'relative',
-          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
-        }}
-        direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
-          .with({ isLandscapeHLSStream: true }, () => 'row')
-          .with({ isMobileHLSStream: true }, () => 'column')
-          .otherwise(() => 'row')}
-      >
+    <Flex
+      css={{
+        size: '100%',
+        position: 'relative',
+        gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
+      }}
+      direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
+        .with({ isLandscapeHLSStream: true }, () => 'row')
+        .with({ isMobileHLSStream: true }, () => 'column')
+        .otherwise(() => 'row')}
+    >
+      <Suspense fallback={<FullPageProgress />}>
         {match({
           screenType,
           isNotAllowedToPublish,
@@ -142,27 +141,29 @@ export const VideoStreamingSection = ({
             return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
           })}
         <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
-        <Box
-          css={{
-            flex: match({ isLandscapeHLSStream, isMobileHLSStream })
-              .with({ isLandscapeHLSStream: true }, () => '1  1 0')
-              .with({ isMobileHLSStream: true }, () => '2 1 0')
-              .otherwise(() => undefined),
-            position: 'relative',
-            height: !isMobileHLSStream ? '100%' : undefined,
-            maxHeight: '100%',
-            '&:empty': { display: 'none' },
-            overflowY: 'clip',
-          }}
-        >
+      </Suspense>
+      <Box
+        css={{
+          flex: match({ isLandscapeHLSStream, isMobileHLSStream })
+            .with({ isLandscapeHLSStream: true }, () => '1  1 0')
+            .with({ isMobileHLSStream: true }, () => '2 1 0')
+            .otherwise(() => undefined),
+          position: 'relative',
+          height: !isMobileHLSStream ? '100%' : undefined,
+          maxHeight: '100%',
+          '&:empty': { display: 'none' },
+          overflowY: 'clip',
+        }}
+      >
+        <Suspense fallback={<></>}>
           <SidePane
             screenType={screenType}
             // @ts-ignore
             tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
             hideControls={hideControls}
           />
-        </Box>
-      </Flex>
-    </Suspense>
+        </Suspense>
+      </Box>
+    </Flex>
   );
 };

package/src/Prebuilt/layouts/WaitingView.tsx

@@ -36,12 +36,12 @@ export const WaitingView = React.memo(
             gap: '$4',
           }}
         >
-          <Text variant="h4" css={{ '@md': { fontSize: '$md', color: '$on_surface_high' } }}>
+          <Text variant="h4" css={{ '@md': { fontSize: '$lg', color: '$on_surface_high' } }}>
             {title}
           </Text>
           <Text
             variant="body1"
-            css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$sm' } }}
+            css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$md' } }}
           >
             {subtitle}
           </Text>