@tencentcloud/roomkit-electron-vue3 2.9.1 → 3.0.0

package/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);
+          }
         }
       }
     }

package/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;

package/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;