diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx
index 4660155506..aeef9a6b59 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx
+++ b/packages/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 = () => {
) : null}
- {isChangeNameEnabled && (
- updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn">
-
-
- Change Name
-
-
- )}
updateState(MODALS.SELF_ROLE_CHANGE, true)} />
{isAllowedToPublish.screen && isEmbedEnabled && (
@@ -223,9 +204,7 @@ export const DesktopOptions = () => {
updateState(MODALS.BULK_ROLE_CHANGE, value)} />
)}
{openModals.has(MODALS.MUTE_ALL) && updateState(MODALS.MUTE_ALL, value)} />}
- {openModals.has(MODALS.CHANGE_NAME) && (
- updateState(MODALS.CHANGE_NAME, value)} />
- )}
+
{openModals.has(MODALS.START_RECORDING) && (
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
index 98af8d2cb0..d7406183bc 100644
--- 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 = () => {
) : null}
- {
- updateState(MODALS.CHANGE_NAME, true);
- setOpenOptionsSheet(false);
- }}
- >
-
- Change Name
-
-
{isVideoOn ? (
setOpenOptionsSheet(false)} />
diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
index ff724bc19c..074ad5b7f2 100644
--- 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 (
-
- e.stopPropagation()}
- >
-
-
+ <>
+
+ e.stopPropagation()}
+ >
+
+
- {isMobile ? (
-
-
-
-
-
- {peer.name}
- {isLocal ? ` (You)` : null}
-
- {peer?.roleName ? (
-
- {peer.roleName}
+ {isMobile ? (
+
+
+
+
+
+ {peer.name}
+ {isLocal ? ` (You)` : null}
- ) : null}
-
+ {peer?.roleName ? (
+
+ {peer.roleName}
+
+ ) : null}
+
-
-
-
-
-
- setOpen(false)} />
-
-
-
- ) : (
-
-
-
- )}
-
+
+
+
+
+
+ setOpen(false)} />
+
+
+
+ ) : (
+
+
+
+ )}
+
+ {showNameChangeModal && }
+ >
);
};
diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx
index 92ceb6da16..718ce6beff 100644
--- 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 && }
{showSpotlight && closeSheetOnClick()} />}
{canMinimise && }
+ {isChangeNameEnabled ? (
+ {
+ openNameChangeModal();
+ closeSheetOnClick();
+ }}
+ >
+
+ Change Name
+
+ ) : null}
>
)
) : (
@@ -222,6 +240,7 @@ export const TileMenuContent = props => {
{isVideoEnabled ? 'Mute' : 'Request Unmute'}
) : null}
+
{toggleAudio ? (
{
{isAudioEnabled ? 'Mute' : 'Request Unmute'}
) : null}
+
{audioTrackID ? (
@@ -246,13 +266,16 @@ export const TileMenuContent = props => {
setVolume(e[0])} />
) : null}
+
{showPinAction && (
<>
{showSpotlight && closeSheetOnClick()} />}
>
)}
+
+
{removeOthers ? (
= ({ 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 = ({ peerId }) => {
{`${videoTrack?.enabled ? 'Mute' : 'Unmute'} Video`}
) : null}
+
{canMuteAudio ? (
toggleTrackEnabled(audioTrack)}>
{audioTrack?.enabled ? : }