@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,
95 lines (94 loc) • 3.9 kB
JavaScript
import { defineComponent, ref, computed, createElementBlock, openBlock, createBlock, createCommentVNode, unref, withCtx, Fragment, renderList, createVNode } from "vue";
import TuiSwiper from "../../common/base/Swiper.vue.mjs";
import TuiSwiperItem from "../../common/base/SwiperItem.vue.mjs";
import StreamList from "../common/StreamList/index.vue.mjs";
import useMultiStreamViewHook from "./useMultiStreamViewHook.mjs";
import { StreamPlayQuality, StreamPlayMode } from "../../../services/manager/mediaManager.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MultiStreamViewH5",
props: {
maxColumn: {},
maxRow: {},
fillMode: {},
streamInfoList: {},
excludeStreamInfoList: {},
streamPlayMode: {}
},
emits: ["stream-view-dblclick"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const {
column,
row,
isEqualPointsLayout,
renderStreamInfoList,
equalPointsLayoutStreamList,
totalPageNumber,
currentPageIndex
} = useMultiStreamViewHook(props);
const multiStreamViewRef = ref();
function handleActiveIndexChange(index) {
currentPageIndex.value = index;
}
function handleStreamViewDblclick(streamInfo) {
emits("stream-view-dblclick", streamInfo);
}
function getStreamPlayMode(index) {
return Math.abs(index - currentPageIndex.value) <= 1 ? StreamPlayMode.PLAY : StreamPlayMode.STOP;
}
const aspectRatio = computed(() => {
if (isEqualPointsLayout.value) {
return renderStreamInfoList.value.length > 1 ? "1:1" : "auto";
}
return "16:9";
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "multiStreamViewRef",
ref: multiStreamViewRef,
class: "multi-stream-view"
}, [
!unref(isEqualPointsLayout) || unref(totalPageNumber) === 1 ? (openBlock(), createBlock(StreamList, {
key: 0,
streamInfoList: unref(renderStreamInfoList),
column: unref(column),
row: unref(row),
streamPlayMode: _ctx.streamPlayMode || unref(StreamPlayMode).PLAY_IN_VISIBLE,
streamPlayQuality: unref(StreamPlayQuality).Default,
"aspect-ratio": aspectRatio.value,
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["streamInfoList", "column", "row", "streamPlayMode", "streamPlayQuality", "aspect-ratio"])) : createCommentVNode("", true),
unref(isEqualPointsLayout) && unref(totalPageNumber) > 1 ? (openBlock(), createBlock(TuiSwiper, {
key: 1,
activeIndex: unref(currentPageIndex),
"show-page-dots": unref(totalPageNumber) > 1,
onChange: handleActiveIndexChange
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(totalPageNumber), (item, index) => {
return openBlock(), createBlock(TuiSwiperItem, { key: index }, {
default: withCtx(() => [
createVNode(StreamList, {
streamInfoList: unref(equalPointsLayoutStreamList)[index],
column: unref(column),
row: unref(row),
streamPlayMode: getStreamPlayMode(index),
streamPlayQuality: unref(StreamPlayQuality).Default,
"aspect-ratio": aspectRatio.value,
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["streamInfoList", "column", "row", "streamPlayMode", "streamPlayQuality", "aspect-ratio"])
]),
_: 2
}, 1024);
}), 128))
]),
_: 1
}, 8, ["activeIndex", "show-page-dots"])) : createCommentVNode("", true)
], 512);
};
}
});
export {
_sfc_main as default
};