@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,
162 lines (161 loc) • 6.1 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, withDirectives, createBlock, createElementVNode, createVNode, unref, vShow } from "vue";
import UserInfo from "./components/RoomHeader/UserInfo/index.mjs";
import RoomControl from "./components/RoomHome/RoomControl/index.mjs";
import _sfc_main$1 from "./components/common/Language.vue.mjs";
import SwitchTheme from "./components/common/SwitchTheme.vue.mjs";
import "./services/main.mjs";
import { roomService } from "./services/roomService.mjs";
import { EventType } from "./services/types.mjs";
import "./locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import { isMobile } from "./utils/environment.mjs";
import "mitt";
import "./services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import ScheduleRoomList from "./components/ScheduleConference/ScheduleRoomList.vue.mjs";
import Logo from "./components/common/Logo.vue.mjs";
import MessageBox from "./components/common/base/MessageBox/index.mjs";
import { TUIToast } from "@tencentcloud/uikit-base-component-vue3";
const _hoisted_1 = { class: "header" };
const _hoisted_2 = { class: "left-header" };
const _hoisted_3 = { class: "right-header" };
const _hoisted_4 = {
key: 1,
class: "pre-home-control"
};
const _hoisted_5 = { class: "pre-home-control-container" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "preConference",
props: {
userInfo: { default: () => ({
userId: "",
userName: "",
avatarUrl: ""
}) },
showEditNameInPc: { type: Boolean, default: false },
roomId: { default: "" },
enableScheduledConference: { type: Boolean, default: true },
isShowLogo: { type: Boolean, default: true },
isShowHeaderInfo: { type: Boolean, default: true }
},
emits: [
"on-create-room",
"on-enter-room",
"on-update-user-name",
"on-logout"
],
setup(__props, { emit: __emit }) {
const roomControlRef = ref();
const props = __props;
const emits = __emit;
const hasThemeMode = document.documentElement.hasAttribute("tui-theme-mode");
const tuiRoomThemeClass = computed(
() => hasThemeMode ? "" : `tui-theme-${roomService.basicStore.defaultTheme}`
);
async function handleCreateRoom(roomOption) {
emits("on-create-room", roomOption);
}
async function handleEnterRoom(roomOption) {
emits("on-enter-room", roomOption);
}
function handleUpdateUserName(userName) {
emits("on-update-user-name", userName);
}
async function handleLogOut() {
emits("on-logout");
}
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
});
};
onMounted(() => {
roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
});
onUnmounted(() => {
roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.off(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
id: "pre-conference-container",
class: normalizeClass(["pre-conference-container", tuiRoomThemeClass.value])
}, [
withDirectives(createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(SwitchTheme, { class: "header-item" })
]),
createElementVNode("div", _hoisted_3, [
createVNode(_sfc_main$1, { class: "header-item language" }),
createVNode(unref(UserInfo), {
class: "header-item user-info",
"user-id": props.userInfo.userId,
"user-name": props.userInfo.userName,
"avatar-url": props.userInfo.avatarUrl,
"is-show-edit-name": props.showEditNameInPc,
onUpdateUserName: handleUpdateUserName,
onLogOut: handleLogOut
}, null, 8, ["user-id", "user-name", "avatar-url", "is-show-edit-name"])
])
], 512), [
[vShow, props.isShowHeaderInfo]
]),
unref(isMobile) ? (openBlock(), createBlock(unref(RoomControl), {
key: 0,
ref_key: "roomControlRef",
ref: roomControlRef,
"given-room-id": props.roomId,
"user-name": props.userInfo.userName,
onCreateRoom: handleCreateRoom,
onEnterRoom: handleEnterRoom
}, null, 8, ["given-room-id", "user-name"])) : (openBlock(), createElementBlock("div", _hoisted_4, [
withDirectives(createVNode(Logo, { class: "logo" }, null, 512), [
[vShow, props.isShowLogo]
]),
createElementVNode("div", _hoisted_5, [
createVNode(unref(RoomControl), {
ref_key: "roomControlRef",
ref: roomControlRef,
"given-room-id": props.roomId,
"user-name": props.userInfo.userName,
"enable-scheduled-conference": props.enableScheduledConference,
onCreateRoom: handleCreateRoom,
onEnterRoom: handleEnterRoom,
onUpdateUserName: handleUpdateUserName
}, null, 8, ["given-room-id", "user-name", "enable-scheduled-conference"]),
createVNode(ScheduleRoomList, {
"is-show-scheduled-conference": props.enableScheduledConference,
onJoinConference: handleEnterRoom
}, null, 8, ["is-show-scheduled-conference"])
])
]))
], 2);
};
}
});
export {
_sfc_main as default
};