@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,
99 lines (98 loc) • 3.68 kB
JavaScript
import { defineComponent, computed, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withDirectives, createElementVNode, vShow } from "vue";
import { IconArrowStrokeTurnPage } from "@tencentcloud/uikit-base-component-vue3";
import StreamList from "../common/StreamList/index.vue.mjs";
import { StreamPlayQuality, StreamPlayMode } from "../../../services/manager/mediaManager.mjs";
import useMultiStreamViewHook from "./useMultiStreamViewHook.mjs";
import { storeToRefs } from "pinia";
import { useBasicStore } from "../../../stores/basic.mjs";
const _hoisted_1 = { id: "streamContainer" };
const _hoisted_2 = {
key: 0,
class: "turn-page-container"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MultiStreamViewPC",
props: {
maxColumn: {},
maxRow: {},
fillMode: {},
excludeStreamInfoList: {}
},
emits: ["stream-view-dblclick"],
setup(__props, { emit: __emit }) {
const props = __props;
const {
column,
row,
totalPageNumber,
isEqualPointsLayout,
renderStreamInfoList,
equalPointsLayoutStreamList,
currentPageIndex
} = useMultiStreamViewHook(props);
const basicStore = useBasicStore();
const { showRoomTool } = storeToRefs(basicStore);
const streamInfoList = computed(() => {
if (isEqualPointsLayout.value) {
return equalPointsLayoutStreamList.value[currentPageIndex.value];
}
return renderStreamInfoList.value;
});
const emits = __emit;
function handleStreamDblclick(streamInfo) {
emits("stream-view-dblclick", streamInfo);
}
const showTurnPageControl = computed(
() => isEqualPointsLayout.value && totalPageNumber.value > 1
);
const showTurnPageLeftArrow = computed(
() => isEqualPointsLayout.value && currentPageIndex.value > 0
);
const showTurnPageRightArrow = computed(
() => isEqualPointsLayout.value && currentPageIndex.value < totalPageNumber.value - 1
);
function handleTurnPageLeft() {
currentPageIndex.value = currentPageIndex.value - 1;
}
function handleTurnPageRight() {
currentPageIndex.value = currentPageIndex.value + 1;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(StreamList, {
streamInfoList: streamInfoList.value,
column: unref(column),
row: unref(row),
streamPlayMode: unref(StreamPlayMode).PLAY_IN_VISIBLE,
streamPlayQuality: unref(StreamPlayQuality).Default,
"aspect-ratio": "16:9",
onStreamViewDblclick: handleStreamDblclick
}, null, 8, ["streamInfoList", "column", "row", "streamPlayMode", "streamPlayQuality"]),
showTurnPageControl.value && unref(showRoomTool) ? (openBlock(), createElementBlock("div", _hoisted_2, [
withDirectives(createElementVNode("div", {
class: "turn-page-arrow-container left-container",
onClick: handleTurnPageLeft
}, [
createVNode(unref(IconArrowStrokeTurnPage), { size: "20" })
], 512), [
[vShow, showTurnPageLeftArrow.value]
]),
withDirectives(createElementVNode("div", {
class: "turn-page-arrow-container right-container",
onClick: handleTurnPageRight
}, [
createVNode(unref(IconArrowStrokeTurnPage), {
class: "turn-page-right",
size: "20"
})
], 512), [
[vShow, showTurnPageRightArrow.value]
])
])) : createCommentVNode("", true)
]);
};
}
});
export {
_sfc_main as default
};