100mslive · amar-1995 · Aug 21, 2023 · Aug 21, 2023
diff --git a/...ges/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx b/...ges/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx
@@ -8,16 +8,7 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import {
-  BrbIcon,
-  CheckIcon,
-  DragHandleIcon,
-  HandIcon,
-  InfoIcon,
-  PencilIcon,
-  PipIcon,
-  SettingsIcon,
-} from '@100mslive/react-icons';
+import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
 import IconButton from '../../../IconButton';
 import { PIP } from '../../PIP';
@@ -26,7 +17,6 @@ import SettingsModal from '../../Settings/SettingsModal';
 import StartRecording from '../../Settings/StartRecording';
 import { StatsForNerds } from '../../StatsForNerds';
 import { BulkRoleChangeModal } from '.././BulkRoleChangeModal';
-import { ChangeNameModal } from '.././ChangeNameModal';
 import { ChangeSelfRole } from '.././ChangeSelfRole';
 import { EmbedUrl, EmbedUrlModal } from '.././EmbedUrl';
 import { FullScreenItem } from '.././FullScreenItem';
@@ -57,7 +47,6 @@ export const DesktopOptions = () => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const hmsActions = useHMSActions();
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
   const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL);
   const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
   const [openModals, setOpenModals] = useState(new Set());
@@ -155,14 +144,6 @@ export const DesktopOptions = () => {
             </Dropdown.Item>
           ) : null}
 
