@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
528 lines (527 loc) • 17.1 kB
JavaScript
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);
import { TUICore, TUIConstants, TUILogin } from "@tencentcloud/tui-core";
import TUIRoomEngine__default, { TUIRole, TUIErrorCode, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import "../services/main.mjs";
import { roomService, roomEngine } from "../services/roomService.mjs";
import { EventType } from "../services/types.mjs";
import "../locales/index.mjs";
import { isMobile } from "../utils/environment.mjs";
import "mitt";
import "../services/manager/roomActionManager.mjs";
import { setDragAndResize } from "./utils/interact.mjs";
import { setLanguage } from "./utils/setLanguage.mjs";
import { VueVersion } from "./utils/common.mjs";
import { parseMessageData } from "./utils/judgeRoomMessage.mjs";
const defaultAvatarUrl = "https://qcloudimg.tencent-cloud.cn/raw/6a075bead54faca9ca378f4d89c62fae.png";
const getRoomOptions = () => ({
roomId: String(Math.ceil(Math.random() * 1e6)),
roomMode: "FreeToSpeak",
roomParam: {
isOpenCamera: true,
isOpenMicrophone: true
}
});
var RoomState = /* @__PURE__ */ ((RoomState2) => {
RoomState2["CREATING"] = "creating";
RoomState2["CREATED"] = "created";
RoomState2["DESTROYING"] = "destroying";
RoomState2["DESTROYED"] = "destroyed";
return RoomState2;
})(RoomState || {});
const _ChatExtension = class _ChatExtension {
constructor() {
__publicField(this, "message", {});
__publicField(this, "messagePayload", {});
__publicField(this, "chatContext", {
chat: {},
SDKAppID: 0,
userID: "",
userSig: ""
});
__publicField(this, "myProfile", {});
__publicField(this, "customMessages", {});
__publicField(this, "isInit", false);
__publicField(this, "chatExtensionSetting", {
[
"C2C"
/* C2C */
]: true,
[
"GROUP"
/* GROUP */
]: true,
[
"customerService"
/* CUSTOM_SERVICE */
]: false,
[
"room"
/* ROOM */
]: false
});
__publicField(this, "service");
__publicField(this, "language", "zh");
_ChatExtension.instance = this;
this.initEventCtx();
}
setActiveMeetingMessage(message, messagePayload) {
this.message = message;
this.messagePayload = messagePayload;
}
static getInstance() {
if (!_ChatExtension.instance) {
_ChatExtension.instance = new _ChatExtension();
}
return _ChatExtension.instance;
}
static destroyInstance() {
if (!_ChatExtension.instance) return;
_ChatExtension.instance.reset();
_ChatExtension.instance = void 0;
}
_bind(service) {
this.service = service;
this.init();
}
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
);
}
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();
this.isInit = false;
}
setHistoryMeetingMessageList(type, customMessage) {
const { ID, messageData } = customMessage;
if (messageData.roomState === "destroyed") return;
if (type === "add") {
this.customMessages[ID] = customMessage.messageData;
} else {
delete this.customMessages[ID];
}
}
setChatExtension(chatType, isShow) {
this.chatExtensionSetting[chatType] = isShow;
}
initEventCtx() {
this.onRoomDestroy = this.onRoomDestroy.bind(this);
this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
this.onUserInfoChanged = this.onUserInfoChanged.bind(this);
}
bindRoomServiceEvent() {
var _a;
(_a = this.service) == null ? void 0 : _a.on(EventType.ROOM_DISMISS, this.onRoomDestroy);
}
bindRoomEngineEvent() {
var _a, _b, _c;
(_a = roomEngine.instance) == null ? void 0 : _a.on(
TUIRoomEvents.onRemoteUserEnterRoom,
this.onRemoteUserEnterRoom
);
(_b = roomEngine.instance) == null ? void 0 : _b.on(
TUIRoomEvents.onRemoteUserLeaveRoom,
this.onRemoteUserLeaveRoom
);
(_c = roomEngine.instance) == null ? void 0 : _c.on(
TUIRoomEvents.onUserInfoChanged,
this.onUserInfoChanged
);
}
unBindRoomServiceEvent() {
var _a;
(_a = this.service) == null ? void 0 : _a.off(EventType.ROOM_DISMISS, this.onRoomDestroy);
}
unBindRoomEngineEvent() {
var _a, _b, _c;
(_a = roomEngine.instance) == null ? void 0 : _a.off(
TUIRoomEvents.onRemoteUserEnterRoom,
this.onRemoteUserEnterRoom
);
(_b = roomEngine.instance) == null ? void 0 : _b.off(
TUIRoomEvents.onRemoteUserLeaveRoom,
this.onRemoteUserLeaveRoom
);
(_c = roomEngine.instance) == null ? void 0 : _c.off(
TUIRoomEvents.onUserInfoChanged,
this.onUserInfoChanged
);
}
onRemoteUserEnterRoom({
userInfo
}) {
var _a;
const { userID } = this.chatContext;
if (((_a = this.messagePayload) == null ? void 0 : _a.owner) !== userID) return;
const { userList } = this.messagePayload;
const newUserList = [
...userList,
{
faceUrl: userInfo.avatarUrl,
nickName: userInfo.nameCard || userInfo.userName,
userId: userInfo.userId
}
];
this.modifyMessage(this.message.ID, {
userList: newUserList,
memberCount: newUserList.length
});
}
onRemoteUserLeaveRoom({
userInfo
}) {
var _a;
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((_a = this.message) == null ? void 0 : _a.ID, {
userList: newUserList,
memberCount: newUserList.length
});
}
async onUserInfoChanged({ userInfo }) {
const { userRole, userId } = userInfo;
const { userID } = this.chatContext;
if (userRole === TUIRole.kRoomOwner && userId === userID) {
const profileResult = await this.getUserProfile([userId]);
const [profile] = profileResult.data;
const { userID: userID2, nick } = profile;
await this.modifyMessage(this.message.ID, {
owner: userID2,
// Homeowner’s userId
ownerName: nick
// Homeowner’s userName
});
}
}
onRoomDestroy() {
this.destroyRoom();
}
onGetExtension(extensionID, params) {
var _a;
const chatType = params == null ? void 0 : params.chatType;
const extension = {
weight: -1,
text: ((_a = this.service) == null ? void 0 : _a.t("quick conference")) || "快速会议",
icon: "https://qcloudimg.tencent-cloud.cn/raw/148ab10dfe654076b41f0d0945bb82e8.png",
data: {
name: "quickRoom"
},
listener: {
onClicked: (data) => {
this.quickRoom(data);
}
}
};
if (!chatType) return extension;
if (!this.chatExtensionSetting[chatType]) return [];
this.mixinInit(chatType);
return extension;
}
async mixinInit(chatType) {
var _a;
if (this.isInit) return;
if (chatType !== TUIConstants.TUIChat.TYPE.ROOM) {
!isMobile && setDragAndResize("#roomContainer");
(_a = TUIRoomEngine__default) == null ? void 0 : _a.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 },
Language: { visible: false },
InviteControl: { visible: false },
RoomLink: { visible: false },
UserInfo: { visible: false }
});
this.chatContext = TUILogin.getContext();
this.myProfile = await this.getMyProfile();
this.roomInit(true);
this.isInit = true;
}
}
setAnotherMessageRoomState(state) {
Object.keys(this.customMessages).forEach((key) => {
const { roomState, isRoomCreateByMe, isInnerRoom } = this.customMessages[key];
if (roomState !== "destroyed" && isRoomCreateByMe && !isInnerRoom) {
this.modifyMessage(key, { roomState: state });
}
if (roomState === "destroyed") {
this.setHistoryMeetingMessageList("delete", {
ID: key,
messageData: this.customMessages[key]
});
}
});
}
async quickRoom(data) {
var _a, _b, _c, _d, _e;
if (this.getIsMeetingInProgress()) {
(_b = this.service) == null ? void 0 : _b.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
code: -1,
message: (_a = this.service) == null ? void 0 : _a.t(
"Currently in a meeting, please exit the current meeting before proceeding."
)
});
return;
}
try {
this.setAnotherMessageRoomState(
"destroyed"
/* 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: "creating"
/* CREATING */
});
this.updateMessageList(message);
await ((_c = this.service) == null ? void 0 : _c.start(roomOptions.roomId, {
roomOptions
}));
this.message = message;
this.messagePayload = this.parseMessageData(message);
await this.sendMessage(message);
await new Promise((resolve) => setTimeout(resolve, 300));
await this.modifyMessage(message.ID, {
messageId: message.ID,
roomState: "created"
/* CREATED */
});
} catch (error) {
(_e = this.service) == null ? void 0 : _e.emit(EventType.ROOM_NOTICE_MESSAGE, {
code: -1,
type: "error",
message: (_d = this.service) == null ? void 0 : _d.t("Failed to initiate meeting")
});
throw error;
}
}
async destroyRoom() {
await this.modifyMessage(this.message.ID, {
roomState: "destroyed"
/* DESTROYED */
});
}
async onNotifyEvent(eventName, subKey, params) {
if (eventName === TUIConstants.TUITranslate.EVENT.LANGUAGE_CHANGED) {
if (subKey === TUIConstants.TUITranslate.EVENT_SUB_KEY.CHANGE_SUCCESS) {
const language = params == null ? void 0 : params.language;
this.language = language;
setLanguage(language);
}
}
}
async roomInit(deep) {
var _a;
(_a = this.service) == null ? void 0 : _a.roomStore.reset();
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
}
});
}
async enterRoom(roomId, message) {
var _a, _b, _c;
if (this.getIsMeetingInProgress()) {
(_b = this.service) == null ? void 0 : _b.emit(EventType.ROOM_NOTICE_MESSAGE_BOX, {
code: -1,
message: (_a = this.service) == null ? void 0 : _a.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 ((_c = this.service) == null ? void 0 : _c.join(roomId, { roomParam }));
} catch (err) {
if (err.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
this.modifyMessage(this.message.ID, {
roomState: "destroyed"
/* DESTROYED */
});
}
}
this.setAnotherMessageRoomState(
"destroyed"
/* DESTROYED */
);
}
createCustomMessage(params) {
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;
}
async sendMessage(message) {
const { chat } = this.chatContext;
return await chat.sendMessage(message);
}
updateMessageList(message) {
TUICore.callService({
serviceName: TUIConstants.TUIChat.SERVICE.NAME,
method: TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_LIST,
params: {
message
}
});
}
async modifyMessage(messageId, params) {
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);
}
generatePayloadForMessage(params) {
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;
}
parseMessageData(message) {
return parseMessageData(message);
}
async getMyProfile() {
const { chat } = this.chatContext;
const res = await chat.getMyProfile();
return (res == null ? void 0 : res.data) || {};
}
getUserProfile(userIDList) {
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']
});
}
getIsMeetingInProgress() {
var _a;
return !!((_a = this.service) == null ? void 0 : _a.basicStore.roomId);
}
getOnGoingRoomId() {
var _a;
return (_a = this.service) == null ? void 0 : _a.basicStore.roomId;
}
};
__publicField(_ChatExtension, "instance");
let ChatExtension = _ChatExtension;
const chatExtension = ChatExtension.getInstance();
export {
ChatExtension,
RoomState,
chatExtension
};