@tencentcloud/roomkit-electron-vue3 2.3.3

package/lib/extension/RoomMessageCard/RoomMessageCard.vue2.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const chatExtension = require("../chatExtension.js");
+const handleRoomMessage = require("./handleRoomMessage.js");
+const index = require("../../locales/index.js");
+const _withScopeId = (n) => (Vue.pushScopeId("data-v-1ec3d8c6"), n = n(), Vue.popScopeId(), n);
+const _hoisted_1 = { class: "content" };
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("span", { class: "icon" }, null, -1));
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = { class: "content-desc" };
+const _hoisted_6 = { class: "title" };
+const _hoisted_7 = { class: "users" };
+const _hoisted_8 = { key: 0 };
+const _hoisted_9 = ["src", "alt"];
+const _hoisted_10 = {
+  key: 1,
+  class: "more"
+};
+const _hoisted_11 = {
+  key: 0,
+  class: "room-info"
+};
+const _hoisted_12 = {
+  key: 2,
+  class: /* @__PURE__ */ Vue.normalizeClass(["room-info", "center"])
+};
+const defaultAvatarUrl = "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png";
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "RoomMessageCard",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    const { t } = index.useI18n();
+    const props = __props;
+    const roomCardData = Vue.ref({
+      roomId: "",
+      isRoomMessage: false,
+      isRoomCreateByMe: false,
+      isMessageFromMe: false,
+      roomState: chatExtension.RoomState.CREATING,
+      userList: [],
+      isInnerRoom: false,
+      myProfile: {},
+      ownerName: "",
+      owner: ""
+    });
+    const roomMessageCard = new handleRoomMessage.HandleRoomMessage();
+    Vue.watchEffect(() => {
+      roomMessageCard.initialize(props.message);
+      const {
+        isRoomMessage,
+        isRoomCreateByMe,
+        roomState,
+        userList,
+        roomId,
+        isInnerRoom,
+        myProfile,
+        isMessageFromMe,
+        ownerName,
+        owner
+      } = roomMessageCard.messageData;
+      roomCardData.value = {
+        roomId,
+        isRoomMessage,
+        isRoomCreateByMe,
+        isMessageFromMe,
+        roomState,
+        userList,
+        isInnerRoom,
+        myProfile,
+        ownerName,
+        owner
+      };
+    });
+    const avatarLoadError = (e) => {
+      e.target.src = defaultAvatarUrl;
+    };
+    const contentTitleClass = Vue.computed(() => {
+      const stateMap = {
+        [chatExtension.RoomState.CREATED]: "success",
+        [chatExtension.RoomState.CREATING]: "primary",
+        [chatExtension.RoomState.DESTROYING]: "default",
+        [chatExtension.RoomState.DESTROYED]: "default"
+      };
+      return stateMap[roomCardData.value.roomState];
+    });
+    const footerClass = Vue.computed(() => {
+      const stateMap = {
+        [chatExtension.RoomState.CREATED]: "default",
+        [chatExtension.RoomState.CREATING]: "center",
+        [chatExtension.RoomState.DESTROYING]: "center",
+        [chatExtension.RoomState.DESTROYED]: "center"
+      };
+      return stateMap[roomCardData.value.roomState];
+    });
+    const roomInfo = Vue.computed(() => {
+      if (roomCardData.value.roomState === chatExtension.RoomState.CREATING) {
+        return {
+          visible: true,
+          message: `${t("Initiating")}...`
+        };
+      }
+      if (roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
+        return {
+          visible: true,
+          message: roomCardData.value.userList.length > 1 ? t("X people have joined", { number: roomCardData.value.userList.length - 1 }) : t("Waiting for members to join the meeting")
+        };
+      }
+      if (!roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
+        return {
+          visible: true,
+          message: t("X people are in the meeting", { number: roomCardData.value.userList.length })
+        };
+      }
+      return {
+        visible: false,
+        message: ""
+      };
+    });
+    const roomStatus = Vue.computed(() => {
+      if (roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
+        return {
+          visible: true,
+          message: roomCardData.value.isInnerRoom ? t("Already joined") : t("Enter the meeting")
+        };
+      }
+      return {
+        visible: false,
+        message: ""
+      };
+    });
+    const roomDestroy = Vue.computed(() => {
+      if (roomCardData.value.roomState === chatExtension.RoomState.DESTROYING) {
+        return {
+          visible: true,
+          message: `${t("Ending meeting")}...`
+        };
+      }
+      if (roomCardData.value.roomState === chatExtension.RoomState.DESTROYED) {
+        return {
+          visible: true,
+          message: t("The meeting has ended")
+        };
+      }
+      return {
+        visible: false,
+        message: ""
+      };
+    });
+    const enterRoom = () => {
+      chatExtension.chatExtension.enterRoom(roomCardData.value.roomId, props.message);
+    };
+    return (_ctx, _cache) => {
+      return roomCardData.value.isRoomMessage ? (Vue.openBlock(), Vue.createElementBlock("div", {
+        key: 0,
+        class: Vue.normalizeClass(["room-message-container", roomCardData.value.isMessageFromMe ? "isMe" : "notMe"])
+      }, [
+        Vue.createElementVNode("div", {
+          class: Vue.normalizeClass(["room-message-card-container", roomCardData.value.roomState])
+        }, [
+          Vue.createElementVNode("div", _hoisted_1, [
+            Vue.createElementVNode("div", {
+              class: Vue.normalizeClass(["content-title", contentTitleClass.value])
+            }, [
+              _hoisted_2,
+              Vue.unref(chatExtension.RoomState).CREATED === roomCardData.value.roomState ? (Vue.openBlock(), Vue.createElementBlock("p", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Meeting in progress")), 1)) : (Vue.openBlock(), Vue.createElementBlock("p", _hoisted_4, Vue.toDisplayString(Vue.unref(t)("Meeting")), 1))
+            ], 2),
+            Vue.createElementVNode("div", _hoisted_5, [
+              Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(`${roomCardData.value.ownerName || roomCardData.value.owner}${Vue.unref(t)("Quick Meeting")}`), 1),
+              Vue.createElementVNode("ul", _hoisted_7, [
+                (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(roomCardData.value.userList, (user, index2) => {
+                  return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, {
+                    key: user.userId
+                  }, [
+                    index2 <= 4 ? (Vue.openBlock(), Vue.createElementBlock("li", _hoisted_8, [
+                      Vue.createElementVNode("img", {
+                        src: user.faceUrl || defaultAvatarUrl,
+                        alt: user.nickName || user.userId,
+                        onerror: avatarLoadError
+                      }, null, 8, _hoisted_9)
+                    ])) : Vue.createCommentVNode("", true),
+                    index2 === 5 ? (Vue.openBlock(), Vue.createElementBlock("li", _hoisted_10, " ... ")) : Vue.createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ])
+            ])
+          ]),
+          Vue.createElementVNode("div", {
+            class: Vue.normalizeClass(["footer", footerClass.value, roomCardData.value.isInnerRoom && "in-room"])
+          }, [
+            roomInfo.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_11, Vue.toDisplayString(roomInfo.value.message), 1)) : Vue.createCommentVNode("", true),
+            roomStatus.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", {
+              key: 1,
+              class: Vue.normalizeClass(["room-status"]),
+              onClick: enterRoom
+            }, Vue.toDisplayString(roomStatus.value.message), 1)) : Vue.createCommentVNode("", true),
+            roomDestroy.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_12, Vue.toDisplayString(roomDestroy.value.message), 1)) : Vue.createCommentVNode("", true)
+          ], 2)
+        ], 2)
+      ], 2)) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/extension/RoomMessageCard/RoomMessageCard.vue3.js

