@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,
198 lines (197 loc) • 7.29 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const room = require("../../../stores/room.js");
const basic = require("../../../stores/basic.js");
const render = require("../../../constants/render.js");
const index_vue_vue_type_script_setup_true_lang = require("../../Stream/SingleStreamView/index.vue.js");
const index = require("../../Stream/MultiStreamView/index.vue.js");
const ArrowStroke = require("../../common/ArrowStroke.vue.js");
const useStreamContainerHooks = require("./useStreamContainerHooks.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
require("../../../locales/index.js");
require("../../../utils/environment.js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
setup(__props) {
const roomStore = room.useRoomStore();
const {
localStream,
streamList,
remoteStreamList,
localScreenStream,
remoteScreenStream
} = pinia.storeToRefs(roomStore);
const basicStore = basic.useBasicStore();
const { showRoomTool, layout } = pinia.storeToRefs(basicStore);
const { getStreamKey } = useStreamContainerHooks.default();
const maxColumn = Vue.ref();
const maxRow = Vue.ref();
const excludeStreamInfoList = Vue.computed(() => {
var _a;
if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
return [enlargeStream.value];
}
return [];
});
const isSideListLayout = Vue.computed(
() => [render.LAYOUT.RIGHT_SIDE_LIST, render.LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
);
const fixedStream = Vue.ref(null);
const enlargeStream = Vue.computed(() => {
if (!isSideListLayout.value) {
return null;
}
if (fixedStream.value) {
return fixedStream.value;
}
if (localScreenStream.value) {
return localScreenStream.value;
}
if (remoteScreenStream.value) {
return remoteScreenStream.value;
}
if (remoteStreamList.value.length > 0) {
return remoteStreamList.value[0];
}
return localStream.value;
});
Vue.watch(
() => streamList.value.length,
(val) => {
if (val === 1 && isSideListLayout.value) {
basicStore.setLayout(render.LAYOUT.NINE_EQUAL_POINTS);
}
}
);
Vue.watch(
() => {
var _a, _b;
return ((_a = localScreenStream.value) == null ? void 0 : _a.hasVideoStream) || ((_b = remoteScreenStream.value) == null ? void 0 : _b.hasVideoStream);
},
(val, oldVal) => {
if (val && !oldVal) {
fixedStream.value = null;
if (!isSideListLayout.value) {
basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
}
}
}
);
Vue.watch(
() => streamList.value.map((stream) => getStreamKey(stream)),
(val, oldVal) => {
if (fixedStream.value) {
const fixedStreamKey = getStreamKey(fixedStream.value);
if (!val.includes(fixedStreamKey) && oldVal.includes(fixedStreamKey)) {
fixedStream.value = null;
}
}
}
);
function handleStreamViewDblclick(stream) {
if (!isSideListLayout.value && streamList.value.length > 1) {
basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
}
fixedStream.value = stream;
}
const streamContainerClass = Vue.ref("stream-container-flatten");
async function handleLayout() {
switch (layout.value) {
case render.LAYOUT.NINE_EQUAL_POINTS:
streamContainerClass.value = "stream-container-flatten";
maxColumn.value = 3;
maxRow.value = 3;
break;
case render.LAYOUT.RIGHT_SIDE_LIST:
streamContainerClass.value = "stream-container-right";
maxColumn.value = 1;
maxRow.value = Infinity;
break;
case render.LAYOUT.TOP_SIDE_LIST:
streamContainerClass.value = "stream-container-top";
maxColumn.value = Infinity;
maxRow.value = 1;
break;
}
}
Vue.watch(
layout,
() => {
handleLayout();
},
{ immediate: true }
);
Vue.onMounted(() => {
var _a;
(_a = roomService.roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().callExperimentalAPI(
JSON.stringify({
api: "setPrivateConfig",
params: {
key: "Liteav.Audio.common.ans.version",
value: "4",
default: "0"
}
})
);
});
const showSideList = Vue.ref(true);
const arrowDirection = Vue.computed(() => {
let arrowDirection2 = "right";
if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
arrowDirection2 = showSideList.value ? "up" : "down";
}
if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
arrowDirection2 = showSideList.value ? "right" : "left";
}
return arrowDirection2;
});
const strokePosition = Vue.computed(() => {
let strokePosition2 = "";
if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
strokePosition2 = "bottom";
}
if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
strokePosition2 = "left";
}
return strokePosition2;
});
function handleClickIcon() {
showSideList.value = !showSideList.value;
}
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
id: "streamContainer",
class: Vue.normalizeClass(streamContainerClass.value)
}, [
enlargeStream.value ? (Vue.openBlock(), Vue.createBlock(index_vue_vue_type_script_setup_true_lang.default, {
key: 0,
class: "enlarged-stream-container",
streamInfo: enlargeStream.value
}, null, 8, ["streamInfo"])) : Vue.createCommentVNode("", true),
Vue.createVNode(index.default, {
class: Vue.normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`]),
maxColumn: maxColumn.value,
maxRow: maxRow.value,
excludeStreamInfoList: excludeStreamInfoList.value,
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["class", "maxColumn", "maxRow", "excludeStreamInfoList"]),
isSideListLayout.value && (Vue.unref(showRoomTool) || showSideList.value) ? (Vue.openBlock(), Vue.createBlock(ArrowStroke.default, {
key: 1,
class: Vue.normalizeClass([`arrow-stroke-${arrowDirection.value}`]),
"stroke-position": strokePosition.value,
"arrow-direction": arrowDirection.value,
"has-stroke": showSideList.value,
onClickArrow: handleClickIcon
}, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : Vue.createCommentVNode("", true)
], 2);
};
}
});
exports.default = _sfc_main;