@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/extension/chatExtension.ts

@@ -0,0 +1,479 @@
+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 { 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';
+
+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 {
+  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.
+}
+export enum RoomState {
+  CREATING = 'creating',
+  CREATED = 'created',
+  DESTROYING = 'destroying',
+  DESTROYED = 'destroyed'
+}
+export enum ChatType {
+  C2C = 'C2C',
+  GROUP = 'GROUP',
+  CUSTOM_SERVICE = 'customerService',
+  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 {
+  static instance?: ChatExtension;
+  private message = {} as Message;
+  private messagePayload = {} as CustomMessagePayload;
+  public chatContext: {
+    chat: Record<string, any>;
+    SDKAppID: number;
+    userID: string;
+    userSig: string;
+  } = {
+      chat: {},
+      SDKAppID: 0,
+      userID: '',
+      userSig: '',
+    };
+  public myProfile = {} as Profile;
+  private customMessages: Record<
+    string,
+    MessageData
+  > = {};
+  private chatExtensionSetting: Record<ChatType, boolean> = {
+    [ChatType.C2C]: true,
+    [ChatType.GROUP]: true,
+    [ChatType.CUSTOM_SERVICE]: false,
+    [ChatType.ROOM]: false,
+  };
+  private service?: RoomService;
+  private language = 'zh';
+
+  constructor() {
+    ChatExtension.instance = this;
+    this.initEventCtx();
+  }
+
+  public setActiveMeetingMessage(message: Message, messagePayload: CustomMessagePayload) {
+    this.message = message;
+    this.messagePayload = messagePayload;
+  }
+
+  static getInstance(): ChatExtension {
+    if (!ChatExtension.instance) {
+      ChatExtension.instance = new ChatExtension();
+    }
+    return ChatExtension.instance;
+  }
+
+  static destroyInstance(): void {
+    if (!ChatExtension.instance) return;
+    ChatExtension.instance.reset();
+    ChatExtension.instance = undefined;
+  }
+
+  public _bind(service: RoomService) {
+    this.service = service;
+    this.init();
+  }
+
+  public init() {
+    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,
+    );
+    TUICore.registerEvent(
+      TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
+      TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      this,
+    );
+  }
+
+  public reset() {
+    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,
+    );
+    TUICore.unregisterEvent(
+      TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED,
+      TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS,
+      this,
+    );
+    this.unBindRoomServiceEvent();
+    this.unBindRoomEngineEvent();
+  }
+
+  public setHistoryMeetingMessageList(type: 'add' | 'delete', customMessage: {ID: string, messageData: MessageData}) {
+    const { ID, messageData } = customMessage;
+    if (messageData.roomState === RoomState.DESTROYED) return;
+    if (type === 'add') {
+      this.customMessages[ID] = customMessage.messageData;
+    } else {
+      delete this.customMessages[ID];
+    }
+  }
+
+  public setChatExtension(chatType: ChatType, isShow: boolean) {
+    this.chatExtensionSetting[chatType] = isShow;
+  }
+  private initEventCtx() {
+    this.onRoomDestroy = this.onRoomDestroy.bind(this);
+    this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
+    this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
+    this.onUserRoleChanged = this.onUserRoleChanged.bind(this);
+  }
+  private bindRoomServiceEvent() {
+    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);
+  }
+  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);
+  }
+  private onRemoteUserEnterRoom({ userInfo }: { roomId: string; userInfo: TUIUserInfo }) {
+    const { userID } = this.chatContext;
+    if (this.messagePayload?.owner !== userID) return;
+    const { userList } = this.messagePayload;
+    const newUserList = [
+      ...userList,
+      {
+        faceUrl: userInfo.avatarUrl,
+        nickName: userInfo.userName,
+        userId: userInfo.userId,
+      },
+    ];
+    this.modifyMessage(this.message.ID, {
+      userList: newUserList,
+      memberCount: newUserList.length,
+    });
+  }
+  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);
+    this.modifyMessage(this.message?.ID, {
+      userList: newUserList,
+      memberCount: newUserList.length,
+    });
+  }
+  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]);
+      const [profile] = profileResult.data;
+      const { userID, nick } = profile;
+      await this.modifyMessage(this.message.ID, {
+        owner: userID, // Homeowner’s userId
+        ownerName: nick, // Homeowner’s userName
+      });
+    }
+  }
+  private onRoomDestroy() {
+    this.destroyRoom();
+  }
+  public onGetExtension(extensionID: string, params: any) {
+    const chatType: ChatType = params?.chatType;
+    const extension: ExtensionInfo = {
+      weight: -1,
+      text: this.service?.t('quick meeting') || '快速会议',
+      icon: 'https://qcloudimg.tencent-cloud.cn/raw/148ab10dfe654076b41f0d0945bb82e8.png',
+      data: {
+        name: 'quickRoom',
+      },
+      listener: {
+        onClicked: (data: Conversation) => {
+          this.quickRoom(data);
+        },
+      },
+    };
+    if (!chatType) return extension; // Old version chatType === undefined ignores configuration and returns directly
+    if (!this.chatExtensionSetting[chatType]) return;
+    return extension;
+  }
+
+  private setAnotherMessageRoomState(state: RoomState) {
+    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;
+    });
+  }
+  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.'),
+      });
+      return;
+    }
+    try {
+      this.setAnotherMessageRoomState(RoomState.DESTROYED);
+      const { conversationID, type } = data;
+      this.roomInit();
+      const { chat, userID } = this.chatContext;
+      const roomOptions = getRoomOptions();
+      const message = this.createCustomMessage({
+        chat,
+        userID,
+        roomId: roomOptions.roomId,
+        conversationID,
+        conversationType: type,
+        roomState: RoomState.CREATING,
+      });
+      this.updateMessageList(message);
+      await this.service?.createRoom(roomOptions);
+      await this.service?.enterRoom(roomOptions);
+      this.message = message;
+      this.messagePayload = this.parseMessageData(message);
+      await this.sendMessage(message);
+      await this.modifyMessage(message.ID, { messageId: message.ID, roomState: RoomState.CREATED });
+    } catch (error) {
+      this.service?.emit(EventType.ROOM_NOTICE_MESSAGE, {
+        code: -1,
+        type: 'error',
+        message: this.service?.t('Failed to initiate meeting'),
+      });
+      throw error;
+    }
+  }
+  private async destroyRoom() {
+    await this.modifyMessage(this.message.ID, { roomState: RoomState.DESTROYED });
+  }
+  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}`,
+          },
+        }));
+        this.bindRoomEngineEvent();
+        this.bindRoomServiceEvent();
+        roomService.basicStore.setScene('chat');
+        roomService.componentManager.setComponentConfig({
+          SwitchTheme: { visible: false },
+          InviteControl: { visible: false },
+          RoomLink: { visible: false },
+        });
+        this.chatContext = TUILogin.getContext();
+        this.myProfile =  await this.getMyProfile();
+        this.roomInit(true);
+      }
+    }
+    if (eventName === TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED) {
+      if (subKey === TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS) {
+        const language = params?.language;
+        this.language = language; // language = zh or en
+        setLanguage(language);
+      }
+    }
+  }
+
+  private async roomInit(deep?: boolean) {
+    this.service?.roomStore.reset();
+    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,
+      },
+    });
+  }
+  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.'),
+      });
+      return;
+    }
+    this.message = message;
+    this.messagePayload = this.parseMessageData(message);
+    const roomParam = {
+      isOpenCamera: true,
+      isOpenMicrophone: true,
+    };
+    this.roomInit();
+    try {
+      await this.service?.enterRoom({ roomId, roomParam });
+    } catch (err: any) {
+      if (err.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
+        this.modifyMessage(this.message.ID, { roomState: RoomState.DESTROYED });
+      }
+    }
+    this.setAnotherMessageRoomState(RoomState.DESTROYED);
+  }
+  private createCustomMessage(params: Record<string, any>): Message {
+    const { chat, userID, conversationID, conversationType, roomState, roomId } = params;
+    const message = chat.createCustomMessage({
+      to: conversationID.slice(conversationType.length),
+      conversationType,
+      payload: this.generatePayloadForMessage({
+        roomId,
+        userID,
+        conversationID,
+        roomState,
+      }),
+    });
+    return message;
+  }
+  private async sendMessage(message: Message) {
+    const { chat } = this.chatContext;
+    return chat.sendMessage(message);
+  }
+  private updateMessageList(message: Message) {
+    TUICore.callService({
+      serviceName: TUIConstants.TUIChat.SERVICE.NAME,
+      method: TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_LIST,
+      params: {
+        message,
+      },
+    });
+  }
+  private async modifyMessage(messageId: string, params: any) {
+    const { chat } = this.chatContext;
+    const message = await chat.findMessage(messageId);
+    let payloadData = this.parseMessageData(message);
+    payloadData = {
+      ...payloadData,
+      ...params,
+    };
+    message.payload.data = JSON.stringify(payloadData);
+    return await chat.modifyMessage(message);
+  }
+  private generatePayloadForMessage(params: {
+    roomId: string
+    userID: string
+    conversationID: string
+    roomState: RoomState
+  }) {
+    const { roomId, userID, conversationID, roomState } = params;
+    const { nick = '', avatar = '' } = this.myProfile;
+    const payload = {
+      data: JSON.stringify({
+        version: 1,
+        businessID: 'group_room_message',
+        groupId: conversationID, // todo The current version does not modify this, waiting for the IM solution
+        messageId: '', // Used to find and update a specific message after the audience becomes the host.
+        roomId, // The id of the room, a required parameter for enterRoom
+        owner: userID, // The userId of the room owner
+        ownerName: nick, // The userName of the room owner
+        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: [
+          {
+            faceUrl: avatar,
+            nickName: nick,
+            userId: userID,
+          },
+        ], // A list of invited users, including the host, can be displayed at most 5 to prevent the message length from exceeding the limit.
+      }),
+    };
+    return payload;
+  }
+
+  public parseMessageData(message: Message): CustomMessagePayload {
+    return parseMessageData(message);
+  }
+  public async getMyProfile() {
+    const { chat } = this.chatContext;
+    const res = await chat.getMyProfile();
+    return res?.data || {};
+  }
+
+  private getUserProfile(userIDList: Array<string>) {
+    const { chat } = this.chatContext;
+    return chat.getUserProfile({
+      userIDList, // Please note: Even if you only pull the information of one user, you still need to use the array type, for example: userIDList: ['user1']
+    });
+  }
+
+  private getIsMeetingInProgress(): boolean {
+    return !!this.service?.basicStore.roomId;
+  }
+
+  public getOnGoingRoomId() {
+    return this.service?.basicStore.roomId;
+  }
+}
+
+export const chatExtension = ChatExtension.getInstance();
+

package/src/TUIRoom/extension/index.ts

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

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

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

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

@@ -0,0 +1,56 @@
+import { EventType, roomService } from '../../services';
+import interact from 'interactjs';
+
+export const setDragAndResize = (domSelect: string) => {
+  const minWidth = 830;
+  const minHeight = 630;
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+
+  interact(domSelect)
+    .draggable({
+      onstart: (event: any) => {
+        const { target } = event;
+        target.style.margin = 'initial';
+      },
+      onmove: (event: any) => {
+        const { target } = event;
+        let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+        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));
+
+        target.style.transform = `translate(${x}px, ${y}px)`;
+        target.setAttribute('data-x', x);
+        target.setAttribute('data-y', y);
+      },
+    })
+    .resizable({
+      edges: { top: true, left: true, bottom: true, right: true },
+      listeners: {
+        move(event) {
+          let { x, y } = event.target.dataset;
+
+          x = (parseFloat(x) || 0) + event.deltaRect.left;
+          y = (parseFloat(y) || 0) + event.deltaRect.top;
+
+          // Limit zoom minimum
+          const width = Math.max(minWidth, event.rect.width);
+          const height = Math.max(minHeight, event.rect.height);
+
+          Object.assign(event.target.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+            transform: `translate(${x}px, ${y}px)`,
+          });
+
+          Object.assign(event.target.dataset, { x, y });
+
+          roomService.emit(EventType.ROOM_CONTAINER_RESIZE);
+        },
+      },
+    })
+    .styleCursor(true);
+};

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

@@ -0,0 +1,22 @@
+import { Message } from '@tencentcloud/chat';
+
+export const getIsRoomCardMessage = (message: Message) => {
+  const data = parseMessageData(message);
+  return data?.businessID === 'group_room_message';
+};
+export const getIsRoomSignalingMessage = (message: Message) => {
+  const data = parseMessageData(message);
+  return (
+    data?.data?.businessID === 'ROOM_INVITE_ACTION'
+    || data?.data?.businessID === 'tuikit_engine_room'
+  );
+};
+export const parseMessageData = (message: Message) => {
+  try {
+    const data = message?.payload?.data;
+    return data ? JSON.parse(data) : {};
+  } catch (err) {
+    console.warn('parseMessageData error:', err);
+    return {};
+  }
+};

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

@@ -0,0 +1,14 @@
+import i18n from '../../locales/index';
+import { useBasicStore } from '../../stores/basic';
+const languageMap = {
+  zh: 'zh-CN',
+  en: 'en-US',
+};
+export const setLanguage = (language: 'zh' | 'en') => {
+  const currentLanguage = languageMap[language] as 'zh-CN' | 'en-US';
+  if (!currentLanguage) return;
+  const basicStore = useBasicStore();
+  i18n.global.locale.value = currentLanguage;
+  basicStore.setLang(currentLanguage);
+  localStorage.setItem('tuiRoom-language', currentLanguage);
+};