-          {isChangeNameEnabled && (
-            <Dropdown.Item onClick={() => updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn">
-              <PencilIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Change Name
-              </Text>
-            </Dropdown.Item>
-          )}
           <ChangeSelfRole onClick={() => updateState(MODALS.SELF_ROLE_CHANGE, true)} />
           <FullScreenItem />
           {isAllowedToPublish.screen && isEmbedEnabled && (
@@ -223,9 +204,7 @@ export const DesktopOptions = () => {
         <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
       )}
       {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
-      {openModals.has(MODALS.CHANGE_NAME) && (
-        <ChangeNameModal onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)} />
-      )}
+
       {openModals.has(MODALS.START_RECORDING) && (
         <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
       )}

diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -15,7 +15,6 @@ import {
   DragHandleIcon,
   EmojiIcon,
   HandIcon,
-  PencilIcon,
   PeopleIcon,
   RecordIcon,
   SettingsIcon,
@@ -168,16 +167,6 @@ export const MwebOptions = () => {
               </ActionTile.Root>
             ) : null}
 
-            <ActionTile.Root
-              onClick={() => {
-                updateState(MODALS.CHANGE_NAME, true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <PencilIcon />
-              <ActionTile.Title>Change Name</ActionTile.Title>
-            </ActionTile.Root>
-
             {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />

diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
@@ -16,6 +16,7 @@ import { Sheet } from '../../../Sheet';
 import { Text } from '../../../Text';
 import { config as cssConfig, useTheme } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
+import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../hooks/useFeatures';
@@ -45,7 +46,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
   const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
   const isMobile = useMedia(cssConfig.media.md);
   const peer = useHMSStore(selectPeerByID(peerID));
-
+  const [showNameChangeModal, setShowNameChangeModal] = useState(false);
   useDropdownList({ open, name: 'TileMenu' });
 
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
@@ -55,6 +56,8 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
   if (isInset && isLocal) {
     return null;
   }
+  const openNameChangeModal = () => setShowNameChangeModal(true);
+
   const props = {
     isLocal,
     isScreenshare,
@@ -65,60 +68,64 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
     showSpotlight,
     showPinAction,
     canMinimise,
+    openNameChangeModal,
   };
 
   return (
-    <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
-      <StyledMenuTile.Trigger
-        data-testid="participant_menu_btn"
-        css={{ bg: `${theme.colors.background_dim.value}A3` }}
-        onClick={e => e.stopPropagation()}
-      >
-        <VerticalMenuIcon width={20} height={20} />
-      </StyledMenuTile.Trigger>
+    <>
+      <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
+        <StyledMenuTile.Trigger
+          data-testid="participant_menu_btn"
+          css={{ bg: `${theme.colors.background_dim.value}A3` }}
+          onClick={e => e.stopPropagation()}
+        >
+          <VerticalMenuIcon width={20} height={20} />
+        </StyledMenuTile.Trigger>
 
-      {isMobile ? (
-        <Sheet.Root open={open} onOpenChange={setOpen}>
-          <Sheet.Content css={{ bg: '$surface_dim', pt: '$8' }}>
-            <Flex
-              css={{
-                color: '$on_surface_high',
-                display: 'flex',
-                w: '100%',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                px: '$10',
-                pb: '$8',
-                borderBottom: '1px solid $border_default',
-              }}
-            >
-              <Box>
-                <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                  {peer.name}
-                  {isLocal ? ` (You)` : null}
-                </Text>
-                {peer?.roleName ? (
-                  <Text variant="xs" css={{ color: '$on_surface_low', mt: '$2' }}>
-                    {peer.roleName}
+        {isMobile ? (
+          <Sheet.Root open={open} onOpenChange={setOpen}>
+            <Sheet.Content css={{ bg: '$surface_dim', pt: '$8' }}>
+              <Flex
+                css={{
+                  color: '$on_surface_high',
+                  display: 'flex',
+                  w: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  px: '$10',
+                  pb: '$8',
+                  borderBottom: '1px solid $border_default',
+                }}
+              >
+                <Box>
+                  <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                    {peer.name}
+                    {isLocal ? ` (You)` : null}
                   </Text>
-                ) : null}
-              </Box>
+                  {peer?.roleName ? (
+                    <Text variant="xs" css={{ color: '$on_surface_low', mt: '$2' }}>
+                      {peer.roleName}
+                    </Text>
+                  ) : null}
+                </Box>
 
-              <Sheet.Close css={{ color: 'inherit' }}>
-                <CrossIcon />
-              </Sheet.Close>
-            </Flex>
-            <Box css={{ px: '$8' }}>
-              <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
-            </Box>
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : (
-        <StyledMenuTile.Content side="top" align="end">
-          <TileMenuContent {...props} />
-        </StyledMenuTile.Content>
-      )}
-    </StyledMenuTile.Root>
+                <Sheet.Close css={{ color: 'inherit' }}>
+                  <CrossIcon />
+                </Sheet.Close>
+              </Flex>
+              <Box css={{ px: '$8' }}>
+                <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
+              </Box>
+            </Sheet.Content>
+          </Sheet.Root>
+        ) : (
+          <StyledMenuTile.Content side="top" align="end">
+            <TileMenuContent {...props} />
+          </StyledMenuTile.Content>
+        )}
+      </StyledMenuTile.Root>
+      {showNameChangeModal && <ChangeNameModal onOpenChange={setShowNameChangeModal} />}
+    </>
   );
 };
 

diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx
@@ -11,6 +11,7 @@ import {
 import {
   MicOffIcon,
   MicOnIcon,
+  PencilIcon,
   PinIcon,
   RemoveUserIcon,
   ShareScreenIcon,
@@ -27,7 +28,8 @@ import { StyledMenuTile } from '../../../TileMenu';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
 
 const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
   trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
@@ -188,6 +190,9 @@ export const TileMenuContent = props => {
     closeSheetOnClick = () => {
       return;
     },
+    openNameChangeModal = () => {
+      return;
+    },
   } = props;
 
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
@@ -199,12 +204,25 @@ export const TileMenuContent = props => {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
   });
 
+  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
+
   return isLocal ? (
     (showPinAction || canMinimise) && (
       <>
         {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
         {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
         {canMinimise && <MinimiseInset />}
+        {isChangeNameEnabled ? (
+          <StyledMenuTile.ItemButton
+            onClick={() => {
+              openNameChangeModal();
+              closeSheetOnClick();
+            }}
+          >
+            <PencilIcon />
+            <span>Change Name</span>
+          </StyledMenuTile.ItemButton>
+        ) : null}
       </>
     )
   ) : (
@@ -222,6 +240,7 @@ export const TileMenuContent = props => {
           <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
+
       {toggleAudio ? (
         <StyledMenuTile.ItemButton
           css={spacingCSS}
@@ -235,6 +254,7 @@ export const TileMenuContent = props => {
           <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
+
       {audioTrackID ? (
         <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
           <Flex align="center" gap={1}>
@@ -246,13 +266,16 @@ export const TileMenuContent = props => {
           <Slider css={{ my: '0.5rem' }} step={5} value={[volume]} onValueChange={e => setVolume(e[0])} />
         </StyledMenuTile.VolumeItem>
       ) : null}
+
       {showPinAction && (
         <>
           <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
           {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
         </>
       )}
+
       <SimulcastLayers trackId={videoTrackID} />
+
       {removeOthers ? (
         <StyledMenuTile.RemoveItem
           css={{ ...spacingCSS, borderTop: 'none' }}

diff --git a/packages/roomkit-react/src/TileMenu/TileMenu.tsx b/packages/roomkit-react/src/TileMenu/TileMenu.tsx
@@ -33,6 +33,7 @@ export const TileMenu: React.FC<TileMenuProps> = ({ peerId }) => {
   const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
   const canMuteVideo = videoTrack?.enabled ? permissions?.mute : permissions?.unmute;
   const canMuteAudio = audioTrack?.enabled ? permissions?.mute : permissions?.unmute;
+
   const toggleTrackEnabled = async (track?: HMSTrack | null) => {
     if (track) {
       try {
@@ -55,6 +56,7 @@ export const TileMenu: React.FC<TileMenuProps> = ({ peerId }) => {
             <span>{`${videoTrack?.enabled ? 'Mute' : 'Unmute'} Video`}</span>
           </StyledMenuTile.ItemButton>
         ) : null}
+
         {canMuteAudio ? (
           <StyledMenuTile.ItemButton onClick={() => toggleTrackEnabled(audioTrack)}>
             {audioTrack?.enabled ? <MicOnIcon /> : <MicOffIcon />}