@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/extension/chatExtension.ts

@@ -1,68 +1,81 @@
-import { ExtensionInfo, TUIConstants, TUICore, TUILogin } from '@tencentcloud/tui-core';
+import {
+  ExtensionInfo,
+  TUIConstants,
+  TUICore,
+  TUILogin,
+} from '@tencentcloud/tui-core';
 import TUIRoomEngine, {
   TUIErrorCode,
   TUIRole,
   TUIRoomEvents,
   TUIUserInfo,
 } from '@tencentcloud/tuiroom-engine-electron';
-import { EventType, roomEngine, RoomParam, roomService, RoomService } from '../services';
+import {
+  EventType,
+  roomEngine,
+  RoomParam,
+  roomService,
+  RoomService,
+} from '../services';
 import { setDragAndResize } from './utils/interact';
 import { Conversation, Message, Profile } from '@tencentcloud/chat';
 import { isMobile } from '../utils/environment';
 import { setLanguage } from './utils/setLanguage';
 import { VueVersion } from './utils/common';
 import { parseMessageData } from './utils/judgeRoomMessage';
-const defaultAvatarUrl = 'https://qcloudimg.tencent-cloud.cn/raw/6a075bead54faca9ca378f4d89c62fae.png';
+const defaultAvatarUrl =
+  'https://qcloudimg.tencent-cloud.cn/raw/6a075bead54faca9ca378f4d89c62fae.png';
 
 export interface MessageData {
-  ID?: string
-  isInnerRoom: boolean
-  isRoomMessage: boolean
-  isRoomCreateByMe: boolean
-  isMessageFromMe: boolean
-  roomId: string
-  roomState: RoomState
-  userList: Array<{ faceUrl: string; nickName: string; userId: string }>
-  myProfile: Profile
-  ownerName: string
-  owner: string
-}
-const getRoomOptions = () => ({
-  roomId: String(Math.ceil(Math.random() * 1000000)),
-  roomMode: 'FreeToSpeak',
-  roomParam: {
-    isOpenCamera: true,
-    isOpenMicrophone: true,
-  },
-} as {
+  ID?: string;
+  isInnerRoom: boolean;
+  isRoomMessage: boolean;
+  isRoomCreateByMe: boolean;
+  isMessageFromMe: boolean;
   roomId: string;
-  roomName?: string;
-  roomMode: 'FreeToSpeak' | 'SpeakAfterTakingSeat';
-  roomParam?: RoomParam;
-});
+  roomState: RoomState;
+  userList: Array<{ faceUrl: string; nickName: string; userId: string }>;
+  myProfile: Profile;
+  ownerName: string;
+  owner: string;
+}
+const getRoomOptions = () =>
+  ({
+    roomId: String(Math.ceil(Math.random() * 1000000)),
+    roomMode: 'FreeToSpeak',
+    roomParam: {
+      isOpenCamera: true,
+      isOpenMicrophone: true,
+    },
+  }) as {
+    roomId: string;
+    roomName?: string;
+    roomMode: 'FreeToSpeak' | 'SpeakAfterTakingSeat';
+    roomParam?: RoomParam;
+  };
 export interface CustomMessagePayload {
-  version: number
-  businessID: string // Fixed value, used to distinguish the type of custom message on IM.
-  groupId: string // When inviting group members to join, groupId is needed to get the list of group members.
-  messageId: string // Used to find and update a specific message after the audience becomes the host.
-  roomId: string // The id of the room, a required parameter for enterRoom.
-  owner: string // The userId of the room owner.
-  ownerName: string // The userName of the room owner.
-  roomState: RoomState // The current room state, there are four states: creating/created/destroying/destroyed.
-  memberCount: 1 // The number of people in the current room, it needs to be displayed on the UI how many people are in the meeting.
-  userList: Array<{ faceUrl: string; nickName: string; userId: string }> // The list of invited users including the room owner, display up to 5 to prevent the message length from exceeding the limit.
+  version: number;
+  businessID: string; // Fixed value, used to distinguish the type of custom message on IM.
+  groupId: string; // When inviting group members to join, groupId is needed to get the list of group members.
+  messageId: string; // Used to find and update a specific message after the audience becomes the host.
+  roomId: string; // The id of the room, a required parameter for enterRoom.
+  owner: string; // The userId of the room owner.
+  ownerName: string; // The userName of the room owner.
+  roomState: RoomState; // The current room state, there are four states: creating/created/destroying/destroyed.
+  memberCount: 1; // The number of people in the current room, it needs to be displayed on the UI how many people are in the meeting.
+  userList: Array<{ faceUrl: string; nickName: string; userId: string }>; // The list of invited users including the room owner, display up to 5 to prevent the message length from exceeding the limit.
 }
 export enum RoomState {
   CREATING = 'creating',
   CREATED = 'created',
   DESTROYING = 'destroying',
-  DESTROYED = 'destroyed'
+  DESTROYED = 'destroyed',
 }
 export enum ChatType {
   C2C = 'C2C',
   GROUP = 'GROUP',
   CUSTOM_SERVICE = 'customerService',
-  ROOM = 'room'
+  ROOM = 'room',
 }
 // The editing of messages is left to the homeowner, so you need to get each message and compare it with the userid and assign it to the message if it is the same.
 export class ChatExtension {
@@ -75,16 +88,13 @@ export class ChatExtension {
     userID: string;
     userSig: string;
   } = {
-      chat: {},
-      SDKAppID: 0,
-      userID: '',
-      userSig: '',
-    };
+    chat: {},
+    SDKAppID: 0,
+    userID: '',
+    userSig: '',
+  };
   public myProfile = {} as Profile;
