【Electron】update Electron TUIRoomKit

Electron/example/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-uikit-electron-vue2",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "private": true,
   "main": "main.electron.js",
   "license": "MIT",
@@ -10,6 +10,7 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "electron": "electron . --trtc_env=development",
+    "dev": "concurrently \"npm run serve\" \"npm run electron \"",
     "start": "concurrently \"npm run serve\" \"npm run electron \"",
     "build:mac": "vue-cli-service build --trtc_env=production --target_platform=darwin",
     "build:win": "vue-cli-service build --trtc_env=production --target_platform=win32",
@@ -60,12 +61,12 @@
     ]
   },
   "dependencies": {
-    "@tencentcloud/chat": "latest",
-    "@tencentcloud/roomkit-electron-vue2.7": "2.9.1",
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/roomkit-electron-vue2.7": "~3.0.0",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "2.9.1",
+    "@tencentcloud/tuiroom-engine-electron": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue2": "0.3.2",
     "@tencentcloud/universal-api": "^2.0.9",
-    "@tencentcloud/uikit-base-component-vue2": "0.3.1",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "interactjs": "^1.10.26",

Electron/example/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-uikit-electron-vue3",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "description": "This is an interactive multimedia room solution that published by Tencent Cloud RTC team for PC base on Electron, vue and so on.",
   "main": "dist/main/index.cjs",
   "author": "",
@@ -28,14 +28,14 @@
     "nano-staged": "^0.8.0",
     "replace": "^1.2.1",
     "request": "^2.88.2",
+    "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.8.0",
     "typescript": "^4.7.2",
     "vite": "^2.9.8",
     "vite-plugin-electron": "^0.4.5",
     "vite-plugin-resolve": "^2.1.2",
     "vue": "~3.3.13",
-    "vue-tsc": "^0.35.2",
-    "rimraf": "^6.0.1"
+    "vue-tsc": "^0.35.2"
   },
   "env": {
     "VITE_DEV_SERVER_HOST": "127.0.0.1",
@@ -49,12 +49,12 @@
     "vue"
   ],
   "dependencies": {
-    "@tencentcloud/chat": "latest",
-    "@tencentcloud/roomkit-electron-vue3": "2.9.1",
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/roomkit-electron-vue3": "~3.0.0",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "2.9.1",
+    "@tencentcloud/tuiroom-engine-electron": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue3": "0.3.2",
     "@tencentcloud/universal-api": "^2.0.9",
-    "@tencentcloud/uikit-base-component-vue3": "^0.3.1",
     "axios": "^0.27.2",
     "interactjs": "^1.10.26",
     "js-cookie": "^3.0.1",

Electron/roomkit/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue2.7",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -22,8 +22,8 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@vitejs/plugin-vue2": "^2.3.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-css-injected-by-js": "^3.5.0",
@@ -36,13 +36,13 @@
     "vue": "^2.7.16"
   },
   "dependencies": {
-    "@tencentcloud/chat": "latest",
-    "@tencentcloud/chat-uikit-engine": "2.3.3",
-    "@tencentcloud/chat-uikit-vue": "2.3.3",
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/chat-uikit-engine": "~2.3.3",
+    "@tencentcloud/chat-uikit-vue": "~2.3.3",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "2.9.1",
+    "@tencentcloud/tuiroom-engine-electron": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue2": "0.3.2",
     "@tencentcloud/universal-api": "^2.0.9",
-    "@tencentcloud/uikit-base-component-vue2": "0.3.1",
     "@tiptap/core": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-image": "^2.6.6",

Electron/roomkit/vue2/src/TUIRoom/components/Chat/index/index.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-
 import Server from '../ChatKit/server';
 import { roomService, Theme, LanguageOption } from '../../../services';
 import { hideTUIChatFeatures } from '../ChatKit/components/TUIChat/config';
@@ -48,12 +48,11 @@ TUIConversationService.switchConversation(currentRoomId);
 hideTUIChatFeatures(defaultHideFeaturesButtons);
 roomService.setLanguage(basicStore.lang as LanguageOption);
 
-if (!theme.value) {
-  roomService.setTheme(basicStore.defaultTheme as Theme);
-} else {
-  setTheme(theme.value);
-  roomService.setTheme(theme.value as Theme);
-}
+onMounted(() => {
+  theme.value
+    ? setTheme(theme.value)
+    : roomService.setTheme(basicStore.defaultTheme as Theme);
+});
 </script>
 
 <style lang="scss" scoped>

Electron/roomkit/vue2/src/TUIRoom/components/common/SwitchTheme.vue

@@ -21,11 +21,11 @@
         <span>{{ t('Theme Colours') }}</span>
         <div class="color-blocks two-blocks">
           <div
-            class="color-block black"
+            :class="['color-block black', { active: currentTheme === 'dark' }]"
             @click="toggleCustomTheme('dark')"
           ></div>
           <div
-            class="color-block white"
+            :class="['color-block white', { active: currentTheme === 'light' }]"
             @click="toggleCustomTheme('light')"
           ></div>
         </div>
@@ -34,16 +34,31 @@
         <span>{{ t('Custom Themes') }}</span>
         <div class="color-blocks four-blocks">
           <div
-            class="color-block theme"
+            :class="[
+              'color-block theme',
+              { active: currentCustomTheme === 'theme' },
+            ]"
             @click="toggleCustomTheme('theme')"
           ></div>
           <div
