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

package/src/Prebuilt/components/Settings/LayoutSettings.jsx

@@ -4,13 +4,13 @@ import { Box, Flex, Slider, Text } from '../../../';
 import SwitchWithLabel from './SwitchWithLabel';
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { settingOverflow } from './common.js';
-import { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';
+import { UI_SETTINGS } from '../../common/constants';
 
 export const LayoutSettings = () => {
   const hmsActions = useHMSActions();
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
-  const [{ isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
+  const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback(
     async isAudioOnlyModeOn => {
       if (isAudioOnlyModeOn) {
@@ -25,16 +25,6 @@ export const LayoutSettings = () => {
 
   return (
     <Box className={settingOverflow()}>
-      <SwitchWithLabel
-        checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,
-          });
-        }}
-        id="activeSpeakerMode"
-        label="Active Speaker Mode"
-      />
       <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
       <SwitchWithLabel
         label="Mirror Local Video"

package/src/Prebuilt/components/Settings/NotificationSettings.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlertOctagonIcon, ChatIcon, ExitIcon, HandIcon, PersonIcon } from '@100mslive/react-icons';
+import { AlertOctagonIcon, HandIcon, PeopleAddIcon, PeopleRemoveIcon } from '@100mslive/react-icons';
 import { Box } from '../../../';
 import SwitchWithLabel from './SwitchWithLabel';
 import { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';
@@ -29,21 +29,15 @@ export const NotificationSettings = () => {
       <NotificationItem
         label="Peer Joined"
         type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}
-        icon={<PersonIcon />}
+        icon={<PeopleAddIcon />}
         checked={subscribedNotifications.PEER_JOINED}
       />
       <NotificationItem
         label="Peer Leave"
         type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}
-        icon={<ExitIcon />}
+        icon={<PeopleRemoveIcon />}
         checked={subscribedNotifications.PEER_LEFT}
       />
-      <NotificationItem
-        label="New Message"
-        type={SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE}
-        icon={<ChatIcon />}
-        checked={subscribedNotifications.NEW_MESSAGE}
-      />
       <NotificationItem
         label="Hand Raised"
         type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { IconButton } from '../../../IconButton';
@@ -10,17 +9,12 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { useHLSViewerRole } from '../AppData/useUISettings';
 import { settingContent, settingsList } from './common.js';
 
-const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
+const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
   const mediaQueryLg = cssConfig.media.md;
   const isMobile = useMedia(mediaQueryLg);
 
-  const hlsViewerRole = useHLSViewerRole();
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isHlsViewer = hlsViewerRole === localPeerRole;
-
   const [showSetting, setShowSetting] = useState(() =>
     settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
   );
@@ -31,10 +25,10 @@ const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
   );
 
   useEffect(() => {
-    if (isHlsViewer) {
+    if (screenType === 'hls_live_streaming') {
       hideSettingByTabName('layout')(true);
     }
-  }, [isHlsViewer, hideSettingByTabName]);
+  }, [screenType, hideSettingByTabName]);
 
   const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');
   const resetSelection = useCallback(() => {

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -76,7 +76,9 @@ export const StatsForNerds = ({ onOpenChange }) => {
               minWidth: 0,
             }}
           >
-            <Label variant="body2">Stats For</Label>
+            <Label variant="body2" css={{ c: '$on_surface_high' }}>
+              Stats For
+            </Label>
             <Dropdown.Root data-testid="dialog_select_Stats For" open={open} onOpenChange={setOpen}>
               <DialogDropdownTrigger
                 title={selectedStat.label || 'Select Stats'}

package/src/Prebuilt/components/TileMenu/TileMenu.jsx

@@ -4,7 +4,6 @@ import {
   selectLocalPeerID,
   selectPeerByID,
   selectPermissions,
-  selectTemplateAppData,
   selectTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
@@ -19,28 +18,29 @@ import { StyledMenuTile } from '../../../TileMenu';
 import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST } from '../../common/constants';
 
 /**
  * Taking peerID as peer won't necesarilly have tracks
  */
-const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, canMinimise }) => {
+const TileMenu = ({
+  audioTrackID,
+  videoTrackID,
+  peerID,
+  isScreenshare = false,
+  canMinimise,
+  enableSpotlightingPeer = true,
+}) => {
   const [open, setOpen] = useState(false);
   const { theme } = useTheme();
 
   const localPeerID = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerID === peerID;
-  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
+  const { removeOthers } = useHMSStore(selectPermissions);
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
-  const showSpotlight = changeRole;
+  const showSpotlight = enableSpotlightingPeer;
 
   const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
-  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
-  const isInset = uiMode === 'inset';
-
-  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
-  const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset;
+  const showPinAction = audioTrackID || (videoTrackID && isPrimaryVideoTrack);
 
   const track = useHMSStore(selectTrackByID(videoTrackID));
   const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
@@ -53,9 +53,6 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
     return null;
   }
 
-  if (isInset && isLocal) {
-    return null;
-  }
   const openNameChangeModal = () => setShowNameChangeModal(true);
 
   const props = {
@@ -76,7 +73,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
       <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
         <StyledMenuTile.Trigger
           data-testid="participant_menu_btn"
-          css={{ bg: `${theme.colors.background_dim.value}A3` }}
+          css={{ bg: `${theme.colors.background_dim.value}A3`, p: '$2', w: 'unset', h: 'unset' }}
           onClick={e => e.stopPropagation()}
           className={isMobile ? '__cancel-drag-event' : ''}
         >
@@ -114,13 +111,13 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
                   <CrossIcon />
                 </Sheet.Close>
               </Flex>
-              <Box css={{ px: '$8', pb: '$10' }}>
+              <Box css={{ px: '$8', pb: '$8', maxHeight: '80vh', overflowY: 'auto' }}>
                 <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
               </Box>
             </Sheet.Content>
           </Sheet.Root>
         ) : (
-          <StyledMenuTile.Content side="top" align="end">
+          <StyledMenuTile.Content side="top" align="end" css={{ maxHeight: '$80', overflowY: 'auto' }}>
             <TileMenuContent {...props} />
           </StyledMenuTile.Content>
         )}
@@ -130,4 +127,6 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
   );
 };
 
