@tencentcloud/roomkit-electron-vue3 2.3.3 → 2.4.0

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

@@ -8,11 +8,16 @@
       v-model="isDialogVisible" :title="t('VirtualBackground')" width="600px" :modal="true"
       :append-to-room-container="true" @close="closeSettingPanel"
     >
-      <div id="stream-preview" class="stream-preview"></div>
+      <div id="stream-preview" class="stream-preview">
+        <div v-if="isLoading" class="mask"></div>
+        <div v-if="isLoading" class="spinner"></div>
+      </div>
       <div class="setting">
         <div
-          :class="['setting-item', currentVirtualBackground === 'close' ? 'active' : '']"
-          @click="closeVirtualBackground"
+          :class="[
+            'setting-item', selectedBackground === 'close' ? 'active' : ''
+          ]"
+          @click="applyVirtualBackground('close')"
         >
           <i class="setting-item-icon">
             <img :src="CloseVirtualBackground" alt="close" style="width: 32px;" />
@@ -20,8 +25,10 @@
           <span>{{ t('Close') }}</span>
         </div>
         <div
-          :class="['setting-item', currentVirtualBackground === 'blur' ? 'active' : '']"
-          @click="openBlurredBackground"
+          :class="[
+            'setting-item', selectedBackground === 'blur' ? 'active' : ''
+          ]"
+          @click="applyVirtualBackground('blur')"
         >
           <i class="setting-item-icon">
             <img :src="BlurredBackground" alt="blurred" />
@@ -29,12 +36,20 @@
           <span>{{ t('BlurredBackground') }}</span>
         </div>
       </div>
+      <div class="footer">
+        <TuiButton
+          class="button" :disabled="!isAllowed" @click="confirmVirtualBackground"
+        >
+          {{ t('Save') }}
+        </TuiButton>
+        <TuiButton class="button" type="primary" @click="closeSettingPanel">{{ t('Cancel') }}</TuiButton>
+      </div>
     </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import IconButton from '../common/base/IconButton.vue';
 import VirtualBackgroundIcon from '../common/icons/VirtualBackgroundIcon.vue';
 import { useI18n } from '../../locales';
@@ -42,41 +57,65 @@ import { roomService } from '../../services';
 import Dialog from '../common/base/Dialog/index.vue';
 import CloseVirtualBackground from '../../assets/imgs/close-virtual-background.png';
 import BlurredBackground from '../../assets/imgs/blurred-background.png';
+import TuiButton from '../common/base/Button.vue';
 
 const { t } = useI18n();
 const componentConfig = roomService.componentManager.getComponentConfig('VirtualBackground');
-
-const currentVirtualBackground = ref<'close' | 'blur'>('close');
+const isAllowed = computed(() => roomService.roomStore.localStream.hasVideoStream);
+const appliedBackground = ref<'close' | 'blur'>('close');
+const selectedBackground = ref<'close' | 'blur'>('close');
 const isDialogVisible = ref(false);
+const isLoading = ref(false);
 const openSettingPanel = async () => {
   roomService.virtualBackground.initVirtualBackground();
   isDialogVisible.value = true;
+  isLoading.value = true;
   await nextTick();
-  roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+  await roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+  await applyVirtualBackground(appliedBackground.value);
+  isLoading.value = false;
 };
