@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,
172 lines (171 loc) • 6.57 kB
JavaScript
import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock } from "vue";
import StreamRegion from "../StreamRegion/index.vue.mjs";
import { isPC } from "../../../../utils/environment.mjs";
import { getContentSize } from "../../../../utils/domOperation.mjs";
import { isUndefined } from "../../../../utils/utils.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
streamInfoList: {},
column: {},
row: {},
fillMode: {},
aspectRatio: {},
streamPlayQuality: {},
streamPlayMode: {}
},
emits: ["stream-view-dblclick"],
setup(__props, { emit: __emit }) {
const emits = __emit;
const singleStreamMargin = isPC ? 8 : 4;
const props = __props;
const streamListContainerRef = ref();
const streamListRef = ref();
const isEqualPointsLayout = computed(
() => props.column !== Infinity && props.row !== Infinity
);
const isHorizontalInfinityLayout = computed(() => props.column === Infinity);
const isVerticalInfinityLayout = computed(() => props.row === Infinity);
watch(
() => [props.column, props.row],
async () => {
await nextTick();
handleLayout();
},
{ immediate: true }
);
const validStreamInfoList = computed(() => {
var _a;
return (_a = props.streamInfoList) == null ? void 0 : _a.filter(
(item) => item && item.userId && !isUndefined(item.streamType)
);
});
function handleLayout() {
if (isHorizontalInfinityLayout.value) {
handleHorizontalInfinityLayout();
return;
}
if (isVerticalInfinityLayout.value) {
handleVerticalInfinityLayout();
return;
}
if (isEqualPointsLayout.value) {
handleEqualPointsLayout();
return;
}
}
const streamListStyle = ref({
width: "0",
height: "0"
});
const streamStyle = ref({
width: "0",
height: "0",
"--stream-margin": `${singleStreamMargin / 2}px`
});
const widthRatio = computed(() => {
var _a, _b;
if (!props.aspectRatio || ((_a = props.aspectRatio) == null ? void 0 : _a.indexOf(":")) < 0) {
return 0;
}
return Number((_b = props.aspectRatio) == null ? void 0 : _b.split(":")[0]);
});
const heightRatio = computed(() => {
if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
return 0;
}
return Number(props.aspectRatio.split(":")[1]);
});
async function handleEqualPointsLayout() {
if (!props.streamInfoList || !streamListContainerRef.value) {
return;
}
const containerRect = streamListContainerRef.value.getBoundingClientRect();
const containerWidth = Math.floor(containerRect.width);
const containerHeight = Math.floor(containerRect.height);
const contentWidth = (containerWidth - props.column * singleStreamMargin) / props.column;
const contentHeight = (containerHeight - props.row * singleStreamMargin) / props.row;
let width = contentWidth;
let height = contentHeight;
if (widthRatio.value && heightRatio.value) {
const scaleWidth = contentWidth / widthRatio.value;
const scaleHeight = contentHeight / heightRatio.value;
if (scaleWidth > scaleHeight) {
width = contentHeight / heightRatio.value * widthRatio.value;
height = contentHeight;
}
if (scaleWidth <= scaleHeight) {
width = contentWidth;
height = contentWidth / widthRatio.value * heightRatio.value;
}
}
streamStyle.value.width = `${width}px`;
streamStyle.value.height = `${height}px`;
streamListStyle.value.width = `${props.column * (width + singleStreamMargin)}px`;
streamListStyle.value.height = `${props.row * (height + singleStreamMargin)}px`;
}
function handleHorizontalInfinityLayout() {
streamListStyle.value = {};
const contentHeight = getContentSize(streamListContainerRef.value).height;
const contentWidth = contentHeight * widthRatio.value / heightRatio.value;
streamStyle.value.width = `${contentWidth}px`;
streamStyle.value.height = `${contentHeight}px`;
}
function handleVerticalInfinityLayout() {
streamListStyle.value = {};
const contentWidth = getContentSize(streamListContainerRef.value).width;
const contentHeight = contentWidth * heightRatio.value / widthRatio.value;
streamStyle.value.width = `${contentWidth}px`;
streamStyle.value.height = `${contentHeight}px`;
}
function handleStreamDblClick(streamInfo) {
emits("stream-view-dblclick", streamInfo);
}
const resizeObserver = new ResizeObserver(() => {
handleLayout();
});
onMounted(() => {
resizeObserver.observe(streamListContainerRef.value);
});
onBeforeUnmount(() => {
resizeObserver.unobserve(streamListContainerRef.value);
});
function handleWheel(event) {
streamListContainerRef.value.scrollLeft += event.deltaY;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "streamListContainerRef",
ref: streamListContainerRef,
class: normalizeClass({
"horizontal-infinity-layout": isHorizontalInfinityLayout.value,
"vertical-infinity-layout": isVerticalInfinityLayout.value,
"equal-points-layout": isEqualPointsLayout.value
})
}, [
createElementVNode("div", {
class: "stream-list",
ref_key: "streamListRef",
ref: streamListRef,
style: normalizeStyle(streamListStyle.value),
onWheel: handleWheel
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(validStreamInfoList.value, (streamInfo) => {
return openBlock(), createBlock(StreamRegion, {
class: "stream-list-item",
key: `${streamInfo.userId}_${streamInfo.streamType}`,
streamInfo,
style: normalizeStyle(streamStyle.value),
streamPlayMode: _ctx.streamPlayMode,
streamPlayQuality: _ctx.streamPlayQuality,
onStreamViewDblclick: handleStreamDblClick
}, null, 8, ["streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
}), 128))
], 36)
], 2);
};
}
});
export {
_sfc_main as default
};