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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.6-alpha.1",
+  "version": "0.1.6-alpha.3",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.15-alpha.1",
-    "@100mslive/hms-virtual-background": "1.11.15-alpha.1",
-    "@100mslive/react-icons": "0.8.15-alpha.1",
-    "@100mslive/react-sdk": "0.8.15-alpha.1",
+    "@100mslive/hls-player": "0.1.15-alpha.3",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.3",
+    "@100mslive/react-icons": "0.8.15-alpha.3",
+    "@100mslive/react-sdk": "0.8.15-alpha.3",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d3f042d48bb30f16c6c63f2a75c406611c0f2831"
+  "gitHead": "1724f0ddfffa3cd09487ab41c065c426c70c2bc3"
 }

package/src/Button/Button.tsx

@@ -139,12 +139,12 @@ const StyledButton = styled('button', {
   variants: {
     variant: {
       standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
+        '$surface_brighter',
+        '$surface_bright',
+        '$surface_default',
+        '$surface_dim',
+        '$on_surface_high',
+        '$on_surface_low',
       ),
       danger: getButtonVariants(
         '$alert_error_default',

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -17,7 +17,6 @@ import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
 import { AnnotisedMessage, ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
-import { ChatParticipantHeader } from './ChatParticipantHeader';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
@@ -67,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   ) : null;
 };
 
-export const Chat = ({ screenType, hideControls = false }) => {
+export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -77,7 +76,7 @@ export const Chat = ({ screenType, hideControls = false }) => {
     peerId: peerSelector && peerName ? peerSelector : '',
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',
   });
-  const [isSelectorOpen, setSelectorOpen] = useState(false);
+  const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { setPinnedMessage } = useSetPinnedMessage();
@@ -123,15 +122,10 @@ export const Chat = ({ screenType, hideControls = false }) => {
       css={{
         size: '100%',
         gap: '$4',
-        marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0',
-        transition: 'margin 0.3s ease-in-out',
       }}
     >
       {isMobile && elements?.chat?.is_overlay ? null : (
-        <>
-          <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
-          {elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}
-        </>
+        <>{elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}</>
       )}
 
       <ChatBody

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -18,6 +18,7 @@ export const useEmojiPickerStyles = showing => {
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
+            top: 0.25rem;
             background-color: var(--hms-ui-colors-surface_bright);
             margin-top: 0.5rem;
           }

package/src/Prebuilt/components/Footer/ChatToggle.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
 import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
@@ -9,18 +9,11 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = ({ openByDefault }: { openByDefault: boolean }) => {
+export const ChatToggle = () => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
-  useEffect(() => {
-    if (!isChatOpen && openByDefault) {
-      toggleChat();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleChat, openByDefault]);
-
   return (
     <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
       <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
@@ -6,7 +6,6 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
-import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -25,6 +24,10 @@ import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
 // @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+// @ts-ignore: No implicit Any
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 export const Footer = ({
@@ -37,7 +40,16 @@ export const Footer = ({
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+
+  useEffect(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleChat, openByDefault]);
 
   return (
     <AppFooter.Root
@@ -48,7 +60,7 @@ export const Footer = ({
           gap: '$10',
           position: 'relative',
           // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat ? 20 : 1,
+          zIndex: isOverlayChat && isChatOpen ? 20 : 1,
         },
       }}
     >
@@ -63,7 +75,11 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
-        {isMobile ? null : <Suspense fallback={<></>}>{isVideoOn ? <VirtualBackground /> : null}</Suspense>}
+        {isMobile ? null : (
+          <Suspense fallback={<></>}>
+            <VirtualBackground />
+          </Suspense>
+        )}
       </AppFooter.Left>
       <AppFooter.Center
         css={{
@@ -76,7 +92,7 @@ export const Footer = ({
         {isMobile ? (
           <>
             {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
-            {elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+            {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>
         ) : (
@@ -89,7 +105,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
-        {!isMobile && elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+        {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />
       </AppFooter.Right>

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -21,7 +21,6 @@ import {
 } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
-import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
@@ -61,7 +60,6 @@ export const ParticipantList = () => {
   return (
     <Fragment>
       <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
-        <ChatParticipantHeader activeTabValue={SIDE_PANE_OPTIONS.PARTICIPANTS} />
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
         {participants.length === 0 ? (
           <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>
@@ -121,10 +119,11 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
       direction="column"
       css={{
         gap: '$8',
-        maxHeight: '100%',
         overflowY: 'auto',
         overflowX: 'hidden',
-        pr: '$3',
+        pr: '$10',
+        mr: '-$10',
+        flex: '1 1 0',
       }}
     >
       <RoleAccordion
@@ -318,7 +317,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
     <Flex
       align="center"
       css={{
-        p: isMobile ? '$0 $6' : '$2 0',
+        p: isMobile ? '0' : '$2 0',
         mb: '$2',
         position: 'relative',
         color: '$on_surface_medium',

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -46,7 +46,7 @@ export const RoleAccordion = ({
   const height = ROW_HEIGHT * peerList.length;
 
   return (
-    <Flex direction="column" css={{ flexGrow: 1, '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
+    <Flex direction="column" css={{ '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
+import React, { useEffect, useState } from 'react';
+import { selectDominantSpeaker, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
-import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
+import { Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 
 export const SpeakerTag = () => {
@@ -37,13 +36,15 @@ const LogoImg = styled('img', {
 export const Logo = () => {
   const roomLayout = useRoomLayout();
   const logo = roomLayout?.logo?.url;
-  const isMobile = useMedia(cssConfig.media.md);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
-  if (isConnected && isMobile) {
-    return null;
-  }
+  useEffect(() => {
+    if (hideImage) {
+      setHideImage(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [logo]);
+
   return logo && !hideImage ? (
     <LogoImg
       src={logo}

package/src/Prebuilt/components/InsetTile.tsx

@@ -120,6 +120,7 @@ export const InsetTile = () => {
             canMinimise
             isDragabble
             {...videoTileProps}
+            hideParticipantNameOnTile
           />
         )}
       </Box>

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

@@ -16,9 +16,11 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -26,7 +28,7 @@ export const DesktopLeaveRoom = ({
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -36,7 +38,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -46,11 +48,7 @@ export const DesktopLeaveRoom = ({
               borderBottomRightRadius: 0,
             }}
             onClick={() => {
-              if (screenType === 'hls_live_streaming') {
-                setShowLeaveRoomAlert(true);
-              } else {
-                leaveRoom({ endstream: false });
-              }
+              leaveRoom({ endstream: false });
             }}
           >
             <Tooltip title="Leave Room">
@@ -94,7 +92,7 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {isStreamingOn && permissions?.hlsStreaming ? (
+              {permissions?.endRoom || permissions?.hlsStreaming ? (
                 <Dropdown.Item
                   css={{
                     bg: '$alert_error_dim',
@@ -148,7 +146,7 @@ export const DesktopLeaveRoom = ({
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
               setShowEndStreamAlert={setShowEndStreamAlert}
-              leaveRoom={leaveRoom}
+              leaveRoom={isStreamingOn ? leaveRoom : endRoom}
               isStreamingOn={isStreamingOn}
               isModal
             />

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

@@ -46,6 +46,10 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
       ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
     }
   };
+  const endRoom = () => {
+    hmsActions.endRoom(false, 'End Room');
+    redirectToLeave();
+  };
 
   const leaveRoom = async ({ endstream = false }) => {
     if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
@@ -59,8 +63,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     return null;
   }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   );
 };

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

@@ -17,9 +17,11 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const MwebLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -27,8 +29,8 @@ export const MwebLeaveRoom = ({
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
   useDropdownList({ open, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
@@ -37,7 +39,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions?.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -67,7 +69,8 @@ export const MwebLeaveRoom = ({
               onClick={() => leaveRoom({ endstream: false })}
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
-            {isStreamingOn && permissions?.hlsStreaming ? (
+
+            {permissions?.endRoom || permissions?.hlsStreaming ? (
               <LeaveCard
                 title={showStream ? 'End Stream' : 'End Session'}
                 subtitle={`The will end the ${
@@ -108,7 +111,7 @@ export const MwebLeaveRoom = ({
         <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
-            leaveRoom={leaveRoom}
+            leaveRoom={isStreamingOn ? leaveRoom : endRoom}
             isStreamingOn={isStreamingOn}
           />
         </Sheet.Content>

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

@@ -266,7 +266,7 @@ export const MwebOptions = ({
           </Box>
         </Sheet.Content>
       </Sheet.Root>
-      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} />
+      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
       {openModals.has(MODALS.MUTE_ALL) && (
         <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
       )}

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

@@ -53,8 +53,8 @@ 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) return;
 
@@ -108,7 +108,7 @@ 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}`,
@@ -116,6 +116,7 @@ export function Notifications() {
           updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
+      }
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
         const track = notification.data?.track;
         if (!notification.data.enabled) {

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

@@ -246,7 +246,6 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 };
 
 export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => {
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const isMobile = useMedia(cssConfig.media.md);
 
   return (
@@ -258,8 +257,8 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
       }}
     >
       <Flex css={{ gap: '$4' }}>
-        <AudioVideoToggle compact />
-        <Suspense fallback="">{isVideoOn && !isMobile ? <VirtualBackground /> : null}</Suspense>
+        <AudioVideoToggle />
+        <Suspense fallback="">{!isMobile ? <VirtualBackground /> : null}</Suspense>
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/RoleChangeRequestModal.tsx

@@ -27,9 +27,10 @@ export const RoleChangeRequestModal = () => {
     if (!roleChangeRequest?.role) {
       return;
     }
-
-    hmsActions.preview({ asRole: roleChangeRequest.role.name });
-  }, [hmsActions, roleChangeRequest]);
+    (async () => {
+      await hmsActions.preview({ asRole: roleChangeRequest.role.name });
+    })();
+  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
 
   if (!roleChangeRequest?.role) {
     return null;

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -34,11 +34,6 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const label = getVideoTileLabel({
-    peerName: peer.name,
-    isLocal: false,
-    track,
-  });
   const fullscreenRef = useRef(null);
   // fullscreen is for desired state
   const [fullscreen, setFullscreen] = useState(false);
@@ -56,6 +51,13 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   if (!peer) {
     return null;
   }
+
+  const label = getVideoTileLabel({
+    peerName: peer?.name,
+    isLocal: false,
+    track,
+  });
+
   return (
     <StyledVideoTile.Root css={{ width, height, p: 0, minHeight: 0 }} data-testid="screenshare_tile">
       <StyledVideoTile.Container
@@ -85,8 +87,14 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
           />
         ) : null}
         <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-        {isMouseHovered && !peer?.isLocal ? (
-          <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+        {isMouseHovered && !peer.isLocal ? (
+          <TileMenu
+            isScreenshare
+            peerID={peer.id}
+            audioTrackID={audioTrack?.id}
+            videoTrackID={track?.id}
+            enableSpotlightingPeer={false}
+          />
         ) : null}
       </StyledVideoTile.Container>
     </StyledVideoTile.Root>