@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) • 4.11 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Swiper = require("../../common/base/Swiper.vue.js");
const SwiperItem = require("../../common/base/SwiperItem.vue.js");
const index = require("../common/StreamList/index.vue.js");
const useMultiStreamViewHook = require("./useMultiStreamViewHook.js");
const mediaManager = require("../../../services/manager/mediaManager.js");
const _sfc_main = /* @__PURE__ */ Vue.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.default(props);
const multiStreamViewRef = Vue.ref();
function handleActiveIndexChange(index2) {
currentPageIndex.value = index2;
}
function handleStreamViewDblclick(streamInfo) {
emits("stream-view-dblclick", streamInfo);
}
function getStreamPlayMode(index2) {
return Math.abs(index2 - currentPageIndex.value) <= 1 ? mediaManager.StreamPlayMode.PLAY : mediaManager.StreamPlayMode.STOP;
}
const aspectRatio = Vue.computed(() => {
if (isEqualPointsLayout.value) {
return renderStreamInfoList.value.length > 1 ? "1:1" : "auto";
}
return "16:9";
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
ref_key: "multiStreamViewRef",
ref: multiStreamViewRef,
class: "multi-stream-view"
}, [
!Vue.unref(isEqualPointsLayout) || Vue.unref(totalPageNumber) === 1 ? (Vue.openBlock(), Vue.createBlock(index.default, {
key: 0,
streamInfoList: Vue.unref(renderStreamInfoList),
column: Vue.unref(column),
row: Vue.unref(row),
streamPlayMode: _ctx.streamPlayMode || Vue.unref(mediaManager.StreamPlayMode).PLAY_IN_VISIBLE,
streamPlayQuality: Vue.unref(mediaManager.StreamPlayQuality).Default,
"aspect-ratio": aspectRatio.value,
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["streamInfoList", "column", "row", "streamPlayMode", "streamPlayQuality", "aspect-ratio"])) : Vue.createCommentVNode("", true),
Vue.unref(isEqualPointsLayout) && Vue.unref(totalPageNumber) > 1 ? (Vue.openBlock(), Vue.createBlock(Swiper.default, {
key: 1,
activeIndex: Vue.unref(currentPageIndex),
"show-page-dots": Vue.unref(totalPageNumber) > 1,
onChange: handleActiveIndexChange
}, {
default: Vue.withCtx(() => [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(totalPageNumber), (item, index$1) => {
return Vue.openBlock(), Vue.createBlock(SwiperItem.default, { key: index$1 }, {
default: Vue.withCtx(() => [
Vue.createVNode(index.default, {
streamInfoList: Vue.unref(equalPointsLayoutStreamList)[index$1],
column: Vue.unref(column),
row: Vue.unref(row),
streamPlayMode: getStreamPlayMode(index$1),
streamPlayQuality: Vue.unref(mediaManager.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"])) : Vue.createCommentVNode("", true)
], 512);
};
}
});
exports.default = _sfc_main;