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

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

@@ -1,12 +1,15 @@
 /* eslint-disable no-case-declarations */
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useCallback, useEffect } from 'react';
+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';
@@ -20,19 +23,32 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
-import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 import { getMetadata } from '../../common/utils';
-
+import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 export function Notifications() {
   const notification = useHMSNotifications();
   const navigate = useNavigate();
+  const params = useParams();
+  const vanillaStore = useHMSVanillaStore();
   const subscribedNotifications = useSubscribedNotifications() || {};
-  const isHeadless = useIsHeadless();
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  const handleRoleChangeDenied = useCallback(request => {
+    ToastManager.addToast({
+      title: `${request.peerName} denied your request to join the ${request.role.name} role`,
+      variant: 'error',
+    });
+  }, []);
+
+  useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
 
   useEffect(() => {
-    if (!notification) {
+    if (!notification || isNotificationDisabled) {
       return;
     }
     switch (notification.type) {
@@ -40,14 +56,14 @@ 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 || isHeadless) return;
+        if (!metadata?.isHandRaised || notification.data.isLocal) return;
 
         console.debug('Metadata updated', notification.data);
         if (!subscribedNotifications.METADATA_UPDATED) return;
-        ToastBatcher.showToast({ notification });
+        ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
         break;
       case HMSNotificationTypes.NAME_UPDATED:
         console.log(notification.data.id + ' changed their name to ' + notification.data.name);
@@ -69,7 +85,7 @@ export function Notifications() {
                 <Button
                   onClick={() => {
                     ToastManager.removeToast(toastId);
-                    window.location.reload();
+                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ''}`);
                   }}
                 >
                   Rejoin
@@ -80,11 +96,7 @@ export function Notifications() {
           }
           // goto leave for terminal if any action is not performed within 2secs
           // if network is still unavailable going to preview will throw an error
-          setTimeout(() => {
-            const previewLocation = window.location.pathname.replace('meeting', 'leave');
-            ToastManager.clearAllToast();
-            navigate(previewLocation);
-          }, 2000);
+          redirectToLeave(1000);
           return;
         }
         // Autoplay error or user denied screen share (cancelled browser pop-up)
@@ -99,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) {
@@ -122,11 +138,7 @@ export function Notifications() {
           title: `${notification.message}. 
               ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
         });
-        setTimeout(() => {
-          const leaveLocation = window.location.pathname.replace('meeting', 'leave');
-          navigate(leaveLocation);
-          ToastManager.clearAllToast();
-        }, 2000);
+        redirectToLeave(1000);
         break;
       case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
         ToastManager.addToast({
@@ -139,10 +151,14 @@ export function Notifications() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
 
+  if (isNotificationDisabled) {
+    return null;
+  }
+
   return (
     <>
-      {!isHeadless && <TrackUnmuteModal />}
-      {!isHeadless && <TrackBulkUnmuteModal />}
+      <TrackUnmuteModal />
+      <TrackBulkUnmuteModal />
       <TrackNotifications />
       <PeerNotifications />
       <ReconnectNotifications />

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

@@ -11,7 +11,6 @@ const notificationTypes = [
 ];
 let notificationId = null;
 
-const isQA = process.env.REACT_APP_ENV === 'qa';
 export const ReconnectNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const [open, setOpen] = useState(false);
@@ -22,18 +21,13 @@ export const ReconnectNotifications = () => {
       notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
       setOpen(false);
     } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {
-      if (isQA) {
-        ToastManager.removeToast(notificationId);
-        setOpen(true);
-      } else {
-        notificationId = ToastManager.replaceToast(
-          notificationId,
-          ToastConfig.RECONNECTING.single(notification.data.message),
-        );
-      }
+      notificationId = ToastManager.replaceToast(
+        notificationId,
+        ToastConfig.RECONNECTING.single(notification.data.message),
+      );
     }
   }, [notification]);
-  if (!open || !isQA) return null;
+  if (!open) return null;
   return (
     <Dialog.Root open={open} modal={true}>
       <Dialog.Portal container={document.getElementById('conferencing')}>

package/src/Prebuilt/components/Pagination.tsx

@@ -38,18 +38,20 @@ export const Pagination = ({
       <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
         <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>
-      <StyledPagination.Dots>
-        {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot
-            key={i}
-            active={page === i}
-            onClick={e => {
-              e.stopPropagation();
-              onPageChange(i);
-            }}
-          />
-        ))}
-      </StyledPagination.Dots>
+      {numPages <= 5 ? (
+        <StyledPagination.Dots>
+          {[...Array(numPages)].map((_, i) => (
+            <StyledPagination.Dot
+              key={i}
+              active={page === i}
+              onClick={e => {
+                e.stopPropagation();
+                onPageChange(i);
+              }}
+            />
+          ))}
+        </StyledPagination.Dots>
+      ) : null}
       <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>
         <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>

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

@@ -1,13 +1,17 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
-import { Flex } from '../../../';
+import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
 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';
+// @ts-ignore: No implicit Any
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
@@ -37,7 +41,12 @@ 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 />
         )}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useMedia } from 'react-use';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+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';
@@ -26,16 +26,11 @@ const PreviewForm = ({
   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 showGoLive =
-    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
-    !isHLSRunning &&
-    permissions?.hlsStreaming;
+  const showGoLive = joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
 
   return (
     <Form
@@ -55,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,23 +13,37 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, 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) => {
@@ -39,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,
@@ -47,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();
@@ -73,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 || {};
@@ -144,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}
@@ -171,7 +190,7 @@ const Container = styled('div', {
   px: '$10',
 });
 
-export const PreviewTile = ({ name, error }) => {
+export const PreviewTile = ({ name, error }: { name: string; error?: boolean }) => {
   const localPeer = useHMSStore(selectLocalPeer);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
@@ -179,16 +198,19 @@ export const PreviewTile = ({ name, error }) => {
   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(220px, 70vw)',
           maxWidth: '100%',
           my: '$4',
@@ -217,14 +239,15 @@ export const PreviewTile = ({ name, error }) => {
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
-        <AudioLevel trackId={localPeer.audioTrack} />
+        <AudioLevel trackId={localPeer?.audioTrack} />
       )}
     </StyledVideoTile.Container>
   );
 };
 
-export const PreviewControls = ({ hideSettings }) => {
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
   return (
     <Flex
       justify="between"
@@ -234,8 +257,8 @@ export const PreviewControls = ({ hideSettings }) => {
       }}
     >
       <Flex css={{ gap: '$4' }}>
-        <AudioVideoToggle compact />
-        <Suspense fallback="">{isVideoOn ? <VirtualBackground /> : null}</Suspense>
+        <AudioVideoToggle />
+        <Suspense fallback="">{!isMobile ? <VirtualBackground /> : null}</Suspense>
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

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

@@ -3,32 +3,37 @@ 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 '../../';
-import { useIsHeadless } from './AppData/useUISettings';
+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 isHeadless = useIsHeadless();
-  const { setPrevRole } = useMyMetadata();
+  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 || isHeadless) {
+    if (!roleChangeRequest?.role) {
       return;
     }
+    (async () => {
+      await updateMetaData({ prevRole: currentRole });
+      await hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    })();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
 
-    hmsActions.preview({ asRole: roleChangeRequest.role.name });
-  }, [hmsActions, roleChangeRequest, isHeadless]);
-
-  if (!roleChangeRequest?.role || isHeadless) {
+  if (!roleChangeRequest?.role) {
     return null;
   }
 
@@ -46,8 +51,8 @@ export const RoleChangeRequestModal = () => {
           mt: '$6',
         }}
       >
-        <PreviewTile name={name} />
-        <PreviewControls />
+        <PreviewTile name={name || ''} />
+        <PreviewControls hideSettings={true} />
       </Flex>
     </>
   );
@@ -58,27 +63,41 @@ export const RoleChangeRequestModal = () => {
       onOpenChange={async value => {
         if (!value) {
           await hmsActions.rejectChangeRole(roleChangeRequest);
-          await hmsActions.sendDirectMessage('', roleChangeRequest.requestedBy?.id, ROLE_CHANGE_DECLINED);
+          sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
           await hmsActions.cancelMidCallPreview();
+          await updateMetaData({ isHandRaised: false });
         }
       }}
       body={body}
-      onAction={() => {
-        hmsActions.acceptChangeRole(roleChangeRequest);
-        setPrevRole(currentRole);
+      onAction={async () => {
+        await hmsActions.acceptChangeRole(roleChangeRequest);
+        await updateMetaData({ isHandRaised: false });
       }}
       actionText="Accept"
     />
   );
 };
 
-const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
+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' }}>
-          {Icon ? Icon : null}
           <Text variant="h6">{title}</Text>
         </Dialog.Title>
         <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -15,7 +15,7 @@ import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
 import { ScreenshareDisplay } from './ScreenshareDisplay';
-import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { useUISettings } from './AppData/useUISettings';
 import { UI_SETTINGS } from '../common/constants';
 
 const labelStyles = {
@@ -24,7 +24,6 @@ const labelStyles = {
   textAlign: 'center',
   c: '$on_surface_high',
   transform: 'none',
-  mt: '$2',
   flexShrink: 0,
 };
 
@@ -33,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({
@@ -59,11 +57,11 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
     return null;
   }
   return (
-    <StyledVideoTile.Root css={{ width, height, p: 0, mb: '$4', minHeight: 0 }} data-testid="screenshare_tile">
+    <StyledVideoTile.Root css={{ width, height, p: 0, minHeight: 0 }} data-testid="screenshare_tile">
       <StyledVideoTile.Container
         transparentBg
         ref={fullscreenRef}
-        css={{ flexDirection: 'column' }}
+        css={{ flexDirection: 'column', gap: '$2' }}
         onMouseEnter={() => setIsMouseHovered(true)}
         onMouseLeave={() => {
           setIsMouseHovered(false);
@@ -72,7 +70,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
         {showStatsOnTiles ? (
           <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
         ) : null}
-        {isFullScreenSupported && !isHeadless ? (
+        {isFullScreenSupported && isMouseHovered ? (
           <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
             {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
           </StyledVideoTile.FullScreenButton>
@@ -83,10 +81,11 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
             mirror={peer.isLocal && track?.source === 'regular'}
             attach={!isAudioOnly}
             trackId={track.id}
+            css={{ minHeight: 0 }}
           />
         ) : null}
         <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-        {isMouseHovered && !isHeadless && !peer?.isLocal ? (
+        {isMouseHovered && !peer?.isLocal ? (
           <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
         ) : null}
       </StyledVideoTile.Container>

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -6,7 +6,7 @@ import { config as cssConfig } from '../../Theme';
 import { Pagination } from './Pagination';
 import { usePagesWithTiles } from './hooks/useTileLayout';
 
-export const SecondaryTiles = ({ peers, onPageChange, onPageSize }: LayoutProps) => {
+export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
   const isMobile = useMedia(cssConfig.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
@@ -20,15 +20,17 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize }: LayoutProps)
   }, [pageSize, onPageSize]);
 
   return (
-    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]}>
-      <Pagination
-        page={page}
-        onPageChange={page => {
-          setPage(page);
-          onPageChange?.(page);
-        }}
-        numPages={pagesWithTiles.length}
-      />
+    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge}>
+      {!edgeToEdge && (
+        <Pagination
+          page={page}
+          onPageChange={page => {
+            setPage(page);
+            onPageChange?.(page);
+          }}
+          numPages={pagesWithTiles.length}
+        />
+      )}
     </ProminenceLayout.SecondarySection>
   );
 };