@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,
178 lines (177 loc) • 6.35 kB
JavaScript
import { defineComponent, ref, computed, watch, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createVNode, unref } from "vue";
import { storeToRefs } from "pinia";
import { useRoomStore } from "../../../stores/room.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { LAYOUT } from "../../../constants/render.mjs";
import _sfc_main$1 from "../../Stream/SingleStreamView/index.vue.mjs";
import MultiStreamView from "../../Stream/MultiStreamView/index.mjs";
import ArrowStroke from "../../common/ArrowStroke.vue.mjs";
import useStreamContainer from "./useStreamContainerHooks.mjs";
import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "StreamContainerPC",
setup(__props) {
const roomStore = useRoomStore();
const {
localStream,
streamList,
remoteStreamList,
localScreenStream,
remoteScreenStream
} = storeToRefs(roomStore);
const basicStore = useBasicStore();
const { showRoomTool, layout } = storeToRefs(basicStore);
const { getStreamKey } = useStreamContainer();
const maxColumn = ref();
const maxRow = ref();
const excludeStreamInfoList = computed(() => {
var _a;
if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIVideoStreamType.kScreenStream) {
return [enlargeStream.value];
}
return [];
});
const isSideListLayout = computed(
() => [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
);
const fixedStream = ref(null);
const enlargeStream = 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;
});
watch(
() => streamList.value.length,
(val) => {
if (val === 1 && isSideListLayout.value) {
basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
}
}
);
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(LAYOUT.RIGHT_SIDE_LIST);
}
}
}
);
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(LAYOUT.RIGHT_SIDE_LIST);
}
fixedStream.value = stream;
}
const streamContainerClass = ref("stream-container-flatten");
async function handleLayout() {
switch (layout.value) {
case LAYOUT.NINE_EQUAL_POINTS:
streamContainerClass.value = "stream-container-flatten";
maxColumn.value = 3;
maxRow.value = 3;
break;
case LAYOUT.RIGHT_SIDE_LIST:
streamContainerClass.value = "stream-container-right";
maxColumn.value = 1;
maxRow.value = Infinity;
break;
case LAYOUT.TOP_SIDE_LIST:
streamContainerClass.value = "stream-container-top";
maxColumn.value = Infinity;
maxRow.value = 1;
break;
}
}
watch(
layout,
() => {
handleLayout();
},
{ immediate: true }
);
const showSideList = ref(true);
const arrowDirection = computed(() => {
let arrowDirection2 = "right";
if (layout.value === LAYOUT.TOP_SIDE_LIST) {
arrowDirection2 = showSideList.value ? "up" : "down";
}
if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
arrowDirection2 = showSideList.value ? "right" : "left";
}
return arrowDirection2;
});
const strokePosition = computed(() => {
let strokePosition2 = "";
if (layout.value === LAYOUT.TOP_SIDE_LIST) {
strokePosition2 = "bottom";
}
if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
strokePosition2 = "left";
}
return strokePosition2;
});
function handleClickIcon() {
showSideList.value = !showSideList.value;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
id: "streamContainer",
class: normalizeClass(streamContainerClass.value)
}, [
enlargeStream.value ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
class: "enlarged-stream-container",
streamInfo: enlargeStream.value
}, null, 8, ["streamInfo"])) : createCommentVNode("", true),
createVNode(unref(MultiStreamView), {
class: 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 && (unref(showRoomTool) || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
key: 1,
class: 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"])) : createCommentVNode("", true)
], 2);
};
}
});
export {
_sfc_main as default
};