@100mslive/roomkit-react 0.1.6 → 0.1.7

package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -30,6 +30,7 @@ export const MwebLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open, name: 'LeaveRoom' });
 
@@ -39,7 +40,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' ? (
+      {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -70,36 +71,24 @@ export const MwebLeaveRoom = ({
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
 
-            {permissions?.endRoom || permissions?.hlsStreaming ? (
-              <LeaveCard
-                title={showStream ? 'End Stream' : 'End Session'}
-                subtitle={`The will end the ${
-                  showStream ? 'stream' : 'session'
-                } for everyone. You can't undo this action.`}
-                bg="$alert_error_dim"
-                titleColor="$alert_error_brighter"
-                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
-                icon={<StopIcon height={24} width={24} />}
-                onClick={() => {
-                  setOpen(false);
-                  setShowEndStreamAlert(true);
-                }}
-              />
-            ) : null}
+            <LeaveCard
+              title={showStream ? 'End Stream' : 'End Session'}
+              subtitle={`The will end the ${
+                showStream ? 'stream' : 'session'
+              } for everyone. You can't undo this action.`}
+              bg="$alert_error_dim"
+              titleColor="$alert_error_brighter"
+              css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
+              icon={<StopIcon height={24} width={24} />}
+              onClick={() => {
+                setOpen(false);
+                setShowEndStreamAlert(true);
+              }}
+            />
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton
-          key="LeaveRoom"
-          data-testid="leave_room_btn"
-          onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
-          }}
-        >
+        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -116,13 +105,12 @@ export const MwebLeaveRoom = ({
           />
         </Sheet.Content>
       </Sheet.Root>
-      {screenType === 'hls_live_streaming' ? (
-        <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-          <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
-            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : null}
+
+      <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+          <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
+        </Sheet.Content>
+      </Sheet.Root>
     </Fragment>
   );
 };

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

@@ -5,6 +5,7 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -84,6 +85,8 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
@@ -158,7 +161,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {screenType !== 'hls_live_streaming' ? (
+            {!noAVPermissions ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {
@@ -279,7 +282,6 @@ export const MwebOptions = ({
 
       {showEmojiCard && (
         <Box
-          onClick={() => setShowEmojiCard(false)}
           ref={emojiCardRef}
           css={{
             maxWidth: '100%',

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

@@ -4,10 +4,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectHasPeerHandRaised,
   selectRoomState,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../../';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
@@ -34,6 +36,7 @@ export function Notifications() {
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const { redirectToLeave } = useRedirectToLeave();
+  const vanillaStore = useHMSVanillaStore();
 
   const handleRoleChangeDenied = useCallback(request => {
     ToastManager.addToast({
@@ -49,6 +52,16 @@ export function Notifications() {
       return;
     }
     switch (notification.type) {
+      case HMSNotificationTypes.HAND_RAISE_CHANGED: {
+        if (roomState !== HMSRoomState.Connected || notification.data.isLocal) {
+          return;
+        }
+        const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+        if (hasPeerHandRaised) {
+          ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+        }
+        break;
+      }
       case HMSNotificationTypes.METADATA_UPDATED:
         if (roomState !== HMSRoomState.Connected) {
           return;
@@ -154,7 +167,7 @@ export function Notifications() {
       <TrackUnmuteModal />
       <TrackBulkUnmuteModal />
       <TrackNotifications />
-      <PeerNotifications />
+      {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
       <ReconnectNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorModal />

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

@@ -1,14 +1,7 @@
 import { useEffect } from 'react';
-import {
-  HMSNotificationTypes,
-  HMSRoomState,
-  selectRoomState,
-  useHMSNotifications,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useSubscribedNotifications } from '../AppData/useUISettings';
-import { isInternalRole } from '../../common/utils';
 import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 const notificationTypes = [
@@ -21,19 +14,15 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
-  const roomState = useHMSStore(selectRoomState);
   useEffect(() => {
-    if (roomState !== HMSRoomState.Connected) {
-      return;
-    }
-    if (!notification || (notification?.data?.roleName && isInternalRole(notification.data.roleName))) {
+    if (!notification?.data) {
       return;
     }
 
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes.PEER_LIST:
-        if (!isPeerJoinSubscribed || notification.data?.length === 0) {
+        if (!isPeerJoinSubscribed || notification.data.length === 0) {
           return;
         }
         break;
@@ -52,7 +41,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
 
   return null;
 };

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

@@ -105,7 +105,11 @@ const PreviewJoin = ({
   const roomLayout = useRoomLayout();
 
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
-
+  const localPeer = useHMSStore(selectLocalPeer);
+  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;
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -166,7 +170,7 @@ const PreviewJoin = ({
           <PreviewTile name={name} error={previewError} />
         </Flex>
       ) : null}
-      <Box css={{ w: '100%', maxWidth: '640px' }}>
+      <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
         <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
         <PreviewForm
           name={name}
@@ -202,12 +206,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
   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,
-        height: 'min(640px, 40vh)',
+        height: 'min(360px, 70vh)',
         maxWidth: '640px',
         overflow: 'clip',
         '@md': {
@@ -225,6 +230,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
             trackId={localPeer.videoTrack}
             data-testid="preview_tile"
           />
+
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={name} data-testid="preview_avatar_tile" />
@@ -234,8 +240,9 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : !error ? (
         <FullPageProgress />
       ) : null}
+
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <StyledVideoTile.AudioIndicator>
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
@@ -250,7 +257,7 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
 
   return (
     <Flex
-      justify="between"
+      justify={hideSettings && isMobile ? 'center' : 'between'}
       css={{
         width: '100%',
         mt: '$8',

package/src/Prebuilt/components/RaiseHand.jsx

@@ -1,18 +1,15 @@
 import React from 'react';
-import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/react-sdk';
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = () => {
-  const { toggleHandRaise } = useMyMetadata();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false;
-
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton active={!isHandRaised} onClick={toggleHandRaise}>
+      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
+import { Sheet } from '../../../Sheet';
+
+export const RequestPrompt = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = 'Accept',
+  onAction,
+}: {
+  open?: boolean;
+  onOpenChange: (value: boolean) => void;
+  title: string;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction: () => void;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ py: '$8' }}>
+          <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
+          {body}
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <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>
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+const RequestActions = ({ onAction, actionText }: { actionText?: string; onAction: () => void }) => (
+  <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
+    <Box css={{ width: '50%' }}>
+      <Dialog.Close css={{ width: '100%' }}>
+        <Button variant="standard" outlined css={{ width: '100%' }}>
+          Decline
+        </Button>
+      </Dialog.Close>
+    </Box>
+    <Box css={{ width: '50%' }}>
+      <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+        {actionText}
+      </Button>
+    </Box>
+  </Flex>
+);

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+import {
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectRoleChangeRequest,
+  useCustomEvent,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { Flex, Text } from '../../..';
+// @ts-ignore: No implicit Any
+import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
+import { RequestPrompt } from './RequestPrompt';
+// @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;
+    }
+    (async () => {
+      await hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    })();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
+
+  if (!roleChangeRequest?.role) {
+    return null;
+  }
+
+  const body = (
+    <>
+      <Text
+        variant="xs"
+        css={{
+          c: '$on_surface_medium',
+          textAlign: 'center',
+          '@md': { textAlign: 'left', borderBottom: '1px solid $border_bright', pb: '$4', px: '$8' },
+        }}
+      >
+        Setup your audio and video before joining
+      </Text>
+      <Flex
+        align="center"
+        justify="center"
+        css={{
+          '@sm': { width: '100%' },
+          flexDirection: 'column',
+          mt: '$6',
+          '@md': { px: '$8' },
+        }}
+      >
+        <PreviewTile name={name || ''} />
+
+        <PreviewControls hideSettings={true} />
+      </Flex>
+    </>
+  );
+
+  return (
+    <RequestPrompt
+      title="You're invited to join the stage"
+      onOpenChange={async value => {
+        if (!value) {
+          hmsActions.rejectChangeRole(roleChangeRequest);
+          sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
+          await hmsActions.cancelMidCallPreview();
+          await hmsActions.lowerLocalPeerHand();
+        }
+      }}
+      body={body}
+      onAction={async () => {
+        await hmsActions.acceptChangeRole(roleChangeRequest);
+        await updateMetaData({ prevRole: currentRole });
+        await hmsActions.lowerLocalPeerHand();
+      }}
+      actionText="Accept"
+    />
+  );
+};

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -8,11 +8,14 @@ import { Chat } from './Chat/Chat';
 // @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
 import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
 // @ts-ignore: No implicit Any
+import { getFormattedCount } from '../common/utils';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
 const tabTriggerCSS = {
@@ -24,6 +27,16 @@ const tabTriggerCSS = {
   justifyContent: 'center',
 };
 
+const ParticipantCount = ({ count }: { count: number }) => {
+  return count < 1000 ? (
+    <span>({count})</span>
+  ) : (
+    <Tooltip title={count}>
+      <span>({getFormattedCount(count)})</span>
+    </Tooltip>
+  );
+};
+
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
   screenType: keyof ConferencingScreen;
@@ -73,7 +86,13 @@ export const SidePaneTabs = React.memo<{
           {hideTabs ? (
             <>
               <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                {showChat ? 'Chat' : `Participants (${peerCount})`}
+                {showChat ? (
+                  'Chat'
+                ) : (
+                  <span>
+                    Participants <ParticipantCount count={peerCount} />
+                  </span>
+                )}
               </Text>
 
               {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
@@ -106,7 +125,7 @@ export const SidePaneTabs = React.memo<{
                     color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                   }}
                 >
-                  Participants ({peerCount})
+                  Participants <ParticipantCount count={peerCount} />
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,6 +1,8 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerMetadata,
@@ -18,11 +20,12 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
 import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { keyframes } from '../../Theme';
+import { config as cssConfig, keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { getAttributeBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -43,6 +46,7 @@ const Tile = ({
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
+  const isMobile = useMedia(cssConfig.media.md);
   const peerName = useHMSStore(selectPeerNameByID(peerId));
   const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
   const localPeerID = useHMSStore(selectLocalPeerID);
@@ -69,21 +73,28 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+
+  const ref = useRef(null);
+  const calculatedHeight = ref.current?.clientHeight || '';
+  const calculatedWidth = ref.current?.clientWidth || '';
+
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
+
   const avatarSize = useMemo(() => {
-    if (!width || !height) {
+    if (!calculatedWidth || !calculatedHeight) {
       return undefined;
     }
-    if (width <= 150 || height <= 150) {
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
       return 'small';
-    } else if (width <= 300 || height <= 300) {
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
       return 'medium';
     }
     return 'large';
-  }, [width, height]);
+  }, [calculatedWidth, calculatedHeight]);
 
   return (
     <StyledVideoTile.Root
+      ref={ref}
       css={{
         width,
         height,
@@ -130,7 +141,7 @@ const Tile = ({
             isAudioMuted ? (
               <StyledVideoTile.AudioIndicator
                 data-testid="participant_audio_mute_icon"
-                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+                size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
               >
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
@@ -138,7 +149,7 @@ const Tile = ({
               <AudioLevel trackId={audioTrack?.id} />
             )
           ) : null}
-          {isMouseHovered || isDragabble ? (
+          {isMouseHovered || (isDragabble && isMobile) ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}
@@ -147,7 +158,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -164,8 +175,6 @@ const Tile = ({
   );
 };
 
-const metaStyles = { top: '$4', left: '$4', width: '$14', height: '$14' };
-
 const heightAnimation = value =>
   keyframes({
     '50%': {
@@ -215,20 +224,20 @@ export const AudioLevel = ({ trackId }) => {
   );
 };
 
-const PeerMetadata = ({ peerId }) => {
+const PeerMetadata = ({ peerId, height, width }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
-  const isHandRaised = metaData?.isHandRaised || false;
   const isBRB = metaData?.isBRBOn || false;
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
 
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
           <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
           <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}

package/src/Prebuilt/components/conference.jsx

@@ -13,12 +13,12 @@ import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
+import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
-import { RoleChangeRequestModal } from './RoleChangeRequestModal';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,