+export { isSameTile } from './TileMenuContent';
+
 export default TileMenu;

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

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectPermissions,
   selectSessionStore,
@@ -24,14 +25,14 @@ import {
 import { Box, Flex } from '../../../Layout';
 import { Slider } from '../../../Slider';
 import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
+import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
 
-const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
+export const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
   trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
 
 const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
@@ -63,7 +64,7 @@ const SpotlightActions = ({
         onSpotLightClick();
       }}
     >
-      <StarIcon />
+      <StarIcon height={20} width={20} />
       <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
     </StyledMenuTile.ItemButton>
   );
@@ -84,7 +85,7 @@ const PinActions = ({ audioTrackID, videoTrackID }) => {
         css={spacingCSS}
         onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
       >
-        <PinIcon />
+        <PinIcon height={20} width={20} />
         <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
       </StyledMenuTile.ItemButton>
     </>
@@ -97,7 +98,7 @@ const MinimiseInset = () => {
   return (
     <>
       <StyledMenuTile.ItemButton css={spacingCSS} onClick={() => setMinimised(!minimised)}>
-        <ShrinkIcon />
+        <ShrinkIcon height={20} width={20} />
         <span>{minimised ? 'Show' : 'Minimise'} your video</span>
       </StyledMenuTile.ItemButton>
     </>
@@ -138,11 +139,18 @@ const SimulcastLayers = ({ trackId }) => {
                 textTransform: 'capitalize',
                 mr: '$2',
                 fontWeight: track.preferredLayer === layer.layer ? '$semiBold' : '$regular',
+                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
               }}
             >
               {layer.layer}
             </Text>
-            <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
+            <Text
+              as="span"
+              variant="xs"
+              css={{
+                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
+              }}
+            >
               {layer.resolution.width}x{layer.resolution.height}
             </Text>
           </StyledMenuTile.ItemButton>
@@ -204,7 +212,7 @@ export const TileMenuContent = props => {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
   });
 
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
+  const isMobile = useMedia(cssConfig.media.md);
 
   return isLocal ? (
     (showPinAction || canMinimise) && (
@@ -212,19 +220,17 @@ export const TileMenuContent = props => {
         {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
         {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
         {canMinimise && <MinimiseInset />}
-        {isChangeNameEnabled ? (
-          <StyledMenuTile.ItemButton
-            onClick={() => {
-              openNameChangeModal();
-              closeSheetOnClick();
-            }}
-          >
-            <PencilIcon />
-            <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-              Change Name
-            </Text>
-          </StyledMenuTile.ItemButton>
-        ) : null}
+        <StyledMenuTile.ItemButton
+          onClick={() => {
+            openNameChangeModal();
+            closeSheetOnClick();
+          }}
+        >
+          <PencilIcon height={20} width={20} />
+          <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
+            Change Name
+          </Text>
+        </StyledMenuTile.ItemButton>
       </>
     )
   ) : (
@@ -238,7 +244,7 @@ export const TileMenuContent = props => {
           }}
           data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
         >
-          {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
+          {isVideoEnabled ? <VideoOnIcon height={20} width={20} /> : <VideoOffIcon height={20} width={20} />}
           <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
@@ -252,7 +258,7 @@ export const TileMenuContent = props => {
           }}
           data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
         >
-          {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
+          {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
           <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
@@ -260,7 +266,7 @@ export const TileMenuContent = props => {
       {audioTrackID ? (
         <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
           <Flex align="center" gap={1}>
-            <SpeakerIcon />
+            <SpeakerIcon height={20} width={20} />
             <Box as="span" css={{ ml: '$4' }}>
               Volume ({volume})
             </Box>
@@ -276,7 +282,7 @@ export const TileMenuContent = props => {
         </>
       )}
 
-      <SimulcastLayers trackId={videoTrackID} />
+      {isMobile ? null : <SimulcastLayers trackId={videoTrackID} />}
 
       {removeOthers ? (
         <StyledMenuTile.RemoveItem
@@ -291,7 +297,7 @@ export const TileMenuContent = props => {
           }}
           data-testid="remove_participant_btn"
         >
-          <RemoveUserIcon />
+          <RemoveUserIcon height={20} width={20} />
           <span>Remove Participant</span>
         </StyledMenuTile.RemoveItem>
       ) : null}
@@ -304,7 +310,7 @@ export const TileMenuContent = props => {
           }}
           css={spacingCSS}
         >
-          <ShareScreenIcon />
+          <ShareScreenIcon height={20} width={20} />
           <span>Stop Screenshare</span>
         </StyledMenuTile.RemoveItem>
       ) : null}

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -1,6 +1,15 @@
-import React from 'react';
-import { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';
+import React, { useCallback } from 'react';
+import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  ChatUnreadIcon,
+  ConnectivityIcon,
+  HandIcon,
+  PeopleAddIcon,
+  PeopleRemoveIcon,
+  PoorConnectivityIcon,
+} from '@100mslive/react-icons';
 import { Button } from '../../../Button';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -18,26 +27,57 @@ const ChatAction = React.forwardRef((_, ref) => {
     </Button>
   );
 });
+
+const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true }, ref) => {
+  const hmsActions = useHMSActions();
+  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const peer = useHMSStore(selectPeerByID(id));
+  const layout = useRoomLayout();
+  const {
+    bring_to_stage_label,
+    on_stage_role,
+    off_stage_roles = [],
+  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
+
+  const onClickHandler = useCallback(() => {
+    if (isSingleHandRaise) {
+      hmsActions.changeRoleOfPeer(id, on_stage_role);
+    } else {
+      !isParticipantsOpen && toggleSidepane();
+    }
+  }, [hmsActions, id, isParticipantsOpen, isSingleHandRaise, on_stage_role, toggleSidepane]);
+
+  // show nothing if handRaise is single and peer role is not hls
+  if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
+    return null;
+  }
+  return (
+    <Button outlined as="div" variant="standard" css={{ w: 'max-content' }} onClick={onClickHandler} ref={ref}>
+      {isSingleHandRaise ? bring_to_stage_label : 'View'}
+    </Button>
+  );
+});
 export const ToastConfig = {
   PEER_LIST: {
     single: function (notification) {
       if (notification.data.length === 1) {
         return {
           title: `${notification.data[0]?.name} joined`,
-          icon: <PersonIcon />,
+          icon: <PeopleAddIcon />,
         };
       }
       return {
         title: `${notification.data[notification.data.length - 1]?.name} and ${
           notification.data.length - 1
         } others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
     multiple: notifications => {
       return {
         title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
   },
@@ -45,13 +85,13 @@ export const ToastConfig = {
     single: function (notification) {
       return {
         title: `${notification.data?.name} joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
     multiple: function (notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
   },
@@ -59,29 +99,32 @@ export const ToastConfig = {
     single: function (notification) {
       return {
         title: `${notification.data?.name} left`,
-        icon: <PersonIcon />,
+        icon: <PeopleRemoveIcon />,
       };
     },
     multiple: function (notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-        icon: <PersonIcon />,
+        icon: <PeopleRemoveIcon />,
       };
     },
   },
-  METADATA_UPDATED: {
+  RAISE_HAND: {
     single: notification => {
       return {
         title: `${notification.data?.name} raised hand`,
         icon: <HandIcon />,
+        action: <HandRaiseAction id={notification.data?.id} />,
       };
     },
     multiple: notifications => {
+      const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
-        title: `${notifications[notifications.length - 1].data?.name} and ${
-          notifications.length - 1
-        } others raised hand`,
+        title: `${notifications[notifications.length - 1].data?.name} ${
+          count > 1 ? `${count} and others` : ''
+        } raised hand`,
         icon: <HandIcon />,
+        action: <HandRaiseAction isSingleHandRaise={false} />,
       };
     },
   },
@@ -89,14 +132,14 @@ export const ToastConfig = {
     single: notification => {
       return {
         title: `New message from ${notification.data?.senderName}`,
-        icon: <ChatIcon />,
+        icon: <ChatUnreadIcon />,
         action: <ChatAction />,
       };
     },
     multiple: notifications => {
       return {
         title: `${notifications.length} new messages`,
-        icon: <ChatIcon />,
+        icon: <ChatUnreadIcon />,
         action: <ChatAction />,
       };
     },

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

@@ -0,0 +1,65 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
+import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { Flex } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+import { InsetTile } from '../InsetTile';
+import { Pagination } from '../Pagination';
+import { Grid } from './Grid';
+import { LayoutProps } from './interface';
+// @ts-ignore: No implicit Any
+import { useUISettings } from '../AppData/useUISettings';
+import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
+// @ts-ignore: No implicit Any
+import { UI_SETTINGS } from '../../common/constants';
+
+export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const isMobile = useMedia(cssConfig.media.md);
+  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
+  let pageList = usePagesWithTiles({
+    peers,
+    maxTileCount,
+  });
+  // useMemo is needed to prevent recursion as new array is created for localPeer
+  const inputPeers = useMemo(
+    () => (pageList.length === 0 ? (localPeer ? [localPeer] : []) : peers),
+    [pageList.length, peers, localPeer],
+  );
+  // Pass local peer to main grid if no other peer has tiles
+  pageList = usePagesWithTiles({
+    peers: inputPeers,
+    maxTileCount,
+  });
+  const { ref, pagesWithTiles } = useTileLayout({
+    pageList,
+    maxTileCount,
+    edgeToEdge,
+  });
+  const [page, setPage] = useState(0);
+  const pageSize = pagesWithTiles[0]?.length || 0;
+
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+
+  return (
+    <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>
+      <Grid tiles={pagesWithTiles[page]} ref={ref} edgeToEdge={edgeToEdge} />
+      {!edgeToEdge && (
+        <Pagination
+          page={page}
+          onPageChange={page => {
+            setPage(page);
+            onPageChange?.(page);
+          }}
+          numPages={pagesWithTiles.length}
+        />
+      )}
+      {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
+    </Flex>
+  );
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+import { Box } from '../../../Layout';
+// @ts-ignore: No implicit Any
+import VideoTile from '../VideoTile';
+import { useVideoTileContext } from '../hooks/useVideoTileLayout';
+
+export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>(
+  ({ tiles, edgeToEdge }, ref) => {
+    const videoTileProps = useVideoTileContext();
+    return (
+      <Box
+        ref={ref}
+        css={{
+          flex: '1 1 0',
+          gap: '$4',
+          display: 'flex',
+          placeContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexFlow: 'row wrap',
+          minHeight: 0,
+          '@md': { gap: edgeToEdge ? 0 : '$4' },
+        }}
+      >
+        {tiles?.map(tile => {
+          return (
+            <VideoTile
+              key={tile.track?.id || tile.peer?.id}
+              width={tile.width}
+              height={tile.height}
+              peerId={tile.peer?.id}
+              trackId={tile.track?.id}
+              rootCSS={{ padding: 0 }}
+              objectFit="contain"
+              {...videoTileProps}
+            />
+          );
+        })}
+      </Box>
+    );
+  },
+);