@@ -0,0 +1 @@
+"use strict";

package/lib/extension/RoomMessageCard/handleRoomMessage.d.ts

@@ -0,0 +1,17 @@
+import { Message } from '@tencentcloud/chat';
+import { MessageData } from '../chatExtension';
+
+/**
+ * Rendering cards requires isRoomMessage, isRoomCreateByMe, userList, isEnterRoom
+ * ChatExtension provides basic functions such as editing messages, sending messages, displaying messages on the screen.
+ * HandleRoomMessage implements business functions such as initiating meetings, joining meetings, leaving meetings.
+ */
+export declare class HandleRoomMessage {
+    private message;
+    messageData: MessageData;
+    initialize(message: Message): void;
+    destroy(): void;
+    private handleMessage;
+    parseMessageData(message: Message): import('../chatExtension').CustomMessagePayload;
+}
+export declare const handleRoomMessage: HandleRoomMessage;

package/lib/extension/RoomMessageCard/handleRoomMessage.js

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const chatExtension = require("../chatExtension.js");
+const judgeRoomMessage = require("../utils/judgeRoomMessage.js");
+class HandleRoomMessage {
+  constructor() {
+    __publicField(this, "message", {});
+    __publicField(this, "messageData", {
+      isInnerRoom: false,
+      isRoomMessage: false,
+      isRoomCreateByMe: false,
+      isMessageFromMe: false,
+      roomId: "",
+      roomState: chatExtension.RoomState.CREATED,
+      userList: [],
+      myProfile: {},
+      ownerName: "",
+      owner: ""
+    });
+  }
+  initialize(message) {
+    this.handleMessage(message);
+  }
+  destroy() {
+    chatExtension.chatExtension.setHistoryMeetingMessageList("delete", { ID: this.message.ID, messageData: this.messageData });
+  }
+  // Get card information
+  handleMessage(message) {
+    var _a;
+    this.message = message;
+    const currentUser = (_a = chatExtension.chatExtension.chatContext) == null ? void 0 : _a.userID;
+    const messagePayload = this.parseMessageData(message);
+    if (!judgeRoomMessage.getIsRoomCardMessage(message))
+      return;
+    const {
+      businessID,
+      owner,
+      roomId,
+      roomState,
+      userList,
+      ownerName
+    } = messagePayload;
+    const isRoomDestroyed = roomState === chatExtension.RoomState.DESTROYED;
+    const isInnerRoom = chatExtension.chatExtension.getOnGoingRoomId() === roomId && userList.some((u) => u.userId === currentUser) && !isRoomDestroyed;
+    const isRoomCreateByMe = owner === currentUser;
+    if (isRoomCreateByMe && isInnerRoom && !isRoomDestroyed) {
+      chatExtension.chatExtension.setActiveMeetingMessage(message, messagePayload);
+    }
+    this.messageData = {
+      isInnerRoom,
+      isRoomMessage: businessID === "group_room_message",
+      isRoomCreateByMe,
+      isMessageFromMe: message.from === currentUser,
+      roomId,
+      roomState,
+      userList,
+      myProfile: chatExtension.chatExtension.myProfile,
+      ownerName,
+      owner
+    };
+    chatExtension.chatExtension.setHistoryMeetingMessageList("add", { ID: message.ID, messageData: this.messageData });
+  }
+  parseMessageData(message) {
+    return chatExtension.chatExtension.parseMessageData(message);
+  }
+}
+exports.HandleRoomMessage = HandleRoomMessage;

