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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.24-alpha.0",
+  "version": "0.3.24-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.24-alpha.0",
+    "@100mslive/hls-player": "0.3.24-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.24-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.14-alpha.0",
-    "@100mslive/react-icons": "0.10.24-alpha.0",
-    "@100mslive/react-sdk": "0.10.24-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.24-alpha.2",
+    "@100mslive/hms-whiteboard": "0.0.14-alpha.2",
+    "@100mslive/react-icons": "0.10.24-alpha.2",
+    "@100mslive/react-sdk": "0.10.24-alpha.2",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "8d5f8d40926c57adca1b1c3652674b67175acd4c"
+  "gitHead": "e4156f3df2ca373cfc388e1dcad98d242b026367"
 }

package/src/Prebuilt/App.tsx

@@ -13,12 +13,14 @@ import {
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
+import { ConferenceScreen } from './components/ConferenceScreen';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
 // @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
+import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
 import { PIPProvider } from './components/PIP/PIPProvider';
@@ -48,12 +50,6 @@ import {
 import { FeatureFlags } from './services/FeatureFlags';
 // @ts-ignore: No implicit Any
 import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-const LeaveScreen = React.lazy(() =>
-  import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })),
-);
-const ConferenceScreen = React.lazy(() =>
-  import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })),
-);
 
 export type HMSPrebuiltOptions = {
   userName?: string;
@@ -225,6 +221,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                           sans: fontFamily,
                         },
                       }}
+                      container={containerSelector}
                     >
                       <PIPProvider>
                         <Init />

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react';
+import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
@@ -8,6 +8,10 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit Any
+import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
@@ -17,12 +21,6 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
-const MoreSettings = React.lazy(() =>
-  import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })),
-);
-const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand })));
-// @ts-ignore: No implicit any
-const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction })));
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
@@ -67,10 +65,10 @@ export const Chat = () => {
         <ChatPaused />
         <ChatBlocked />
         {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
-          <Suspense fallback={<></>}>
+          <>
             <RaiseHand css={{ bg: '$surface_default' }} />
             <MoreSettings elements={elements} screenType={screenType} />
-          </Suspense>
+          </>
         )}
       </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
@@ -131,9 +129,7 @@ export const Chat = () => {
               .otherwise(() => ({})),
           }}
         >
-          <Suspense fallback={<></>}>
-            <EmojiReaction />
-          </Suspense>
+          <EmojiReaction />
         </Box>
       )}
     </Flex>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
@@ -11,6 +11,7 @@ export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
   const peerSharing = useHMSStore(selectPeerScreenSharing);
   const disabled = !!peerSharing || (open && !isOwner);
+  const [isLoading, setLoading] = useState(false);
 
   if (!toggle) {
     return null;
@@ -25,17 +26,23 @@ export const WhiteboardToggle = () => {
     >
       <IconButton
         onClick={async () => {
-          if (disabled) {
+          if (disabled || isLoading) {
             return;
           }
           try {
-            await toggle();
+            if (!open) {
+              setLoading(true);
+              await toggle();
+              setTimeout(() => setLoading(false), 500);
+            } else {
+              await toggle();
+            }
           } catch (error) {
             ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
           }
         }}
         active={!open}
-        disabled={disabled}
+        disabled={disabled || isLoading}
         data-testid="whiteboard_btn"
       >
         <PencilDrawIcon />

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { Flex } from '../../../Layout';
 
-export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
+export const HMSVideo = forwardRef(({ children, isFullScreen, ...props }, videoRef) => {
   const [width, setWidth] = useState('auto');
 
   useEffect(() => {
@@ -22,7 +22,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     return () => {
       videoEl.removeEventListener('loadedmetadata', updatingVideoWidth);
     };
-  }, []);
+  }, [videoRef, width]);
   return (
     <Flex
       data-testid="hms-video"
@@ -33,7 +33,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         transition: 'all 0.3s ease-in-out',
         '@md': {
           '& video': {
-            height: props.isFullScreen ? '' : '$60 !important',
+            height: isFullScreen ? '' : '$60 !important',
           },
         },
         '& video::cue': {

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

@@ -130,6 +130,9 @@ export const DesktopOptions = ({
 
         <Dropdown.Content
           sideOffset={5}
+          onCloseAutoFocus={e => {
+            e.preventDefault();
+          }}
           align="end"
           css={{
             py: '$0',

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/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,15 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-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;
@@ -114,44 +107,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/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 = () => {

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

@@ -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,24 +15,23 @@ 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';
+import { WaitingView } from './WaitingView';
 import { CaptionsViewer } from '../plugins/CaptionsViewer';
 // @ts-ignore: No implicit Any
 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'));
-// @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,
@@ -89,59 +88,57 @@ export const VideoStreamingSection = ({
         .with({ isMobileHLSStream: true }, () => 'column')
         .otherwise(() => 'row')}
     >
-      <Suspense fallback={<FullPageProgress />}>
-        {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 />,
-          )
+      {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} />
-      </Suspense>
+        .otherwise(() => {
+          // @ts-ignore
+          return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+        })}
+      <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
       <Box
         css={{
           flex: match({ isLandscapeHLSStream, isMobileHLSStream })
@@ -155,14 +152,12 @@ export const VideoStreamingSection = ({
           overflowY: 'clip',
         }}
       >
-        <Suspense fallback={<></>}>
-          <SidePane
-            screenType={screenType}
-            // @ts-ignore
-            tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-            hideControls={hideControls}
-          />
-        </Suspense>
+        <SidePane
+          screenType={screenType}
+          // @ts-ignore
+          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+          hideControls={hideControls}
+        />
       </Box>
     </Flex>
   );

package/src/Theme/ThemeProvider.tsx

@@ -30,6 +30,7 @@ export type ThemeProviderProps = {
   themeType?: string;
   theme?: Theme;
   aspectRatio?: { width: number; height: number };
+  container?: string;
 };
 
 const defaultContext = {
@@ -53,6 +54,7 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
   themeType,
   theme: userTheme,
   aspectRatio = defaultAspectRatio,
+  container = '',
   children,
 }) => {
   const systemTheme = ThemeTypes.default;
@@ -64,13 +66,17 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
     if (!isBrowser) {
       return updatedTheme;
     }
+    let element = document.querySelector(container);
+    if (!element) {
+      element = document.documentElement;
+    }
     if (previousClassName.current) {
-      document.documentElement.classList.remove(previousClassName.current);
+      element.classList.remove(previousClassName.current);
     }
     previousClassName.current = updatedTheme.className;
-    document.documentElement.classList.add(updatedTheme);
+    element.classList.add(updatedTheme);
     return updatedTheme;
-  }, [userTheme, currentTheme, isBrowser]);
+  }, [userTheme, container, currentTheme, isBrowser]);
 
   const toggleTheme = useCallback((themeToUpdateTo?: ThemeTypes) => {
     if (themeToUpdateTo) {