@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) • 10.3 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onUnmounted, watch, createElementBlock, createCommentVNode, openBlock, normalizeClass, withDirectives, createVNode, createBlock, unref, vShow } from "vue";
import index from "./components/RoomHeader/index/index.mjs";
import Index from "./components/RoomFooter/index/index.mjs";
import Index$1 from "./components/RoomSidebar/index.mjs";
import RoomContent from "./components/RoomContent/index.vue.mjs";
import RoomSetting from "./components/RoomSetting/index.vue.mjs";
import _sfc_main$1 from "./components/RoomOverlay/RoomOverlay.vue.mjs";
import LoadingOverlay from "./components/PreRoom/LoadingOverlay.vue.mjs";
import PasswordDialog from "./components/PreRoom/PasswordDialog.vue.mjs";
import Index$2 from "./components/RoomInvite/index.mjs";
import { debounce, throttle } from "./utils/utils.mjs";
import { useBasicStore } from "./stores/basic.mjs";
import { isMobile, isWeChat } from "./utils/environment.mjs";
import vTap from "./directives/vTap.mjs";
import { TUIErrorCode } from "@tencentcloud/tuiroom-engine-js";
import MessageBox from "./components/common/base/MessageBox/index.mjs";
import { useUIKit, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
import useTRTCDetect from "./hooks/useTRTCDetect.mjs";
import "./services/main.mjs";
import { roomService } from "./services/roomService.mjs";
import { EventType } from "./services/types.mjs";
import "./locales/index.mjs";
import "mitt";
import "./services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import useCustomizedAutoPlayDialog from "./hooks/useCustomizedAutoPlayDialog.mjs";
import { storeToRefs } from "pinia";
const _sfc_main = /* @__PURE__ */ 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 } = useUIKit();
const isShowPasswordContainer = ref(false);
const isShowLoading = ref(true);
const props = __props;
const overlayMap = ref({
AISubtitlesOverlay: { visible: false },
RoomInviteOverlay: { visible: false }
});
const conferenceShow = computed(
() => props.displayMode === "permanent" || !!basicStore.roomId
);
useCustomizedAutoPlayDialog();
useTRTCDetect();
const { t } = roomService;
__expose({
init,
createRoom,
enterRoom,
dismissRoom,
leaveRoom,
resetStore,
t
});
const emit = __emit;
const basicStore = useBasicStore();
const showMessageBox = (data) => {
const {
message,
title = roomService.t("Note"),
duration,
cancelButtonText,
confirmButtonText = roomService.t("Sure"),
callback = () => {
}
} = data;
MessageBox({
title,
message,
duration,
cancelButtonText,
confirmButtonText,
callback
});
};
const showMessage = (data) => {
const { type, message, duration } = data;
TUIToast({
type,
message,
duration
});
};
const handleShowOverlay = (data) => {
if (overlayMap.value[data.name]) {
overlayMap.value[data.name].visible = data.visible;
}
};
onMounted(() => {
roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
roomService.on(EventType.KICKED_OUT, onKickedOutOfRoom);
roomService.on(EventType.USER_SIG_EXPIRED, onUserSigExpired);
roomService.on(EventType.KICKED_OFFLINE, onKickedOffLine);
roomService.on(EventType.ROOM_START, onStartRoom);
roomService.on(EventType.ROOM_JOIN, onJoinRoom);
roomService.on(EventType.ROOM_LEAVE, onLeaveRoom);
roomService.on(EventType.ROOM_DISMISS, onDismissRoom);
roomService.on(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
});
onUnmounted(() => {
roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.off(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
roomService.off(EventType.KICKED_OUT, onKickedOutOfRoom);
roomService.off(EventType.USER_SIG_EXPIRED, onUserSigExpired);
roomService.off(EventType.KICKED_OFFLINE, onKickedOffLine);
roomService.off(EventType.ROOM_START, onStartRoom);
roomService.off(EventType.ROOM_JOIN, onJoinRoom);
roomService.off(EventType.ROOM_LEAVE, onLeaveRoom);
roomService.off(EventType.ROOM_DISMISS, onDismissRoom);
roomService.off(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
roomService.resetStore();
});
const { showHeaderTool } = roomService.basicStore;
const tuiRoomClass = computed(() => {
const roomClassList = [
"tui-room",
theme.value ? "" : `tui-theme-${roomService.basicStore.defaultTheme}`
];
if (isMobile) {
roomClassList.push("tui-room-h5");
}
if (basicStore.scene === "chat") {
roomClassList.push("chat-room");
}
return roomClassList;
});
const roomContentRef = ref();
const roomRef = ref();
const { showRoomTool } = storeToRefs(basicStore);
function handleHideRoomTool() {
basicStore.setShowRoomTool(false);
}
watch(
() => roomRef.value,
(newValue, oldValue) => {
if (!isWeChat && !isMobile) {
if (newValue) {
addRoomContainerEvent(newValue);
} else {
oldValue && removeRoomContainerEvent(oldValue);
}
}
}
);
const handleHideRoomToolDebounce = debounce(handleHideRoomTool, 5e3);
const handleHideRoomToolThrottle = 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.dismissRoom();
}
async function leaveRoom() {
await roomService.leaveRoom();
}
async function init(option) {
await roomService.initRoomKit(option);
}
async function createRoom(options) {
const { roomId, roomName, roomMode, roomParam } = options;
roomService.createRoom({
roomId,
roomName,
roomMode,
roomParam
});
}
async function enterRoom(options) {
await roomService.enterRoom(options);
}
function onRoomNeedPassword(code) {
if (code === TUIErrorCode.ERR_NEED_PASSWORD) {
isShowPasswordContainer.value = true;
}
}
function resetStore() {
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 ? (openBlock(), createElementBlock("div", {
key: 0,
id: "roomContainer",
ref_key: "roomRef",
ref: roomRef,
class: normalizeClass(tuiRoomClass.value)
}, [
withDirectives(createVNode(unref(index), { class: "header" }, null, 512), [
[vShow, unref(showRoomTool) && unref(showHeaderTool)]
]),
withDirectives(createVNode(RoomContent, {
ref_key: "roomContentRef",
ref: roomContentRef,
"show-room-tool": unref(showRoomTool),
class: "content"
}, null, 8, ["show-room-tool"]), [
[
unref(vTap),
handleRoomContentTap,
void 0,
{ lazy: true }
]
]),
withDirectives(createVNode(unref(Index), {
class: "footer",
onShowOverlay: handleShowOverlay
}, null, 512), [
[vShow, unref(showRoomTool)]
]),
createVNode(unref(Index$1)),
createVNode(RoomSetting),
createVNode(_sfc_main$1),
overlayMap.value.RoomInviteOverlay.visible ? (openBlock(), createBlock(unref(Index$2), { key: 0 })) : createCommentVNode("", true),
isShowLoading.value ? (openBlock(), createBlock(LoadingOverlay, { key: 1 })) : createCommentVNode("", true),
createVNode(PasswordDialog, {
visible: isShowPasswordContainer.value,
onJoinConference: enterRoom
}, null, 8, ["visible"])
], 2)) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};