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

package/src/Prebuilt/components/Playlist/Playlist.jsx

@@ -5,9 +5,7 @@ import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { AudioPlaylistControls } from './PlaylistControls';
 import { PlaylistItem } from './PlaylistItem';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
 import { usePlaylist } from '../hooks/usePlaylist';
-import { FEATURE_LIST } from '../../common/constants';
 
 const BrowseAndPlayFromLocal = ({ type, actions }) => {
   return (
@@ -44,10 +42,7 @@ export const Playlist = ({ type }) => {
   const [open, setOpen] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const isFeatureEnabled = useIsFeatureEnabled(
-    isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST,
-  );
-  if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) {
+  if (!isAllowedToPublish.screen || playlist.length === 0) {
     return null;
   }
 

package/src/Prebuilt/components/PostLeave.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { ExitIcon } from '@100mslive/react-icons';
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
@@ -7,14 +7,14 @@ import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { Header } from './Header';
-import { useNavigation } from './hooks/useNavigation';
+import { useRoomLayoutPreviewScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
-import { getRoutePrefix } from '../common/utils';
 import { textEllipsis } from '../../utils';
 
 const PostLeave = () => {
-  const navigate = useNavigation();
-  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { roomCode } = useHMSPrebuiltContext();
   const { roomId, role } = useParams();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return (
@@ -32,7 +32,7 @@ const PostLeave = () => {
           👋
         </Text>
         <Text variant="h4" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>
-          You left the {getRoutePrefix() ? 'stream' : 'room'}
+          You left the room
         </Text>
         <Text
           variant="body1"
@@ -57,7 +57,7 @@ const PostLeave = () => {
           </Text>
           <Button
             onClick={() => {
-              let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
+              let redirectUrl = `${isPreviewScreenEnabled ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
               if (role && roomId) redirectUrl += '/' + role;
               navigate(redirectUrl);
               ToastManager.clearAllToast();

package/src/Prebuilt/components/Preview/{PreviewContainer.jsx → PreviewContainer.tsx}

@@ -1,20 +1,23 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
-import { Flex } from '../../../';
+import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
-import SidePane from '../../layouts/SidePane';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import FullPageProgress from '../FullPageProgress';
+// @ts-ignore: No implicit Any
 import PreviewJoin from './PreviewJoin';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useAuthToken } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
-import { useSkipPreview } from '../hooks/useSkipPreview';
+// @ts-ignore: No implicit Any
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
-  const navigate = useNavigation();
-  const skipPreview = useSkipPreview();
+  const navigate = useNavigate();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
@@ -38,17 +41,15 @@ const PreviewContainer = () => {
         align="center"
       >
         {authToken && Object.keys(previewHeader).length > 0 ? (
-          <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole} onJoin={onJoin} />
+          <PreviewJoin
+            initialName={initialName}
+            skipPreview={skipPreview}
+            asRole={previewAsRole ?? undefined}
+            onJoin={onJoin}
+          />
         ) : (
           <FullPageProgress />
         )}
-        <SidePane
-          css={{
-            position: 'unset',
-            mr: '$10',
-            '@lg': { position: 'fixed', mr: '$0' },
-          }}
-        />
       </Flex>
     </Flex>
   );

package/src/Prebuilt/components/Preview/{PreviewForm.jsx → PreviewForm.tsx}

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useMedia } from 'react-use';
-import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
+import { useRecordingStreaming } from '@100mslive/react-sdk';
 import { RadioIcon } from '@100mslive/react-icons';
 import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import { PreviewSettings } from './PreviewJoin';
-import { useShowStreamingUI } from '../../common/hooks';
 
 const PreviewForm = ({
   name,
@@ -14,18 +15,22 @@ const PreviewForm = ({
   enableJoin,
   cannotPublishVideo = false,
   cannotPublishAudio = false,
+}: {
+  name: string;
+  onChange: (name: string) => void;
+  onJoin: () => void;
+  enableJoin: boolean;
+  cannotPublishVideo: boolean;
+  cannotPublishAudio: boolean;
 }) => {
-  const formSubmit = e => {
+  const formSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
   };
-  const mediaQueryLg = cssConfig.media.md;
-  const isMobile = useMedia(mediaQueryLg);
+  const isMobile = useMedia(cssConfig.media.md);
   const { isHLSRunning } = useRecordingStreaming();
-  const permissions = useHMSStore(selectPermissions);
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showStreamingUI = useShowStreamingUI();
-  const showGoLive = showStreamingUI && !isHLSRunning && permissions?.hlsStreaming;
+  const showGoLive = joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
 
   return (
     <Form
@@ -45,6 +50,9 @@ const PreviewForm = ({
           onKeyDown={e => {
             if (e.key === 'Enter' && name.trim().length > 0) {
               e.preventDefault();
+              if (isMobile) {
+                return;
+              }
               onJoin();
             }
           }}

package/src/Prebuilt/components/Preview/{PreviewJoin.jsx → PreviewJoin.tsx}

@@ -1,4 +1,5 @@
 import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectIsLocalVideoEnabled,
@@ -12,22 +13,37 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, useBorderAudioLevel, Video } from '../../../';
+import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
+// @ts-ignore: No implicit Any
 import Chip from '../Chip';
+// @ts-ignore: No implicit Any
 import TileConnection from '../Connection/TileConnection';
+// @ts-ignore: No implicit Any
 import FullPageProgress from '../FullPageProgress';
+// @ts-ignore: No implicit Any
 import { Logo } from '../Header/HeaderComponents';
+// @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
+// @ts-ignore: No implicit Any
+import { AudioLevel } from '../VideoTile';
+// @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
+// @ts-ignore: No implicit Any
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+// @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
+// @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
+// @ts-ignore: No implicit Any
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 const getParticipantChipContent = (peerCount = 0) => {
@@ -38,7 +54,17 @@ const getParticipantChipContent = (peerCount = 0) => {
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
 };
 
-const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
+const PreviewJoin = ({
+  onJoin,
+  skipPreview,
+  initialName,
+  asRole,
+}: {
+  onJoin: () => void;
+  skipPreview?: boolean;
+  initialName?: string;
+  asRole?: string;
+}) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(
     UserPreferencesKeys.PREVIEW,
     defaultPreviewPreference,
@@ -46,7 +72,7 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
   const { isStreamingOn } = useRecordingStreaming();
   const authToken = useAuthToken();
   const [name, setName] = useState(initialName || previewPreference.name);
-  const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } = useAVToggle();
+  const { toggleAudio, toggleVideo } = useAVToggle();
   const [previewError, setPreviewError] = useState(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants();
@@ -72,12 +98,10 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
       name,
-      isAudioMuted: !isLocalAudioEnabled,
-      isVideoMuted: !isLocalVideoEnabled,
     });
     join();
     onJoin && onJoin();
-  }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);
+  }, [join, name, setPreviewPreference, onJoin]);
   const roomLayout = useRoomLayout();
 
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
@@ -143,11 +167,7 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
         </Flex>
       ) : null}
       <Box css={{ w: '100%', maxWidth: '640px' }}>
-        <PreviewControls
-          enableJoin={enableJoin}
-          savePreferenceAndJoin={savePreferenceAndJoin}
-          hideSettings={!toggleVideo && !toggleAudio}
-        />
+        <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
         <PreviewForm
           name={name}
           onChange={setName}
@@ -170,30 +190,32 @@ const Container = styled('div', {
   px: '$10',
 });
 
-const PreviewTile = ({ name, error }) => {
+export const PreviewTile = ({ name, error }: { name: string; error?: boolean }) => {
   const localPeer = useHMSStore(selectLocalPeer);
-  const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-
+  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const isMobile = useMedia(cssConfig.media.md);
+  const aspectRatio =
+    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
   return (
     <StyledVideoTile.Container
       css={{
         bg: '$surface_default',
-        aspectRatio: 16 / 9,
-        width: 'min(640px, 80vw)',
+        aspectRatio,
+        height: 'min(640px, 40vh)',
+        maxWidth: '640px',
         overflow: 'clip',
         '@md': {
-          aspectRatio: 9 / 16,
-          width: 'min(275px, 70vw)',
+          width: 'min(220px, 70vw)',
           maxWidth: '100%',
+          my: '$4',
         },
       }}
-      ref={borderAudioRef}
     >
       {localPeer ? (
         <>
@@ -216,13 +238,17 @@ const PreviewTile = ({ name, error }) => {
         <StyledVideoTile.AudioIndicator size="medium">
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
-      ) : null}
+      ) : (
+        <AudioLevel trackId={localPeer?.audioTrack} />
+      )}
     </StyledVideoTile.Container>
   );
 };
 
-const PreviewControls = ({ hideSettings }) => {
+export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => {
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const isMobile = useMedia(cssConfig.media.md);
+
   return (
     <Flex
       justify="between"
@@ -233,7 +259,7 @@ const PreviewControls = ({ hideSettings }) => {
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle compact />
-        <Suspense fallback="">{isVideoOn ? <VirtualBackground /> : null}</Suspense>
+        <Suspense fallback="">{isVideoOn && !isMobile ? <VirtualBackground /> : null}</Suspense>
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/RaiseHand.jsx

@@ -3,20 +3,13 @@ import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/rea
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
 import { useMyMetadata } from './hooks/useMetadata';
-import { FEATURE_LIST } from '../common/constants';
 
 export const RaiseHand = () => {
-  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
   const { toggleHandRaise } = useMyMetadata();
   const localPeer = useHMSStore(selectLocalPeer);
   const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false;
 
-  if (!isHandRaiseEnabled) {
-    return null;
-  }
-
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton active={!isHandRaised} onClick={toggleHandRaise}>

package/src/Prebuilt/components/RoleChangeRequestModal.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import {
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectRoleChangeRequest,
+  useCustomEvent,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { PreviewControls, PreviewTile } from './Preview/PreviewJoin';
+import { Box, Button, Dialog, Flex, Text } from '../..';
+// @ts-ignore: No implicit Any
+import { useMyMetadata } from './hooks/useMetadata';
+// @ts-ignore: No implicit Any
+import { ROLE_CHANGE_DECLINED } from '../common/constants';
+
+export const RoleChangeRequestModal = () => {
+  const hmsActions = useHMSActions();
+  const { updateMetaData } = useMyMetadata();
+  const currentRole = useHMSStore(selectLocalPeerRoleName);
+  const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
+  const name = useHMSStore(selectLocalPeerName);
+  const { sendEvent } = useCustomEvent({ type: ROLE_CHANGE_DECLINED });
+
+  useEffect(() => {
+    if (!roleChangeRequest?.role) {
+      return;
+    }
+
+    hmsActions.preview({ asRole: roleChangeRequest.role.name });
+  }, [hmsActions, roleChangeRequest]);
+
+  if (!roleChangeRequest?.role) {
+    return null;
+  }
+
+  const body = (
+    <>
+      <Text css={{ fontWeight: 400, c: '$on_surface_medium', textAlign: 'center' }}>
+        Setup your audio and video before joining
+      </Text>
+      <Flex
+        align="center"
+        justify="center"
+        css={{
+          '@sm': { width: '100%' },
+          flexDirection: 'column',
+          mt: '$6',
+        }}
+      >
+        <PreviewTile name={name || ''} />
+        <PreviewControls hideSettings={true} />
+      </Flex>
+    </>
+  );
+
+  return (
+    <RequestDialog
+      title={`You're invited to join the ${roleChangeRequest.role.name} role`}
+      onOpenChange={async value => {
+        if (!value) {
+          await hmsActions.rejectChangeRole(roleChangeRequest);
+          sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
+          await hmsActions.cancelMidCallPreview();
+          await updateMetaData({ isHandRaised: false });
+        }
+      }}
+      body={body}
+      onAction={async () => {
+        await hmsActions.acceptChangeRole(roleChangeRequest);
+        await updateMetaData({ isHandRaised: false, prevRole: currentRole });
+      }}
+      actionText="Accept"
+    />
+  );
+};
+
+const RequestDialog = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = 'Accept',
+  onAction,
+}: {
+  open?: boolean;
+  onOpenChange: (value: boolean) => void;
+  title: string;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction: () => void;
+}) => (
+  <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ p: '$10' }}>
+        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
+          <Text variant="h6">{title}</Text>
+        </Dialog.Title>
+        <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
+        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+          <Box css={{ width: '50%' }}>
+            <Dialog.Close css={{ width: '100%' }}>
+              <Button variant="standard" outlined css={{ width: '100%' }}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+          </Box>
+          <Box css={{ width: '50%' }}>
+            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+              {actionText}
+            </Button>
+          </Box>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);

package/src/Prebuilt/components/ScreenshareDisplay.jsx

@@ -14,24 +14,18 @@ export const ScreenshareDisplay = () => {
       align="center"
       justify="center"
       css={{
-        position: 'relative',
-        overflow: 'hidden',
-        w: '37.5rem',
-        maxWidth: '80%',
-        h: '100%',
-        r: '$3',
-        m: '0 auto',
-        color: '$on_surface_high',
+        size: '100%',
         bg: '$background_default',
-        textAlign: 'center',
+        color: '$on_surface_high',
       }}
     >
       <ShareScreenIcon width={48} height={48} />
-      <Text variant="h5" css={{ m: '$8 0', color: '$on_surface_high' }}>
+      <Text variant="h5" css={{ m: '$8 0' }}>
         You are sharing your screen
       </Text>
       <Button
         variant="danger"
+        css={{ fontWeight: '$semiBold' }}
         onClick={async () => {
           await hmsActions.setScreenShareEnabled(false);
         }}

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -14,15 +14,16 @@ import { VideoTileStats } from '../../Stats';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { ScreenshareDisplay } from './ScreenshareDisplay';
+import { useUISettings } from './AppData/useUISettings';
 import { UI_SETTINGS } from '../common/constants';
 
 const labelStyles = {
   position: 'unset',
   width: '100%',
   textAlign: 'center',
+  c: '$on_surface_high',
   transform: 'none',
-  mt: '$2',
   flexShrink: 0,
 };
 
@@ -31,7 +32,6 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   const track = useHMSStore(selectScreenShareByPeerID(peerId));
   const peer = useHMSStore(selectPeerByID(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const isHeadless = useIsHeadless();
   const [isMouseHovered, setIsMouseHovered] = useState(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const label = getVideoTileLabel({
@@ -48,40 +48,47 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   });
   const isFullScreenSupported = screenfull.isEnabled;
   const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
+
+  if (isLocal && !['browser', 'window', 'application'].includes(track?.displaySurface)) {
+    return <ScreenshareDisplay />;
+  }
+
+  if (!peer) {
+    return null;
+  }
   return (
-    <StyledVideoTile.Root css={{ width, height, p: 0 }} data-testid="screenshare_tile">
-      {peer ? (
-        <StyledVideoTile.Container
-          transparentBg
-          ref={fullscreenRef}
-          css={{ flexDirection: 'column' }}
-          onMouseEnter={() => setIsMouseHovered(true)}
-          onMouseLeave={() => {
-            setIsMouseHovered(false);
-          }}
-        >
-          {showStatsOnTiles ? (
-            <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
-          ) : null}
-          {isFullScreenSupported && !isHeadless ? (
-            <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
-              {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
-            </StyledVideoTile.FullScreenButton>
-          ) : null}
-          {track ? (
-            <Video
-              screenShare={true}
-              mirror={peer.isLocal && track?.source === 'regular'}
-              attach={!isAudioOnly}
-              trackId={track.id}
-            />
-          ) : null}
-          <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-          {isMouseHovered && !isHeadless && !peer?.isLocal ? (
-            <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
-          ) : null}
-        </StyledVideoTile.Container>
-      ) : null}
+    <StyledVideoTile.Root css={{ width, height, p: 0, minHeight: 0 }} data-testid="screenshare_tile">
+      <StyledVideoTile.Container
+        transparentBg
+        ref={fullscreenRef}
+        css={{ flexDirection: 'column', gap: '$2' }}
+        onMouseEnter={() => setIsMouseHovered(true)}
+        onMouseLeave={() => {
+          setIsMouseHovered(false);
+        }}
+      >
+        {showStatsOnTiles ? (
+          <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
+        ) : null}
+        {isFullScreenSupported && isMouseHovered ? (
+          <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
+            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
+          </StyledVideoTile.FullScreenButton>
+        ) : null}
+        {track ? (
+          <Video
+            screenShare={true}
+            mirror={peer.isLocal && track?.source === 'regular'}
+            attach={!isAudioOnly}
+            trackId={track.id}
+            css={{ minHeight: 0 }}
+          />
+        ) : null}
+        <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
+        {isMouseHovered && !peer?.isLocal ? (
+          <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+        ) : null}
+      </StyledVideoTile.Container>
     </StyledVideoTile.Root>
   );
 };

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import { LayoutProps } from './VideoLayouts/interface';
+import { ProminenceLayout } from './VideoLayouts/ProminenceLayout';
+import { config as cssConfig } from '../../Theme';
+import { Pagination } from './Pagination';
+import { usePagesWithTiles } from './hooks/useTileLayout';
+
+export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const maxTileCount = isMobile ? 2 : 4;
+  const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
+  const [page, setPage] = useState(0);
+  const pageSize = pagesWithTiles[0]?.length || 0;
+
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+
+  return (
+    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge}>
+      {!edgeToEdge && (
+        <Pagination
+          page={page}
+          onPageChange={page => {
+            setPage(page);
+            onPageChange?.(page);
+          }}
+          numPages={pagesWithTiles.length}
+        />
+      )}
+    </ProminenceLayout.SecondarySection>
+  );
+};