@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/src/TUIRoom/components/ManageMember/useIndexHooks.ts

@@ -8,6 +8,8 @@ import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-electron';
 import TUIMessage from '../common/base/Message/index';
 import { MESSAGE_DURATION } from '../../constants/message';
 import { isMobile } from '../../utils/environment';
+import AllMembersShareScreenIcon from '../common/icons/AllMembersShareScreenIcon.vue';
+import HostShareScreenIcon from '../common/icons/HostShareScreenIcon.vue';
 
 export default function useIndex() {
   const roomEngine = useGetRoomEngine();
@@ -21,11 +23,19 @@ export default function useIndex() {
     anchorUserList,
     applyToAnchorList,
     isOnStateTabActive,
+    generalUserScreenStreamList,
   } = storeToRefs(roomStore);
 
+  enum ManageControlType {
+    AUDIO = 'audio',
+    VIDEO = 'video',
+    SCREEN = 'screen',
+  }
+
   const audienceUserList = computed(() => userList.value.filter(user => !anchorUserList.value.includes(user)));
 
   const searchText = ref('');
+  const showMoreControl = ref(false);
 
   function handleToggleStaged() {
     isOnStateTabActive.value = !isOnStateTabActive.value;
@@ -42,7 +52,7 @@ export default function useIndex() {
     if (!searchText.value) {
       return list;
     }
-    return list.filter((item: UserInfo) => item.userName?.includes(searchText.value) || item.userId.includes(searchText.value));
+    return list.filter((item: UserInfo) => item.nameCard?.includes(searchText.value) || item.userName?.includes(searchText.value) || item.userId.includes(searchText.value));
   });
   const alreadyStaged = computed(() => `${t('Already on stage')} (${(anchorUserList.value.length)})`);
   const notStaged = computed(() => `${t('Not on stage')} (${(audienceUserList.value.length)})`);
@@ -54,24 +64,30 @@ export default function useIndex() {
   const audioManageInfo = computed(() => (roomStore.isMicrophoneDisableForAllUser ? t('Lift all mute') : t('All mute')));
   const videoManageInfo = computed(() => (roomStore.isCameraDisableForAllUser ? t('Lift stop all video') : t('All stop video')));
 
+  const moreControlList = computed(() => ([
+    {
+      title: roomStore.isScreenShareDisableForAllUser ?  t('All members can share screen') :  t('Screen sharing for host/admin only'),
+      icon: roomStore.isScreenShareDisableForAllUser ? AllMembersShareScreenIcon : HostShareScreenIcon,
+      func: toggleManageAllMember,
+      type: ManageControlType.SCREEN,
+    },
+  ]));
+
   const showManageAllUserDialog: Ref<boolean> = ref(false);
   const dialogContent: Ref<string> = ref('');
   const dialogTitle: Ref<string> = ref('');
   const dialogActionInfo: Ref<string> = ref('');
   let stateForAllAudio: boolean = false;
   let stateForAllVideo: boolean = false;
+  let stateForScreenShare: boolean = false;
 
-  enum ManageControlType {
-    AUDIO = 'audio',
-    VIDEO = 'video',
-  }
   const currentControlType: Ref<ManageControlType> = ref(ManageControlType.AUDIO);
 
   async function toggleManageAllMember(type: ManageControlType) {
-    showManageAllUserDialog.value = true;
     currentControlType.value = type;
     switch (type) {
       case ManageControlType.AUDIO:
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isMicrophoneDisableForAllUser
           ? t('Enable all audios') : t('All current and new members will be muted');
         dialogContent.value = roomStore.isMicrophoneDisableForAllUser
@@ -83,6 +99,7 @@ export default function useIndex() {
         dialogActionInfo.value = audioManageInfo.value;
         break;
       case ManageControlType.VIDEO:
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isCameraDisableForAllUser
           ? t('Enable all videos') : t('All and new members will be banned from the camera');
         dialogContent.value = roomStore.isCameraDisableForAllUser
@@ -93,6 +110,16 @@ export default function useIndex() {
         await nextTick();
         dialogActionInfo.value = videoManageInfo.value;
         break;
+      case ManageControlType.SCREEN:
+        stateForScreenShare = !roomStore.isScreenShareDisableForAllUser;
+        if (generalUserScreenStreamList.value.length === 0) {
+          toggleAllScreenShare();
+          break;
+        }
+        showManageAllUserDialog.value = true;
+        dialogTitle.value = t('Is it turned on that only the host/admin can share the screen?');
+        dialogContent.value = t("Other member is sharing the screen is now, the member's sharing will be terminated after you turning on");
+        break;
       default:
         break;
     }
@@ -106,11 +133,26 @@ export default function useIndex() {
       case ManageControlType.VIDEO:
         toggleAllVideo();
         break;
+      case ManageControlType.SCREEN:
+        await roomEngine.instance?.closeRemoteDeviceByAdmin({
+          userId: generalUserScreenStreamList.value[0].userId,
+          device: TUIMediaDevice.kScreen,
+        });
+        toggleAllScreenShare();
+        break;
       default:
         break;
     }
     showManageAllUserDialog.value = false;
   }
+  async function toggleAllScreenShare() {
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForScreenShare,
+      device: TUIMediaDevice.kScreen,
+    });
+    roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare);
+    showMoreControl.value = false;
+  }
   function showApplyUserList() {
     if (isMobile) {
       basicStore.setSidebarOpenStatus(true);
@@ -134,7 +176,7 @@ export default function useIndex() {
       isDisable: stateForAllAudio,
       device: TUIMediaDevice.kMicrophone,
     });
-    roomStore.setMicrophoneDisableState(stateForAllAudio);
+    roomStore.setDisableMicrophoneForAllUserByAdmin(stateForAllAudio);
   }
 
   async function toggleAllVideo() {
@@ -151,18 +193,22 @@ export default function useIndex() {
       isDisable: stateForAllVideo,
       device: TUIMediaDevice.kCamera,
     });
-    roomStore.setCameraDisableState(stateForAllVideo);
+    roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo);
   }
 
   const applyToAnchorUserContent = computed(() => {
     const lastIndex = applyToAnchorList.value.length - 1;
-    const userName = applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
+    const userName = applyToAnchorList.value[lastIndex]?.nameCard || applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
     if (applyToAnchorList.value.length === 1) {
       return `${userName} ${t('Applying for the stage')}`;
     }
     return `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;
   });
 
+  function toggleClickMoreBtn() {
+    showMoreControl.value = !showMoreControl.value;
+  }
+
   return {
     showApplyUserList,
     searchText,
@@ -183,5 +229,8 @@ export default function useIndex() {
     isOnStateTabActive,
     handleToggleStaged,
     applyToAnchorUserContent,
+    toggleClickMoreBtn,
+    showMoreControl,
+    moreControlList,
   };
 }

package/src/TUIRoom/components/RoomContent/StreamContainer/index.vue

@@ -24,7 +24,7 @@
           :enlarge-dom-id="enlargeDomId"
           class="single-stream"
           :style="streamStyle"
-          @room_dblclick="handleEnlargeStreamRegion(stream)"
+          @room-dblclick="handleEnlargeStreamRegion(stream)"
         ></stream-region>
       </div>
     </div>
@@ -65,6 +65,7 @@ import { useBasicStore } from '../../../stores/basic';
 import { LAYOUT } from '../../../constants/render';
 import StreamRegion from '../StreamRegion/index.vue';
 import TUIMessage from '../../common/base/Message/index';
+import TUIMessageBox from '../../common/base/MessageBox/index';
 import { MESSAGE_DURATION } from '../../../constants/message';
 import { debounce } from '../../../utils/utils';
 import logger from '../../../utils/common/logger';
@@ -510,10 +511,10 @@ const onUserVideoStateChanged = (eventInfo: {
     }
     // Host turns off screen sharing
     if (streamType === TUIVideoStreamType.kScreenStream) {
-      TUIMessage({
-        type: 'warning',
-        message: t('The host has turned off your screen sharing'),
-        duration: MESSAGE_DURATION.NORMAL,
+      TUIMessageBox({
+        title: t('Your screen sharing has been stopped'),
+        message: t('Your screen sharing has been stopped, Now only the host/admin can share the screen'),
+        confirmButtonText: t('I got it'),
       });
     }
   }
@@ -577,10 +578,10 @@ const handleLargeStreamLeave = () => {
 
 // Handle lazy loading of videos in sidebar & top bar
 const handleStreamContainerScroll = async () => {
-  const childDom = streamListRef.value.children[0];
   // Add nextTick to handle the problem of new users triggering scroll in top bar mode,
   // but the obtained streamListRef.value.offsetWidth has not been updated yet.
   await nextTick();
+  const childDom = streamListRef.value.children[0];
 
   // From which number
   let index = 0;

package/src/TUIRoom/components/RoomContent/StreamContainer/useStreamContainerHooks.ts

@@ -1,7 +1,8 @@
-import { watch } from 'vue';
+import { watch, ref } from 'vue';
+import type { Ref } from 'vue';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
-import {  useRoomStore } from '../../../stores/room';
-import  { TUIChangeReason, TUIMediaDeviceType,  TUIUserInfo } from '@tencentcloud/tuiroom-engine-electron';
+import {  useRoomStore, StreamInfo } from '../../../stores/room';
+import  { TUIChangeReason, TUIMediaDeviceType, TUIUserInfo, TRTCVolumeInfo } from '@tencentcloud/tuiroom-engine-electron';
 import TUIMessage from '../../common/base/Message/index';
 import { useI18n } from '../../../locales';
 import { useBasicStore } from '../../../stores/basic';
@@ -11,6 +12,8 @@ import { isMobile, isWeChat } from '../../../utils/environment';
 import logger from '../../../utils/common/logger';
 import { SMALL_VIDEO_ENC_PARAM } from '../../../constants/room';
 import useDeviceManager from '../../../hooks/useDeviceManager';
+import { throttle } from '../../../utils/utils';
+import { LAYOUT } from '../../../constants/render';
 
 const logPrefix = '[StreamContainer]';
 
@@ -19,9 +22,14 @@ export default function useStreamContainer() {
   const roomEngine = useGetRoomEngine();
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
+  const { layout } = storeToRefs(basicStore);
+  const { localStream } = storeToRefs(roomStore);
   const { t } = useI18n();
   const { deviceManager } = useDeviceManager();
 
+  const currentRemoteSpeakerUserId: Ref<string> = ref('');
+  const currentSpeakerUserId: Ref<string> = ref('');
+
   const onRemoteUserEnterRoom = (eventInfo: { userInfo: TUIUserInfo }) => {
     roomStore.addRemoteUser(eventInfo.userInfo);
   };
@@ -55,6 +63,76 @@ export default function useStreamContainer() {
       roomStore.setCanControlSelfAudio(!roomStore.isMicrophoneDisableForAllUser);
     }
   };
+
+  // Calculate the userId of the loudest speaker in the room
+  // Calculate the userId of the remote user who speaks the loudest in the current room.
+  function handleUserVoiceVolume(userVolumeList: Array<TRTCVolumeInfo>) {
+    const localUserVolume = {
+      userId: basicStore.userId,
+      volume: 0,
+    };
+    const largestRemoteUserVolume = {
+      userId: '',
+      volume: 0,
+    };
+    userVolumeList.forEach((item: TRTCVolumeInfo) => {
+      if (item.userId === basicStore.userId && localStream.value.hasAudioStream) {
+        localUserVolume.volume = item.volume;
+      } else if (item.userId !== basicStore.userId && roomStore.remoteUserObj[item.userId]?.hasAudioStream) {
+        const { userId, volume } = item;
+        if (volume > largestRemoteUserVolume.volume) {
+          largestRemoteUserVolume.userId = userId;
+          largestRemoteUserVolume.volume = volume;
+        }
+      }
+    });
+
+    const largestUserVolume = localUserVolume.volume > largestRemoteUserVolume.volume
+      ? localUserVolume : largestRemoteUserVolume;
+
+    if (currentRemoteSpeakerUserId.value) {
+      const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find((item: TRTCVolumeInfo) => (
+        item.userId === currentRemoteSpeakerUserId.value
+      ));
+      if (!lastRemoteSpeakerUserVolumeInfo || lastRemoteSpeakerUserVolumeInfo.volume === 0) {
+        if (largestRemoteUserVolume.volume > 0) {
+          currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
+        }
+      }
+    } else {
+      if (largestRemoteUserVolume.volume > 0) {
+        currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
+      }
+    }
+
+    if (currentSpeakerUserId.value) {
+      const lastSpeakerUserVolumeInfo: TRTCVolumeInfo | undefined = userVolumeList.find((item: TRTCVolumeInfo) => (
+        item.userId === currentSpeakerUserId.value
+      ));
+      if (!lastSpeakerUserVolumeInfo || lastSpeakerUserVolumeInfo.volume === 0) {
+        if (largestUserVolume.volume > 0) {
+          currentSpeakerUserId.value = largestUserVolume.userId;
+        }
+      }
+    } else {
+      if (largestUserVolume.volume > 0) {
+        currentSpeakerUserId.value = largestUserVolume.userId;
+      }
+    }
+  }
+
+  const handleUserVoiceVolumeThrottle = throttle(handleUserVoiceVolume, 1000);
+
+  // volume change
+  const onUserVoiceVolumeChanged = (eventInfo: {
+    userVolumeList: any[],
+  }) => {
+    const { userVolumeList } = eventInfo;
+    if (layout.value === LAYOUT.LARGE_SMALL_WINDOW) {
+      handleUserVoiceVolumeThrottle(userVolumeList);
+    }
+  };
+
   const {
     isDefaultOpenCamera,
     isDefaultOpenMicrophone,
@@ -67,31 +145,13 @@ export default function useStreamContainer() {
        *
        **/
       if (isWeChat) {
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
-        // @ts-ignore
         await roomEngine.instance?.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera });
       } else if (isMobile) {
-        const previewDom = document?.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
-        }
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
         const trtcCloud = roomEngine.instance?.getTRTCCloud();
         trtcCloud?.enableSmallVideoStream(false, SMALL_VIDEO_ENC_PARAM);
-        // @ts-ignore
         await roomEngine.instance?.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera });
         return;
       } else {
-        const previewDom = document?.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
-        }
         /**
          * Set device id
          *
@@ -112,13 +172,10 @@ export default function useStreamContainer() {
          * Turn on the local camera
          *
         **/
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
         await roomEngine.instance?.openLocalCamera();
       }
     }
-  }, {immediate: true});
+  }, { immediate: true });
 
   watch(isDefaultOpenMicrophone, async (val) => {
     if (val) {
@@ -142,12 +199,19 @@ export default function useStreamContainer() {
     } else {
       await roomEngine.instance?.muteLocalAudio();
     }
-  }, {immediate: true});
+  }, { immediate: true });
+
+  const isSameStream = (stream1: StreamInfo | null, stream2: StreamInfo | null) => `${stream1?.userId}_${stream1?.streamType}` === `${stream2?.userId}_${stream2?.streamType}`;
+
   return {
+    currentRemoteSpeakerUserId,
+    currentSpeakerUserId,
     onRemoteUserEnterRoom,
     onRemoteUserLeaveRoom,
     onSeatListChanged,
     onUserAudioStateChanged,
+    onUserVoiceVolumeChanged,
+    isSameStream,
     t,
   };
 }

package/src/TUIRoom/components/RoomContent/StreamRegion/index.vue

@@ -3,7 +3,7 @@
     v-if="playRegionDomId !== enlargeDomId"
     ref="streamRegionRef"
     class="user-stream-container"
-    @dblclick="$emit('room_dblclick')"
+    @dblclick="$emit('room-dblclick')"
   >
     <local-screen-stream
       v-if="isLocalScreen"
@@ -80,6 +80,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+defineEmits(['room-dblclick']);
 
 // Whether it is a local screen sharing placeholder window
 const isLocalScreen = computed(() => (
@@ -111,11 +112,34 @@ const showIcon = computed(() => showMasterIcon.value || showAdminIcon.value);
 const isScreenStream = computed(() => props.stream.streamType === TUIVideoStreamType.kScreenStream);
 const userInfo = computed(() => {
   if (isInnerScene) {
-    return `${props.stream.userName} | ${props.stream.userId}` || props.stream.userId;
+    return `${props.stream.nameCard || props.stream.userName} | ${props.stream.userId}`;
   }
-  return props.stream.userName || props.stream.userId;
+  return props.stream.nameCard || props.stream.userName || props.stream.userId;
 });
 
+watch(
+  () => props.stream.hasVideoStream,
+  async (val) => {
+    if (props.stream.userId === basicStore.userId && props.stream.streamType === TUIVideoStreamType.kCameraStream) {
+      if (val) {
+        await nextTick();
+        const userIdEl = document?.getElementById(`${playRegionDomId.value}`) as HTMLDivElement;
+        if (userIdEl) {
+          logger.debug(`${logPrefix}watch isVideoStreamAvailable:`, props.stream.userId, userIdEl);
+          await roomEngine.instance?.setLocalVideoView({
+            view: `${playRegionDomId.value}`,
+          });
+        }
+      } else {
+        await roomEngine.instance?.setLocalVideoView({
+          view: null,
+        });
+      }
+    }
+  },
+  { immediate: true },
+);
+
 // The stream type to be pulled from the remote user
 const streamTypeToFetch = computed(() => {
   const { streamType, userId } = props.stream;

package/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue

@@ -18,7 +18,7 @@
         <div v-for="item in applyToAnchorList" :key="item.userId" class="apply-item">
           <div class="user-info">
             <Avatar class="avatar-url" :img-src="item.avatarUrl"></Avatar>
-            <span class="user-name" :title="item.userName || item.userId">{{ item.userName || item.userId }}</span>
+            <span class="user-name" :title="roomService.getDisplayName(item)">{{ roomService.getDisplayName(item) }}</span>
           </div>
           <div class="control-container">
             <tui-button size="default" class="agree" @click="handleUserApply(item.userId, true)">
@@ -62,6 +62,7 @@ import Avatar from '../../../common/Avatar.vue';
 import Dialog from '../../../common/base/Dialog/index.vue';
 import SvgIcon from '../../../common/base/SvgIcon.vue';
 import TuiButton from '../../../common/base/Button.vue';
+import { roomService } from '../../../../services';
 
 const {
   t,

package/src/TUIRoom/components/RoomFooter/EndControl/index.vue

@@ -23,7 +23,7 @@
               v-for="user in remoteUserList"
               :key="user.userId"
               :value="user.userId"
-              :label="user.userName"
+              :label="user.nameCard || user.userName"
               theme="white"
             />
           </tui-select>

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -8,6 +8,7 @@ import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import TUIRoomEngine, { TUIRole, TUIRoomEvents } from '@tencentcloud/tuiroom-engine-electron';
 import logger from '../../../utils/common/logger';
 import TUIMessage from '../../common/base/Message/index';
+import { roomService } from '../../../services';
 
 export default function useEndControl() {
   const { t } = useI18n();
@@ -35,8 +36,7 @@ export default function useEndControl() {
   const selectedUser: Ref<string> = ref('');
   const showTransfer = ref(false);
   const searchName = ref('');
-  const filteredList = computed(() => remoteUserList.value.filter(searchUser => (
-    searchUser.userId.includes(searchName.value)) || (searchUser.userName?.includes(searchName.value))));
+  const filteredList = computed(() => remoteUserList.value.filter(searchUser => (searchUser.nameCard?.includes(searchName.value)) || (searchUser.userId.includes(searchName.value)) || (searchUser.userName?.includes(searchName.value))));
   const hasNoData = computed(() => filteredList.value.length === 0);
   const isMasterWithOneRemoteUser = computed(() => remoteUserList.value.length === 1);
   const isMasterWithRemoteUser = computed(() => remoteUserList.value.length > 0);
@@ -169,9 +169,16 @@ export default function useEndControl() {
   TUIRoomEngine.once('ready', () => {
     roomEngine.instance?.on(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
   });
-
+  const handleMount = () => {
+    const { userRole } = roomService.roomStore.localUser;
+    if (userRole === TUIRole.kRoomOwner || userRole === TUIRole.kAdministrator) {
+      handleUpdateSeatApplicationList();
+    }
+  };
+  roomService.lifeCycleManager.on('mount', handleMount);
   onUnmounted(() => {
     roomEngine.instance?.off(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+    roomService.lifeCycleManager.off('mount', handleMount);
   });
   return {
     t,

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/Index.vue

@@ -85,7 +85,7 @@ import logger from '../../../utils/common/logger';
 const { t } = useI18n();
 
 const roomStore = useRoomStore();
-const { isAudience, hasOtherScreenShare } = storeToRefs(roomStore);
+const { isAudience, hasOtherScreenShare, isGeneralUser, isScreenShareDisableForAllUser } = storeToRefs(roomStore);
 const roomEngine = useGetRoomEngine();
 
 const logPrefix = '[ScreenShareControl]';
@@ -125,6 +125,16 @@ async function toggleScreenShare() {
     });
     return;
   }
+
+  if (isGeneralUser.value && isScreenShareDisableForAllUser.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t('Failed to initiate screen sharing, currently only host/admin can share screen.'),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
   if (!(window as any).isHasScreen && process.platform === 'darwin') {
     showPermissionVisible.value = true;
   }

package/src/TUIRoom/components/RoomFooter/VideoControl.vue

@@ -116,10 +116,6 @@ async function toggleMuteVideo() {
       });
       return;
     }
-    // There is a list of camera
-    roomEngine.instance?.setLocalVideoView({
-      view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-    });
     if (isMobile) {
       if (isH5) {
         const trtcCloud = roomEngine.instance?.getTRTCCloud();
@@ -152,9 +148,6 @@ async function onRequestReceived(eventInfo: { request: TUIRequest }) {
 // Accept the host invitation and turn on the camera
 async function handleAccept() {
   roomStore.setCanControlSelfVideo(true);
-  roomEngine.instance?.setLocalVideoView({
-    view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-  });
   await roomEngine.instance?.responseRemoteRequest({
     requestId: requestOpenCameraRequestId.value,
     agree: true,

package/src/TUIRoom/components/RoomHeader/UserInfo/index.vue

@@ -9,40 +9,15 @@
       ></svg-icon>
     </div>
     <div v-if="showUserControl" class="user-control-container">
-      <div v-show="showEditNameContainer">
-        <div class="user-control-item-head" @click="showEditUserNameDialog">{{ t('Edit profile') }}</div>
-      </div>
       <div class="user-control-item-foot" @click="$emit('log-out')">{{ t('Log out') }}</div>
     </div>
-    <Dialog
-      v-model="showUserNameEdit"
-      :title="t('Edit profile')"
-      :modal="true"
-      width="480px"
-      :close-on-click-modal="true"
-      :append-to-body="true"
-    >
-      <div class="edit-content">
-        <span>{{ t('User Name') }}</span>
-        <tui-input v-model="tempUserName" class="edit-name-input" :placeholder="t('Please input user name')" />
-      </div>
-      <template #footer>
-        <tui-button class="button" size="default" @click="closeEditUserNameDialog">{{ t('Cancel') }}</tui-button>
-        <tui-button class="button" size="default" type="primary" @click="handleSaveUserName(tempUserName)">
-          {{ t('Save') }}
-        </tui-button>
-      </template>
-    </Dialog>
   </div>
 </template>
 <script setup lang="ts">
-import Dialog from '../../common/base/Dialog/index.vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
 import ArrowStrokeSelectDownIcon from '../../common/icons/ArrowStrokeSelectDownIcon.vue';
 import useUserInfo from './useUserInfoHooks';
 import Avatar from '../../common/Avatar.vue';
-import TuiButton from '../../common/base/Button.vue';
-import TuiInput from '../../common/base/Input.vue';
 import { isInnerScene } from '../../../utils/constants';
 import { roomService } from '../../../services';
 import TUIMessage from '../../common/base/Message/index';
@@ -61,11 +36,8 @@ const roomStore = useRoomStore();
 const {
   t,
   showUserControl,
-  showUserNameEdit,
   userInfoRef,
-  tempUserName,
   handleUserControl,
-  showEditUserNameDialog,
   closeEditUserNameDialog,
 } = useUserInfo();
 
@@ -73,31 +45,28 @@ const props = withDefaults(defineProps<{
   userId: string,
   userName: string,
   avatarUrl?: string,
-  isShowEditName?: boolean,
 }>(), {
-  isShowEditName: false,
 });
-const showEditNameContainer = isInnerScene && props.isShowEditName;
 
-/**
- * Save the new userName
- *
-**/
-async function handleSaveUserName(userName: string) {
-  if (userName.length === 0) {
-    TUIMessage({
-      type: 'warning',
-      message: t('Username length should be greater than 0'),
-      duration: MESSAGE_DURATION.NORMAL,
-    });
-    return;
-  }
-  emits('update-user-name', userName);
-  basicStore.setUserName(userName);
-  TUIRoomEngine.setSelfInfo({ userName, avatarUrl: roomStore.localUser.avatarUrl || '' });
-  roomStore.setLocalUser({ userName });
-  closeEditUserNameDialog();
-}
+// /**
+//  * Save the new userName
+//  *
+// **/
+// async function handleSaveUserName(userName: string) {
+//   if (userName.length === 0) {
+//     TUIMessage({
+//       type: 'warning',
+//       message: t('Username length should be greater than 0'),
+//       duration: MESSAGE_DURATION.NORMAL,
+//     });
+//     return;
+//   }
+//   emits('update-user-name', userName);
+//   basicStore.setUserName(userName);
+//   TUIRoomEngine.setSelfInfo({ userName, avatarUrl: roomStore.localUser.avatarUrl || '' });
+//   roomStore.setLocalUser({ userName });
+//   closeEditUserNameDialog();
+// }
 
 </script>
 <style lang="scss" scoped>