@100mslive/roomkit-react 0.1.6-alpha.1 → 0.1.6-alpha.2

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.6-alpha.1",
+  "version": "0.1.6-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.15-alpha.1",
-    "@100mslive/hms-virtual-background": "1.11.15-alpha.1",
-    "@100mslive/react-icons": "0.8.15-alpha.1",
-    "@100mslive/react-sdk": "0.8.15-alpha.1",
+    "@100mslive/hls-player": "0.1.15-alpha.2",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.2",
+    "@100mslive/react-icons": "0.8.15-alpha.2",
+    "@100mslive/react-sdk": "0.8.15-alpha.2",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d3f042d48bb30f16c6c63f2a75c406611c0f2831"
+  "gitHead": "e9017621fb9f9594f985d47483ccab4bed324a35"
 }

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -17,7 +17,6 @@ import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
 import { AnnotisedMessage, ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
-import { ChatParticipantHeader } from './ChatParticipantHeader';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
@@ -77,7 +76,7 @@ export const Chat = ({ screenType, hideControls = false }) => {
     peerId: peerSelector && peerName ? peerSelector : '',
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',
   });
-  const [isSelectorOpen, setSelectorOpen] = useState(false);
+  const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { setPinnedMessage } = useSetPinnedMessage();
@@ -128,10 +127,7 @@ export const Chat = ({ screenType, hideControls = false }) => {
       }}
     >
       {isMobile && elements?.chat?.is_overlay ? null : (
-        <>
-          <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
-          {elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}
-        </>
+        <>{elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}</>
       )}
 
       <ChatBody

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
 import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
