@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,
457 lines (456 loc) • 15.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const pinia = require("pinia");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const basic = require("./basic.js");
const vue = require("../utils/vue.js");
require("../services/main.js");
const roomService = require("../services/roomService.js");
require("../locales/index.js");
require("../utils/environment.js");
require("mitt");
require("../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
function getNewStreamInfo(userId, streamType) {
const newStreamInfo = {
userId,
hasAudioStream: false,
hasVideoStream: false,
streamType: streamType || TUIRoomEngine.TUIVideoStreamType.kCameraStream,
isLoading: false,
playDomMap: /* @__PURE__ */ new Map(),
timestamp: Date.now()
};
return newStreamInfo;
}
function getNewUserInfo(userId) {
const newUserInfo = {
userId,
userName: "",
avatarUrl: "",
nameCard: "",
hasAudioStream: false,
hasVideoStream: false,
hasScreenStream: false,
isMessageDisabled: false,
userRole: TUIRoomEngine.TUIRole.kGeneralUser,
onSeat: false,
isUserApplyingToAnchor: false,
isInvitingUserToAnchor: false,
isInRoom: false,
status: TUIRoomEngine.TUIInvitationStatus.kNone,
timestamp: Date.now()
};
return newUserInfo;
}
function getRecordStreamType(streamType) {
if (streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStreamLow) {
return TUIRoomEngine.TUIVideoStreamType.kCameraStream;
}
return streamType;
}
const useRoomStore = pinia.defineStore("room", {
state: () => ({
userInfoObj: {},
streamInfoObj: {},
userVolumeObj: {},
currentSpeakerInfo: {
speakerUserId: "",
remoteSpeakerUserId: ""
},
masterUserId: "",
isMicrophoneDisableForAllUser: false,
isCameraDisableForAllUser: false,
isScreenShareDisableForAllUser: false,
isSeatEnabled: void 0,
seatMode: TUIRoomEngine.TUISeatMode.kFreeToTake,
maxMembersCount: 5,
// Includes local streams and screen shares, above which subsequent streams are played
maxSeatCount: 20,
password: "",
roomName: "",
isOnStateTabActive: true,
isLocalUserSharing: false,
isWhiteboardVisible: false,
isSharingScreen: false,
isAnnotationVisible: false
}),
getters: {
localUser(state) {
const basicStore = basic.useBasicStore();
return state.userInfoObj[basicStore.userId] || getNewUserInfo(basicStore.userId);
},
localStream(state) {
const basicStore = basic.useBasicStore();
if (this.isFreeSpeakMode || this.localUser.onSeat) {
return state.streamInfoObj[`${basicStore.userId}_${TUIRoomEngine.TUIVideoStreamType.kCameraStream}`] || getNewStreamInfo(basicStore.userId, TUIRoomEngine.TUIVideoStreamType.kCameraStream);
}
},
localScreenStream(state) {
const basicStore = basic.useBasicStore();
return state.streamInfoObj[`${basicStore.userId}_${TUIRoomEngine.TUIVideoStreamType.kScreenStream}`];
},
isMaster(state) {
return this.localUser.userId === state.masterUserId;
},
isAdmin() {
return this.localUser.userRole === TUIRoomEngine.TUIRole.kAdministrator;
},
isGeneralUser() {
return this.localUser.userRole === TUIRoomEngine.TUIRole.kGeneralUser;
},
isFreeSpeakMode() {
return this.isSeatEnabled === false;
},
isSpeakAfterTakingSeatMode() {
return Boolean(this.isSeatEnabled) && this.seatMode === TUIRoomEngine.TUISeatMode.kApplyToTake;
},
// Whether the current user is on the stage
isAnchor() {
if (this.isFreeSpeakMode) {
return true;
}
if (this.isSpeakAfterTakingSeatMode) {
return this.localUser.onSeat;
}
},
// Whether the current user is under the stage
isAudience() {
if (this.isFreeSpeakMode) {
return false;
}
if (this.isSpeakAfterTakingSeatMode) {
return !this.localUser.onSeat;
}
},
streamList() {
let streamList = [];
if (this.isFreeSpeakMode) {
streamList = Object.values(this.streamInfoObj);
} else {
streamList = Object.values(this.streamInfoObj).filter((item) => {
return this.userInfoObj[item.userId].onSeat;
});
}
return streamList.sort(
roomService.roomService.userManager.getStreamListSortComparator()
);
},
remoteStreamList() {
const basicStore = basic.useBasicStore();
return this.streamList.filter((item) => item.userId !== basicStore.userId);
},
cameraStreamList() {
return this.streamList.filter(
(stream) => stream.streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStream
);
},
remoteScreenStream() {
return this.remoteStreamList.find(
(stream) => stream.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream && stream.hasVideoStream
);
},
streamNumber() {
return this.streamList.length;
},
userList() {
return [...Object.values(this.userInfoObj)].sort(
roomService.roomService.userManager.getUserListSortComparator()
);
},
userNumber() {
return this.userList.filter((item) => item.isInRoom).length;
},
remoteUserList() {
const basicStore = basic.useBasicStore();
return [...Object.values(this.userInfoObj)].filter(
(item) => item.userId !== basicStore.userId
);
},
remoteEnteredUserList() {
return this.remoteUserList.filter((item) => item.isInRoom);
},
remoteNotEnteredUserList() {
return this.userList.filter((item) => !item.isInRoom);
},
remoteAnchorList() {
return this.remoteUserList.filter((item) => item.onSeat);
},
generalUserScreenStreamList() {
return this.remoteUserList.filter(
(item) => item.hasScreenStream && item.userRole === TUIRoomEngine.TUIRole.kGeneralUser
);
},
anchorUserList() {
return this.userList.filter((item) => item.onSeat);
},
applyToAnchorList() {
return this.remoteUserList.filter((item) => item.isUserApplyingToAnchor).sort(
(item1, item2) => ((item1 == null ? void 0 : item1.applyToAnchorTimestamp) || 0) - ((item2 == null ? void 0 : item2.applyToAnchorTimestamp) || 0)
) || [];
},
defaultStreamType() {
return Object.values(this.streamInfoObj).filter(
(stream) => stream.hasVideoStream
).length > this.maxMembersCount ? TUIRoomEngine.TUIVideoStreamType.kCameraStreamLow : TUIRoomEngine.TUIVideoStreamType.kCameraStream;
},
getDisplayName() {
return (userId) => {
const userInfo = this.userInfoObj[userId];
if (userInfo) {
const { nameCard, userName, userId: userId2 } = userInfo;
return nameCard || userName || userId2;
}
return userId;
};
}
},
actions: {
getUserName(userId) {
var _a, _b;
return ((_a = this.userInfoObj[userId]) == null ? void 0 : _a.nameCard) || ((_b = this.userInfoObj[userId]) == null ? void 0 : _b.userName) || userId;
},
getUserRole(userId) {
var _a;
return (_a = this.userInfoObj[userId]) == null ? void 0 : _a.userRole;
},
addUserInfo(userInfo) {
const { userId } = userInfo;
if (!userId) {
return;
}
if (this.userInfoObj[userId]) {
Object.assign(this.userInfoObj[userId], userInfo);
} else {
const newUserInfo = Object.assign(getNewUserInfo(userId), userInfo);
vue.set(this.userInfoObj, userId, newUserInfo);
}
},
// todo: can use addUserInfo instead
addRemoteUser(userInfo) {
const { userId } = userInfo;
const basicStore = basic.useBasicStore();
if (!userId || userId === basicStore.userId) {
return;
}
if (this.userInfoObj[userId]) {
Object.assign(this.userInfoObj[userId], userInfo, { isInRoom: true });
} else {
const newUserInfo = Object.assign(getNewUserInfo(userId), userInfo, {
isInRoom: true
});
vue.set(this.userInfoObj, userId, newUserInfo);
}
},
updateUserInfo(userInfo) {
if (!userInfo.userId) {
return;
}
Object.assign(this.userInfoObj[userInfo.userId], userInfo);
},
removeUserInfo(userId) {
const basicStore = basic.useBasicStore();
if (!userId || userId === basicStore.userId) {
return;
}
if (this.userInfoObj[userId]) {
vue.del(this.userInfoObj, userId);
}
},
addStreamInfo(userId, streamType) {
const recordStreamType = getRecordStreamType(streamType);
if (this.streamInfoObj[`${userId}_${recordStreamType}`]) {
return;
}
const newStreamInfo = getNewStreamInfo(userId, recordStreamType);
vue.set(this.streamInfoObj, `${userId}_${recordStreamType}`, newStreamInfo);
},
updateStreamInfo(streamInfo) {
const { userId, streamType } = streamInfo;
const recordStreamType = getRecordStreamType(streamType);
if (!this.streamInfoObj[`${userId}_${recordStreamType}`]) {
return;
}
if (streamType !== recordStreamType) {
Object.assign(streamInfo, { streamType: recordStreamType });
}
vue.set(
this.streamInfoObj,
`${userId}_${recordStreamType}`,
Object.assign(
this.streamInfoObj[`${userId}_${recordStreamType}`],
streamInfo
)
);
},
removeStreamInfo(userId, streamType) {
const recordStreamType = getRecordStreamType(streamType);
if (this.streamInfoObj[`${userId}_${recordStreamType}`]) {
vue.del(this.streamInfoObj, `${userId}_${recordStreamType}`);
}
},
getStreamInfo(userId, streamType) {
const recordStreamType = getRecordStreamType(streamType);
if (this.streamInfoObj[`${userId}_${recordStreamType}`]) {
return this.streamInfoObj[`${userId}_${recordStreamType}`];
}
},
setAudioVolume(audioVolumeArray) {
const basicStore = basic.useBasicStore();
audioVolumeArray.forEach((audioVolumeItem) => {
let { userId } = audioVolumeItem;
const { volume } = audioVolumeItem;
if (userId === "") {
userId = basicStore.userId;
}
vue.set(this.userVolumeObj, userId, volume);
});
},
setCurrentSpeakerInfo(speakerInfo) {
Object.assign(this.currentSpeakerInfo, speakerInfo);
},
setRoomInfo(roomInfo) {
if (!roomInfo) return;
const {
roomOwner = this.masterUserId,
isMicrophoneDisableForAllUser = this.isMicrophoneDisableForAllUser,
isCameraDisableForAllUser = this.isCameraDisableForAllUser,
isScreenShareDisableForAllUser = this.isScreenShareDisableForAllUser,
isSeatEnabled = this.isSeatEnabled,
seatMode = this.seatMode,
maxSeatCount = this.maxSeatCount,
password = this.password,
roomName = this.roomName
} = roomInfo;
if (this.localUser.userId === roomOwner) {
this.localUser.userRole = TUIRoomEngine.TUIRole.kRoomOwner;
}
this.masterUserId = roomOwner;
this.isMicrophoneDisableForAllUser = isMicrophoneDisableForAllUser;
this.isCameraDisableForAllUser = isCameraDisableForAllUser;
this.isScreenShareDisableForAllUser = isScreenShareDisableForAllUser;
this.isSeatEnabled = isSeatEnabled;
this.seatMode = seatMode;
this.maxSeatCount = maxSeatCount;
this.password = password;
this.roomName = roomName;
},
setDisableMicrophoneForAllUserByAdmin(isDisable) {
this.isMicrophoneDisableForAllUser = isDisable;
},
setDisableCameraForAllUserByAdmin(isDisable) {
this.isCameraDisableForAllUser = isDisable;
},
setDisableScreenShareForAllUserByAdmin(isDisable) {
this.isScreenShareDisableForAllUser = isDisable;
},
setMasterUserId(userId) {
this.masterUserId = userId;
},
// Moderator individually modifies the mute status of a user's outgoing text messages
setMuteUserChat(userId, muted) {
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isMessageDisabled = muted;
}
},
setRemoteUserRole(userId, role) {
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.userRole = role;
}
},
setRequestUserOpenMic(options) {
const { userId, isRequesting, requestId } = options;
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isRequestingUserOpenMic = isRequesting;
remoteUserInfo.requestUserOpenMicRequestId = isRequesting ? requestId : "";
}
},
setRequestUserOpenCamera(options) {
const { userId, isRequesting, requestId } = options;
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isRequestingUserOpenCamera = isRequesting;
remoteUserInfo.requestUserOpenCameraRequestId = isRequesting ? requestId : "";
}
},
addApplyToAnchorUser(options) {
const { userId, requestId, timestamp } = options;
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isUserApplyingToAnchor = true;
remoteUserInfo.applyToAnchorRequestId = requestId;
remoteUserInfo.applyToAnchorTimestamp = timestamp;
}
},
removeApplyToAnchorUser(requestId) {
const applyToAnchorItem = Object.values(this.userInfoObj).find(
(item) => item.isUserApplyingToAnchor && item.applyToAnchorRequestId === requestId
);
if (applyToAnchorItem) {
applyToAnchorItem.isUserApplyingToAnchor = false;
applyToAnchorItem.applyToAnchorRequestId = "";
applyToAnchorItem.applyToAnchorTimestamp = 0;
}
},
addInviteToAnchorUser(options) {
const { userId, requestId } = options;
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isInvitingUserToAnchor = true;
remoteUserInfo.inviteToAnchorRequestId = requestId;
}
},
removeInviteToAnchorUser(userId) {
const remoteUserInfo = this.userInfoObj[userId];
if (remoteUserInfo) {
remoteUserInfo.isInvitingUserToAnchor = false;
remoteUserInfo.inviteToAnchorRequestId = "";
}
},
setOnStageTabStatus(isOnStateTabActive) {
this.isOnStateTabActive = isOnStateTabActive;
},
updateInviteeList(userList) {
userList.forEach((user) => {
if (this.userInfoObj[user.userId]) {
Object.assign(this.userInfoObj[user.userId], user);
} else {
const newUserInfo = Object.assign(getNewUserInfo(user.userId), user);
vue.set(this.userInfoObj, user.userId, newUserInfo);
}
});
},
reset() {
this.resetRoomData();
},
resetRoomData() {
this.streamInfoObj = {};
this.userInfoObj = {};
this.userVolumeObj = {};
this.currentSpeakerInfo = {
speakerUserId: "",
remoteSpeakerUserId: ""
};
this.masterUserId = "";
this.isMicrophoneDisableForAllUser = false;
this.isCameraDisableForAllUser = false;
this.isScreenShareDisableForAllUser = false;
this.isSeatEnabled = void 0;
this.seatMode = TUIRoomEngine.TUISeatMode.kFreeToTake;
this.isOnStateTabActive = true;
this.maxSeatCount = 20;
this.password = "";
this.roomName = "";
this.isLocalUserSharing = false;
this.isWhiteboardVisible = false;
this.isSharingScreen = false;
this.isAnnotationVisible = false;
}
}
});
exports.getNewStreamInfo = getNewStreamInfo;
exports.getNewUserInfo = getNewUserInfo;
exports.useRoomStore = useRoomStore;