@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,
96 lines (95 loc) • 2.96 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const room = require("../../../stores/room.js");
const pinia = require("pinia");
function useMultiStreamViewHook(props) {
const roomStore = room.useRoomStore();
const { streamList } = pinia.storeToRefs(roomStore);
const isHorizontalInfinityLayout = Vue.computed(
() => props.maxColumn === Infinity
);
const isVerticalInfinityLayout = Vue.computed(() => props.maxRow === Infinity);
const isEqualPointsLayout = Vue.computed(
() => props.maxColumn !== Infinity && props.maxRow !== Infinity
);
const column = Vue.computed(() => {
if (props.maxColumn === Infinity) {
return props.maxColumn;
}
return Math.min(
Math.ceil(Math.sqrt(renderStreamInfoList.value.length)),
props.maxColumn
);
});
const row = Vue.computed(() => {
if (props.maxRow === Infinity) {
return props.maxRow;
}
return Math.min(
Math.ceil(renderStreamInfoList.value.length / column.value),
props.maxRow
);
});
const currentPageIndex = Vue.ref(0);
const maxCountEveryPage = Vue.computed(() => props.maxColumn * props.maxRow);
const renderStreamInfoList = Vue.computed(() => {
if (props.streamInfoList) {
return props.streamInfoList;
}
return streamList.value.filter(
(item1) => {
var _a;
return !((_a = props.excludeStreamInfoList) == null ? void 0 : _a.find(
(item2) => item2.userId === item1.userId && item2.streamType === item1.streamType
));
}
);
});
Vue.watch(
() => renderStreamInfoList.value.length,
(val) => {
if (isEqualPointsLayout.value) {
if (currentPageIndex.value > 0 && currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
}
}
}
);
const totalStreamNumber = Vue.computed(() => {
return streamList.value.length;
});
const equalPointsLayoutStreamList = Vue.computed(
() => {
if (isEqualPointsLayout.value) {
return [...new Array(totalPageNumber.value).keys()].map(
(pageIndex) => {
return renderStreamInfoList.value.slice(
pageIndex * maxCountEveryPage.value,
(pageIndex + 1) * maxCountEveryPage.value
);
}
);
}
return [[]];
}
);
const totalPageNumber = Vue.computed(
() => Math.ceil(renderStreamInfoList.value.length / maxCountEveryPage.value)
);
return {
column,
row,
isHorizontalInfinityLayout,
isVerticalInfinityLayout,
isEqualPointsLayout,
maxCountEveryPage,
streamList,
renderStreamInfoList,
equalPointsLayoutStreamList,
totalStreamNumber,
totalPageNumber,
currentPageIndex
};
}
exports.default = useMultiStreamViewHook;