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

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

@@ -5,11 +5,7 @@ import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
-const notificationTypes = [
-  HMSNotificationTypes.RECONNECTED,
-  HMSNotificationTypes.RECONNECTING,
-  HMSNotificationTypes.ERROR,
-];
+const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
 let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {

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/Preview/PreviewJoin.tsx

@@ -61,7 +61,7 @@ const useLocalTileAspectRatio = () => {
   } else {
     aspectRatio = isMobile ? 9 / 16 : 16 / 9;
   }
-  return aspectRatio;
+  return aspectRatio.toString();
 };
 
 const PreviewJoin = ({
@@ -113,6 +113,7 @@ const PreviewJoin = ({
   const { elements = {} } = useRoomLayoutPreviewScreen();
   const { preview_header: previewHeader = {}, virtual_background } = elements || {};
   const aspectRatio = useLocalTileAspectRatio();
+
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -158,7 +159,7 @@ const PreviewJoin = ({
           </Flex>
         </Flex>
         {toggleVideo ? <PreviewTile name={name} error={previewError} /> : null}
-        <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 340}px` }}>
+        <Box css={{ w: '100%', maxWidth: `${Math.max(parseFloat(aspectRatio), 1) * 340}px` }}>
           <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
           <PreviewForm
             name={name}

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

@@ -9,7 +9,6 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';

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

@@ -46,7 +46,6 @@ const toastMap = {};
 const ToggleChat = ({ isFullScreen = false }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const showChat = !!elements?.chat;
   const isMobile = useMedia(config.media.md);
   const hmsActions = useHMSActions();
@@ -57,7 +56,7 @@ const ToggleChat = ({ isFullScreen = false }) => {
         hmsActions.setAppData(APP_DATA.sidePane, '');
       })
       .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
-        toggleChat();
+        hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT);
       })
       .with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
         hmsActions.setAppData(APP_DATA.sidePane, '');
@@ -65,7 +64,7 @@ const ToggleChat = ({ isFullScreen = false }) => {
       .otherwise(() => {
         //do nothing
       });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
+  }, [sidepane, isMobile, showChat, hmsActions, isFullScreen]);
   return null;
 };
 const HLSView = () => {
@@ -286,6 +285,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/VideoStreamingSection.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ControlPosition } from 'react-draggable';
 import { useMedia } from 'react-use';
 import {
@@ -15,16 +15,16 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
-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 HLSView from './HLSView';
+// @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
@@ -32,8 +32,6 @@ import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
 import { SESSION_STORE_KEY } from '../common/constants';
-// @ts-ignore: No implicit Any
-const HLSView = React.lazy(() => import('./HLSView'));
 
 export const VideoStreamingSection = ({
   screenType,
@@ -79,90 +77,88 @@ export const VideoStreamingSection = ({
   }
 
   return (
-    <Suspense fallback={<FullPageProgress />}>
-      <Flex
+    <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')}
+    >
+      {match({
+        screenType,
+        isNotAllowedToPublish,
+        isScreenOnlyPublishParams,
+        hasSubscribedRolePublishing,
+        isSharingScreen,
+        pdfAnnotatorActive,
+        urlToIframe,
+      })
+        .with(
+          {
+            screenType: 'hls_live_streaming',
+          },
+          () => <HLSView />,
+        )
+        .when(
+          ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
+            isNotAllowedToPublish && !hasSubscribedRolePublishing,
+          () => (
+            <WaitingView
+              title="Waiting for Host to join"
+              subtitle="Sit back and relax"
+              icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+            />
+          ),
+        )
+        .when(
+          ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
+            isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
+          () => (
+            <WaitingView
+              title="Ready to present"
+              subtitle="Select the Screenshare button to start presenting"
+              icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
+            />
+          ),
+        )
+        .when(
+          ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
+          () => <PDFView />,
+        )
+        .when(
+          ({ urlToIframe }) => !!urlToIframe,
+          () => <EmbedView />,
+        )
+
+        .otherwise(() => {
+          // @ts-ignore
+          return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+        })}
+      <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
+      <Box
         css={{
-          size: '100%',
+          flex: match({ isLandscapeHLSStream, isMobileHLSStream })
+            .with({ isLandscapeHLSStream: true }, () => '1  1 0')
+            .with({ isMobileHLSStream: true }, () => '2 1 0')
+            .otherwise(() => undefined),
           position: 'relative',
-          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
+          height: !isMobileHLSStream ? '100%' : undefined,
+          maxHeight: '100%',
+          '&:empty': { display: 'none' },
+          overflowY: 'clip',
         }}
-        direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
-          .with({ isLandscapeHLSStream: true }, () => 'row')
-          .with({ isMobileHLSStream: true }, () => 'column')
-          .otherwise(() => 'row')}
       >
-        {match({
-          screenType,
-          isNotAllowedToPublish,
-          isScreenOnlyPublishParams,
-          hasSubscribedRolePublishing,
-          isSharingScreen,
-          pdfAnnotatorActive,
-          urlToIframe,
-        })
-          .with(
-            {
-              screenType: 'hls_live_streaming',
-            },
-            () => <HLSView />,
-          )
-          .when(
-            ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
-              isNotAllowedToPublish && !hasSubscribedRolePublishing,
-            () => (
-              <WaitingView
-                title="Waiting for Host to join"
-                subtitle="Sit back and relax"
-                icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
-              />
-            ),
-          )
-          .when(
-            ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
-              isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
-            () => (
-              <WaitingView
-                title="Ready to present"
-                subtitle="Select the Screenshare button to start presenting"
-                icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
-              />
-            ),
-          )
-          .when(
-            ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
-            () => <PDFView />,
-          )
-          .when(
-            ({ urlToIframe }) => !!urlToIframe,
-            () => <EmbedView />,
-          )
-
-          .otherwise(() => {
-            // @ts-ignore
-            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',
-          }}
-        >
-          <SidePane
-            screenType={screenType}
-            // @ts-ignore
-            tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-            hideControls={hideControls}
-          />
-        </Box>
-      </Flex>
-    </Suspense>
+        <SidePane
+          screenType={screenType}
+          // @ts-ignore
+          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+          hideControls={hideControls}
+        />
+      </Box>
+    </Flex>
   );
 };