@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/preConference.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="pre-conference-container">
+  <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,47 +17,99 @@
           :is-show-edit-name="props.showEditNameInPc"
           @update-user-name="handleUpdateUserName"
           @log-out="handleLogOut"
-        ></user-info>
+        />
       </div>
     </div>
     <room-home-control
+      v-if="isMobile"
       ref="roomControlRef"
       :given-room-id="props.roomId"
       :user-name="props.userInfo.userName"
       @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">
+        <room-home-control
+          ref="roomControlRef"
+          :given-room-id="props.roomId"
+          :user-name="props.userInfo.userName"
+          :enable-scheduled-conference="props.enableScheduledConference"
+          @create-room="handleCreateRoom"
+          @enter-room="handleEnterRoom"
+          @update-user-name="handleUpdateUserName"
+        />
+        <schedule-room-list
+          :is-show-scheduled-conference="props.enableScheduledConference"
+          @join-conference="handleEnterRoom"
+        />
+      </div>
+    </div>
+    <InvitationNotification @join-conference="handleEnterRoom" />
   </div>
 </template>
 
 <script setup lang="ts">
+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';
 import SwitchTheme from './components/common/SwitchTheme.vue';
-import { ref } from 'vue';
+import { EventType, roomService } from './services/index';
+import ScheduleRoomList from './components/ScheduleConference/ScheduleRoomList.vue';
+import Logo from './components/common/Logo.vue';
+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,
-}>(), {
-  userInfo: () => ({
-    userId: '',
-    userName: '',
-    avatarUrl: '',
-  }),
-  showEditNameInPc: false,
-  roomId: '',
-});
+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}`
+);
 
 async function handleCreateRoom(roomOption: Record<string, any>) {
   emits('on-create-room', roomOption);
@@ -72,6 +127,53 @@ async function handleLogOut() {
   emits('on-logout');
 }
 
+const showMessageBox = (data: {
+  code?: number;
+  message: string;
+  title: string;
+  duration?: number;
+  cancelButtonText: string;
+  confirmButtonText: string;
+  callback?: () => void;
+}) => {
+  const {
+    message,
+    title = roomService.t('Note'),
+    duration,
+    cancelButtonText,
+    confirmButtonText = roomService.t('Sure'),
+    callback = () => {},
+  } = data;
+  TUIMessageBox({
+    title,
+    message,
+    duration,
+    cancelButtonText,
+    confirmButtonText,
+    callback,
+  });
+};
+const showMessage = (data: {
+  type: 'warning' | 'success' | 'error' | 'info';
+  message: string;
+  duration: MESSAGE_DURATION;
+}) => {
+  const { type, message, duration } = data;
+  TUIMessage({
+    type,
+    message,
+    duration,
+  });
+};
+
+onMounted(() => {
+  roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
+  roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
+});
+onUnmounted(() => {
+  roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
+  roomService.off(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
+});
 </script>
 
 <style>
@@ -81,36 +183,33 @@ async function handleLogOut() {
 </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);
-}
-
 .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;
@@ -118,6 +217,30 @@ async function handleLogOut() {
       }
     }
   }
+
+  .pre-home-control {
+    position: absolute;
+    left: 50%;
+    display: flex;
+    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

@@ -0,0 +1,223 @@
+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> = {
+    createRoom: this.handleCreateRoomError.bind(this),
+    enterRoom: this.handleEnterRoomError.bind(this),
+    onError: this.handleOnError.bind(this),
+  };
+
+  private mediaDeviceErrorHandler: MediaDeviceErrorHandler | null = null;
+
+  constructor(service: any) {
+    this.service = service;
+  }
+
+  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!';
+        break;
+      default:
+        message = 'Failed to enter the meeting';
+    }
+    this.service.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+      title: this.service.t('Note'),
+      message: this.service.t(message),
+      confirmButtonText: this.service.t('Sure'),
+      callback: async () => {
+        this.service.emit(EventType.ROOM_ERROR, {
+          code: error.code,
+          message: error.message,
+        });
+        this.service.roomStore.reset();
+      },
+    });
+  }
+
+  private handleCreateRoomError(error: any) {
+    this.service.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+      title: this.service.t('Note'),
+      message: this.service.t('Failed to initiate meeting'),
+      confirmButtonText: this.service.t('Sure'),
+      callback: async () => {
+        this.service.emit(EventType.ROOM_ERROR, {
+          code: error.code,
+          message: error.message,
+        });
+        this.service.resetStore();
+      },
+    });
+  }
+
+  private handleOnError(error: any) {
+    if (error.message === 'enter trtc room failed , error code : -1') {
+      this.service.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+        type: 'warning',
+        message: this.service.t('Failed to enter the meeting'),
+        callback: () => {
+          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.handleError(error);
+    }
+  }
+}
+
+type MediaDeviceType = 'camera' | 'microphone' | 'screenShare';
+class MediaDeviceErrorHandler {
+  private service: any;
+
+  constructor(service: any) {
+    this.service = service;
+  }
+
+  private getMediaDeviceErrorTitle(deviceType: MediaDeviceType) {
+    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) }
+    );
+  }
+
+  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) }
+    );
+  }
+
+  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) }
+    );
+  }
+
+  private getTurnOnDevicePrivilegesTitle(deviceType: MediaDeviceType) {
+    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) }
+    );
+  }
+
+  public handleError(error: any) {
+    let mediaType: MediaDeviceType;
+    let mediaErrorTitle = '';
+    let mediaErrorMsg = '';
+    let cancelButtonText = '';
+    let confirmButtonText = '';
+    let callback = null;
+    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';
+        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';
+        if (isElectron) {
+          mediaErrorTitle = this.getTurnOnDevicePrivilegesTitle(mediaType);
+          mediaErrorMsg = this.getTurnOnDevicePrivilegesMsg(mediaType);
+          cancelButtonText = this.service.t('Cancel');
+          confirmButtonText = this.service.t('Go to Settings');
+          callback = (action: 'cancel' | 'confirm' | 'close') => {
+            if (action === 'confirm') {
+              this.goToPermissionSettings(mediaType);
+            }
+          };
+        } else {
+          mediaErrorTitle = this.getMediaDeviceErrorTitle(mediaType);
+          mediaErrorMsg = this.getMediaDeviceNotAuthorizedMsg(mediaType);
+        }
+        break;
+      case TUIErrorCode.ERR_CAMERA_OCCUPIED:
+      case TUIErrorCode.ERR_MICROPHONE_OCCUPIED:
+        mediaType =
+          error.code === TUIErrorCode.ERR_CAMERA_OCCUPIED
+            ? 'camera'
+            : 'microphone';
+        mediaErrorTitle = this.getMediaDeviceErrorTitle(mediaType);
+        mediaErrorMsg = this.getMediaDeviceOccupiedMsg(mediaType);
+        break;
+      default:
+        break;
+    }
+    if (mediaErrorMsg) {
+      this.service.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
+        type: 'error',
+        title: mediaErrorTitle,
+        message: mediaErrorMsg,
+        cancelButtonText,
+        confirmButtonText: confirmButtonText || this.service.t('I got it'),
+        callback,
+      });
+    }
+  }
+
+  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]}`
+    );
+  }
+}

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

@@ -1,4 +1,4 @@
-import { isElectron } from '../../utils/environment';
+import { isElectron, isWeChat } from '../../utils/environment';
 import { IRoomService } from '../types';
 
 interface IVirtualBackground {
@@ -18,7 +18,7 @@ export class VirtualBackground implements IVirtualBackground {
 
   constructor(service: IRoomService) {
     this.service = service;
-    if (isElectron) return;
+    if (isElectron || isWeChat) return;
     this.bindEvent();
   }
 
@@ -36,7 +36,10 @@ export class VirtualBackground implements IVirtualBackground {
   }
 
   public async initVirtualBackground(): Promise<void> {
-    if (!this.virtualBackgroundPluginReady) {
+    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/index.ts

@@ -7,3 +7,4 @@ export * from './manager/configManager';
 export * from './manager/userManager';
 export * from './manager/lifeCycleManager';
 export * from './manager/roomActionManager';
+export * from './manager/scheduleConferenceManager';

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