-const closeSettingPanel = () => {
+
+const closeSettingPanel = async () => {
   isDialogVisible.value = false;
   roomService.roomEngine.instance?.stopCameraDeviceTest();
+  selectedBackground.value = appliedBackground.value;
 };
 
-const openBlurredBackground = () => {
-  currentVirtualBackground.value = 'blur';
-  roomService.virtualBackground.toggleVirtualBackground(true);
+const confirmVirtualBackground = async () => {
+  if (!isAllowed.value) return;
+  appliedBackground.value = selectedBackground.value;
+  closeSettingPanel();
+  if (selectedBackground.value === 'blur') {
+    await roomService.virtualBackground.toggleVirtualBackground(true);
+  }
+  if (selectedBackground.value === 'close') {
+    await roomService.virtualBackground.toggleVirtualBackground(false);
+  }
 };
-const closeVirtualBackground = () => {
-  currentVirtualBackground.value = 'close';
-  roomService.virtualBackground.toggleVirtualBackground(false);
+
+const applyVirtualBackground = async (type: 'close' | 'blur') => {
+  isLoading.value = true;
+  try {
+    selectedBackground.value = type;
+    await roomService.virtualBackground.toggleTestVirtualBackground(type === 'blur');
+  } finally {
+    isLoading.value = false;
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .stream-preview {
   display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   border-radius: 8px;
   overflow: hidden;
   min-height: 310px;
   background-color: #000;
+  position: relative;
 }
 
 .setting {
@@ -97,6 +136,7 @@ const closeVirtualBackground = () => {
     color: #4F586B;
     font-size: 12px;
     border: 1px solid transparent;
+    cursor: pointer;
 
     &-icon {
       display: flex;
@@ -116,4 +156,48 @@ const closeVirtualBackground = () => {
     color: #fff;
   }
 }
+
+.spinner {
+  z-index: 3;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #1C66E5;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+.mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  z-index: 2;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 10px;
+  padding: 1rem;
+  border-radius: 8px;
+  .button {
+    width: 84px;
+    height: 32px;
+  }
+}
 </style>

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

@@ -77,8 +77,6 @@ import SettingControl from '../SettingControl.vue';
 import VirtualBackground from '../VirtualBackground.vue';
 import bus from '../../../hooks/useMitt';
 
-import TUIRoomAegis from '../../../utils/aegis';
-
 import useRoomFooter from './useRoomFooterHooks';
 
 const {
@@ -89,7 +87,6 @@ const {
 } = useRoomFooter();
 
 function handleControlClick(name: string) {
-  TUIRoomAegis.reportEvent({ name, ext1: name });
   bus.emit('experience-communication', name);
 }
 </script>

package/src/TUIRoom/components/RoomHeader/RoomInfo/useRoomInfoHooks.ts

@@ -14,7 +14,7 @@ export default function useRoomInfo() {
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
   const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
-  const { masterUserId } = storeToRefs(roomStore);
+  const { masterUserId, roomName } = storeToRefs(roomStore);
   const { t } = useI18n();
   const isShowRoomInfo = ref(false);
   const roomType = computed(() => (roomStore.isFreeSpeakMode ? t('Free Speech Room') : t('On-stage Speaking Room')));
@@ -25,7 +25,7 @@ export default function useRoomInfo() {
 
   const isShowRoomInfoTitle = computed(() => masterUserName.value);
 
-  const conferenceTitle = computed(() => `${masterUserName.value}${t('Quick Meeting')}`);
+  const conferenceTitle = computed(() => `${roomName.value}`);
 
   const roomInfoTabList = computed(() => [
     { id: 1, title: 'Host', content: masterUserName.value, copyLink: '', isShowCopyIcon: false, visible: true },

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

@@ -85,7 +85,6 @@ import { LAYOUT } from '../../../constants/render';
 import { useBasicStore } from '../../../stores/basic';
 import { useRoomStore } from '../../../stores/room';
 import { storeToRefs } from 'pinia';
-import TUIRoomAegis from '../../../utils/aegis';
 import { useI18n } from '../../../locales';
 import { IconButtonLayout } from '../../../constants/room';
 import IconButton from '../../common/base/IconButton.vue';
@@ -107,7 +106,6 @@ const layoutControlConfig = roomService.getComponentConfig('LayoutControl');
 
 function handleClick(layout: any) {
   basicStore.setLayout(layout);
-  TUIRoomAegis.reportEvent({ name: 'layout', ext1: layout });
 }
 
 function handleClickLayoutIcon() {

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

@@ -40,7 +40,6 @@
 import { ref, Ref, onUnmounted, watchEffect, reactive, shallowRef } from 'vue';
 import { useBasicStore } from '../../../stores/basic';
 import { storeToRefs } from 'pinia';
-import TUIRoomAegis from '../../../utils/aegis';
 import { useI18n } from '../../../locales';
 import TUIRoomEngine, { TUIRoomEvents, TUINetwork, TUINetworkQuality } from '@tencentcloud/tuiroom-engine-electron';
 import useRoomEngine from '../../../hooks/useRoomEngine';
@@ -108,7 +107,6 @@ watchEffect(() => {
 
 function handleClickNetworkIcon() {
   showNetworkInfo.value = !showNetworkInfo.value;
-  TUIRoomAegis.reportEvent({ name: 'networkInfo', ext1: 'networkInfo' });
 }
 
 function handleClickOutSide() {

package/src/TUIRoom/components/common/base/MessageBox/index.ts

@@ -10,7 +10,8 @@ export type MessageProps = {
 }
 const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => {
   const container = document.createElement('div');
-  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.getElementById('pre-conference-container');
+  if (!fullscreenElement) return;
   fullscreenElement.appendChild(container);
 
   const onRemove = () => {

package/src/TUIRoom/conference.vue

@@ -30,7 +30,6 @@ import { isMobile, isWeChat } from './utils/environment';
 import vTap from './directives/vTap';
 import { TUIKickedOutOfRoomReason } from '@tencentcloud/tuiroom-engine-electron';
 
-import TUIRoomAegis from './utils/aegis';
 import { MESSAGE_DURATION } from './constants/message';
 
 import TUIMessageBox from './components/common/base/MessageBox/index';
@@ -134,18 +133,6 @@ onUnmounted(() => {
 });
 
 const { sdkAppId, showHeaderTool } = roomService.basicStore;
-watch(
-  () => sdkAppId,
-  (val: number) => {
-    if (val) {
-      TUIRoomAegis.setSdkAppId(val);
-      TUIRoomAegis.reportEvent({
-        name: 'loaded',
-        ext1: 'loaded-success',
-      });
-    }
-  },
-);
 const tuiRoomClass = computed(() => {
   const roomClassList = ['tui-room', `tui-theme-${roomService.basicStore.defaultTheme}`];
   if (isMobile) {
@@ -310,6 +297,7 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
 .tui-room {
   width: 100%;
   height: 100%;
+  min-width: 850px;
   position: relative;
   color: var(--font-color-1);
   background-color: var(--background-color-1);
@@ -339,6 +327,7 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
   &.tui-room-h5 {
     width: 100%;
     height: 100%;
+    min-width: initial;
   }
 }
 
@@ -355,5 +344,9 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     width: 80%;
     border-radius: 10px;
   }
+  &.tui-room-h5,.chat-room {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

package/src/TUIRoom/extension/RoomMessageCard/RoomMessageCard.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="content-desc">
           <div class="title">
-            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Meeting')}` }}
+            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Conference')}` }}
           </div>
           <ul class="users">
             <template

package/src/TUIRoom/extension/chatExtension.ts

@@ -233,7 +233,7 @@ export class ChatExtension {
     const chatType: ChatType = params?.chatType;
     const extension: ExtensionInfo = {
       weight: -1,
-      text: this.service?.t('quick meeting') || '快速会议',
+      text: this.service?.t('quick conference') || '快速会议',
       icon: 'https://qcloudimg.tencent-cloud.cn/raw/148ab10dfe654076b41f0d0945bb82e8.png',
       data: {
         name: 'quickRoom',

package/src/TUIRoom/hooks/useMasterApplyControl.ts

@@ -64,7 +64,7 @@ export default function () {
       }
     } catch (error: any) {
       if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
-        TUIMessage({ type: 'warning', message: t('The current number of people on stage has reached the limit') });
+        TUIMessage({ type: 'warning', message: t('The stage is full') });
       } else {
         logger.error('Failure to process a user request', error);
       }
@@ -83,7 +83,7 @@ export default function () {
       }
     } catch (error: any) {
       if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
-        TUIMessage({ type: 'warning', message: t('The current number of people on stage has reached the limit') });
+        TUIMessage({ type: 'warning', message: t('The stage is full') });
       } else {
         logger.error('Failed application for consent to go on stage', error);
       }
@@ -106,12 +106,13 @@ export default function () {
 
   // Process all users’ requests to access the microphone
   async function handleAllUserApply(isAgreeOrRejectAllUserApply: boolean) {
+    let hasErrorOccurred = false;
     const applyUserList = applyToAnchorList.value.map(item => ({
       userId: item.userId,
       userName: item.userName,
       applyToAnchorRequestId: item.applyToAnchorRequestId,
     }));
-    for (const { userId, userName, applyToAnchorRequestId } of applyUserList) {
+    for (const { applyToAnchorRequestId } of applyUserList) {
       const action = isAgreeOrRejectAllUserApply ? 'Agree' : 'Reject';
       const actionFailedMessage = `${action} sb on stage failed, please retry`;
       try {
@@ -123,12 +124,15 @@ export default function () {
           roomStore.removeApplyToAnchorUser(applyToAnchorRequestId);
         }
       } catch (error) {
-        logger.error(actionFailedMessage);
-        TUIMessage({
-          type: 'warning',
-          message: t(`${action} sb on stage failed, please retry`, { name: userName || userId }),
-          duration: MESSAGE_DURATION.NORMAL,
-        });
+        if (!hasErrorOccurred) {
+          logger.error(actionFailedMessage);
+          TUIMessage({
+            type: 'warning',
+            message: t('The stage is full'),
+            duration: MESSAGE_DURATION.NORMAL,
+          });
+          hasErrorOccurred = true;
+        }
       }
     }
   }
@@ -253,7 +257,8 @@ export default function () {
       }
       const onlyOneUserTakeStage = newVal.length === 1;
       const firstUser = applyToAnchorList.value[0];
-      const userName = firstUser?.userName || firstUser?.userId;
+      const lastIndex = applyToAnchorList.value.length - 1;
+      const userName = applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
       const message = onlyOneUserTakeStage
         ? `${userName} ${t('Applying for the stage')}`
         : `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;

package/src/TUIRoom/index.ts

@@ -3,9 +3,10 @@ import PreConferenceView from './preConference.vue';
 import TUIRoomEngine from '@tencentcloud/tuiroom-engine-electron';
 import { conference, RoomEvent } from './conference';
 import RoomMessageCard from './extension/RoomMessageCard/RoomMessageCard.vue';
+import { roomService } from './services';
 export * from './components/common/base/index';
 
-export { ConferenceMainView, PreConferenceView, TUIRoomEngine, conference, RoomEvent, RoomMessageCard };
+export { ConferenceMainView, PreConferenceView, TUIRoomEngine, roomService, conference, RoomEvent, RoomMessageCard };
 
 ConferenceMainView.install = (app) => {
   app.component('ConferenceView', ConferenceMainView);

package/src/TUIRoom/locales/en-US.ts

@@ -38,7 +38,7 @@ export default {
   'Join Room': 'Join Room',
   'Enter room ID': 'Enter room ID',
   'video conferencing': ' \'s video conferencing',
-  'Quick Meeting': ' \'s Quick Meeting',
+  'Quick Conference': ' \'s Quick Conference',
   'Room ID': 'Room ID',
   'Low Definition': 'Low Definition',
   'Standard Definition': 'Standard Definition',
@@ -71,9 +71,9 @@ export default {
   'Full screen': 'Full screen',
   Members: 'Members',
   'Search Member': 'Search Member',
-  'Transfer owner': 'Transfer owner',
+  'Make host': 'Make host',
   'Set as administrator': 'Set as administrator',
-  'Revoke administrator': 'Revoke administrator',
+  'Remove administrator': 'Remove administrator',
   // @ts-ignore
   'The administrator status of sb has been withdrawn': ({ named }) => `The administrator status of ${named('name')} has been withdrawn`,
   // @ts-ignore
@@ -252,7 +252,7 @@ export default {
   'An invitation to open the microphone has been sent to sb.': ({ named }) => `An invitation to open the microphone has been sent to ${named('name')}`,
   // @ts-ignore
   'An invitation to open the camera has been sent to sb.': ({ named }) => `An invitation to open the camera has been sent to ${named('name')}`,
-  'Transfer owner failed, please try again.': 'Transfer owner failed, please try again.',
+  'Make host failed, please try again.': 'Make host failed, please try again.',
   // @ts-ignore
   'Sb has been set as an administrator': ({ named }) => `${named('name')} has been set as an administrator.`,
   'Succeed on stage': 'Succeed on stage',
@@ -273,8 +273,7 @@ export default {
   'You are now an administrator': 'You are now an administrator',
   'The RoomOwner has withdrawn your administrator privileges': 'The RoomOwner has withdrawn your administrator privileges',
   'This member has already received the same request, please try again later': 'This member has already received the same request, please try again later',
-  'Failed to go on stage, invitation has timed out': 'Failed to go on stage, invitation has timed out',
-  'The current number of people on stage has reached the limit': 'The current number of people on stage has reached the limit',
+  'The request to go on stage has timed out': 'The request to go on stage has timed out',
   // @ts-ignore
   'The invitation to sb to go on stage has timed out': ({ named }) => `The invitation to ${named('name')} to go on stage has timed out`,
   'Currently no member has applied to go on stage': 'Currently no member has applied to go on stage',
@@ -291,8 +290,10 @@ export default {
   'people applying to stage': 'people applying to stage',
   // @ts-ignore
   'and so on number people applying to stage': ({ named }) => `and so on ${named('number')} people applying to stage`,
+  'The stage is full, please contact the host': 'The stage is full, please contact the host',
+  'The stage is full': 'The stage is full',
   // Room Chat Fusion Card Translation
-  'quick meeting': 'quick meeting',
+  'quick conference': 'quick conference',
   Meeting: 'Meeting',
   'Meeting in progress': 'Meeting in progress',
   Initiating: 'Initiating',

package/src/TUIRoom/locales/zh-CN.ts

@@ -35,7 +35,7 @@ export default {
   'Join Room': '进入房间',
   'Enter room ID': '输入房间号',
   'video conferencing': ' 的视频会议',
-  'Quick Meeting': '的快速会议',
+  'Quick Conference': '的快速会议',
   'Room ID': '房间号',
   'Low Definition': '流畅',
   'Standard Definition': '标清',
@@ -68,9 +68,9 @@ export default {
   'Full screen': '全屏',
   Members: '成员',
   'Search Member': '搜索成员',
-  'Transfer owner': '转交房主',
+  'Make host': '转交房主',
   'Set as administrator': '设为管理员',
-  'Revoke administrator': '撤销管理员',
+  'Remove administrator': '撤销管理员',
   // @ts-ignore
   'The administrator status of sb has been withdrawn': ({ named }) => `已将 ${named('name')} 的管理员身份撤回`,
   // @ts-ignore
@@ -222,9 +222,9 @@ export default {
   'kicked out of the room by other device': '相同账号在其他客户端进入房间',
   'kicked out of the room by serve': '被服务端踢出房间',
   // @ts-ignore
-  'Reject sb stage failed, please retry': ({ named }) => `拒绝 ${named('name')} 上台失败, 请重试`,
+  'Reject sb on stage failed, please retry': ({ named }) => `拒绝 ${named('name')} 上台失败, 请重试`,
   // @ts-ignore
-  'Agree sb stage failed, please retry': ({ named }) => `同意 ${named('name')} 上台失败, 请重试`,
+  'Agree sb on stage failed, please retry': ({ named }) => `同意 ${named('name')} 上台失败, 请重试`,
   'Has been fully muted and cannot open the microphone': '已被全员静音，无法打开麦克风',
   'Has been muted by the host and cannot open the microphone': '已被主持人静音，无法打开麦克风',
   'To apply to speak in the room, please raise your hand first to apply for the microphone': '申请发言房间，请先举手申请上麦',
@@ -252,7 +252,7 @@ export default {
   'An invitation to open the microphone has been sent to sb.': ({ named }) => `已向 ${named('name')} 发出开启麦克风邀请`,
   // @ts-ignore
   'An invitation to open the camera has been sent to sb.': ({ named }) => `已向 ${named('name')} 发出开启摄像头邀请`,
-  'Transfer owner failed, please try again.': '转交房主失败，请重试',
+  'Make host failed, please try again.': '转交房主失败，请重试',
   // @ts-ignore
   'Sb has been set as an administrator': ({ named }) => `已将 ${named('name')} 设为管理员`,
   'Succeed on stage': '上台成功',
@@ -273,8 +273,7 @@ export default {
   'You are now an administrator': '您已成为管理员',
   'The RoomOwner has withdrawn your administrator privileges': '房主已收回您的管理员权限',
   'This member has already received the same request, please try again later': '该成员已收到相同请求，请稍后再试',
-  'Failed to go on stage, invitation has timed out': '上台失败，邀请已超时',
-  'The current number of people on stage has reached the limit': '当前上台人数已达上限',
+  'The request to go on stage has timed out': '上台请求已超时',
   // @ts-ignore
   'The invitation to sb to go on stage has timed out': ({ named }) => `对${named('name')}的上台邀请已超时`,
   'Currently no member has applied to go on stage': '暂无成员申请上台',
@@ -291,8 +290,10 @@ export default {
   'people applying to stage': '人正在申请上台',
   // @ts-ignore
   'and so on number people applying to stage': ({ named }) => `等 ${named('number')} 人正在申请上台`,
+  'The stage is full, please contact the host': '台上人数已满，请联系主持人',
+  'The stage is full': '台上人数已满',
   // Room Chat Fusion Card Translation
-  'quick meeting': '快速会议',
+  'quick conference': '快速会议',
   Meeting: '会议',
   'Meeting in progress': '会议 进行中',
   Initiating: '正在发起',

package/src/TUIRoom/services/function/virtualBackground.ts

@@ -5,6 +5,7 @@ interface IVirtualBackground {
   dispose(): void;
   initVirtualBackground(): Promise<void>;
   toggleVirtualBackground(enabled: boolean): Promise<void>;
+  toggleTestVirtualBackground(enabled: boolean): Promise<void>;
 }
 
 export class VirtualBackground implements IVirtualBackground {
@@ -27,6 +28,7 @@ export class VirtualBackground implements IVirtualBackground {
 
   private handleUnmount = async () => {
     await this.toggleVirtualBackground(false);
+    await this.toggleTestVirtualBackground(false);
   };
 
   public dispose() {
@@ -43,14 +45,24 @@ export class VirtualBackground implements IVirtualBackground {
   public async toggleVirtualBackground(enabled: boolean): Promise<void> {
     await this.initVirtualBackground();
     const { sdkAppId, userId, userSig } = this.service.basicStore;
-    await this.trtcCloud.callExperimentalAPI(JSON.stringify({
-      api: 'enableVirtualBackground',
-      params: {
-        sdkAppId,
-        userId,
-        userSig,
-        enable: enabled,
-      },
-    }));
+    const params =  {
+      sdkAppId,
+      userId,
+      userSig,
+      enable: enabled,
+    };
+    await this.trtcCloud.callExperimentalAPI(JSON.stringify({ api: 'enableVirtualBackground', params }));
+  }
+
+  public async toggleTestVirtualBackground(enabled: boolean): Promise<void> {
+    await this.initVirtualBackground();
+    const { sdkAppId, userId, userSig } = this.service.basicStore;
+    const params =  {
+      sdkAppId,
+      userId,
+      userSig,
+      enable: enabled,
+    };
+    await this.trtcCloud.callExperimentalAPI(JSON.stringify({ api: 'enableTestVirtualBackground', params }));
   }
 }

package/src/TUIRoom/services/function/waterMark.ts

@@ -88,6 +88,9 @@ export class WaterMark implements IWaterMark {
     targetElement.appendChild(watermarkContainer);
 
     const addWatermarkElements = () => {
+      // clear old watermark elements
+      watermarkContainer.innerHTML = '';
+
       // Calculate watermark spacing based on max width
       const maxWidth = 200;
       const watermarkSpacing = maxWidth + 25;
@@ -106,6 +109,9 @@ export class WaterMark implements IWaterMark {
 
     addWatermarkElements();
 
+    const resizeObserver = new ResizeObserver(addWatermarkElements);
+    resizeObserver.observe(watermarkContainer);
+
     const observerCallback = (mutations: MutationRecord[], observer: MutationObserver) => {
       mutations.forEach((mutation) => {
         if (mutation.removedNodes.length > 0) {

package/src/TUIRoom/services/manager/componentManager.ts

@@ -47,7 +47,7 @@ const defaultConfig = {
   ManageMemberControl: { visible: true },
   InviteControl: { visible: true },
   ChatControl: { visible: true },
-  MoreControl: { visible: true },
+  MoreControl: { visible: false },
   VirtualBackground: { visible: false },
 };
 

package/src/TUIRoom/services/manager/roomActionManager.ts

@@ -132,7 +132,7 @@ export class RoomActionManager {
 
       const roomParams = {
         roomId,
-        name: roomName,
+        roomName,
         roomType: TUIRoomType.kConference,
         isSeatEnabled: roomMode !== 'FreeToSpeak',
         seatMode: