@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.46 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index = require("./components/RoomHeader/UserInfo/index.js");
const index$1 = require("./components/RoomHome/RoomControl/index.js");
const Language_vue_vue_type_script_setup_true_lang = require("./components/common/Language.vue.js");
const SwitchTheme = require("./components/common/SwitchTheme.vue.js");
require("./services/main.js");
const roomService = require("./services/roomService.js");
const types = require("./services/types.js");
require("./locales/index.js");
require("@tencentcloud/tuiroom-engine-js");
const environment = require("./utils/environment.js");
require("mitt");
require("./services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const ScheduleRoomList = require("./components/ScheduleConference/ScheduleRoomList.vue.js");
const Logo = require("./components/common/Logo.vue.js");
const index$2 = require("./components/common/base/MessageBox/index.js");
const uikitBaseComponentVue3 = require("@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__ */ Vue.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 = Vue.ref();
const props = __props;
const emits = __emit;
const hasThemeMode = document.documentElement.hasAttribute("tui-theme-mode");
const tuiRoomThemeClass = Vue.computed(
() => hasThemeMode ? "" : `tui-theme-${roomService.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.roomService.t("Note"),
duration,
cancelButtonText,
confirmButtonText = roomService.roomService.t("Sure"),
callback = () => {
}
} = data;
index$2.default({
title,
message,
duration,
cancelButtonText,
confirmButtonText,
callback
});
};
const showMessage = (data) => {
const { type, message, duration } = data;
uikitBaseComponentVue3.TUIToast({
type,
message,
duration
});
};
Vue.onMounted(() => {
roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
});
Vue.onUnmounted(() => {
roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
id: "pre-conference-container",
class: Vue.normalizeClass(["pre-conference-container", tuiRoomThemeClass.value])
}, [
Vue.withDirectives(Vue.createElementVNode("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createVNode(SwitchTheme.default, { class: "header-item" })
]),
Vue.createElementVNode("div", _hoisted_3, [
Vue.createVNode(Language_vue_vue_type_script_setup_true_lang.default, { class: "header-item language" }),
Vue.createVNode(Vue.unref(index.default), {
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), [
[Vue.vShow, props.isShowHeaderInfo]
]),
Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.default), {
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"])) : (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
Vue.withDirectives(Vue.createVNode(Logo.default, { class: "logo" }, null, 512), [
[Vue.vShow, props.isShowLogo]
]),
Vue.createElementVNode("div", _hoisted_5, [
Vue.createVNode(Vue.unref(index$1.default), {
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"]),
Vue.createVNode(ScheduleRoomList.default, {
"is-show-scheduled-conference": props.enableScheduledConference,
onJoinConference: handleEnterRoom
}, null, 8, ["is-show-scheduled-conference"])
])
]))
], 2);
};
}
});
exports.default = _sfc_main;