-            class="color-block green"
+            :class="[
+              'color-block green',
+              { active: currentCustomTheme === 'green' },
+            ]"
             @click="toggleCustomTheme('green')"
           ></div>
-          <div class="color-block red" @click="toggleCustomTheme('red')"></div>
           <div
-            class="color-block orange"
+            :class="[
+              'color-block red',
+              { active: currentCustomTheme === 'red' },
+            ]"
+            @click="toggleCustomTheme('red')"
+          ></div>
+          <div
+            :class="[
+              'color-block orange',
+              { active: currentCustomTheme === 'orange' },
+            ]"
             @click="toggleCustomTheme('orange')"
           ></div>
         </div>
@@ -53,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps, ref } from 'vue';
+import { withDefaults, defineProps, ref, computed } from 'vue';
 import IconButton from './base/IconButton.vue';
 import SwitchThemeIcon from './icons/SwitchThemeIcon.vue';
 import { IconButtonLayout } from '../../constants/room';
@@ -70,6 +85,8 @@ const basicStore = useBasicStore();
 const { theme, setTheme } = useUIKit();
 const isShowThemeColorContainer = ref(false);
 const switchThemeConfig = roomService.getComponentConfig('SwitchTheme');
+const currentCustomTheme = ref('theme');
+const currentTheme = computed(() => theme.value || basicStore.defaultTheme);
 
 interface Props {
   visible?: boolean;
@@ -84,14 +101,8 @@ function handleSwitchTheme() {
     isShowThemeColorContainer.value = !isShowThemeColorContainer.value;
     return;
   }
-  const currentTheme = theme.value || basicStore.defaultTheme;
-  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-  if (theme.value) {
-    setTheme(newTheme);
-  } else {
-    roomService.setTheme(newTheme);
-  }
+  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
+  theme.value ? setTheme(newTheme) : roomService.setTheme(newTheme);
 }
 
 function toggleCustomTheme(newTheme: string) {
@@ -105,6 +116,10 @@ function toggleCustomTheme(newTheme: string) {
     ? newTheme
     : { themeStyle: theme.value, primaryColor: newTheme };
   setTheme(themeConfig);
+
+  if (!isBaseTheme) {
+    currentCustomTheme.value = newTheme;
+  }
 }
 
 function handleClickOutSide() {
@@ -153,23 +168,44 @@ function handleClickOutSide() {
       .color-block {
         cursor: pointer;
         border-radius: 6px;
+        &.active {
+          outline-offset: 2px;
+        }
         &.black {
           background-color: var(--uikit-color-black-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.white {
           background-color: var(--uikit-color-white-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.red {
           background-color: var(--uikit-color-red-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-red-6);
+          }
         }
         &.green {
           background-color: var(--uikit-color-green-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-green-6);
+          }
         }
         &.orange {
           background-color: var(--uikit-color-orange-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-orange-6);
+          }
         }
         &.theme {
           background-color: var(--uikit-color-theme-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
       }
     }

Electron/roomkit/vue2/src/TUIRoom/services/manager/roomActionManager.ts

@@ -20,9 +20,6 @@ smallParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
 smallParam.videoFps = 10;
 smallParam.videoBitrate = 550;
 
-export enum FetchRoomInfoErrorCode {
-  ROOM_NOT_EXIST = -2100,
-}
 export interface DeviceParams {
   isOpenCamera?: boolean;
   isOpenMicrophone?: boolean;

Electron/roomkit/vue2/src/TUIRoom/services/manager/scheduleConferenceManager.ts

@@ -7,10 +7,10 @@ import {
   TUIUserInfo,
   TUIConferenceStatus,
   TUIConferenceModifyInfo,
+  TUIErrorCode,
 } from '@tencentcloud/tuiroom-engine-electron';
 import { EventType, IRoomService } from '../types';
 import mitt from 'mitt';
-import { FetchRoomInfoErrorCode } from './roomActionManager.ts';
 export * from '@tencentcloud/tuiroom-engine-electron';
 interface IScheduleConferenceManager {
   on(
@@ -255,7 +255,7 @@ export class ScheduleConferenceManager implements IScheduleConferenceManager {
       });
       return await this.generateRoomId(attempt + 1);
     } catch (err: any) {
-      if (err?.code === FetchRoomInfoErrorCode.ROOM_NOT_EXIST) {
+      if (err?.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
         return roomId;
       }
       throw err;

Electron/roomkit/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -22,13 +22,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@tencentcloud/chat": "latest",
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/chat-uikit-engine": "~2.3.3",
+    "@tencentcloud/chat-uikit-vue": "~2.3.3",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "2.9.1",
-    "@tencentcloud/chat-uikit-engine": "2.3.3",
-    "@tencentcloud/chat-uikit-vue": "2.3.3",
+    "@tencentcloud/tuiroom-engine-electron": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue3": "0.3.2",
     "@tencentcloud/universal-api": "^2.0.9",
-    "@tencentcloud/uikit-base-component-vue3": "^0.3.1",
     "@tiptap/core": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-image": "^2.6.6",
@@ -39,15 +39,15 @@
     "@tiptap/pm": "^2.6.6",
     "@tiptap/suggestion": "^2.6.6",
     "dayjs": "^1.11.13",
-    "interactjs": "^1.10.26",
-    "mitt": "^3.0.0",
     "fabric": "^5.3.0",
-    "hotkeys-js": "^3.10.1"
+    "hotkeys-js": "^3.10.1",
+    "interactjs": "^1.10.26",
+    "mitt": "^3.0.0"
   },
   "peerDependencies": {
+    "electron": ">=4.0.0",
     "pinia": "2.0.24",
-    "vue": "~3.3.13",
-    "electron": ">=4.0.0"
+    "vue": "~3.3.13"
   },
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",

Electron/roomkit/vue3/src/TUIRoom/components/Chat/index/index.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-
 import Server from '../ChatKit/server';
 import { roomService, Theme, LanguageOption } from '../../../services';
 import { hideTUIChatFeatures } from '../ChatKit/components/TUIChat/config';
@@ -48,12 +48,11 @@ TUIConversationService.switchConversation(currentRoomId);
 hideTUIChatFeatures(defaultHideFeaturesButtons);
 roomService.setLanguage(basicStore.lang as LanguageOption);
 
-if (!theme.value) {
-  roomService.setTheme(basicStore.defaultTheme as Theme);
-} else {
-  setTheme(theme.value);
-  roomService.setTheme(theme.value as Theme);
-}
+onMounted(() => {
+  theme.value
+    ? setTheme(theme.value)
+    : roomService.setTheme(basicStore.defaultTheme as Theme);
+});
 </script>
 
 <style lang="scss" scoped>

Electron/roomkit/vue3/src/TUIRoom/components/common/SwitchTheme.vue

@@ -21,11 +21,11 @@
         <span>{{ t('Theme Colours') }}</span>
         <div class="color-blocks two-blocks">
           <div
-            class="color-block black"
+            :class="['color-block black', { active: currentTheme === 'dark' }]"
             @click="toggleCustomTheme('dark')"
           ></div>
           <div
-            class="color-block white"
+            :class="['color-block white', { active: currentTheme === 'light' }]"
             @click="toggleCustomTheme('light')"
           ></div>
         </div>
@@ -34,16 +34,31 @@
         <span>{{ t('Custom Themes') }}</span>
         <div class="color-blocks four-blocks">
           <div
-            class="color-block theme"
+            :class="[
+              'color-block theme',
+              { active: currentCustomTheme === 'theme' },
+            ]"
             @click="toggleCustomTheme('theme')"
           ></div>
           <div
-            class="color-block green"
+            :class="[
+              'color-block green',
+              { active: currentCustomTheme === 'green' },
+            ]"
             @click="toggleCustomTheme('green')"
           ></div>
-          <div class="color-block red" @click="toggleCustomTheme('red')"></div>
           <div
-            class="color-block orange"
+            :class="[
+              'color-block red',
+              { active: currentCustomTheme === 'red' },
+            ]"
+            @click="toggleCustomTheme('red')"
+          ></div>
+          <div
+            :class="[
+              'color-block orange',
+              { active: currentCustomTheme === 'orange' },
+            ]"
             @click="toggleCustomTheme('orange')"
           ></div>
         </div>
@@ -53,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps, ref } from 'vue';
+import { withDefaults, defineProps, ref, computed } from 'vue';
 import IconButton from './base/IconButton.vue';
 import SwitchThemeIcon from './icons/SwitchThemeIcon.vue';
 import { IconButtonLayout } from '../../constants/room';
@@ -70,6 +85,8 @@ const basicStore = useBasicStore();
 const { theme, setTheme } = useUIKit();
 const isShowThemeColorContainer = ref(false);
 const switchThemeConfig = roomService.getComponentConfig('SwitchTheme');
+const currentCustomTheme = ref('theme');
+const currentTheme = computed(() => theme.value || basicStore.defaultTheme);
 
 interface Props {
   visible?: boolean;
@@ -84,14 +101,8 @@ function handleSwitchTheme() {
     isShowThemeColorContainer.value = !isShowThemeColorContainer.value;
     return;
   }
-  const currentTheme = theme.value || basicStore.defaultTheme;
-  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-  if (theme.value) {
-    setTheme(newTheme);
-  } else {
-    roomService.setTheme(newTheme);
-  }
+  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
+  theme.value ? setTheme(newTheme) : roomService.setTheme(newTheme);
 }
 
 function toggleCustomTheme(newTheme: string) {
@@ -105,6 +116,10 @@ function toggleCustomTheme(newTheme: string) {
     ? newTheme
     : { themeStyle: theme.value, primaryColor: newTheme };
   setTheme(themeConfig);
+
+  if (!isBaseTheme) {
+    currentCustomTheme.value = newTheme;
+  }
 }
 
 function handleClickOutSide() {
@@ -153,23 +168,44 @@ function handleClickOutSide() {
       .color-block {
         cursor: pointer;
         border-radius: 6px;
+        &.active {
+          outline-offset: 2px;
+        }
         &.black {
           background-color: var(--uikit-color-black-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.white {
           background-color: var(--uikit-color-white-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.red {
           background-color: var(--uikit-color-red-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-red-6);
+          }
         }
         &.green {
           background-color: var(--uikit-color-green-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-green-6);
+          }
         }
         &.orange {
           background-color: var(--uikit-color-orange-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-orange-6);
+          }
         }
         &.theme {
           background-color: var(--uikit-color-theme-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
       }
     }

Electron/roomkit/vue3/src/TUIRoom/services/manager/roomActionManager.ts

@@ -20,9 +20,6 @@ smallParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
 smallParam.videoFps = 10;
 smallParam.videoBitrate = 550;
 
-export enum FetchRoomInfoErrorCode {
-  ROOM_NOT_EXIST = -2100,
-}
 export interface DeviceParams {
   isOpenCamera?: boolean;
   isOpenMicrophone?: boolean;

Electron/roomkit/vue3/src/TUIRoom/services/manager/scheduleConferenceManager.ts

@@ -7,10 +7,10 @@ import {
   TUIUserInfo,
   TUIConferenceStatus,
   TUIConferenceModifyInfo,
+  TUIErrorCode,
 } from '@tencentcloud/tuiroom-engine-electron';
 import { EventType, IRoomService } from '../types';
 import mitt from 'mitt';
-import { FetchRoomInfoErrorCode } from './roomActionManager.ts';
 export * from '@tencentcloud/tuiroom-engine-electron';
 interface IScheduleConferenceManager {
   on(
@@ -255,7 +255,7 @@ export class ScheduleConferenceManager implements IScheduleConferenceManager {
       });
       return await this.generateRoomId(attempt + 1);
     } catch (err: any) {
-      if (err?.code === FetchRoomInfoErrorCode.ROOM_NOT_EXIST) {
+      if (err?.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
         return roomId;
       }
       throw err;