@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/preConference.vue

@@ -1,11 +1,14 @@
 <template>
-  <div id="pre-conference-container" :class="['pre-conference-container', tuiRoomThemeClass]">
+  <div
+    id="pre-conference-container"
+    :class="['pre-conference-container', tuiRoomThemeClass]"
+  >
     <div class="header">
       <div class="left-header">
-        <switch-theme class="header-item"></switch-theme>
+        <switch-theme class="header-item" />
       </div>
       <div class="right-header">
-        <language-icon class="header-item language"></language-icon>
+        <language-icon class="header-item language" />
         <user-info
           class="header-item user-info"
           :user-id="props.userInfo.userId"
@@ -14,7 +17,7 @@
           :is-show-edit-name="props.showEditNameInPc"
           @update-user-name="handleUpdateUserName"
           @log-out="handleLogOut"
-        ></user-info>
+        />
       </div>
     </div>
     <room-home-control
@@ -25,7 +28,7 @@
       @create-room="handleCreateRoom"
       @enter-room="handleEnterRoom"
       @update-user-name="handleUpdateUserName"
-    ></room-home-control>
+    />
     <div class="pre-home-control" v-else>
       <Logo v-show="props.isShowLogo" class="logo" />
       <div class="pre-home-control-container">
@@ -37,18 +40,27 @@
           @create-room="handleCreateRoom"
           @enter-room="handleEnterRoom"
           @update-user-name="handleUpdateUserName"
-        ></room-home-control>
+        />
         <schedule-room-list
           :is-show-scheduled-conference="props.enableScheduledConference"
           @join-conference="handleEnterRoom"
-        ></schedule-room-list>
+        />
       </div>
     </div>
+    <InvitationNotification @join-conference="handleEnterRoom" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 import UserInfo from './components/RoomHeader/UserInfo/index.vue';
 import RoomHomeControl from './components/RoomHome/RoomControl/index.vue';
 import LanguageIcon from './components/common/Language.vue';
@@ -60,34 +72,44 @@ import TUIMessageBox from './components/common/base/MessageBox/index';
 import TUIMessage from './components/common/base/Message/index';
 import { MESSAGE_DURATION } from './constants/message';
 import { isMobile } from './utils/environment';
+import InvitationNotification from './components/RoomInvite/InvitationNotification.vue';
 
 const roomControlRef = ref();
+const props = withDefaults(
+  defineProps<{
+    userInfo: {
+      userId: string;
+      userName: string;
+      avatarUrl: string;
+    };
+    showEditNameInPc: boolean;
+    roomId: string;
+    enableScheduledConference: boolean;
+    isShowLogo?: boolean;
+  }>(),
+  {
+    userInfo: () => ({
+      userId: '',
+      userName: '',
+      avatarUrl: '',
+    }),
+    showEditNameInPc: false,
+    roomId: '',
+    enableScheduledConference: true,
+    isShowLogo: true,
+  }
+);
 
-const props = withDefaults(defineProps<{
-  userInfo: {
-    userId: string,
-    userName: string,
-    avatarUrl: string,
-  },
-  showEditNameInPc: boolean,
-  roomId: string,
-  enableScheduledConference: boolean,
-  isShowLogo?: boolean
-}>(), {
-  userInfo: () => ({
-    userId: '',
-    userName: '',
-    avatarUrl: '',
-  }),
-  showEditNameInPc: false,
-  roomId: '',
-  enableScheduledConference: true,
-  isShowLogo: true,
-});
-
-const emits = defineEmits(['on-create-room', 'on-enter-room', 'on-update-user-name', 'on-logout']);
+const emits = defineEmits([
+  'on-create-room',
+  'on-enter-room',
+  'on-update-user-name',
+  'on-logout',
+]);
 
