@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,
96 lines (95 loc) • 2.81 kB
JavaScript
import { computed, ref, watch } from "vue";
import { useRoomStore } from "../../../stores/room.mjs";
import { storeToRefs } from "pinia";
function useMultiStreamViewHook(props) {
const roomStore = useRoomStore();
const { streamList } = storeToRefs(roomStore);
const isHorizontalInfinityLayout = computed(
() => props.maxColumn === Infinity
);
const isVerticalInfinityLayout = computed(() => props.maxRow === Infinity);
const isEqualPointsLayout = computed(
() => props.maxColumn !== Infinity && props.maxRow !== Infinity
);
const column = computed(() => {
if (props.maxColumn === Infinity) {
return props.maxColumn;
}
return Math.min(
Math.ceil(Math.sqrt(renderStreamInfoList.value.length)),
props.maxColumn
);
});
const row = computed(() => {
if (props.maxRow === Infinity) {
return props.maxRow;
}
return Math.min(
Math.ceil(renderStreamInfoList.value.length / column.value),
props.maxRow
);
});
const currentPageIndex = ref(0);
const maxCountEveryPage = computed(() => props.maxColumn * props.maxRow);
const renderStreamInfoList = 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
));
}
);
});
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 = computed(() => {
return streamList.value.length;
});
const equalPointsLayoutStreamList = 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 = computed(
() => Math.ceil(renderStreamInfoList.value.length / maxCountEveryPage.value)
);
return {
column,
row,
isHorizontalInfinityLayout,
isVerticalInfinityLayout,
isEqualPointsLayout,
maxCountEveryPage,
streamList,
renderStreamInfoList,
equalPointsLayoutStreamList,
totalStreamNumber,
totalPageNumber,
currentPageIndex
};
}
export {
useMultiStreamViewHook as default
};