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 ? : }