@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,
286 lines (285 loc) • 11.4 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 TUIRoomEngine__default, { TUIVideoStreamType, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import { isMobile } from "../../utils/environment.mjs";
import { throttle } from "../../utils/utils.mjs";
import useRoomEngine from "../../hooks/useRoomEngine.mjs";
import { roomService } from "../../services/roomService.mjs";
import { TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
import { useI18n } from "../../locales/index.mjs";
const roomEngine = useRoomEngine();
const { t } = useI18n();
const _UserEventManager = class _UserEventManager {
constructor(options) {
__publicField(this, "store");
__publicField(this, "onUserVideoStateChanged", (eventInfo) => {
const { userId, streamType, hasVideo } = eventInfo;
let userInfo = this.store.userInfoObj[userId];
if (!userInfo && hasVideo) {
this.store.addUserInfo({ userId, isInRoom: true });
}
userInfo = this.store.userInfoObj[userId];
if (!userInfo) {
return;
}
const updateInfo = streamType === TUIVideoStreamType.kScreenStream ? { hasScreenStream: hasVideo } : { hasVideoStream: hasVideo };
this.store.updateUserInfo({ userId, ...updateInfo });
if (streamType === TUIVideoStreamType.kCameraStream || streamType === TUIVideoStreamType.kScreenStream && hasVideo) {
const streamInfo = this.store.streamInfoObj[`${userId}_${streamType}`];
if (!streamInfo) {
this.store.addStreamInfo(userId, streamType);
}
this.store.updateStreamInfo({
userId,
streamType,
hasVideoStream: hasVideo
});
} else if (streamType === TUIVideoStreamType.kScreenStream && !hasVideo) {
this.store.removeStreamInfo(userId, streamType);
}
});
__publicField(this, "handleUserVoiceVolumeThrottle", throttle(
this.handleUserVoiceVolume,
1e3
));
if (!_UserEventManager.instance) {
_UserEventManager.instance = this;
}
this.store = options.store;
this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
this.onSeatListChanged = this.onSeatListChanged.bind(this);
this.onUserVideoStateChanged = this.onUserVideoStateChanged.bind(this);
this.onUserAudioStateChanged = this.onUserAudioStateChanged.bind(this);
this.onUserVoiceVolumeChanged = this.onUserVoiceVolumeChanged.bind(this);
this.onUserInfoChanged = this.onUserInfoChanged.bind(this);
this.onSendMessageForUserDisableChanged = this.onSendMessageForUserDisableChanged.bind(this);
this.bindRoomEngineEvents();
return _UserEventManager.instance;
}
onRemoteUserEnterRoom(eventInfo) {
const { userInfo } = eventInfo;
this.store.addUserInfo(
Object.assign(userInfo, { isInRoom: true, timestamp: Date.now() })
);
if (roomService.roomStore.isFreeSpeakMode) {
this.store.addStreamInfo(
userInfo.userId,
TUIVideoStreamType.kCameraStream
);
}
}
onRemoteUserLeaveRoom(eventInfo) {
const { userId } = eventInfo.userInfo;
this.store.removeUserInfo(userId);
this.store.removeStreamInfo(userId, TUIVideoStreamType.kCameraStream);
this.store.removeStreamInfo(userId, TUIVideoStreamType.kScreenStream);
}
onSeatListChanged(eventInfo) {
const { seatedList, leftList } = eventInfo;
seatedList.forEach((seat) => {
const { userId } = seat;
const user = this.store.getUserInfo(userId);
if (user) {
this.store.updateUserInfo({ userId, isOnSeat: true });
} else {
this.store.addUserInfo({
userId,
isOnSeat: true,
isInRoom: true
});
}
this.store.addStreamInfo(userId, TUIVideoStreamType.kCameraStream);
});
leftList == null ? void 0 : leftList.forEach((seat) => {
const { userId } = seat;
const user = this.store.userInfoObj[userId];
if (user) {
this.store.updateUserInfo({ userId, isOnSeat: false });
}
this.store.removeStreamInfo(userId, TUIVideoStreamType.kCameraStream);
this.store.removeStreamInfo(userId, TUIVideoStreamType.kScreenStream);
});
}
onUserAudioStateChanged(eventInfo) {
const { userId, hasAudio } = eventInfo;
let userInfo = this.store.userInfoObj[userId];
if (!userInfo && hasAudio) {
this.store.addUserInfo({ userId, isInRoom: true });
}
userInfo = this.store.userInfoObj[userId];
if (!userInfo) {
return;
}
this.store.updateUserInfo({ userId, hasAudioStream: hasAudio });
const streamInfo = this.store.streamInfoObj[`${userId}_${TUIVideoStreamType.kCameraStream}`];
if (!streamInfo) {
this.store.addStreamInfo(userId, TUIVideoStreamType.kCameraStream);
}
this.store.updateStreamInfo({
userId,
streamType: TUIVideoStreamType.kCameraStream,
hasAudioStream: hasAudio
});
}
// Calculate the userId of the loudest speaker in the room
// Calculate the userId of the remote user who speaks the loudest in the current room.
handleUserVoiceVolume(userVolumeList) {
const localUserVolume = {
userId: this.store.localUserId,
volume: 0
};
const largestRemoteUserVolume = {
userId: "",
volume: 0
};
userVolumeList.forEach((item) => {
var _a, _b;
if (item.userId === this.store.localUserId && ((_a = this.store.localStream) == null ? void 0 : _a.hasAudioStream)) {
localUserVolume.volume = item.volume;
} else if (item.userId !== this.store.localUserId && ((_b = this.store.userInfoObj[item.userId]) == null ? void 0 : _b.hasAudioStream)) {
const { userId, volume } = item;
if (volume > largestRemoteUserVolume.volume) {
largestRemoteUserVolume.userId = userId;
largestRemoteUserVolume.volume = volume;
}
}
});
const largestUserVolume = localUserVolume.volume > largestRemoteUserVolume.volume ? localUserVolume : largestRemoteUserVolume;
if (roomService.roomStore.currentSpeakerInfo.remoteSpeakerUserId) {
const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find(
(item) => item.userId === roomService.roomStore.currentSpeakerInfo.remoteSpeakerUserId
);
if (!lastRemoteSpeakerUserVolumeInfo || (lastRemoteSpeakerUserVolumeInfo == null ? void 0 : lastRemoteSpeakerUserVolumeInfo.volume) === 0 && largestRemoteUserVolume.volume > 0) {
roomService.roomStore.setCurrentSpeakerInfo({
remoteSpeakerUserId: largestRemoteUserVolume.userId
});
}
} else {
if (largestRemoteUserVolume.volume > 0) {
roomService.roomStore.setCurrentSpeakerInfo({
remoteSpeakerUserId: largestRemoteUserVolume.userId
});
}
}
if (roomService.roomStore.currentSpeakerInfo.speakerUserId) {
const lastSpeakerUserVolumeInfo = userVolumeList.find(
(item) => item.userId === roomService.roomStore.currentSpeakerInfo.speakerUserId
);
if (!lastSpeakerUserVolumeInfo || lastSpeakerUserVolumeInfo.volume === 0 && largestUserVolume.volume > 0) {
roomService.roomStore.setCurrentSpeakerInfo({
speakerUserId: largestUserVolume.userId
});
}
} else {
if (largestUserVolume.volume > 0) {
roomService.roomStore.setCurrentSpeakerInfo({
speakerUserId: largestUserVolume.userId
});
}
}
}
onUserVoiceVolumeChanged(eventInfo) {
const { userVolumeList } = eventInfo;
roomService.roomStore.setAudioVolume(userVolumeList);
if (isMobile) {
this.handleUserVoiceVolumeThrottle(userVolumeList);
}
}
onUserInfoChanged(eventInfo) {
const { userId, nameCard, roomCustomInfo, userRole } = eventInfo.userInfo;
this.store.updateUserInfo({ userId, nameCard, roomCustomInfo, userRole });
}
onSendMessageForUserDisableChanged(eventInfo) {
const { userId, isDisable } = eventInfo;
if (userId === this.store.localUser.userId) {
TUIToast({
type: TOAST_TYPE.WARNING,
message: isDisable ? t("You have been banned from text chat") : t("You are allowed to text chat")
});
roomService.chatStore.setSendMessageDisableChanged(isDisable);
}
this.store.updateUserInfo({
userId,
isMessageDisabled: isDisable
});
}
bindRoomEngineEvents() {
TUIRoomEngine__default.once("ready", () => {
var _a, _b, _c, _d, _e, _f, _g, _h;
(_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.onSeatListChanged,
this.onSeatListChanged
);
(_d = roomEngine.instance) == null ? void 0 : _d.on(
TUIRoomEvents.onUserVideoStateChanged,
this.onUserVideoStateChanged
);
(_e = roomEngine.instance) == null ? void 0 : _e.on(
TUIRoomEvents.onUserAudioStateChanged,
this.onUserAudioStateChanged
);
(_f = roomEngine.instance) == null ? void 0 : _f.on(
TUIRoomEvents.onUserVoiceVolumeChanged,
this.onUserVoiceVolumeChanged
);
(_g = roomEngine.instance) == null ? void 0 : _g.on(
TUIRoomEvents.onUserInfoChanged,
this.onUserInfoChanged
);
(_h = roomEngine.instance) == null ? void 0 : _h.on(
TUIRoomEvents.onSendMessageForUserDisableChanged,
this.onSendMessageForUserDisableChanged
);
});
}
unbindRoomEngineEvents() {
var _a, _b, _c, _d, _e, _f, _g, _h;
(_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.onSeatListChanged,
this.onSeatListChanged
);
(_d = roomEngine.instance) == null ? void 0 : _d.off(
TUIRoomEvents.onUserVideoStateChanged,
this.onUserVideoStateChanged
);
(_e = roomEngine.instance) == null ? void 0 : _e.off(
TUIRoomEvents.onUserAudioStateChanged,
this.onUserAudioStateChanged
);
(_f = roomEngine.instance) == null ? void 0 : _f.off(
TUIRoomEvents.onUserVoiceVolumeChanged,
this.onUserVoiceVolumeChanged
);
(_g = roomEngine.instance) == null ? void 0 : _g.off(
TUIRoomEvents.onUserInfoChanged,
this.onUserInfoChanged
);
(_h = roomEngine.instance) == null ? void 0 : _h.off(
TUIRoomEvents.onSendMessageForUserDisableChanged,
this.onSendMessageForUserDisableChanged
);
}
};
__publicField(_UserEventManager, "instance");
let UserEventManager = _UserEventManager;
export {
UserEventManager as default
};