feat: update Web

Web/example/vite-vue3-ts/package.json

@@ -9,10 +9,10 @@
     "lint": "./node_modules/.bin/eslint ./src --no-error-on-unmatched-pattern"
   },
   "dependencies": {
-    "@tencentcloud/roomkit-web-vue3": "5.8.1",
-    "@tencentcloud/uikit-base-component-vue3": "1.4.0",
+    "@tencentcloud/roomkit-web-vue3": "5.8.2",
+    "@tencentcloud/uikit-base-component-vue3": "1.4.1",
     "@tencentcloud/universal-api": "^2.4.0",
-    "tuikit-atomicx-vue3": "5.8.1",
+    "tuikit-atomicx-vue3": "5.8.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14"
   },

Web/example/vite-vue3-ts/src/components/LoginUserID/index.vue

@@ -178,7 +178,7 @@ const submitForm = (): void => {
   max-width: 480px;
   margin: 2rem auto;
   padding: 30px 15px;
-  background-color: #1c1c1c;
+  background-color: var(--bg-color-dialog);
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }

Web/example/vite-vue3-ts/src/i18n/en-US/index.ts

@@ -1,6 +1,6 @@
 export const resource = {
   // Room
-  'Room.TemporaryMeeting': '\'s temporary meeting',
+  'Room.TemporaryMeeting': '\'s temporary room',
   'Room.Webinar': '\'s webinar',
   'Room.LeaveRoomTitle': 'Leave Room',
   'Room.ConfirmLeavePage': 'Are you sure you want to leave this page? You will exit the current room',

Web/example/vite-vue3-ts/src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login-container">
+  <div :class="['login-container', theme]">
     <Login
       class="login-widget"
       v-bind="{
@@ -12,12 +12,14 @@
 </template>
 
 <script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLoginState, useRoomModal } from 'tuikit-atomicx-vue3/room';
 import { useRouter, useRoute } from 'vue-router';
 import Login from '../components/LoginUserID/index.vue';
 import { SDKAPPID, genTestUserSig } from '../config/basic-info-config';
 import { deepClone } from '../utils/utils';
 
+const { theme = 'light' } = useUIKit();
 const { login } = useLoginState();
 const { handleErrorWithModal } = useRoomModal();
 
