@100mslive/roomkit-react 0.2.3-alpha.3 → 0.2.4-alpha.0

package/src/Prebuilt/components/TileMenu/{TileMenu.jsx → TileMenu.tsx}

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import {
+  HMSVideoTrack,
   selectLocalPeerID,
   selectPeerByID,
   selectPermissions,
@@ -30,20 +31,27 @@ const TileMenu = ({
   isScreenshare = false,
   canMinimise,
   enableSpotlightingPeer = true,
+}: {
+  audioTrackID: string;
+  videoTrackID: string;
+  peerID: string;
+  isScreenshare?: boolean;
+  canMinimise?: boolean;
+  enableSpotlightingPeer?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const { theme } = useTheme();
 
   const localPeerID = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore(selectPermissions);
+  const { removeOthers } = useHMSStore(selectPermissions) || {};
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
   const showSpotlight = enableSpotlightingPeer;
 
   const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
-  const showPinAction = audioTrackID || (videoTrackID && isPrimaryVideoTrack);
+  const showPinAction = !!(audioTrackID || (videoTrackID && isPrimaryVideoTrack));
 
-  const track = useHMSStore(selectTrackByID(videoTrackID));
+  const track = useHMSStore(selectTrackByID(videoTrackID)) as HMSVideoTrack;
   const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
   const isMobile = useMedia(cssConfig.media.md);
   const peer = useHMSStore(selectPeerByID(peerID));
@@ -99,7 +107,7 @@ const TileMenu = ({
               >
                 <Box>
                   <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                    {peer.name}
+                    {peer?.name}
                     {isLocal ? ` (You)` : null}
                   </Text>
                   {peer?.roleName ? (

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -47,9 +47,9 @@ export const isSameTile = ({
   audioTrackID,
 }: {
   trackId: HMSTrackID;
-  videoTrackID: string;
-  audioTrackID: string;
-}) => trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
+  videoTrackID?: string;
+  audioTrackID?: string;
+}) => !!trackId && ((!!videoTrackID && videoTrackID === trackId) || (!!audioTrackID && audioTrackID === trackId));
 
 const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
 
@@ -232,9 +232,9 @@ export const TileMenuContent = ({
   showSpotlight: boolean;
   showPinAction: boolean;
   peerID: string;
-  canMinimise: boolean;
-  closeSheetOnClick: () => void;
-  openNameChangeModal: () => void;
+  canMinimise?: boolean;
+  closeSheetOnClick?: () => void;
+  openNameChangeModal?: () => void;
 }) => {
   const actions = useHMSActions();
   const dragClassName = getDragClassName();
@@ -252,8 +252,8 @@ export const TileMenuContent = ({
 
   const isMobile = useMedia(cssConfig.media.md);
 
-  return isLocal ? (
-    (showPinAction || canMinimise || !userName || showSpotlight) && (
+  if (isLocal) {
+    return showPinAction || canMinimise || !userName || showSpotlight ? (
       <>
         {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
         {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
@@ -273,8 +273,10 @@ export const TileMenuContent = ({
           </StyledMenuTile.ItemButton>
         )}
       </>
-    )
-  ) : (
+    ) : null;
+  }
+
+  return (
     <>
       {toggleVideo ? (
         <StyledMenuTile.ItemButton

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

@@ -6,14 +6,20 @@ import { CSS } from '../../../Theme';
 import VideoTile from '../VideoTile';
 import { useVideoTileContext } from '../hooks/useVideoTileLayout';
 
-const Root = ({ children, edgeToEdge }: React.PropsWithChildren<{ edgeToEdge?: boolean }>) => (
-  <Flex
-    direction="column"
-    css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}
-  >
-    {children}
-  </Flex>
-);
+const Root = ({
+  children,
+  edgeToEdge,
+  hasSidebar,
+}: React.PropsWithChildren<{ edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
+  return (
+    <Flex
+      direction={hasSidebar ? 'row' : 'column'}
+      css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}
+    >
+      {children}
+    </Flex>
+  );
+};
 
 const ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {
   return (
@@ -27,20 +33,29 @@ const SecondarySection = ({
   tiles,
   children,
   edgeToEdge,
-}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>) => {
+  hasSidebar,
+}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
   const tileLayoutProps = useVideoTileContext();
   if (!tiles?.length) {
     return null;
   }
+  const gridStyles = hasSidebar
+    ? {
+        gridTemplateColumns: '1fr',
+        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 135px))`,
+      }
+    : {
+        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',
+        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
+      };
   return (
     <Box
       css={{
         display: 'grid',
-        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',
-        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
-        margin: '0 auto',
-        gap: '$2 $4',
+        margin: 'auto',
+        gap: hasSidebar ? '$8' : '$2 $4',
         placeItems: 'center',
+        ...gridStyles,
         '@md': { gap: edgeToEdge ? 0 : '$4' },
       }}
     >
@@ -62,7 +77,7 @@ const SecondarySection = ({
           />
         );
       })}
-      <Box css={{ gridColumn: `1/span ${tiles.length}` }}>{children}</Box>
+      {children && <Box css={{ gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` }}>{children}</Box>}
     </Box>
   );
 };

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

@@ -3,11 +3,15 @@ import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { SecondaryTiles } from '../SecondaryTiles';
+import { LayoutMode } from '../Settings/LayoutSettings';
 import { Grid } from './Grid';
 import { LayoutProps } from './interface';
 import { ProminenceLayout } from './ProminenceLayout';
+// @ts-ignore: No implicit Any
+import { useUISettings } from '../AppData/useUISettings';
 import { useRoleProminencePeers } from '../hooks/useRoleProminencePeers';
 import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
+import { UI_SETTINGS } from '../../common/constants';
 
 export function RoleProminence({
   isInsetEnabled = false,
@@ -19,6 +23,7 @@ export function RoleProminence({
 }: LayoutProps) {
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
+  const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -38,7 +43,7 @@ export function RoleProminence({
   }, [pageSize, onPageSize]);
 
   return (
-    <ProminenceLayout.Root>
+    <ProminenceLayout.Root hasSidebar={layoutMode === LayoutMode.SIDEBAR}>
       <ProminenceLayout.ProminentSection>
         <Grid ref={ref} tiles={pagesWithTiles[page]} />
       </ProminenceLayout.ProminentSection>
@@ -52,7 +57,12 @@ export function RoleProminence({
           numPages={pagesWithTiles.length}
         />
       )}
-      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />
+      <SecondaryTiles
+        peers={layoutMode === LayoutMode.SPOTLIGHT ? [] : secondaryPeers}
+        isInsetEnabled={isInsetEnabled}
+        edgeToEdge={edgeToEdge}
+        hasSidebar={layoutMode === LayoutMode.SIDEBAR}
+      />
       {isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && <InsetTile />}
     </ProminenceLayout.Root>
   );

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

@@ -2,30 +2,43 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectPeersScreenSharing, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig } from '../../../Theme';
+import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 // @ts-ignore: No implicit Any
 import ScreenshareTile from '../ScreenshareTile';
 import { SecondaryTiles } from '../SecondaryTiles';
+import { LayoutMode } from '../Settings/LayoutSettings';
 import { LayoutProps } from './interface';
 import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { APP_DATA } from '../../common/constants';
+import { useSetAppDataByKey, useSetUiSettings } from '../AppData/useUISettings';
+import { APP_DATA, UI_SETTINGS } from '../../common/constants';
 
 export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
   const peersSharing = useHMSStore(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const [page, setPage] = useState(0);
+  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
   const activeSharePeer = peersSharing[page];
   const isMobile = useMedia(cssConfig.media.md);
+  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo(() => {
-    if (isMobile) {
+    if (layoutMode === LayoutMode.SPOTLIGHT) {
+      return [];
+    }
+    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
       return activeSharePeer
         ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile
         : peers;
     }
     return peers.filter(p => p.id !== activeSharePeer?.id);
-  }, [activeSharePeer, peers, isMobile]);
+  }, [activeSharePeer, peers, isMobile, layoutMode]);
+
+  useEffect(() => {
+    if (layoutMode !== LayoutMode.SIDEBAR) {
+      setLayoutMode(LayoutMode.SIDEBAR);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
     setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
     return () => {
@@ -34,7 +47,7 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
 
   return (
-    <ProminenceLayout.Root edgeToEdge={edgeToEdge}>
+    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
       <ProminenceLayout.ProminentSection>
         <ScreenshareTile peerId={peersSharing[page]?.id} />
         {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}
@@ -44,7 +57,9 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
         onPageChange={onPageChange}
         onPageSize={onPageSize}
         edgeToEdge={edgeToEdge}
+        hasSidebar={hasSidebar}
       />
+      {layoutMode === LayoutMode.SPOTLIGHT && activeSharePeer && <InsetTile peerId={activeSharePeer?.id} />}
     </ProminenceLayout.Root>
   );
 };

package/src/Prebuilt/components/VideoLayouts/interface.ts

@@ -4,6 +4,7 @@ export interface LayoutProps {
   isInsetEnabled?: boolean;
   edgeToEdge?: boolean;
   prominentRoles?: string[];
+  hasSidebar?: boolean;
   peers: HMSPeer[];
   onPageChange?: (page: number) => void;
   onPageSize?: (size: number) => void;

package/src/Prebuilt/components/{VideoTile.jsx → VideoTile.tsx}

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useMeasure } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -7,7 +7,6 @@ import {
   selectLocalPeerID,
   selectPeerMetadata,
   selectPeerNameByID,
-  selectSessionStore,
   selectVideoTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
@@ -18,16 +17,41 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { AudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
 import { VideoTileStats } from '../../Stats';
+import { CSS } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
+// @ts-ignore: No implicit Any
 import { getVideoTileLabel } from './peerTileUtils';
+// @ts-ignore: No implicit Any
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { calculateAvatarAndAttribBoxSize } from '../common/utils';
-import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
+import { APP_DATA, UI_SETTINGS } from '../common/constants';
+
+const PeerMetadata = ({ peerId, size }: { peerId: string; size?: 'medium' | 'small' }) => {
+  const metaData = useHMSStore(selectPeerMetadata(peerId));
+  const isBRB = metaData?.isBRBOn || false;
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
+
+  return (
+    <>
+      {isHandRaised ? (
+        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
+          <HandIcon width={24} height={24} />
+        </StyledVideoTile.AttributeBox>
+      ) : null}
+      {isBRB ? (
+        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
+          <BrbTileIcon width={22} height={22} />
+        </StyledVideoTile.AttributeBox>
+      ) : null}
+    </>
+  );
+};
 
 const Tile = ({
-  peerId,
-  trackId,
+  peerId = '',
+  trackId = '',
   width,
   height,
   objectFit = 'cover',
@@ -40,6 +64,21 @@ const Tile = ({
   roundedVideoTile = true,
   hideAudioMuteOnTile = false,
   hideMetadataOnTile = false,
+}: {
+  peerId?: string;
+  trackId?: string;
+  width?: string | number;
+  height?: string | number;
+  objectFit?: string;
+  canMinimise?: boolean;
+  isDragabble?: boolean;
+  rootCSS?: CSS;
+  containerCSS?: CSS;
+  enableSpotlightingPeer?: boolean;
+  hideParticipantNameOnTile?: boolean;
+  roundedVideoTile?: boolean;
+  hideAudioMuteOnTile?: boolean;
+  hideMetadataOnTile?: boolean;
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -60,17 +99,16 @@ const Tile = ({
     videoTrackID: track?.id,
     audioTrackID: audioTrack?.id,
   });
-  const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const label = getVideoTileLabel({
     peerName,
     track,
     isLocal,
   });
-  const onHoverHandler = useCallback(event => {
+  const onHoverHandler = useCallback((event: React.MouseEvent) => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
 
-  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure();
+  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure<HTMLDivElement>();
 
   const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
 
@@ -124,17 +162,15 @@ const Tile = ({
                   <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
                 </StyledVideoTile.AvatarContainer>
               ) : null}
-
-              {!hideAudioMuteOnTile ? (
-                isAudioMuted ? (
-                  <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
-                    <MicOffIcon />
-                  </StyledVideoTile.AudioIndicator>
-                ) : (
-                  <StyledVideoTile.AudioIndicator size={attribBoxSize}>
-                    <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
-                  </StyledVideoTile.AudioIndicator>
-                )
+              {!hideAudioMuteOnTile && isAudioMuted ? (
+                <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
+                  <MicOffIcon />
+                </StyledVideoTile.AudioIndicator>
+              ) : null}
+              {!hideAudioMuteOnTile && !isAudioMuted ? (
+                <StyledVideoTile.AudioIndicator size={attribBoxSize}>
+                  <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
+                </StyledVideoTile.AudioIndicator>
               ) : null}
               {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
             </>
@@ -142,8 +178,8 @@ const Tile = ({
           {isMouseHovered || (isDragabble && navigator.maxTouchPoints > 0) ? (
             <TileMenu
               peerID={peerId}
-              audioTrackID={audioTrack?.id}
-              videoTrackID={track?.id}
+              audioTrackID={audioTrack?.id || ''}
+              videoTrackID={track?.id || ''}
               canMinimise={canMinimise}
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
@@ -152,11 +188,9 @@ const Tile = ({
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
             name={label}
-            isTile
             peerId={peerId}
             width={width}
             pinned={pinned}
-            spotlighted={spotlighted}
           />
         </StyledVideoTile.Container>
       ) : null}
@@ -164,27 +198,6 @@ const Tile = ({
   );
 };
 
-const PeerMetadata = ({ peerId, size }) => {
-  const metaData = useHMSStore(selectPeerMetadata(peerId));
-  const isBRB = metaData?.isBRBOn || false;
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
-
-  return (
-    <Fragment>
-      {isHandRaised ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
-          <HandIcon width={24} height={24} />
-        </StyledVideoTile.AttributeBox>
-      ) : null}
-      {isBRB ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
-          <BrbTileIcon width={22} height={22} />
-        </StyledVideoTile.AttributeBox>
-      ) : null}
-    </Fragment>
-  );
-};
-
 const VideoTile = React.memo(Tile);
 
 export default VideoTile;

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

@@ -13,7 +13,7 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { BlurPersonHighIcon, CloseIcon, CrossCircleIcon } from '@100mslive/react-icons';
+import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
 import { Box, Flex, Slider, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
@@ -90,7 +90,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
           css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}
           onClick={toggleVB}
         >
-          <CloseIcon />
+          <CrossIcon />
         </Box>
       </Flex>
 

package/src/Prebuilt/components/hooks/{useDropdownList.jsx → useDropdownList.ts}

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+// @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
-export const useDropdownList = ({ name, open }) => {
+export const useDropdownList = ({ name, open }: { name: string; open: boolean }) => {
   const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
 
   useEffect(() => {

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -92,7 +92,7 @@ export function ShareScreenOptions() {
             >
               <IconButton
                 as="div"
-                onClick={() => toggleScreenShare()}
+                onClick={toggleScreenShare}
                 css={{
                   p: '$6',
                   display: 'flex',

package/src/Prebuilt/layouts/HLSView.jsx

@@ -13,7 +13,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { ColoredHandIcon, ExpandIcon, PlayIcon, RadioIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { ColoredHandIcon, ExpandIcon, GoLiveIcon, PlayIcon, ShrinkIcon } from '@100mslive/react-icons';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
 import { FullScreenButton } from '../components/HMSVideo/FullscreenButton';
@@ -449,7 +449,7 @@ const HLSView = () => {
       ) : (
         <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
           <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
-            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <RadioIcon height={56} width={56} />}
+            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
           </Flex>
           <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
             {streamEnded ? 'Stream has ended' : 'Stream yet to start'}

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { Polls } from '../components/Polls/Polls';
+import { LayoutMode } from '../components/Settings/LayoutSettings';
 import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 // @ts-ignore: No implicit Any
@@ -12,12 +13,14 @@ import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 // @ts-ignore: No implicit Any
 import { useSidepaneReset } from '../components/AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { useUISettings } from '../components/AppData/useUISettings';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { translateAcross } from '../../utils';
-import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
+import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
 
 const SidePane = ({
   tileProps,
@@ -32,6 +35,7 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
+  const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
 
   const backgroundMedia = preview_elements?.virtual_background?.background_media?.length
     ? preview_elements?.virtual_background?.background_media
@@ -55,10 +59,9 @@ const SidePane = ({
     };
   }, [resetSidePane]);
 
-  if (!ViewComponent && !trackId) {
+  if (!ViewComponent && (!trackId || layoutMode !== LayoutMode.GALLERY)) {
     return null;
   }
-
   const tileLayout = {
     hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
     roundedVideoTile: tileProps?.rounded_video_tile,
@@ -82,7 +85,7 @@ const SidePane = ({
         '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
       }}
     >
-      {trackId && (
+      {trackId && layoutMode === LayoutMode.GALLERY && (
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
@@ -118,6 +121,7 @@ const SidePane = ({
             },
             '@md': {
               p: '$6 $8',
+              h: 'auto',
               pb: mwebStreamingChat ? '$20' : '$12',
               borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
               borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -106,7 +106,7 @@ export const VideoStreamingSection = ({
         }}
       >
         {ViewComponent}
-        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip' }}>
+        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip', '&:empty': { display: 'none' } }}>
           <SidePane
             screenType={screenType}
             // @ts-ignore

package/src/VideoTile/StyledVideoTile.tsx

@@ -94,11 +94,11 @@ const AttributeBox = styled('div', {
 const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
 
 const FullScreenButton = styled('button', {
-  width: '2.25rem',
-  height: '2.25rem',
+  height: '$14',
+  p: '$2 $4',
   color: '$on_surface_high',
-  borderRadius: '$round',
-  backgroundColor: '$surface_default',
+  borderRadius: '$1',
+  border: 'none',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',