-  private customMessages: Record<
-    string,
-    MessageData
-  > = {};
+  private customMessages: Record<string, MessageData> = {};
   private chatExtensionSetting: Record<ChatType, boolean> = {
     [ChatType.C2C]: true,
     [ChatType.GROUP]: true,
@@ -99,7 +109,10 @@ export class ChatExtension {
     this.initEventCtx();
   }
 
-  public setActiveMeetingMessage(message: Message, messagePayload: CustomMessagePayload) {
+  public setActiveMeetingMessage(
+    message: Message,
+    messagePayload: CustomMessagePayload
+  ) {
     this.message = message;
     this.messagePayload = messagePayload;
   }
@@ -123,36 +136,45 @@ export class ChatExtension {
   }
 
   public init() {
-    TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, this);
+    TUICore.registerExtension(
+      TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID,
+      this
+    );
     TUICore.registerEvent(
       TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
       TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
-      this,
+      this
     );
     TUICore.registerEvent(
       TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
       TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
-      this,
+      this
     );
   }
 
   public reset() {
-    TUICore.unregisterExtension(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, this);
+    TUICore.unregisterExtension(
+      TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID,
+      this
+    );
     TUICore.unregisterEvent(
       TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
       TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
-      this,
+      this
     );
     TUICore.unregisterEvent(
       TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
       TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
-      this,
+      this
     );
     this.unBindRoomServiceEvent();
     this.unBindRoomEngineEvent();
   }
 
-  public setHistoryMeetingMessageList(type: 'add' | 'delete', customMessage: {ID: string, messageData: MessageData}) {
+  public setHistoryMeetingMessageList(
+    type: 'add' | 'delete',
+    customMessage: { ID: string; messageData: MessageData }
+  ) {
     const { ID, messageData } = customMessage;
     if (messageData.roomState === RoomState.DESTROYED) return;
     if (type === 'add') {
@@ -175,19 +197,42 @@ export class ChatExtension {
     this.service?.on(EventType.ROOM_DISMISS, this.onRoomDestroy);
   }
   private bindRoomEngineEvent() {
-    roomEngine.instance?.on(TUIRoomEvents.onRemoteUserEnterRoom, this.onRemoteUserEnterRoom);
-    roomEngine.instance?.on(TUIRoomEvents.onRemoteUserLeaveRoom, this.onRemoteUserLeaveRoom);
-    roomEngine.instance?.on(TUIRoomEvents.onUserRoleChanged, this.onUserRoleChanged);
+    roomEngine.instance?.on(
+      TUIRoomEvents.onRemoteUserEnterRoom,
+      this.onRemoteUserEnterRoom
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onRemoteUserLeaveRoom,
+      this.onRemoteUserLeaveRoom
+    );
+    roomEngine.instance?.on(
+      TUIRoomEvents.onUserRoleChanged,
+      this.onUserRoleChanged
+    );
   }
   private unBindRoomServiceEvent() {
     this.service?.off(EventType.ROOM_DISMISS, this.onRoomDestroy);
   }
   private unBindRoomEngineEvent() {
-    roomEngine.instance?.off(TUIRoomEvents.onRemoteUserEnterRoom, this.onRemoteUserEnterRoom);
-    roomEngine.instance?.off(TUIRoomEvents.onRemoteUserLeaveRoom, this.onRemoteUserLeaveRoom);
-    roomEngine.instance?.off(TUIRoomEvents.onUserRoleChanged, this.onUserRoleChanged);
+    roomEngine.instance?.off(
+      TUIRoomEvents.onRemoteUserEnterRoom,
+      this.onRemoteUserEnterRoom
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onRemoteUserLeaveRoom,
+      this.onRemoteUserLeaveRoom
+    );
+    roomEngine.instance?.off(
+      TUIRoomEvents.onUserRoleChanged,
+      this.onUserRoleChanged
+    );
   }
-  private onRemoteUserEnterRoom({ userInfo }: { roomId: string; userInfo: TUIUserInfo }) {
+  private onRemoteUserEnterRoom({
+    userInfo,
+  }: {
+    roomId: string;
+    userInfo: TUIUserInfo;
+  }) {
     const { userID } = this.chatContext;
     if (this.messagePayload?.owner !== userID) return;
     const { userList } = this.messagePayload;
@@ -204,17 +249,30 @@ export class ChatExtension {
       memberCount: newUserList.length,
     });
   }
-  private onRemoteUserLeaveRoom({ userInfo }: { roomId: string; userInfo: TUIUserInfo }) {
+  private onRemoteUserLeaveRoom({
+    userInfo,
+  }: {
+    roomId: string;
+    userInfo: TUIUserInfo;
+  }) {
     const { userID } = this.chatContext;
     if (this.messagePayload.owner !== userID) return;
     const { userList } = this.messagePayload;
-    const newUserList = userList.filter(item => item.userId !== userInfo.userId);
+    const newUserList = userList.filter(
+      item => item.userId !== userInfo.userId
+    );
     this.modifyMessage(this.message?.ID, {
       userList: newUserList,
       memberCount: newUserList.length,
     });
   }
-  private async onUserRoleChanged({ userId, userRole }: { userId: string; userRole: TUIRole }) {
+  private async onUserRoleChanged({
+    userId,
+    userRole,
+  }: {
+    userId: string;
+    userRole: TUIRole;
+  }) {
     const { userID } = this.chatContext;
     if (userRole === TUIRole.kRoomOwner && userId === userID) {
       const profileResult = await this.getUserProfile([userId]);
@@ -250,21 +308,32 @@ export class ChatExtension {
   }
 
   private setAnotherMessageRoomState(state: RoomState) {
-    Object.keys(this.customMessages).forEach((key) => {
-      const { roomState, isRoomCreateByMe, isInnerRoom } = this.customMessages[key];
-      if (roomState !== RoomState.DESTROYED && isRoomCreateByMe && !isInnerRoom) {
+    Object.keys(this.customMessages).forEach(key => {
+      const { roomState, isRoomCreateByMe, isInnerRoom } =
+        this.customMessages[key];
+      if (
+        roomState !== RoomState.DESTROYED &&
+        isRoomCreateByMe &&
+        !isInnerRoom
+      ) {
         this.modifyMessage(key, { roomState: state });
       }
       if (roomState === RoomState.DESTROYED) {
-        this.setHistoryMeetingMessageList('delete', { ID: key, messageData: this.customMessages[key] });
-      }1;
+        this.setHistoryMeetingMessageList('delete', {
+          ID: key,
+          messageData: this.customMessages[key],
+        });
+      }
+      1;
     });
   }
   private async quickRoom(data: Conversation) {
     if (this.getIsMeetingInProgress()) {
       this.service?.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
         code: -1,
-        message: this.service?.t('Currently in a meeting, please exit the current meeting before proceeding.'),
+        message: this.service?.t(
+          'Currently in a meeting, please exit the current meeting before proceeding.'
+        ),
       });
       return;
     }
@@ -288,7 +357,10 @@ export class ChatExtension {
       this.message = message;
       this.messagePayload = this.parseMessageData(message);
       await this.sendMessage(message);
-      await this.modifyMessage(message.ID, { messageId: message.ID, roomState: RoomState.CREATED });
+      await this.modifyMessage(message.ID, {
+        messageId: message.ID,
+        roomState: RoomState.CREATED,
+      });
     } catch (error) {
       this.service?.emit(EventType.ROOM_NOTICE_MESSAGE, {
         code: -1,
@@ -299,20 +371,28 @@ export class ChatExtension {
     }
   }
   private async destroyRoom() {
-    await this.modifyMessage(this.message.ID, { roomState: RoomState.DESTROYED });
+    await this.modifyMessage(this.message.ID, {
+      roomState: RoomState.DESTROYED,
+    });
   }
-  public async onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+  public async onNotifyEvent(
+    eventName: string,
+    subKey: string,
+    params?: Record<string, any>
+  ) {
     if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
       if (subKey === TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS) {
         // Execute your own business logic processing when receiving successful login
         !isMobile && setDragAndResize('#roomContainer');
-        TUIRoomEngine?.callExperimentalAPI(JSON.stringify({
-          api: 'setFramework',
-          params: {
-            component: 'TIMRoomKit',
-            language: `vue${VueVersion}`,
-          },
-        }));
+        TUIRoomEngine?.callExperimentalAPI(
+          JSON.stringify({
+            api: 'setFramework',
+            params: {
+              component: 'TIMRoomKit',
+              language: `vue${VueVersion}`,
+            },
+          })
+        );
         this.bindRoomEngineEvent();
         this.bindRoomServiceEvent();
         roomService.basicStore.setScene('chat');
@@ -324,7 +404,7 @@ export class ChatExtension {
           UserInfo: { visible: false },
         });
         this.chatContext = TUILogin.getContext();
-        this.myProfile =  await this.getMyProfile();
+        this.myProfile = await this.getMyProfile();
         this.roomInit(true);
       }
     }
@@ -342,28 +422,31 @@ export class ChatExtension {
     this.service?.initMediaDeviceList();
     const { SDKAppID, userID, userSig } = this.chatContext;
     const { nick = '', avatar = defaultAvatarUrl } = this.myProfile;
-    this.service && this.service[deep ? 'initRoomKit' : 'storeInit']({
-      // To get sdkAppId, please refer to Step One
-      sdkAppId: SDKAppID,
-      // The unique Id of the user in your business
-      userId: userID,
-      // For local development and debugging, you can quickly generate userSig on the page https://console.cloud.tencent.com/trtc/usersigtool. Note that userSig and userId have a one-to-one correspondence
-      userSig,
-      // The nickname used by the user in your business
-      userName: nick,
-      // The avatar link used by the user in your business
-      avatarUrl: avatar,
-      // The skin theme color needed by the user in your business and whether to support switching skin themes
-      theme: {
-        isSupportSwitchTheme: false,
-      },
-    });
+    this.service &&
+      this.service[deep ? 'initRoomKit' : 'storeInit']({
+        // To get sdkAppId, please refer to Step One
+        sdkAppId: SDKAppID,
+        // The unique Id of the user in your business
+        userId: userID,
+        // For local development and debugging, you can quickly generate userSig on the page https://console.cloud.tencent.com/trtc/usersigtool. Note that userSig and userId have a one-to-one correspondence
+        userSig,
+        // The nickname used by the user in your business
+        userName: nick,
+        // The avatar link used by the user in your business
+        avatarUrl: avatar,
+        // The skin theme color needed by the user in your business and whether to support switching skin themes
+        theme: {
+          isSupportSwitchTheme: false,
+        },
+      });
   }
   public async enterRoom(roomId: string, message: Message) {
     if (this.getIsMeetingInProgress()) {
       this.service?.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
         code: -1,
-        message: this.service?.t('Currently in a meeting, please exit the current meeting before proceeding.'),
+        message: this.service?.t(
+          'Currently in a meeting, please exit the current meeting before proceeding.'
+        ),
       });
       return;
     }
@@ -384,7 +467,14 @@ export class ChatExtension {
     this.setAnotherMessageRoomState(RoomState.DESTROYED);
   }
   private createCustomMessage(params: Record<string, any>): Message {
-    const { chat, userID, conversationID, conversationType, roomState, roomId } = params;
+    const {
+      chat,
+      userID,
+      conversationID,
+      conversationType,
+      roomState,
+      roomId,
+    } = params;
     const message = chat.createCustomMessage({
       to: conversationID.slice(conversationType.length),
       conversationType,
@@ -422,10 +512,10 @@ export class ChatExtension {
     return await chat.modifyMessage(message);
   }
   private generatePayloadForMessage(params: {
-    roomId: string
-    userID: string
-    conversationID: string
-    roomState: RoomState
+    roomId: string;
+    userID: string;
+    conversationID: string;
+    roomState: RoomState;
   }) {
     const { roomId, userID, conversationID, roomState } = params;
     const { nick = '', avatar = '' } = this.myProfile;
@@ -478,4 +568,3 @@ export class ChatExtension {
 }
 
 export const chatExtension = ChatExtension.getInstance();
-

package/src/TUIRoom/extension/index.ts

@@ -3,6 +3,4 @@ import VoidTemplate from './VoidTemplate.vue';
 import { VueVersion } from './utils/common';
 
 const RoomMessageCard = VueVersion >= 3 ? RoomMessageCardVue : VoidTemplate;
-export {
-  RoomMessageCard
-};
+export { RoomMessageCard };

package/src/TUIRoom/extension/utils/common.ts

@@ -1,3 +1,3 @@
 import { version } from 'vue';
 const [major] = version.split('.').map(Number);
-export const VueVersion = major;
+export const VueVersion = major;

package/src/TUIRoom/extension/utils/interact.ts

@@ -19,8 +19,14 @@ export const setDragAndResize = (domSelect: string) => {
         let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 
         // Limit the dragging boundary to not exceed the screen
-        x = Math.min(screenWidth - target.offsetWidth + minWidth - 100, Math.max(-minWidth + 100, x));
-        y = Math.min(screenHeight - target.offsetHeight + minHeight - 100, Math.max(-minHeight + 100, y));
+        x = Math.min(
+          screenWidth - target.offsetWidth + minWidth - 100,
+          Math.max(-minWidth + 100, x)
+        );
+        y = Math.min(
+          screenHeight - target.offsetHeight + minHeight - 100,
+          Math.max(-minHeight + 100, y)
+        );
 
         target.style.transform = `translate(${x}px, ${y}px)`;
         target.setAttribute('data-x', x);

package/src/TUIRoom/extension/utils/judgeRoomMessage.ts

@@ -7,8 +7,8 @@ export const getIsRoomCardMessage = (message: Message) => {
 export const getIsRoomSignalingMessage = (message: Message) => {
   const data = parseMessageData(message);
   return (
-    data?.data?.businessID === 'ROOM_INVITE_ACTION'
-    || data?.data?.businessID === 'tuikit_engine_room'
+    data?.data?.businessID === 'ROOM_INVITE_ACTION' ||
+    data?.data?.businessID === 'tuikit_engine_room'
   );
 };
 export const parseMessageData = (message: Message) => {

package/src/TUIRoom/hooks/useDeviceManager.ts

@@ -1,5 +1,9 @@
-
-import TUIRoomEngine, { TUIRoomDeviceManager, TUIRoomDeviceMangerEvents, TUIMediaDeviceType, TUIMediaDeviceState } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIRoomDeviceManager,
+  TUIRoomDeviceMangerEvents,
+  TUIMediaDeviceType,
+  TUIMediaDeviceState,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useGetRoomEngine from './useRoomEngine';
 import { useRoomStore } from '../stores/room';
 import logger from '../utils/common/logger';
@@ -82,22 +86,32 @@ export default function (options?: { listenForDeviceChange: boolean }) {
 
   /**
    * Device changes: device switching, device plugging and unplugging events
-  **/
-  async function onDeviceChanged(eventInfo: {deviceId: string, type: TUIMediaDeviceType, state: TUIMediaDeviceState}) {
+   **/
+  async function onDeviceChanged(eventInfo: {
+    deviceId: string;
+    type: TUIMediaDeviceType;
+    state: TUIMediaDeviceState;
+  }) {
     if (!deviceManager.instance) {
       return;
     }
     const stateList = ['add', 'remove', 'active'];
     const deviceTypeList = ['mic', 'speaker', 'camera'];
     const { deviceId, type, state } = eventInfo;
-    logger.log(`onDeviceChanged: deviceId: ${deviceId}, type: ${deviceTypeList[type]}, state: ${stateList[state]}`);
+    logger.log(
+      `onDeviceChanged: deviceId: ${deviceId}, type: ${deviceTypeList[type]}, state: ${stateList[state]}`
+    );
 
     const deviceList = await deviceManager.instance?.getDevicesList({ type });
     deviceList && roomStore.setDeviceList(type, deviceList);
     if (state === TUIMediaDeviceState.kMediaDeviceStateActive) {
       roomStore.setCurrentDeviceId(type, deviceId);
     }
-    if (isElectron && state === TUIMediaDeviceState.kMediaDeviceStateRemove && type === TUIMediaDeviceType.kMediaDeviceTypeVideoCamera) {
+    if (
+      isElectron &&
+      state === TUIMediaDeviceState.kMediaDeviceStateRemove &&
+      type === TUIMediaDeviceType.kMediaDeviceTypeVideoCamera
+    ) {
       const currentCameraInfo = deviceManager.instance?.getCurrentDevice({
         type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
       });
@@ -110,13 +124,19 @@ export default function (options?: { listenForDeviceChange: boolean }) {
   TUIRoomEngine.once('ready', () => {
     if (options && options.listenForDeviceChange) {
       initMediaDeviceList();
-      deviceManager.instance?.on(TUIRoomDeviceMangerEvents.onDeviceChanged, onDeviceChanged);
+      deviceManager.instance?.on(
+        TUIRoomDeviceMangerEvents.onDeviceChanged,
+        onDeviceChanged
+      );
     }
   });
 
   onUnmounted(() => {
     if (options && options.listenForDeviceChange) {
-      deviceManager.instance?.off(TUIRoomDeviceMangerEvents.onDeviceChanged, onDeviceChanged);
+      deviceManager.instance?.off(
+        TUIRoomDeviceMangerEvents.onDeviceChanged,
+        onDeviceChanged
+      );
     }
   });