@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,
121 lines (120 loc) • 4.55 kB
JavaScript
import { defineComponent, resolveComponent, createElementBlock, openBlock, createCommentVNode, unref, createVNode, withDirectives, withCtx, createTextVNode, toDisplayString, normalizeClass, createElementVNode, Fragment, renderList, vShow, createBlock } from "vue";
import useIndex from "./useIndexHooks.mjs";
import vClickOutside from "../../../../directives/vClickOutside.mjs";
import { TUIButton, IconArrowUp } from "@tencentcloud/uikit-base-component-vue3";
const _hoisted_1 = {
key: 0,
class: "global-setting"
};
const _hoisted_2 = { class: "more-container" };
const _hoisted_3 = { class: "drop-down" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "operate-text" };
const _hoisted_6 = {
key: 1,
class: "global-setting"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "indexPC",
props: {
activeCategoryKey: {},
userCategoryNumber: {}
},
setup(__props) {
const {
t,
isGeneralUser,
roomAudioAction,
roomVideoAction,
moreControlList,
toggleClickMoreBtn,
showMoreControl,
handleCallAllInvitee
} = useIndex();
const handleShowMoreControl = () => {
if (showMoreControl.value) {
showMoreControl.value = false;
}
};
return (_ctx, _cache) => {
const _component_svg_icon = resolveComponent("svg-icon");
return openBlock(), createElementBlock("div", null, [
!unref(isGeneralUser) && _ctx.activeCategoryKey !== "notEnteredUser" ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(TUIButton), {
type: "primary",
color: "gray",
style: { "min-width": "112px" },
onClick: unref(roomAudioAction).handler
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(roomAudioAction).label), 1)
]),
_: 1
}, 8, ["onClick"]),
createVNode(unref(TUIButton), {
type: "primary",
color: "gray",
style: { "min-width": "112px" },
onClick: unref(roomVideoAction).handler
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(roomVideoAction).label), 1)
]),
_: 1
}, 8, ["onClick"]),
withDirectives((openBlock(), createElementBlock("div", _hoisted_2, [
createVNode(unref(TUIButton), {
type: "primary",
color: "gray",
style: { "min-width": "112px" },
onClick: unref(toggleClickMoreBtn)
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("More")) + " ", 1),
createVNode(unref(IconArrowUp), {
size: "12",
class: normalizeClass(["more-arrow", unref(showMoreControl) ? "up" : "down"])
}, null, 8, ["class"])
]),
_: 1
}, 8, ["onClick"]),
withDirectives(createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(moreControlList), (item) => {
return openBlock(), createElementBlock("div", {
key: item.key,
class: "user-operate-item",
onClick: item.handler
}, [
createVNode(_component_svg_icon, {
icon: item.icon
}, null, 8, ["icon"]),
createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1)
], 8, _hoisted_4);
}), 128))
], 512), [
[vShow, unref(showMoreControl)]
])
])), [
[unref(vClickOutside), handleShowMoreControl]
])
])) : createCommentVNode("", true),
_ctx.activeCategoryKey === "notEnteredUser" ? (openBlock(), createElementBlock("div", _hoisted_6, [
_ctx.userCategoryNumber > 0 ? (openBlock(), createBlock(unref(TUIButton), {
key: 0,
type: "primary",
onClick: unref(handleCallAllInvitee),
style: { minWidth: "80%" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Call all")), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true)
])) : createCommentVNode("", true)
]);
};
}
});
export {
_sfc_main as default
};