【Electron】update Electron TUIRoomKit

Tencent-RTC · Apr 30, 2024 · 3bdc438 · 3bdc438
1 parent e26a88a
commit 3bdc438
Show file tree

Hide file tree

Showing 73 changed files with 684 additions and 523 deletions.
diff --git a/Electron/vue2/CHANGELOG.md b/Electron/vue2/CHANGELOG.md
@@ -1,3 +1,18 @@
+## [email protected]
+
+**Feature**
+
+- 升级 [@tencentcloud/tuiroom-engine-electron](https://www.npmjs.com/package/@tencentcloud/tuiroom-engine-electron) 到 v2.3.1 版本，详情请查看 [发布日志](https://cloud.tencent.com/document/product/1690/89361)；
+
+**Bug Fixed**
+- 修复 Electron 下拔出外接摄像头摄像头列表默认设备未更新的问题;
+- 修复成员操作面板距顶部距离不够，展示不完全问题;
+- 修复 Notification 组件收到其他成员处理事件时显隐展示的问题;
+- 修复获取主持人和管理员身份后没有更新申请上麦列表的问题;
+- 修复聊天消息未读数不准确的问题;
+- 修复 MessageBox 组件进房后点击按钮无法关闭的问题;
+- 修复转交房主或管理员状态下多次点击麦克风和摄像头按钮 disable 状态错误的问题。
+
 ## [email protected]
 
 **Feature**

diff --git a/Electron/vue2/package.json b/Electron/vue2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "room-uikit-electron-vue2",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "private": true,
   "main": "main.electron.js",
   "license": "MIT",
@@ -62,23 +62,21 @@
   "dependencies": {
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.2.2",
-    "interactjs": "^1.10.26",
+    "@tencentcloud/tuiroom-engine-electron": "^2.3.1",
     "@tencentcloud/universal-api": "^2.0.9",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
+    "interactjs": "^1.10.26",
     "js-cookie": "^3.0.1",
     "lodash.isequal": "^4.5.0",
     "mitt": "^3.0.0",
     "pinia": "^2.0.28",
     "sass": "^1.57.1",
     "tim-js-sdk": "^2.24.2",
-    "trtc-electron-sdk": "11.6.602-beta.0",
+
     "tsignaling": "^0.10.0",
     "vue": "^2.7.14",
     "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.28.2",
-    "vue-i18n-bridge": "^9.2.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
     "yuv-buffer": "^1.0.0",

diff --git a/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts b/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts
@@ -44,6 +44,9 @@ export default function useChatEditor() {
     isEmojiToolbarVisible.value = false;
     try {
       const tim = roomEngine.instance?.getTIM();
+      if (!tim) {
+        throw new Error('tim is null');
+      }
       const message = tim.createTextMessage({
         to: roomId.value,
         conversationType: TencentCloudChat.TYPES.CONV_GROUP,

diff --git a/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts b/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts
@@ -21,7 +21,7 @@ export default function useMessageList() {
 
   async function handleGetHistoryMessageList() {
     const tim = roomEngine.instance?.getTIM();
-    const imResponse = await tim.getMessageList({
+    const imResponse = await tim?.getMessageList({
       conversationID: `GROUP${roomId.value}`,
       nextReqMessageID: nextReqMessageId.value,
     });

diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue
@@ -98,14 +98,14 @@ function toggleClickMoreBtn() {
   }
 }
 
-// 根据页面位置确定下拉框的定位
 function handleDropDownPosition() {
   const { top, bottom } = moreBtnRef.value?.getBoundingClientRect();
-  const containerBottom = document.getElementById('memberListContainer')?.getBoundingClientRect()?.bottom;
-  if (!containerBottom) {
+  const { top: containerTop, bottom: containerBottom } = document.getElementById('memberListContainer')?.getBoundingClientRect() as DOMRect;
+  if (!containerBottom || !containerTop) {
     return;
   }
   const bottomSize = containerBottom - bottom;
+  const topSize = top - containerTop;
   let dropDownContainerHeight = 0;
   if (!showMoreControl.value) {
     operateListRef.value.style = 'display:block;position:absolute;z-index:-1000';
@@ -114,7 +114,10 @@ function handleDropDownPosition() {
   } else {
     dropDownContainerHeight = operateListRef.value?.offsetHeight;
   }
-  if (bottomSize < top && bottomSize < dropDownContainerHeight) {
+  if (topSize < dropDownContainerHeight) {
+    return;
+  }
+  if (bottomSize < dropDownContainerHeight) {
     dropdownClass.value = 'up';
   }
 }

diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue
@@ -13,6 +13,7 @@
         <svg-icon
           v-if="isTargetUserRoomOwner || isTargetUserAdmin"
           :icon="UserIcon"
+          :color="isTargetUserAdmin ? '#F06C4B' : '#4791FF'"
           :class="isTargetUserAdmin ? 'admin-icon' : 'master-icon'"
         />
         <div :class="`user-extra-info ${isTargetUserAdmin ? 'user-extra-info-admin' : ''}`">{{ extraInfo }}</div>

diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue
@@ -224,7 +224,6 @@ const {
       }
     }
   .member-list-container {
-    overflow-y: scroll;
     flex: 1;
     margin-top: 10px;
     overflow-y: scroll;

diff --git a/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue b/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue
@@ -9,7 +9,13 @@
       ></stream-region>
     </div>
     <div :class="['stream-list-container', `${showSideList ? '' : 'hide-list'}`]">
-      <div ref="streamListRef" :style="streamListStyle" class="stream-list">
+      <div
+        ref="streamListRef"
+        :style="streamListStyle"
+        class="stream-list"
+        @scroll="handleStreamContainerScrollDebounce"
+        @wheel="handleWheel"
+      >
         <stream-region
           v-for="(stream) in streamList"
           v-show="showStreamList.indexOf(stream) > -1"
@@ -653,6 +659,11 @@ const handleStreamContainerScroll = async () => {
   roomStore.updateUserStreamVisible(streamUserIdList);
 };
 
+// 处理顶部布局水平滑动
+function handleWheel(event: WheelEvent) {
+  streamListRef.value.scrollLeft += event.deltaY;
+}
+
 const handleStreamContainerScrollDebounce = debounce(handleStreamContainerScroll, 300);
 
 onMounted(() => {

diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue
@@ -35,8 +35,19 @@
         <span class="apply-text">{{ t('Currently no member has applied to go on stage') }}</span>
       </div>
       <template #footer>
-        <tui-button size="default" :disabled="noUserApply" @click="handleAllUserApply(true)"> {{ t('Agree All') }} </tui-button>
-        <tui-button class="cancel-button" size="default" :disabled="noUserApply" @click="handleAllUserApply(false)">
+        <tui-button
+          size="default"
+          :disabled="applyToAnchorUserCount === 0"
+          @click="handleAllUserApply(true)"
+        >
+          {{ t('Agree All') }}
+        </tui-button>
+        <tui-button
+          class="cancel-button"
+          size="default"
+          :disabled="applyToAnchorUserCount === 0"
+          @click="handleAllUserApply(false)"
+        >
           {{ t('Reject All') }}
         </tui-button>
       </template>
@@ -46,7 +57,7 @@
 
 <script setup lang="ts">
 import ApplyStageLabelIcon from '../../../common/icons/ApplyStageLabelIcon.vue';
-import useMasterApplyControl from './useMasterApplyControlHooks';
+import useMasterApplyControl from '../../../../hooks/useMasterApplyControl';
 import Avatar from '../../../common/Avatar.vue';
 import Dialog from '../../../common/base/Dialog/index.vue';
 import SvgIcon from '../../../common/base/SvgIcon.vue';
@@ -60,7 +71,6 @@ const {
   applyToAnchorList,
   handleAllUserApply,
   handleUserApply,
-  noUserApply,
 } = useMasterApplyControl();
 </script>
 

diff --git a/...IRoom/components/RoomFooter/ApplyControl/MasterApplyControl/useMasterApplyControlHooks.ts b/...IRoom/components/RoomFooter/ApplyControl/MasterApplyControl/useMasterApplyControlHooks.ts
diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue
@@ -199,6 +199,12 @@ function handleStepDownDialogVisible() {
 async function leaveSeat() {
   await roomEngine.instance?.leaveSeat();
   showDialog.value = false;
+  if (roomStore.isCameraDisableForAllUser && isGeneralUser.value) {
+    roomStore.setCanControlSelfVideo(false);
+  }
+  if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
+    roomStore.setCanControlSelfAudio(false);
+  }
 }
 
 function hideApplyAttention() {
@@ -318,7 +324,6 @@ onBeforeUnmount(() => {
     }
     .mobile-info {
       min-width: 50vw;
-      white-space: normal;
     }
     .close {
       cursor: pointer;

diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue
@@ -118,7 +118,6 @@ async function toggleMuteAudio() {
       TUIMessageBox({
         title: t('Note'),
         message: t('Microphone not detected on current device'),
-        appendToRoomContainer: true,
         confirmButtonText: t('Sure'),
       });
       return;

diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue
@@ -175,7 +175,6 @@ const onRoomDismissed = async (eventInfo: { roomId: string }) => {
     TUIMessageBox({
       title: t('Note'),
       message: t('The host closed the room.'),
-      appendToRoomContainer: true,
       confirmButtonText: t('Sure'),
       callback: async () => {
         resetState();

diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts
@@ -1,6 +1,6 @@
 import { ref, Ref, computed, onUnmounted } from 'vue';
 import { useBasicStore } from '../../../stores/basic';
-import { useRoomStore } from '../../../stores/room';
+import { useRoomStore, UserInfo } from '../../../stores/room';
 import { useChatStore } from '../../../stores/chat';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../../locales';
@@ -25,7 +25,7 @@ export default function useEndControl() {
   logger.log(`${logPrefix} basicStore:`, basicStore);
 
   const roomStore = useRoomStore();
-  const { localUser, remoteUserList } = storeToRefs(roomStore);
+  const { localUser, remoteUserList, applyToAnchorList } = storeToRefs(roomStore);
   const title = computed(() => (currentDialogType.value === DialogType.BasicDialog ? t('Leave room?') : t('Select a new host')));
   const isShowLeaveRoomDialog = computed(() => (
     roomStore.isMaster && remoteUserList.value.length > 0)
@@ -87,6 +87,24 @@ export default function useEndControl() {
     }
   }
 
+  async function handleUpdateSeatApplicationList() {
+    if (!roomStore.isSpeakAfterTakingSeatMode) {
+      return;
+    }
+    if (applyToAnchorList.value.length > 0) {
+      applyToAnchorList.value.forEach((user: UserInfo) => {
+        user.applyToAnchorRequestId && roomStore.removeApplyToAnchorUser(user.applyToAnchorRequestId);
+      });
+    }
+    const applicationList = await roomEngine.instance?.getSeatApplicationList();
+    if (applicationList && applicationList.length > 0) {
+      for (const applicationInfo of applicationList) {
+        const { userId, requestId, timestamp } = applicationInfo;
+        roomStore.addApplyToAnchorUser({ userId, requestId, timestamp });
+      }
+    }
+  }
+
   const onUserRoleChanged = async (eventInfo: { userId: string, userRole: TUIRole }) => {
     const { userId, userRole } = eventInfo;
     const isLocal = roomStore.localUser.userId === userId;
@@ -108,13 +126,22 @@ export default function useEndControl() {
           if (oldUserRole === TUIRole.kAdministrator) {
             TUIMessage({ type: 'warning', message: t('Your administrator status has been revoked') });
           }
+          if (roomStore.localStream.hasAudioStream) {
+            roomStore.setCanControlSelfAudio(true);
+          }
+          if (roomStore.localStream.hasVideoStream) {
+            roomStore.setCanControlSelfVideo(true);
+          }
         }
         break;
       case TUIRole.kAdministrator:
         if (isLocal) {
           TUIMessage({ type: 'success', message: t('You have become a administrator') });
           roomStore.setCanControlSelfAudio(true);
           roomStore.setCanControlSelfVideo(true);
+          if (roomStore.isSpeakAfterTakingSeatMode) {
+            handleUpdateSeatApplicationList();
+          }
         }
         break;
       case TUIRole.kRoomOwner: {
@@ -125,13 +152,7 @@ export default function useEndControl() {
             if (!roomStore.isAnchor) {
               await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 });
             }
-            const applicationList = await roomEngine.instance?.getSeatApplicationList();
-            if (applicationList) {
-              for (const applicationInfo of applicationList) {
-                const { userId, requestId, timestamp } = applicationInfo;
-                roomStore.addApplyToAnchorUser({ userId, requestId, timestamp });
-              }
-            }
+            handleUpdateSeatApplicationList();
           }
           if (chatStore.isMessageDisableByAdmin) {
             roomEngine.instance?.disableSendingMessageByAdmin({

diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue
@@ -27,11 +27,13 @@ import { useI18n } from '../../locales';
 import TuiBadge from '../common/base/Badge.vue';
 import { isMobile } from '../../utils/environment';
 import MasterApplyControl from './ApplyControl/MasterApplyControl/index.vue';
+import useMasterApplyControl from '../../hooks/useMasterApplyControl';
 
 const { t } = useI18n();
 
 const basicStore = useBasicStore();
 const roomStore = useRoomStore();
+const { handleShowNotification } = useMasterApplyControl();
 const { sidebarName, showApplyUserList } = storeToRefs(basicStore);
 const { applyToAnchorList } = storeToRefs(roomStore);
 
@@ -48,4 +50,7 @@ function toggleManageStage() {
     basicStore.setSidebarName('apply');
   }
 }
+
+handleShowNotification();
+
 </script>