@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,
194 lines (193 loc) • 8.39 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const room = require("../../../../stores/room.js");
const index = require("../../../../locales/index.js");
require("../../../../components/common/base/IconButton.vue2.js");
;/* empty css */
require("pinia");
require("../../../../utils/environment.js");
;/* empty css */
require("../../../../hooks/useZIndex.js");
require("../../../../services/main.js");
require("../../../../services/roomService.js");
require("@tencentcloud/tuiroom-engine-js");
require("mitt");
require("../../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
require("../../../hooks/useAudioDeviceState/index.js");
;/* empty css */
;/* empty css */
;/* empty css */
require("../../../../stores/basic.js");
;/* empty css */
;/* empty css */
;/* empty css */
require("../../../../hooks/useRoomEngine.js");
require("../../../hooks/useVideoDeviceState/index.js");
;/* empty css */
;/* empty css */
const index$1 = require("../../../hooks/useUserState/index.js");
;/* empty css */
require("../../../hooks/useFreeBeautyState/index.js");
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
require("../../../hooks/useUserState/useUserActions/useMemberInviteAction.js");
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
const _hoisted_1 = { class: "member-control-container" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "operate-text" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "indexPC",
props: {
userInfo: {}
},
setup(__props) {
const props = __props;
const { t } = index.useI18n();
const roomStore = room.useRoomStore();
const isMe = Vue.computed(
() => props.userInfo.userId === roomStore.localUser.userId
);
const { useUserActions } = index$1.default();
const userActions = useUserActions({
userInfo: props.userInfo
});
const singleControl = Vue.computed(() => {
return isMe.value ? null : userActions == null ? void 0 : userActions[0];
});
const moreControlList = Vue.computed(() => {
return isMe.value ? userActions : userActions.slice(1);
});
const dropdownClass = Vue.ref("down");
const moreBtnRef = Vue.ref();
const operateListRef = Vue.ref();
const showMoreControl = Vue.ref(false);
Vue.watch(
() => moreControlList.value.length,
(moreControlListLength) => {
if (moreControlListLength === 0) {
showMoreControl.value = false;
}
}
);
async function toggleClickMoreBtn() {
if (showMoreControl.value) {
showMoreControl.value = false;
} else {
await handleDropDownPosition();
showMoreControl.value = true;
}
}
async function handleDropDownPosition() {
var _a, _b, _c;
const { top, bottom } = (_a = moreBtnRef.value) == null ? void 0 : _a.getBoundingClientRect();
const { top: containerTop, bottom: containerBottom } = (_b = document.getElementById("memberListContainer")) == null ? void 0 : _b.getBoundingClientRect();
if (!containerBottom || !containerTop) {
return;
}
const bottomSize = containerBottom - bottom;
const topSize = top - containerTop;
let dropDownContainerHeight = 0;
if (!showMoreControl.value) {
operateListRef.value.style = "display:block;position:absolute;z-index:-1000";
await Vue.nextTick();
dropDownContainerHeight = operateListRef.value.offsetHeight;
operateListRef.value.style = "";
} else {
dropDownContainerHeight = (_c = operateListRef.value) == null ? void 0 : _c.offsetHeight;
}
if (topSize < dropDownContainerHeight) {
return;
}
if (bottomSize < dropDownContainerHeight) {
dropdownClass.value = "up";
}
}
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
singleControl.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.TUIButton), {
key: 0,
type: "primary",
onClick: _cache[0] || (_cache[0] = () => {
var _a;
return (_a = singleControl.value) == null ? void 0 : _a.handler(_ctx.userInfo);
})
}, {
default: Vue.withCtx(() => {
var _a;
return [
Vue.createTextVNode(Vue.toDisplayString((_a = singleControl.value) == null ? void 0 : _a.title), 1)
];
}),
_: 1
})) : Vue.createCommentVNode("", true),
moreControlList.value.length > 0 ? (Vue.openBlock(), Vue.createElementBlock("div", {
key: 1,
ref_key: "moreBtnRef",
ref: moreBtnRef,
class: "more-container"
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), { onClick: toggleClickMoreBtn }, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("More")) + " ", 1),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconArrowUp), {
size: "12",
class: Vue.normalizeClass(["more-arrow", showMoreControl.value ? "up" : "down"])
}, null, 8, ["class"])
]),
_: 1
}),
Vue.withDirectives(Vue.createElementVNode("div", {
id: "operate-list",
ref_key: "operateListRef",
ref: operateListRef,
class: Vue.normalizeClass(["user-operate-list", dropdownClass.value])
}, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(moreControlList.value, (item) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: item.key,
class: "user-operate-item",
style: Vue.normalizeStyle(item.style || {}),
onClick: () => item.handler(_ctx.userInfo)
}, [
item.icon ? (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.TUIIcon), {
key: 0,
icon: item.icon
}, null, 8, ["icon"])) : Vue.createCommentVNode("", true),
Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(item.label), 1)
], 12, _hoisted_2);
}), 128))
], 2), [
[Vue.vShow, showMoreControl.value]
])
], 512)) : Vue.createCommentVNode("", true)
]);
};
}
});
exports.default = _sfc_main;