@100mslive/roomkit-react 0.3.22-alpha.2 → 0.3.22-alpha.4

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

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
   selectLocalPeerID,
@@ -9,22 +9,16 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import FullPageProgress from '../FullPageProgress';
+// @ts-ignore: No implicit Any
 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;
@@ -114,44 +108,38 @@ export const GridLayout = ({
 
   if (peerSharing) {
     return (
-      <Suspense fallback={<FullPageProgress />}>
-        <VideoTileContext.Provider value={tileLayout}>
-          <ScreenshareLayout
-            peers={sortedPeers}
-            onPageSize={setPageSize}
-            onPageChange={setMainPage}
-            edgeToEdge={edge_to_edge}
-          />
-        </VideoTileContext.Provider>
-      </Suspense>
+      <VideoTileContext.Provider value={tileLayout}>
+        <ScreenshareLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   } else if (whiteboard?.open) {
     return (
-      <Suspense fallback={<FullPageProgress />}>
-        <VideoTileContext.Provider value={tileLayout}>
-          <WhiteboardLayout
-            peers={sortedPeers}
-            onPageSize={setPageSize}
-            onPageChange={setMainPage}
-            edgeToEdge={edge_to_edge}
-          />
-        </VideoTileContext.Provider>
-      </Suspense>
+      <VideoTileContext.Provider value={tileLayout}>
+        <WhiteboardLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   } else if (isRoleProminence) {
     return (
-      <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>
+      <VideoTileContext.Provider value={tileLayout}>
+        <RoleProminence
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          prominentRoles={prominentRoles}
+          isInsetEnabled={isInsetEnabled}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   }
   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,9 +25,7 @@ const Root = ({
       bg: '$surface_bright',
       border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
       cursor: 'pointer',
-      '@media (hover:hover)': {
-        '&:hover': { border: '4px solid $primary_dim' },
-      },
+      '&:hover': { border: '4px solid $primary_dim' },
       ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
     }}
     onClick={async () => {

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

@@ -180,9 +180,6 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               onClick: async () => {
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
-                if (isMobile) {
-                  toggleVB();
-                }
               },
               supported: true,
             },
@@ -238,9 +235,6 @@ 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,7 +286,6 @@ const HLSView = () => {
         hlsPlayer.reset();
       };
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hlsUrl, vanillaStore, hmsActions]);
 
   /**

package/src/Prebuilt/layouts/PDFView.jsx

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

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,10 +1,14 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { 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
@@ -18,16 +22,6 @@ 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',
@@ -239,7 +233,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-      <Suspense fallback={<></>}>{SidepaneComponent}</Suspense>
+      {SidepaneComponent}
     </Flex>
   );
 };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -19,7 +19,13 @@ 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';
@@ -28,11 +34,6 @@ 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,
@@ -78,18 +79,18 @@ export const VideoStreamingSection = ({
   }
 
   return (
-    <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 />}>
+    <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')}
+      >
         {match({
           screenType,
           isNotAllowedToPublish,
@@ -141,29 +142,27 @@ export const VideoStreamingSection = ({
             return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
           })}
         <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
-      </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={<></>}>
+        <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}
           />
-        </Suspense>
-      </Box>
-    </Flex>
+        </Box>
+      </Flex>
+    </Suspense>
   );
 };