@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,
290 lines (289 loc) • 11.2 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index = require("./components/RoomHeader/index/index.js");
const index$2 = require("./components/RoomFooter/index/index.js");
const index$3 = require("./components/RoomSidebar/index.js");
const index$1 = require("./components/RoomContent/index.vue.js");
const index$4 = require("./components/RoomSetting/index.vue.js");
const RoomOverlay_vue_vue_type_script_setup_true_lang = require("./components/RoomOverlay/RoomOverlay.vue.js");
const LoadingOverlay = require("./components/PreRoom/LoadingOverlay.vue.js");
const PasswordDialog = require("./components/PreRoom/PasswordDialog.vue.js");
const index$5 = require("./components/RoomInvite/index.js");
const utils = require("./utils/utils.js");
const basic = require("./stores/basic.js");
const environment = require("./utils/environment.js");
const vTap = require("./directives/vTap.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const index$6 = require("./components/common/base/MessageBox/index.js");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const useTRTCDetect = require("./hooks/useTRTCDetect.js");
require("./services/main.js");
const roomService = require("./services/roomService.js");
const types = require("./services/types.js");
require("./locales/index.js");
require("mitt");
require("./services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const useCustomizedAutoPlayDialog = require("./hooks/useCustomizedAutoPlayDialog.js");
const pinia = require("pinia");
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "conference",
props: {
displayMode: { default: "permanent" }
},
emits: [
"on-log-out",
"on-create-room",
"on-enter-room",
"on-exit-room",
"on-destroy-room",
"on-kicked-out-of-room",
"on-kicked-off-line",
"on-userSig-expired"
],
setup(__props, { expose: __expose, emit: __emit }) {
const { theme } = uikitBaseComponentVue3.useUIKit();
const isShowPasswordContainer = Vue.ref(false);
const isShowLoading = Vue.ref(true);
const props = __props;
const overlayMap = Vue.ref({
AISubtitlesOverlay: { visible: false },
RoomInviteOverlay: { visible: false }
});
const conferenceShow = Vue.computed(
() => props.displayMode === "permanent" || !!basicStore.roomId
);
useCustomizedAutoPlayDialog.default();
useTRTCDetect.default();
const { t } = roomService.roomService;
__expose({
init,
createRoom,
enterRoom,
dismissRoom,
leaveRoom,
resetStore,
t
});
const emit = __emit;
const basicStore = basic.useBasicStore();
const showMessageBox = (data) => {
const {
message,
title = roomService.roomService.t("Note"),
duration,
cancelButtonText,
confirmButtonText = roomService.roomService.t("Sure"),
callback = () => {
}
} = data;
index$6.default({
title,
message,
duration,
cancelButtonText,
confirmButtonText,
callback
});
};
const showMessage = (data) => {
const { type, message, duration } = data;
uikitBaseComponentVue3.TUIToast({
type,
message,
duration
});
};
const handleShowOverlay = (data) => {
if (overlayMap.value[data.name]) {
overlayMap.value[data.name].visible = data.visible;
}
};
Vue.onMounted(() => {
roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
roomService.roomService.on(types.EventType.KICKED_OUT, onKickedOutOfRoom);
roomService.roomService.on(types.EventType.USER_SIG_EXPIRED, onUserSigExpired);
roomService.roomService.on(types.EventType.KICKED_OFFLINE, onKickedOffLine);
roomService.roomService.on(types.EventType.ROOM_START, onStartRoom);
roomService.roomService.on(types.EventType.ROOM_JOIN, onJoinRoom);
roomService.roomService.on(types.EventType.ROOM_LEAVE, onLeaveRoom);
roomService.roomService.on(types.EventType.ROOM_DISMISS, onDismissRoom);
roomService.roomService.on(types.EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
});
Vue.onUnmounted(() => {
roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
roomService.roomService.off(types.EventType.KICKED_OUT, onKickedOutOfRoom);
roomService.roomService.off(types.EventType.USER_SIG_EXPIRED, onUserSigExpired);
roomService.roomService.off(types.EventType.KICKED_OFFLINE, onKickedOffLine);
roomService.roomService.off(types.EventType.ROOM_START, onStartRoom);
roomService.roomService.off(types.EventType.ROOM_JOIN, onJoinRoom);
roomService.roomService.off(types.EventType.ROOM_LEAVE, onLeaveRoom);
roomService.roomService.off(types.EventType.ROOM_DISMISS, onDismissRoom);
roomService.roomService.off(types.EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
roomService.roomService.resetStore();
});
const { showHeaderTool } = roomService.roomService.basicStore;
const tuiRoomClass = Vue.computed(() => {
const roomClassList = [
"tui-room",
theme.value ? "" : `tui-theme-${roomService.roomService.basicStore.defaultTheme}`
];
if (environment.isMobile) {
roomClassList.push("tui-room-h5");
}
if (basicStore.scene === "chat") {
roomClassList.push("chat-room");
}
return roomClassList;
});
const roomContentRef = Vue.ref();
const roomRef = Vue.ref();
const { showRoomTool } = pinia.storeToRefs(basicStore);
function handleHideRoomTool() {
basicStore.setShowRoomTool(false);
}
Vue.watch(
() => roomRef.value,
(newValue, oldValue) => {
if (!environment.isWeChat && !environment.isMobile) {
if (newValue) {
addRoomContainerEvent(newValue);
} else {
oldValue && removeRoomContainerEvent(oldValue);
}
}
}
);
const handleHideRoomToolDebounce = utils.debounce(handleHideRoomTool, 5e3);
const handleHideRoomToolThrottle = utils.throttle(handleHideRoomToolDebounce, 1e3);
const showTool = () => {
basicStore.setShowRoomTool(true);
handleHideRoomToolDebounce();
};
const showToolThrottle = () => {
basicStore.setShowRoomTool(true);
handleHideRoomToolThrottle();
};
const hideTool = () => {
handleHideRoomTool();
};
const addRoomContainerEvent = (container) => {
container.addEventListener("mouseenter", showTool);
container.addEventListener("click", showTool);
container.addEventListener("mousemove", showToolThrottle);
container.addEventListener("mouseleave", hideTool);
};
const removeRoomContainerEvent = (container) => {
container.removeEventListener("mouseenter", showTool);
container.removeEventListener("click", showTool);
container.removeEventListener("mousemove", showToolThrottle);
container.removeEventListener("mouseleave", hideTool);
};
function handleRoomContentTap() {
basicStore.setShowRoomTool(!showRoomTool.value);
if (showRoomTool.value) {
handleHideRoomToolDebounce();
}
}
async function dismissRoom() {
await roomService.roomService.dismissRoom();
}
async function leaveRoom() {
await roomService.roomService.leaveRoom();
}
async function init(option) {
await roomService.roomService.initRoomKit(option);
}
async function createRoom(options) {
const { roomId, roomName, roomMode, roomParam } = options;
roomService.roomService.createRoom({
roomId,
roomName,
roomMode,
roomParam
});
}
async function enterRoom(options) {
await roomService.roomService.enterRoom(options);
}
function onRoomNeedPassword(code) {
if (code === TUIRoomEngine.TUIErrorCode.ERR_NEED_PASSWORD) {
isShowPasswordContainer.value = true;
}
}
function resetStore() {
roomService.roomService.resetStore();
}
const onStartRoom = () => {
isShowLoading.value = false;
emit("on-create-room", { code: 0, message: "create room" });
};
const onJoinRoom = () => {
isShowLoading.value = false;
isShowPasswordContainer.value = false;
emit("on-enter-room", { code: 0, message: "enter room" });
};
const onLeaveRoom = () => {
emit("on-exit-room", { code: 0, message: "exit room" });
};
const onDismissRoom = () => {
emit("on-destroy-room", { code: 0, message: "destroy room" });
};
const onKickedOutOfRoom = async (eventInfo) => {
const { roomId, reason, message } = eventInfo;
emit("on-kicked-out-of-room", { roomId, reason, message });
};
const onUserSigExpired = () => {
emit("on-userSig-expired");
};
const onKickedOffLine = (eventInfo) => {
const { message } = eventInfo;
emit("on-kicked-off-line", { message });
};
return (_ctx, _cache) => {
return conferenceShow.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
key: 0,
id: "roomContainer",
ref_key: "roomRef",
ref: roomRef,
class: Vue.normalizeClass(tuiRoomClass.value)
}, [
Vue.withDirectives(Vue.createVNode(Vue.unref(index.default), { class: "header" }, null, 512), [
[Vue.vShow, Vue.unref(showRoomTool) && Vue.unref(showHeaderTool)]
]),
Vue.withDirectives(Vue.createVNode(index$1.default, {
ref_key: "roomContentRef",
ref: roomContentRef,
"show-room-tool": Vue.unref(showRoomTool),
class: "content"
}, null, 8, ["show-room-tool"]), [
[
Vue.unref(vTap.default),
handleRoomContentTap,
void 0,
{ lazy: true }
]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(index$2.default), {
class: "footer",
onShowOverlay: handleShowOverlay
}, null, 512), [
[Vue.vShow, Vue.unref(showRoomTool)]
]),
Vue.createVNode(Vue.unref(index$3.default)),
Vue.createVNode(index$4.default),
Vue.createVNode(RoomOverlay_vue_vue_type_script_setup_true_lang.default),
overlayMap.value.RoomInviteOverlay.visible ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.default), { key: 0 })) : Vue.createCommentVNode("", true),
isShowLoading.value ? (Vue.openBlock(), Vue.createBlock(LoadingOverlay.default, { key: 1 })) : Vue.createCommentVNode("", true),
Vue.createVNode(PasswordDialog.default, {
visible: isShowPasswordContainer.value,
onJoinConference: enterRoom
}, null, 8, ["visible"])
], 2)) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;