-const tuiRoomThemeClass = computed(() => `tui-theme-${roomService.basicStore.defaultTheme}`);
+const tuiRoomThemeClass = computed(
+  () => `tui-theme-${roomService.basicStore.defaultTheme}`
+);
 
 async function handleCreateRoom(roomOption: Record<string, any>) {
   emits('on-create-room', roomOption);
@@ -109,13 +131,15 @@ const showMessageBox = (data: {
   code?: number;
   message: string;
   title: string;
-  cancelButtonText: string,
+  duration?: number;
+  cancelButtonText: string;
   confirmButtonText: string;
   callback?: () => void;
 }) => {
   const {
     message,
     title = roomService.t('Note'),
+    duration,
     cancelButtonText,
     confirmButtonText = roomService.t('Sure'),
     callback = () => {},
@@ -123,6 +147,7 @@ const showMessageBox = (data: {
   TUIMessageBox({
     title,
     message,
+    duration,
     cancelButtonText,
     confirmButtonText,
     callback,
@@ -158,40 +183,33 @@ onUnmounted(() => {
 </style>
 
 <style lang="scss" scoped>
-
-.tui-theme-black .pre-conference-container {
-  --background: var(--background-color-1);
-}
-.tui-theme-white .pre-conference-container {
-  --background: url(./assets/imgs/background-white.png);
-}
-
-.tui-theme-black.pre-conference-container {
-  --background: var(--background-color-1);
-}
-
 .pre-conference-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  font-family: 'PingFang SC';
+  color: var(--font-color-1);
   background: var(--background);
   background-size: cover;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: PingFang SC;
-  color: var(--font-color-1);
+
   .header {
-    box-sizing: border-box;
-    width: 100%;
     position: absolute;
     top: 0;
-    padding: 22px 24px;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .left-header, .right-header {
+    width: 100%;
+    height: 4rem;
+    padding: 0 24px;
+
+    .left-header,
+    .right-header {
       display: flex;
       align-items: center;
+
       .header-item {
         &:not(:first-child) {
           margin-left: 16px;
@@ -199,20 +217,30 @@ onUnmounted(() => {
       }
     }
   }
+
   .pre-home-control {
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
     display: flex;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
+    transform: translateX(-50%);
+
     .logo {
       margin-bottom: 56px;
     }
+
     .pre-home-control-container {
       display: flex;
     }
   }
 }
 
+.tui-theme-black.pre-conference-container {
+  background: var(--background-color-1);
+}
+
+.tui-theme-white.pre-conference-container {
+  background: url('./assets/imgs/background-white.png');
+}
 </style>

package/src/TUIRoom/services/function/errorHandler.ts

@@ -2,6 +2,7 @@ import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
 import { EventType } from '../types';
 import { isElectron } from '../../utils/environment';
 
+type ErrorFunctionName = 'createRoom' | 'enterRoom' | 'onError';
 export class ErrorHandler {
   private service: any;
   private handlerMap: Record<string, (error: any) => void> = {
@@ -16,15 +17,29 @@ export class ErrorHandler {
     this.service = service;
   }
 
-  public handleError(error: any, functionName: string) {
+  public handleError(error: any, functionName: ErrorFunctionName) {
     this.handlerMap[functionName] && this.handlerMap[functionName](error);
   }
 
   private handleEnterRoomError(error: any) {
+    if (error.code === TUIErrorCode.ERR_NEED_PASSWORD) {
+      this.service.emit(EventType.ROOM_NEED_PASSWORD, error.code);
+      return;
+    }
+
+    if (error.code === TUIErrorCode.ERR_WRONG_PASSWORD) {
+      this.service.emit(EventType.ROOM_NOTICE_MESSAGE, {
+        type: 'error',
+        message: this.service.t('Wrong password, please re-enter'),
+      });
+      return;
+    }
+
     let message = '';
     switch (error.code) {
       case TUIErrorCode.ERR_ROOM_ID_NOT_EXIST:
-        message = 'The room does not exist, please confirm the room number or create a room!';
+        message =
+          'The room does not exist, please confirm the room number or create a room!';
         break;
       default:
         message = 'Failed to enter the meeting';
@@ -34,7 +49,10 @@ export class ErrorHandler {
       message: this.service.t(message),
       confirmButtonText: this.service.t('Sure'),
       callback: async () => {
-        this.service.emit(EventType.ROOM_ERROR, error);
+        this.service.emit(EventType.ROOM_ERROR, {
+          code: error.code,
+          message: error.message,
+        });
         this.service.roomStore.reset();
       },
     });
@@ -46,7 +64,10 @@ export class ErrorHandler {
       message: this.service.t('Failed to initiate meeting'),
       confirmButtonText: this.service.t('Sure'),
       callback: async () => {
-        this.service.emit(EventType.ROOM_ERROR, error);
+        this.service.emit(EventType.ROOM_ERROR, {
+          code: error.code,
+          message: error.message,
+        });
         this.service.resetStore();
       },
     });
@@ -58,14 +79,19 @@ export class ErrorHandler {
         type: 'warning',
         message: this.service.t('Failed to enter the meeting'),
         callback: () => {
-          this.service.emit(EventType.ROOM_ERROR);
+          this.service.emit(EventType.ROOM_ERROR, {
+            code: error.code,
+            message: error.message,
+          });
           this.service.resetStore();
         },
       });
     }
     if (error.code && String(error.code).indexOf('-11') === 0) {
       if (!this.mediaDeviceErrorHandler) {
-        this.mediaDeviceErrorHandler = new MediaDeviceErrorHandler(this.service);
+        this.mediaDeviceErrorHandler = new MediaDeviceErrorHandler(
+          this.service
+        );
       }
       this.mediaDeviceErrorHandler.handleError(error);
     }
@@ -81,27 +107,43 @@ class MediaDeviceErrorHandler {
   }
 
   private getMediaDeviceErrorTitle(deviceType: MediaDeviceType) {
-    return this.service.t('Unable to use the device', { deviceType: this.service.t(deviceType) });
+    return this.service.t('Unable to use the device', {
+      deviceType: this.service.t(deviceType),
+    });
   }
 
   private getMediaDeviceErrorMsg(deviceType: MediaDeviceType) {
-    return this.service.t('media device failed to open, please check the media device and try again', { deviceType: this.service.t(deviceType) });
+    return this.service.t(
+      'media device failed to open, please check the media device and try again',
+      { deviceType: this.service.t(deviceType) }
+    );
   }
 
   private getMediaDeviceNotAuthorizedMsg(deviceType: MediaDeviceType) {
-    return this.service.t('The current device is not authorized, please allow access to the device permissions', { deviceType: this.service.t(deviceType) });
+    return this.service.t(
+      'The current device is not authorized, please allow access to the device permissions',
+      { deviceType: this.service.t(deviceType) }
+    );
   }
 
   private getMediaDeviceOccupiedMsg(deviceType: MediaDeviceType) {
-    return this.service.t('The current device is occupied by other apps, try to close other apps or change the device', { deviceType: this.service.t(deviceType) });
+    return this.service.t(
+      'The current device is occupied by other apps, try to close other apps or change the device',
+      { deviceType: this.service.t(deviceType) }
+    );
   }
 
   private getTurnOnDevicePrivilegesTitle(deviceType: MediaDeviceType) {
-    return this.service.t('Turn on device privileges', { deviceType: this.service.t(deviceType) });
+    return this.service.t('Turn on device privileges', {
+      deviceType: this.service.t(deviceType),
+    });
   }
 
   private getTurnOnDevicePrivilegesMsg(deviceType: MediaDeviceType) {
-    return this.service.t('You can go to "System Preferences - Security & Privacy - Device" to enable device permissions', { deviceType: this.service.t(deviceType) });
+    return this.service.t(
+      'You can go to "System Preferences - Security & Privacy - Device" to enable device permissions',
+      { deviceType: this.service.t(deviceType) }
+    );
   }
 
   public handleError(error: any) {
@@ -114,13 +156,19 @@ class MediaDeviceErrorHandler {
     switch (error.code) {
       case TUIErrorCode.ERR_CAMERA_START_FAILED:
       case TUIErrorCode.ERR_MICROPHONE_START_FAILED:
-        mediaType = error.code === TUIErrorCode.ERR_CAMERA_START_FAILED ? 'camera' : 'microphone';
+        mediaType =
+          error.code === TUIErrorCode.ERR_CAMERA_START_FAILED
+            ? 'camera'
+            : 'microphone';
         mediaErrorTitle = this.getMediaDeviceErrorTitle(mediaType);
         mediaErrorMsg = this.getMediaDeviceErrorMsg(mediaType);
         break;
       case TUIErrorCode.ERR_CAMERA_NOT_AUTHORIZED:
       case TUIErrorCode.ERR_MICROPHONE_NOT_AUTHORIZED:
-        mediaType = error.code === TUIErrorCode.ERR_CAMERA_NOT_AUTHORIZED ? 'camera' : 'microphone';
+        mediaType =
+          error.code === TUIErrorCode.ERR_CAMERA_NOT_AUTHORIZED
+            ? 'camera'
+            : 'microphone';
         if (isElectron) {
           mediaErrorTitle = this.getTurnOnDevicePrivilegesTitle(mediaType);
           mediaErrorMsg = this.getTurnOnDevicePrivilegesMsg(mediaType);
@@ -138,7 +186,10 @@ class MediaDeviceErrorHandler {
         break;
       case TUIErrorCode.ERR_CAMERA_OCCUPIED:
       case TUIErrorCode.ERR_MICROPHONE_OCCUPIED:
-        mediaType = error.code === TUIErrorCode.ERR_CAMERA_OCCUPIED ? 'camera' : 'microphone';
+        mediaType =
+          error.code === TUIErrorCode.ERR_CAMERA_OCCUPIED
+            ? 'camera'
+            : 'microphone';
         mediaErrorTitle = this.getMediaDeviceErrorTitle(mediaType);
         mediaErrorMsg = this.getMediaDeviceOccupiedMsg(mediaType);
         break;
@@ -158,12 +209,15 @@ class MediaDeviceErrorHandler {
   }
 
   private goToPermissionSettings(deviceType: MediaDeviceType) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { shell } = require('electron');
     const privacyTypeObj = {
       camera: 'Privacy_Camera',
       microphone: 'Privacy_Microphone',
       screenShare: 'Privacy_ScreenCapture',
     };
-    shell.openExternal(`x-apple.systempreferences:com.apple.preference.security?${privacyTypeObj[deviceType]}`);
+    shell.openExternal(
+      `x-apple.systempreferences:com.apple.preference.security?${privacyTypeObj[deviceType]}`
+    );
   }
 }

package/src/TUIRoom/services/function/virtualBackground.ts

@@ -36,7 +36,10 @@ export class VirtualBackground implements IVirtualBackground {
   }
 
   public async initVirtualBackground(): Promise<void> {
-    if (!this.virtualBackgroundPluginReady && this.trtcCloud?.useVirtualBackground) {
+    if (
+      !this.virtualBackgroundPluginReady &&
+      this.trtcCloud?.useVirtualBackground
+    ) {
       await this.trtcCloud.useVirtualBackground();
       this.virtualBackgroundPluginReady = true;
     }
@@ -45,24 +48,28 @@ export class VirtualBackground implements IVirtualBackground {
   public async toggleVirtualBackground(enabled: boolean): Promise<void> {
     await this.initVirtualBackground();
     const { sdkAppId, userId, userSig } = this.service.basicStore;
-    const params =  {
+    const params = {
       sdkAppId,
       userId,
       userSig,
       enable: enabled,
     };
-    await this.trtcCloud.callExperimentalAPI(JSON.stringify({ api: 'enableVirtualBackground', params }));
+    await this.trtcCloud.callExperimentalAPI(
+      JSON.stringify({ api: 'enableVirtualBackground', params })
+    );
   }
 
   public async toggleTestVirtualBackground(enabled: boolean): Promise<void> {
     await this.initVirtualBackground();
     const { sdkAppId, userId, userSig } = this.service.basicStore;
-    const params =  {
+    const params = {
       sdkAppId,
       userId,
       userSig,
       enable: enabled,
     };
-    await this.trtcCloud.callExperimentalAPI(JSON.stringify({ api: 'enableTestVirtualBackground', params }));
+    await this.trtcCloud.callExperimentalAPI(
+      JSON.stringify({ api: 'enableTestVirtualBackground', params })
+    );
   }
 }

package/src/TUIRoom/services/function/waterMark.ts

@@ -2,7 +2,7 @@ import { EventType, IRoomService } from '../types';
 
 interface IWaterMark {
   toggleWatermark(enabled: boolean): void;
-  dispose() : void;
+  dispose(): void;
 }
 export class WaterMark implements IWaterMark {
   private service: IRoomService;
@@ -95,8 +95,16 @@ export class WaterMark implements IWaterMark {
       const maxWidth = 200;
       const watermarkSpacing = maxWidth + 25;
 
-      for (let y = -watermarkSpacing; y < watermarkContainer.offsetHeight + watermarkSpacing; y += watermarkSpacing) {
-        for (let x = -watermarkSpacing; x < watermarkContainer.offsetWidth + watermarkSpacing; x += watermarkSpacing) {
+      for (
+        let y = -watermarkSpacing;
+        y < watermarkContainer.offsetHeight + watermarkSpacing;
+        y += watermarkSpacing
+      ) {
+        for (
+          let x = -watermarkSpacing;
+          x < watermarkContainer.offsetWidth + watermarkSpacing;
+          x += watermarkSpacing
+        ) {
           const watermarkElement = document.createElement('div');
           watermarkElement.classList.add('watermark');
           watermarkElement.textContent = watermarkText;
@@ -112,10 +120,16 @@ export class WaterMark implements IWaterMark {
     const resizeObserver = new ResizeObserver(addWatermarkElements);
     resizeObserver.observe(watermarkContainer);
 
-    const observerCallback = (mutations: MutationRecord[], observer: MutationObserver) => {
-      mutations.forEach((mutation) => {
+    const observerCallback = (
+      mutations: MutationRecord[],
+      observer: MutationObserver
+    ) => {
+      mutations.forEach(mutation => {
         if (mutation.removedNodes.length > 0) {
-          const removedWatermark = Array.from(mutation.removedNodes).some(node => (node as HTMLElement).classList?.contains('watermark-container'));
+          const removedWatermark = Array.from(mutation.removedNodes).some(
+            node =>
+              (node as HTMLElement).classList?.contains('watermark-container')
+          );
           if (removedWatermark) {
             watermarkContainer = document.createElement('div');
             watermarkContainer.classList.add('watermark-container');
@@ -125,7 +139,10 @@ export class WaterMark implements IWaterMark {
             observeChanges();
           }
         }
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'style'
+        ) {
           watermarkContainer.style.display = '';
         }
       });
@@ -134,7 +151,10 @@ export class WaterMark implements IWaterMark {
     const observeChanges = () => {
       const observer = new MutationObserver(observerCallback);
       observer.observe(targetElement, { childList: true });
-      observer.observe(watermarkContainer, { attributes: true, attributeFilter: ['style'] });
+      observer.observe(watermarkContainer, {
+        attributes: true,
+        attributeFilter: ['style'],
+      });
     };
 
     observeChanges();

package/src/TUIRoom/services/main.ts

@@ -1,3 +1,3 @@
-import { chatExtension } from "../extension/chatExtension";
-import { roomService } from "./roomService";
+import { chatExtension } from '../extension/chatExtension';
+import { roomService } from './roomService';
 roomService.useExtension(chatExtension);