@@ -53,8 +55,9 @@ const handleLogin = async (userInfo: {
   align-items: center;
   width: 100%;
   height: 100%;
-  background: url('../assets/background-black.png') no-repeat center center;
-  background-color: black;
+  background-color: var(--bg-color-dialog);
+  background-position: center;
+  background-repeat: no-repeat;
   background-size: cover;
 
   @media screen and (orientation: portrait), (orientation: landscape) {
@@ -63,4 +66,12 @@ const handleLogin = async (userInfo: {
     }
   }
 }
+
+.login-container.dark {
+  background-image: url('../assets/background-black.png');
+}
+
+.login-container.light {
+  background-image: url('../assets/background-white.png');
+}
 </style>

Web/example/vite-vue3-ts/src/views/roomH5.vue

@@ -30,7 +30,7 @@ const { handleErrorWithModal } = useRoomModal();
 
 const { loginUserInfo } = useLoginState();
 const { currentRoom } = useRoomState();
-const { localVideoQuality, openLocalCamera, updateVideoQuality, openLocalMicrophone } = useDeviceState();
+const { localVideoQuality, openLocalCamera, updateVideoQuality, openLocalMicrophone, closeLocalMicrophone } = useDeviceState();
 const { muteMicrophone, unmuteMicrophone } = useRoomParticipantState();
 const { getMicrophonePreference, getCameraPreference } = useMediaPreference();
 
@@ -50,7 +50,6 @@ watch(() => loginUserInfo.value?.userId, async (userId) => {
 watch(() => currentRoom.value?.roomId, async (currentRoomId, prevRoomId) => {
   if (!prevRoomId && currentRoomId) {
     handleOpenCamera();
-    handleOpenMicrophone();
   }
 }, { immediate: true });
 
@@ -71,19 +70,29 @@ async function handleEnterRoom() {
 }
 
 async function handleStartConference() {
-  await conference.createAndJoinRoom({
-    roomId,
-    options: {
-      roomName: `${loginUserInfo.value?.userName || loginUserInfo.value?.userId}${t('Room.TemporaryMeeting')}`,
-    },
-  });
+  await handleOpenMicrophone();
+  try {
+    await conference.createAndJoinRoom({
+      roomId,
+      options: {
+        roomName: `${loginUserInfo.value?.userName || loginUserInfo.value?.userId}${t('Room.TemporaryMeeting')}`,
+      },
+    });
+  } catch (error: unknown) {
+    await closeLocalMicrophone();
+  }
 }
 
 async function handleJoinConference() {
-  await conference.joinRoom({
-    roomId,
-    password,
-  });
+  await handleOpenMicrophone();
+  try {
+    await conference.joinRoom({
+      roomId,
+      password,
+    });
+  } catch (error: unknown) {
+    await closeLocalMicrophone();
+  }
 }
 
 async function handleOpenCamera() {

Web/example/webpack-vue2.7-ts/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tencentcloud/roomkit-web-vue2.7": "~4.3.1",
-    "@tencentcloud/tuiroom-engine-js": "~4.0.3",
+    "@tencentcloud/tuiroom-engine-js": "~4.0.4",
     "@tencentcloud/uikit-base-component-vue2": "1.1.0",
     "core-js": "^3.8.3",
     "mitt": "^3.0.0",

Web/roomkit/vue2/package.json

@@ -40,7 +40,7 @@
     "@tencentcloud/chat-uikit-engine": "~2.5.5",
     "@tencentcloud/chat-uikit-vue": "~2.3.3",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~4.0.3",
+    "@tencentcloud/tuiroom-engine-js": "~4.0.4",
     "@tencentcloud/uikit-base-component-vue2": "1.1.0",
     "@tencentcloud/universal-api": "^2.0.9",
     "@tiptap/core": "^2.6.6",

Web/roomkit/vue3/RoomKit/adapter/chatCombine.ts

@@ -0,0 +1,185 @@
+import { watch } from 'vue';
+import { TUIConstants, TUICore, TUILogin } from '@tencentcloud/tui-core-lite';
+import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-js';
+import { RoomInfo, RoomParticipantEvent, RoomUser, useRoomParticipantState, useRoomState } from 'tuikit-atomicx-vue3/room';
+import { conference } from './conference';
+import { RoomEvent } from './type';
+
+const { currentRoom, joinRoom } = useRoomState();
+const { participantList, getParticipantList, subscribeEvent } = useRoomParticipantState();
+let conferenceLoginPromise: Promise<void> | null = null;
+let conferenceLoginUserId = '';
+let latestParticipantRoomId = '';
+const ROOM_DISMISS_CONFIRM_DELAY = 200;
+const dismissedRoomIdSet = new Set<string>();
+const pendingParticipantEmptyTimerMap = new Map<string, ReturnType<typeof setTimeout>>();
+const pendingParticipantEmptyListMap = new Map<string, Array<{ avatarUrl: string; userId: string; userName: string }>>();
+
+const clearPendingParticipantEmptyTimer = (roomId: string) => {
+  const timer = pendingParticipantEmptyTimerMap.get(roomId);
+  if (!timer) {
+    return;
+  }
+  clearTimeout(timer);
+  pendingParticipantEmptyTimerMap.delete(roomId);
+};
+
+const emitParticipantListChange = (roomId: string, participantSnapshot: Array<{ avatarUrl: string; userId: string; userName: string }>) => {
+  TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.PARTICIPANT_LIST_CHANGE, {
+    roomId,
+    participantList: participantSnapshot,
+  });
+};
+
+const ensureConferenceLogin = async () => {
+  const { SDKAppID, userID, userSig } = TUILogin.getContext();
+  if (!SDKAppID || !userID || !userSig) {
+    throw new Error('Missing conference login credentials');
+  }
+
+  if (conferenceLoginPromise && conferenceLoginUserId === userID) {
+    await conferenceLoginPromise;
+    return;
+  }
+
+  conferenceLoginUserId = userID;
+  conferenceLoginPromise = conference.login({
+    sdkAppId: SDKAppID,
+    userId: userID,
+    userSig,
+  }).catch((error: unknown) => {
+    conferenceLoginPromise = null;
+    conferenceLoginUserId = '';
+    throw error;
+  });
+
+  await conferenceLoginPromise;
+};
+
+TUICore.registerService(TUIConstants.TUIRoom.SERVICE.NAME, {
+  onCall: async (method: string, params: { roomId: string; options?: Record<string, any> }, callback?: (result?: any) => void) => {
+    if (method !== TUIConstants.TUIRoom.SERVICE.METHOD.START_ROOM) {
+      return;
+    }
+    try {
+      await ensureConferenceLogin();
+      await conference.start({
+        roomId: params.roomId,
+        options: params.options,
+      });
+      callback && callback();
+    } catch (error) {
+      callback && callback(error);
+    }
+  },
+});
+
+TUICore.registerEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.JOIN_ROOM, {
+  onNotifyEvent: async (_eventName: string, subKey: string, params: { roomId: string }) => {
+    if (subKey !== TUIConstants.TUIRoom.SERVICE.EVENT.JOIN_ROOM) {
+      return;
+    }
+    if (currentRoom.value?.roomId === params.roomId) {
+      TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_JOINED, {
+        roomInfo: currentRoom.value,
+      });
+      return;
+    }
+    try {
+      await joinRoom({ roomId: params.roomId });
+    } catch (_error: any) {
+      if (_error.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
+        TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_NOT_EXIST, { roomId: params.roomId });
+      }
+    }
+  },
+});
+const handleRoomDismiss = ({ roomInfo }: { roomInfo: RoomInfo }) => {
+  const roomId = roomInfo?.roomId || '';
+  if (roomId) {
+    dismissedRoomIdSet.add(roomId);
+    clearPendingParticipantEmptyTimer(roomId);
+    const pendingParticipantList = pendingParticipantEmptyListMap.get(roomId);
+    if (pendingParticipantList) {
+      emitParticipantListChange(roomId, pendingParticipantList);
+      pendingParticipantEmptyListMap.delete(roomId);
+    }
+  }
+  TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_DISMISS, { roomInfo });
+};
+
+conference.on(RoomEvent.ROOM_DISMISS, handleRoomDismiss);
+
+subscribeEvent(RoomParticipantEvent.onOwnerChanged, (options: { newOwner: RoomUser }) => {
+  TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.OWNER_CHANGED, {
+    ...options,
+    roomId: currentRoom.value?.roomId || '',
+  });
+});
+
+watch(
+  () => currentRoom.value?.roomId,
+  async (roomId, oldRoomId) => {
+    if (roomId) {
+      latestParticipantRoomId = roomId;
+      dismissedRoomIdSet.delete(roomId);
+      clearPendingParticipantEmptyTimer(roomId);
+      pendingParticipantEmptyListMap.delete(roomId);
+      const { participantList: list } = await getParticipantList({});
+      TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.PARTICIPANT_LIST_CHANGE, {
+        roomId,
+        participantList: list,
+      });
+      TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_JOINED, {
+        roomInfo: currentRoom.value,
+      });
+      return;
+    }
+    if (oldRoomId) {
+      TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_LEFT, {
+        roomId: oldRoomId,
+      });
+    }
+  },
+);
+
+watch(() => participantList.value.map(item => ({
+  userId: item.userId,
+  userName: item.userName,
+  avatarUrl: item.avatarUrl,
+})), (newList, oldList) => {
+  const roomId = currentRoom.value?.roomId || latestParticipantRoomId;
+  const currentUserId = TUILogin.getContext().userID;
+  const previousCount = oldList?.length || 0;
+  const nextCount = newList?.length || 0;
+
+  if (currentRoom.value?.roomId) {
+    latestParticipantRoomId = currentRoom.value.roomId;
+  }
+  if (!roomId) {
+    return;
+  }
+
+  if (previousCount > 0 && nextCount === 0) {
+    const previousParticipantList = [...oldList];
+    pendingParticipantEmptyListMap.set(roomId, previousParticipantList);
+    clearPendingParticipantEmptyTimer(roomId);
+
+    const timer = setTimeout(() => {
+      pendingParticipantEmptyTimerMap.delete(roomId);
+      const pendingParticipantList = pendingParticipantEmptyListMap.get(roomId) || previousParticipantList;
+      const nextParticipantList = dismissedRoomIdSet.has(roomId)
+        ? pendingParticipantList
+        : pendingParticipantList.filter(item => item.userId !== currentUserId);
+
+      emitParticipantListChange(roomId, nextParticipantList);
+      pendingParticipantEmptyListMap.delete(roomId);
+      dismissedRoomIdSet.delete(roomId);
+    }, ROOM_DISMISS_CONFIRM_DELAY);
+    pendingParticipantEmptyTimerMap.set(roomId, timer);
+
+    if (!currentRoom.value?.roomId) {
+      latestParticipantRoomId = '';
+    }
+  }
+});

Web/roomkit/vue3/RoomKit/adapter/conference.ts

@@ -121,7 +121,7 @@ class Conference extends ConferenceDeprecated implements IConference {
     } catch (error) {
       isJoiningRoom.value = false;
       handleJoinRoomError(error);
-      return;
+      throw error;
     }
     isJoiningRoom.value = false;
     joiningRoomId.value = '';
@@ -130,6 +130,7 @@ class Conference extends ConferenceDeprecated implements IConference {
   public async leaveRoom() {
     const { leaveRoom } = useRoomState();
     await leaveRoom();
+    eventCenter.emit(RoomEvent.ROOM_LEAVE);
   }
 
   public async endRoom() {