【Electron】update Electron TUIRoomKit

Author: jasperdai

Electron/vue2/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 2024.04.29@2.3.1
+
+**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 状态错误的问题。
+
 ## 2024.04.08@2.2.2
 
 **Feature**

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",

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,

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,
     });

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';
   }
 }

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>

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;

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(() => {

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>