@@ -9,18 +9,11 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = ({ openByDefault }: { openByDefault: boolean }) => {
+export const ChatToggle = () => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
-  useEffect(() => {
-    if (!isChatOpen && openByDefault) {
-      toggleChat();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleChat, openByDefault]);
-
   return (
     <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
       <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">

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

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
@@ -6,7 +6,6 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
-import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -25,6 +24,10 @@ import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
 // @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+// @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'));
 
 export const Footer = ({
@@ -37,7 +40,16 @@ export const Footer = ({
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+
+  useEffect(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleChat, openByDefault]);
 
   return (
     <AppFooter.Root
@@ -63,7 +75,11 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
-        {isMobile ? null : <Suspense fallback={<></>}>{isVideoOn ? <VirtualBackground /> : null}</Suspense>}
+        {isMobile ? null : (
+          <Suspense fallback={<></>}>
+            <VirtualBackground />
+          </Suspense>
+        )}
       </AppFooter.Left>
       <AppFooter.Center
         css={{
@@ -76,7 +92,7 @@ export const Footer = ({
         {isMobile ? (
           <>
             {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
-            {elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+            {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>
         ) : (
@@ -89,7 +105,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
-        {!isMobile && elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+        {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />
       </AppFooter.Right>

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

@@ -21,7 +21,6 @@ import {
 } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
-import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
@@ -61,7 +60,6 @@ export const ParticipantList = () => {
   return (
     <Fragment>
       <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
-        <ChatParticipantHeader activeTabValue={SIDE_PANE_OPTIONS.PARTICIPANTS} />
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
         {participants.length === 0 ? (
           <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
@@ -41,6 +41,13 @@ export const Logo = () => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
+  useEffect(() => {
+    if (hideImage) {
+      setHideImage(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [logo]);
+
   if (isConnected && isMobile) {
     return null;
   }

package/src/Prebuilt/components/InsetTile.tsx

@@ -120,6 +120,7 @@ export const InsetTile = () => {
             canMinimise
             isDragabble
             {...videoTileProps}
+            hideParticipantNameOnTile
           />
         )}
       </Box>

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

@@ -266,7 +266,7 @@ export const MwebOptions = ({
           </Box>
         </Sheet.Content>
       </Sheet.Root>
-      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} />
+      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
       {openModals.has(MODALS.MUTE_ALL) && (
         <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
       )}

package/src/Prebuilt/components/Notifications/Notifications.jsx

@@ -4,10 +4,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectPeerMetadata,
   selectRoomState,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../../';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
@@ -29,6 +31,7 @@ export function Notifications() {
   const notification = useHMSNotifications();
   const navigate = useNavigate();
   const params = useParams();
+  const vanillaStore = useHMSVanillaStore();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
@@ -53,8 +56,8 @@ export function Notifications() {
         if (roomState !== HMSRoomState.Connected) {
           return;
         }
-        // Don't toast message when metadata is updated and raiseHand is false.
-        // Don't toast message in case of local peer.
+        // Don't show toast message when metadata is updated and raiseHand is false.
+        // Don't show toast message in case of local peer.
         const metadata = getMetadata(notification.data?.metadata);
         if (!metadata?.isHandRaised || notification.data.isLocal) return;
 
@@ -108,14 +111,18 @@ export function Notifications() {
           title: `Error: ${notification.data?.message} - ${notification.data?.description}`,
         });
         break;
-      case HMSNotificationTypes.ROLE_UPDATED:
+      case HMSNotificationTypes.ROLE_UPDATED: {
         if (notification.data?.isLocal) {
-          ToastManager.addToast({
-            title: `You are now a ${notification.data.roleName}`,
-          });
-          updateRoomLayoutForRole(notification.data.roleName);
+          const { prevRole } = vanillaStore.getState(selectPeerMetadata(notification.data?.id));
+          if (prevRole !== notification?.data?.roleName) {
+            ToastManager.addToast({
+              title: `You are now a ${notification.data.roleName}`,
+            });
+            updateRoomLayoutForRole(notification.data.roleName);
+          }
         }
         break;
+      }
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
         const track = notification.data?.track;
         if (!notification.data.enabled) {

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -246,7 +246,6 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 };
 
 export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => {
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const isMobile = useMedia(cssConfig.media.md);
 
   return (
@@ -258,8 +257,8 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
       }}
     >
       <Flex css={{ gap: '$4' }}>
-        <AudioVideoToggle compact />
-        <Suspense fallback="">{isVideoOn && !isMobile ? <VirtualBackground /> : null}</Suspense>
+        <AudioVideoToggle />
+        <Suspense fallback="">{!isMobile ? <VirtualBackground /> : null}</Suspense>
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/RoleChangeRequestModal.tsx

@@ -27,9 +27,11 @@ export const RoleChangeRequestModal = () => {
     if (!roleChangeRequest?.role) {
       return;
     }
-
-    hmsActions.preview({ asRole: roleChangeRequest.role.name });
-  }, [hmsActions, roleChangeRequest]);
+    (async () => {
+      await updateMetaData({ prevRole: currentRole });
+      await hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    })();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
 
   if (!roleChangeRequest?.role) {
     return null;
@@ -69,7 +71,7 @@ export const RoleChangeRequestModal = () => {
       body={body}
       onAction={async () => {
         await hmsActions.acceptChangeRole(roleChangeRequest);
-        await updateMetaData({ isHandRaised: false, prevRole: currentRole });
+        await updateMetaData({ isHandRaised: false });
       }}
       actionText="Accept"
     />

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { CrossIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
+import { Chat } from './Chat/Chat';
+// @ts-ignore: No implicit Any
+import { ParticipantList } from './Footer/ParticipantList';
+import { Flex, IconButton, Tabs, Text } from '../..';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../common/constants';
+
+const tabTriggerCSS = {
+  color: '$on_surface_high',
+  p: '$4',
+  fontWeight: '$semiBold',
+  fontSize: '$sm',
+  w: '100%',
+  justifyContent: 'center',
+};
+
+export const SidePaneTabs = React.memo<{
+  active: 'Participants | Chat';
+  screenType: keyof ConferencingScreen;
+  hideControls?: boolean;
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const resetSidePane = useSidepaneReset();
+  const [activeTab, setActiveTab] = useState(active);
+  const peerCount = useHMSStore(selectPeerCount);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const showChat = !!elements?.chat;
+  const showParticipants = !!elements?.participant_list;
+  const hideTabs = !(showChat && showParticipants);
+
+  useEffect(() => {
+    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+    } else if (!showChat && !showParticipants) {
+      resetSidePane();
+    }
+  }, [showChat, activeTab, showParticipants, resetSidePane]);
+
+  return (
+    <Flex
+      direction="column"
+      css={{
+        color: '$on_primary_high',
+        h: '100%',
+      }}
+    >
+      {hideTabs ? (
+        <>
+          <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
+            {showChat ? 'Chat' : `Participants (${peerCount})`}
+          </Text>
+          {showChat ? <Chat screenType={screenType} hideControls={hideControls} /> : <ParticipantList />}
+        </>
+      ) : (
+        <Tabs.Root
+          value={activeTab}
+          onValueChange={setActiveTab}
+          css={{
+            flexDirection: 'column',
+            size: '100%',
+          }}
+        >
+          <Tabs.List css={{ w: 'calc(100% - $12)', p: '$2', borderRadius: '$2', bg: '$surface_default' }}>
+            <Tabs.Trigger
+              value={SIDE_PANE_OPTIONS.CHAT}
+              onClick={toggleChat}
+              css={{
+                ...tabTriggerCSS,
+                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+              }}
+            >
+              Chat
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+              onClick={toggleParticipants}
+              css={{
+                ...tabTriggerCSS,
+                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+              }}
+            >
+              Participants ({peerCount})
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
+            <ParticipantList />
+          </Tabs.Content>
+          <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
+            <Chat screenType={screenType} hideControls={hideControls} />
+          </Tabs.Content>
+        </Tabs.Root>
+      )}
+      <IconButton
+        css={{ position: 'absolute', right: '$10', top: '$11' }}
+        onClick={e => {
+          e.stopPropagation();
+          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+            toggleChat();
+          } else {
+            toggleParticipants();
+          }
+        }}
+        data-testid="close_chat"
+      >
+        <CrossIcon />
+      </IconButton>
+    </Flex>
+  );
+});

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import {
   selectLocalPeerID,
   selectPeerMetadata,
@@ -12,8 +12,6 @@ export const useMyMetadata = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   const vanillaStore = useHMSVanillaStore();
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
-  const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);
-  const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back
 
   const update = async updatedFields => {
     try {
@@ -27,28 +25,12 @@ export const useMyMetadata = () => {
   };
 
   const toggleHandRaise = useCallback(async () => {
-    const brbUpdate = !isHandRaised ? false : isBRBOn;
-    const success = await update({
-      isHandRaised: !isHandRaised,
-      isBRBOn: brbUpdate,
-    });
-    if (success) {
-      setBRBOn(brbUpdate);
-      setHandRaised(!isHandRaised);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isHandRaised: !metaData?.isHandRaised, isBRBOn: false });
+  }, [metaData?.isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
-    const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
-    const success = await update({
-      isHandRaised: handRaiseUpdate,
-      isBRBOn: !isBRBOn,
-    });
-    if (success) {
-      setBRBOn(!isBRBOn);
-      setHandRaised(handRaiseUpdate);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isBRBOn: !metaData?.isBRBOn, isHandRaised: false });
+  }, [metaData?.isBRBOn]); //eslint-disable-line
 
   const setPrevRole = async role => {
     await update({
@@ -57,8 +39,8 @@ export const useMyMetadata = () => {
   };
 
   return {
-    isHandRaised,
-    isBRBOn,
+    isHandRaised: !!metaData?.isHandRaised,
+    isBRBOn: !!metaData?.isBRBOn,
     metaData,
     updateMetaData: update,
     toggleHandRaise,

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { Chat } from '../components/Chat/Chat';
-// @ts-ignore: No implicit Any
-import { ParticipantList } from '../components/Footer/ParticipantList';
+import { SidePaneTabs } from '../components/SidePaneTabs';
 // @ts-ignore: No implicit Any
 import { StreamingLanding } from '../components/Streaming/StreamingLanding';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
@@ -32,10 +29,8 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
-  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
-    ViewComponent = <ParticipantList />;
-  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = <Chat screenType={screenType} hideControls={hideControls} />;
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
     ViewComponent = <StreamingLanding />;
   }
@@ -43,6 +38,14 @@ const SidePane = ({
     return null;
   }
 
+  const tileLayout = {
+    hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
+    roundedVideoTile: tileProps?.rounded_video_tile,
+    hideAudioMuteOnTile: tileProps?.hide_audio_mute_on_tile,
+    hideMetadataOnTile: tileProps?.hide_metadata_on_tile,
+    objectFit: tileProps?.video_object_fit,
+  };
+
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
 
   return (
@@ -64,8 +67,7 @@ const SidePane = ({
           width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
-          objectFit="contain"
-          {...tileProps}
+          {...tileLayout}
         />
       )}
       {!!ViewComponent && (

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import {
-  selectIsAllowedToPublish,
+  selectIsLocalVideoEnabled,
   selectIsLocalVideoPluginPresent,
   selectLocalPeerRole,
   selectLocalVideoTrackID,
@@ -23,8 +23,8 @@ export const VirtualBackground = ({
 }) => {
   const pluginRef = useRef(null);
   const hmsActions = useHMSActions();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
   const role = useHMSStore(selectLocalPeerRole);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const [isVBLoading, setIsVBLoading] = useState(false);
   const [isVBSupported, setIsVBSupported] = useState(false);
   const [isVBOn, setIsVBOn] = useState(false);
@@ -69,7 +69,7 @@ export const VirtualBackground = ({
     }
   }
 
-  if (!isAllowedToPublish.video || !isVBSupported) {
+  if (!isVBSupported || !isVideoOn) {
     return null;
   }
   if (asActionTile) {

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts

@@ -29,7 +29,7 @@ export type useFetchRoomLayoutResponse = {
 };
 
 export const useFetchRoomLayout = ({
-  endpoint = 'https://api.100ms.live/v2/layouts/ui',
+  endpoint = '',
   authToken = '',
 }: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
   const [layout, setLayout] = useState<Layout | undefined>(undefined);
@@ -51,7 +51,7 @@ export const useFetchRoomLayout = ({
       }
       isFetchInProgress.current = true;
       try {
-        const resp = await fetchWithRetry(endpoint, {
+        const resp = await fetchWithRetry(endpoint || 'https://api.100ms.live/v2/layouts/ui', {
           headers: {
             Authorization: `Bearer ${authToken}`,
           },

package/dist/VirtualBackground-UM2FOUHQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx", "../src/Prebuilt/plugins/VirtualBackground/vbutils.js"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nimport {\n  selectIsAllowedToPublish,\n  selectIsLocalVideoPluginPresent,\n  selectLocalPeerRole,\n  selectLocalVideoTrackID,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { VirtualBackgroundIcon } from '@100mslive/react-icons';\nimport { ActionTile } from '../../components/MoreSettings/ActionTile';\nimport { Loading } from '../../../Loading';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\nimport { getRandomVirtualBackground } from './vbutils';\n\nexport const VirtualBackground = ({\n  asActionTile = false,\n  onVBClick = () => {\n    return;\n  },\n}) => {\n  const pluginRef = useRef(null);\n  const hmsActions = useHMSActions();\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n  const role = useHMSStore(selectLocalPeerRole);\n  const [isVBLoading, setIsVBLoading] = useState(false);\n  const [isVBSupported, setIsVBSupported] = useState(false);\n  const [isVBOn, setIsVBOn] = useState(false);\n  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);\n  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));\n\n  async function createPlugin() {\n    if (!pluginRef.current) {\n      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');\n      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);\n    }\n  }\n  useEffect(() => {\n    if (!localPeerVideoTrackID) {\n      return;\n    }\n    createPlugin().then(() => {\n      //check support of plugin\n      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);\n      setIsVBSupported(pluginSupport.isSupported);\n    });\n  }, [hmsActions, localPeerVideoTrackID]);\n\n  async function addPlugin() {\n    setIsVBLoading(true);\n    try {\n      await createPlugin();\n      window.HMS.virtualBackground = pluginRef.current;\n      const { background, backgroundType } = getRandomVirtualBackground();\n      await pluginRef.current.setBackground(background, backgroundType);\n      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));\n    } catch (err) {\n      console.error('add virtual background plugin failed', err);\n    }\n    setIsVBLoading(false);\n  }\n\n  async function removePlugin() {\n    if (pluginRef.current) {\n      await hmsActions.removePluginFromVideoTrack(pluginRef.current);\n      pluginRef.current = null;\n    }\n  }\n\n  if (!isAllowedToPublish.video || !isVBSupported) {\n    return null;\n  }\n  if (asActionTile) {\n    return (\n      <ActionTile.Root\n        data-testid=\"virtual_bg_btn\"\n        active={isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          setIsVBOn(!isVBOn);\n          !isVBPresent ? addPlugin() : removePlugin();\n          onVBClick();\n        }}\n      >\n        <VirtualBackgroundIcon />\n        <ActionTile.Title>Virtual Background</ActionTile.Title>\n      </ActionTile.Root>\n    );\n  }\n\n  return (\n    <Tooltip\n      boxCss={{ zIndex: '100' }}\n      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}\n    >\n      <IconButton\n        active={!isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          !isVBPresent ? addPlugin() : removePlugin();\n        }}\n        data-testid=\"virtual_bg_btn\"\n      >\n        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default VirtualBackground;\n", "/* eslint-disable no-case-declarations */\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nexport function getRandomVirtualBackground() {\n  const backgroundList = [\n    {\n      background: HMSVirtualBackgroundTypes.BLUR,\n      backgroundType: HMSVirtualBackgroundTypes.BLUR,\n    },\n  ];\n\n  const images = [\n    'https://www.100ms.live/images/vb-1.jpeg',\n    'https://www.100ms.live/images/vb-2.jpg',\n    'https://www.100ms.live/images/vb-3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.IMAGE,\n  }));\n\n  backgroundList.push(...images);\n\n  /* \n   //TODO: update with a better quality gif.\n  const gifList = [\n    {\n      background: \"https://www.100ms.live/images/vb-1.gif\",\n      backgroundType: HMSVirtualBackgroundTypes.GIF,\n    },\n  ];\n  backgroundList.push(...gifList); \n  */\n\n  const videoList = [\n    'https://www.100ms.live/images/video-1.mp4',\n    'https://www.100ms.live/images/video-2.mp4',\n    'https://www.100ms.live/images/video-5.mp4',\n    'https://www.100ms.live/images/video-7.mp4',\n    'https://www.100ms.live/images/video-8.mp4',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.VIDEO,\n  }));\n  backgroundList.push(...videoList);\n\n  const randomIdx = Math.floor(Math.random() * backgroundList.length);\n  const virtualBackground = backgroundList[randomIdx];\n  switch (virtualBackground.backgroundType) {\n    case HMSVirtualBackgroundTypes.IMAGE:\n      const img = document.createElement('img');\n      img.alt = 'VB';\n      img.src = backgroundList[randomIdx].background;\n      virtualBackground.background = img;\n      return virtualBackground;\n    case HMSVirtualBackgroundTypes.VIDEO:\n      const videoEl = document.createElement('video');\n      videoEl.src = backgroundList[randomIdx].background;\n      virtualBackground.background = videoEl;\n      return virtualBackground;\n    default:\n      return virtualBackground;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["HMSVirtualBackgroundTypes", "HMSVirtualBackgroundTypes"]
-}