package/lib/extension/chatExtension.d.ts

@@ -0,0 +1,104 @@
+import { Message, Profile } from '@tencentcloud/chat';
+import { RoomService } from '../services';
+import { ExtensionInfo } from '@tencentcloud/tui-core';
+
+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;
+}
+export interface CustomMessagePayload {
+    version: number;
+    businessID: string;
+    groupId: string;
+    messageId: string;
+    roomId: string;
+    owner: string;
+    ownerName: string;
+    roomState: RoomState;
+    memberCount: 1;
+    userList: Array<{
+        faceUrl: string;
+        nickName: string;
+        userId: string;
+    }>;
+}
+export declare enum RoomState {
+    CREATING = "creating",
+    CREATED = "created",
+    DESTROYING = "destroying",
+    DESTROYED = "destroyed"
+}
+export declare enum ChatType {
+    C2C = "C2C",
+    GROUP = "GROUP",
+    CUSTOM_SERVICE = "customerService",
+    ROOM = "room"
+}
+export declare class ChatExtension {
+    static instance?: ChatExtension;
+    private message;
+    private messagePayload;
+    chatContext: {
+        chat: Record<string, any>;
+        SDKAppID: number;
+        userID: string;
+        userSig: string;
+    };
+    myProfile: Profile;
+    private customMessages;
+    private chatExtensionSetting;
+    private service?;
+    private language;
+    constructor();
+    setActiveMeetingMessage(message: Message, messagePayload: CustomMessagePayload): void;
+    static getInstance(): ChatExtension;
+    static destroyInstance(): void;
+    _bind(service: RoomService): void;
+    init(): void;
+    reset(): void;
+    setHistoryMeetingMessageList(type: 'add' | 'delete', customMessage: {
+        ID: string;
+        messageData: MessageData;
+    }): void;
+    setChatExtension(chatType: ChatType, isShow: boolean): void;
+    private initEventCtx;
+    private bindRoomServiceEvent;
+    private bindRoomEngineEvent;
+    private unBindRoomServiceEvent;
+    private unBindRoomEngineEvent;
+    private onRemoteUserEnterRoom;
+    private onRemoteUserLeaveRoom;
+    private onUserRoleChanged;
+    private onRoomDestroy;
+    onGetExtension(extensionID: string, params: any): ExtensionInfo | undefined;
+    private setAnotherMessageRoomState;
+    private quickRoom;
+    private destroyRoom;
+    onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>): Promise<void>;
+    private roomInit;
+    enterRoom(roomId: string, message: Message): Promise<void>;
+    private createCustomMessage;
+    private sendMessage;
+    private updateMessageList;
+    private modifyMessage;
+    private generatePayloadForMessage;
+    parseMessageData(message: Message): CustomMessagePayload;
+    getMyProfile(): Promise<any>;
+    private getUserProfile;
+    private getIsMeetingInProgress;
+    getOnGoingRoomId(): any;
+}
+export declare const chatExtension: ChatExtension;