@tencentcloud/roomkit-electron-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,
146 lines (145 loc) • 6.34 kB
JavaScript
import { defineComponent, ref, computed, withDirectives, createCommentVNode, unref, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, normalizeClass, Fragment, renderList, toDisplayString, pushScopeId, popScopeId } from "vue";
import { LAYOUT } from "../../../constants/render.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import { storeToRefs } from "pinia";
import { useI18n } from "../../../locales/index.mjs";
import { IconButtonLayout } from "../../../constants/room.mjs";
import IconButton from "../../common/base/IconButton.vue.mjs";
import LayoutIcon from "../../common/icons/LayoutIcon.vue.mjs";
import vClickOutside from "../../../directives/vClickOutside.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-electron";
import "../../../utils/environment.mjs";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
const _withScopeId = (n) => (pushScopeId("data-v-6badc9cf"), n = n(), popScopeId(), n);
const _hoisted_1 = {
key: 0,
class: "layout-container"
};
const _hoisted_2 = {
key: 0,
class: "layout-list"
};
const _hoisted_3 = { class: "layout-block-container" };
const _hoisted_4 = { class: "layout-title" };
const _hoisted_5 = { class: "layout-block-container" };
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "left-container" }, null, -1));
const _hoisted_7 = { class: "right-container" };
const _hoisted_8 = { class: "layout-title" };
const _hoisted_9 = { class: "layout-block-container" };
const _hoisted_10 = { class: "top-container" };
const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "bottom-container" }, null, -1));
const _hoisted_12 = { class: "layout-title" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "LayoutControl",
setup(__props) {
const { t } = useI18n();
const basicStore = useBasicStore();
const { layout } = storeToRefs(basicStore);
const roomStore = useRoomStore();
const { streamNumber } = storeToRefs(roomStore);
const showLayoutList = ref(false);
const isStreamNumberLessThanTwo = computed(() => streamNumber.value < 2);
const layoutControlConfig = roomService.getComponentConfig("LayoutControl");
function handleClick(layout2) {
basicStore.setLayout(layout2);
}
function handleClickLayoutIcon() {
if (isStreamNumberLessThanTwo.value) {
return;
}
showLayoutList.value = !showLayoutList.value;
}
function handleClickOutSide() {
if (showLayoutList.value) {
showLayoutList.value = false;
}
}
return (_ctx, _cache) => {
return unref(layoutControlConfig).visible ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(IconButton, {
title: unref(t)("Layout"),
disabled: isStreamNumberLessThanTwo.value,
layout: unref(IconButtonLayout).HORIZONTAL,
onClickIcon: handleClickLayoutIcon
}, {
default: withCtx(() => [
createVNode(LayoutIcon)
]),
_: 1
}, 8, ["title", "disabled", "layout"]),
showLayoutList.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("div", {
class: normalizeClass([
"layout1",
"layout-item",
`${unref(layout) === unref(LAYOUT).NINE_EQUAL_POINTS ? "checked" : ""}`
]),
onClick: _cache[0] || (_cache[0] = ($event) => handleClick(unref(LAYOUT).NINE_EQUAL_POINTS))
}, [
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(new Array(9).fill(""), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "layout-block"
});
}), 128))
]),
createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("Grid")), 1)
], 2),
createElementVNode("div", {
class: normalizeClass([
"layout2",
"layout-item",
`${unref(layout) === unref(LAYOUT).RIGHT_SIDE_LIST ? "checked" : ""}`
]),
onClick: _cache[1] || (_cache[1] = ($event) => handleClick(unref(LAYOUT).RIGHT_SIDE_LIST))
}, [
createElementVNode("div", _hoisted_5, [
_hoisted_6,
createElementVNode("div", _hoisted_7, [
(openBlock(true), createElementBlock(Fragment, null, renderList(new Array(3).fill(""), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "layout-block"
});
}), 128))
])
]),
createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("Gallery on right")), 1)
], 2),
createElementVNode("div", {
class: normalizeClass([
"layout3",
"layout-item",
`${unref(layout) === unref(LAYOUT).TOP_SIDE_LIST ? "checked" : ""}`
]),
onClick: _cache[2] || (_cache[2] = ($event) => handleClick(unref(LAYOUT).TOP_SIDE_LIST))
}, [
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(new Array(3).fill(""), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "layout-block"
});
}), 128))
]),
_hoisted_11
]),
createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("Gallery at top")), 1)
], 2)
])) : createCommentVNode("", true)
])), [
[unref(vClickOutside), handleClickOutSide]
]) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};