@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,
221 lines (220 loc) • 9.37 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, createElementBlock, openBlock, createVNode, withCtx, createBlock, createCommentVNode, normalizeStyle, normalizeClass, unref, Fragment, renderList } from "vue";
import { storeToRefs } from "pinia";
import { useRoomStore } from "../../../stores/room.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
import TuiSwiper from "../../common/base/Swiper.vue.mjs";
import TuiSwiperItem from "../../common/base/SwiperItem.vue.mjs";
import useStreamContainer from "./useStreamContainerHooks.mjs";
import _sfc_main$1 from "../../Stream/SingleStreamView/index.vue.mjs";
import MultiStreamView from "../../Stream/MultiStreamView/index.mjs";
import { StreamPlayMode } from "../../../services/manager/mediaManager.mjs";
const MAX_COLUMN = 2;
const MAX_ROW = 3;
const SUPPORT_LARGE_FLOAT_PAGE = true;
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "StreamContainerH5",
setup(__props) {
const basicStore = useBasicStore();
const { showRoomTool } = storeToRefs(basicStore);
const roomStore = useRoomStore();
const {
streamList,
cameraStreamList,
localStream,
masterUserId,
streamInfoObj,
remoteStreamList,
remoteScreenStream,
currentSpeakerInfo
} = storeToRefs(roomStore);
const maxColumn = ref(MAX_COLUMN);
const maxRow = ref(MAX_ROW);
const showLargeAndFloatPage = computed(() => SUPPORT_LARGE_FLOAT_PAGE);
const showEqualPointsPage = computed(
() => streamList.value.length > 2
);
const maxCountEveryPage = computed(() => maxColumn.value * maxRow.value);
const swiperActiveIndex = ref(0);
function handleSwiperChange(index) {
swiperActiveIndex.value = index;
}
function getStreamPlayMode(index) {
const equalPointsPageIndex = showLargeAndFloatPage.value ? swiperActiveIndex.value - 1 : swiperActiveIndex.value;
return Math.abs(index - equalPointsPageIndex) <= 1 ? StreamPlayMode.PLAY : StreamPlayMode.STOP;
}
watch(
() => cameraStreamList.value.length,
(val) => {
const equalPointsPages = showEqualPointsPage.value ? Math.ceil(val / maxCountEveryPage.value) : 0;
const maxTotalPages = showLargeAndFloatPage.value ? equalPointsPages + 1 : equalPointsPages;
if (swiperActiveIndex.value > maxTotalPages - 1) {
swiperActiveIndex.value = maxTotalPages - 1;
}
}
);
const equalPointsLayoutStreamList = computed(
() => {
return [
...new Array(
Math.ceil(cameraStreamList.value.length / maxCountEveryPage.value)
).keys()
].map((pageIndex) => {
let currentPageStreamList = cameraStreamList.value.slice(
pageIndex * maxCountEveryPage.value,
(pageIndex + 1) * maxCountEveryPage.value
);
if (pageIndex > 0 && currentPageStreamList.length < maxCountEveryPage.value) {
currentPageStreamList = currentPageStreamList.concat(
...new Array(maxCountEveryPage.value - currentPageStreamList.length)
);
}
return currentPageStreamList;
});
}
);
const fixedStream = ref(null);
const enlargeStream = computed(() => {
var _a;
if (fixedStream.value) {
return fixedStream.value;
}
if (remoteScreenStream.value) {
return remoteScreenStream.value;
}
if (currentSpeakerInfo.value.remoteSpeakerUserId) {
return streamInfoObj.value[`${currentSpeakerInfo.value.remoteSpeakerUserId}_${TUIVideoStreamType.kCameraStream}`];
}
if (remoteStreamList.value.length === 1) {
return remoteStreamList.value[0];
}
if (remoteStreamList.value.length > 1) {
if (!masterUserId.value || masterUserId.value === ((_a = localStream.value) == null ? void 0 : _a.userId) || !streamInfoObj.value[`${masterUserId.value}_${TUIVideoStreamType.kCameraStream}`]) {
return remoteStreamList.value[0];
}
return streamInfoObj.value[`${masterUserId.value}_${TUIVideoStreamType.kCameraStream}`];
}
return localStream.value;
});
const isEnlargeScreenStream = computed(
() => {
var _a;
return ((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIVideoStreamType.kScreenStream;
}
);
const { isSameStream, getStreamKey } = useStreamContainer();
watch(
() => streamList.value.map((stream) => getStreamKey(stream)),
(val, oldVal) => {
if (fixedStream.value) {
const fixedStreamKey = getStreamKey(fixedStream.value);
if (!val.includes(fixedStreamKey) && oldVal.includes(fixedStreamKey)) {
fixedStream.value = null;
}
}
}
);
watch(remoteScreenStream, (val, oldVal) => {
if ((val == null ? void 0 : val.hasVideoStream) && !(oldVal == null ? void 0 : oldVal.hasVideoStream)) {
fixedStream.value = null;
swiperActiveIndex.value = 0;
}
});
const floatStreamStyle = ref({ width: "0", height: "0 " });
const floatStream = computed(() => {
if (isSameStream(enlargeStream.value, fixedStream.value)) {
if (remoteScreenStream.value && !isSameStream(fixedStream.value, remoteScreenStream.value)) {
return remoteScreenStream.value;
}
if (localStream.value && !isSameStream(fixedStream.value, localStream.value)) {
return localStream.value;
}
}
if (isSameStream(enlargeStream.value, remoteScreenStream.value)) {
if (currentSpeakerInfo.value.speakerUserId) {
const currentSpeakerCameraInfo = streamInfoObj.value[`${currentSpeakerInfo.value.speakerUserId}_${TUIVideoStreamType.kCameraStream}`];
return currentSpeakerCameraInfo;
}
return localStream.value;
}
if (isSameStream(enlargeStream.value, localStream.value)) {
if (remoteScreenStream.value) {
return remoteScreenStream.value;
}
if (currentSpeakerInfo.value.remoteSpeakerUserId) {
const currentSpeakerCameraInfo = streamInfoObj.value[`${currentSpeakerInfo.value.remoteSpeakerUserId}_${TUIVideoStreamType.kCameraStream}`];
return currentSpeakerCameraInfo;
}
if (streamList.value.length >= 2) {
return streamList.value.find(
(item) => !isSameStream(item, enlargeStream.value)
);
}
return null;
}
return localStream.value;
});
const streamContainerRef = ref();
onMounted(() => {
var _a;
const containerWidth = ((_a = streamContainerRef.value) == null ? void 0 : _a.offsetWidth) / 2;
floatStreamStyle.value.width = `${containerWidth}px`;
floatStreamStyle.value.height = `${containerWidth}px`;
});
function handleStreamViewDblclick(stream) {
swiperActiveIndex.value = 0;
fixedStream.value = stream;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "streamContainerRef",
ref: streamContainerRef,
class: "stream-container"
}, [
createVNode(TuiSwiper, {
"active-index": swiperActiveIndex.value,
onChange: handleSwiperChange,
class: "page-stream-container"
}, {
default: withCtx(() => [
showLargeAndFloatPage.value ? (openBlock(), createBlock(TuiSwiperItem, { key: 0 }, {
default: withCtx(() => [
createVNode(_sfc_main$1, {
class: "enlarged-stream",
streamInfo: enlargeStream.value,
"support-touch-scale": isEnlargeScreenStream.value
}, null, 8, ["streamInfo", "support-touch-scale"]),
floatStream.value ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
class: normalizeClass(["float-stream", { "show-room-tool": unref(showRoomTool) }]),
style: normalizeStyle(floatStreamStyle.value),
streamInfo: floatStream.value
}, null, 8, ["class", "style", "streamInfo"])) : createCommentVNode("", true)
]),
_: 1
})) : createCommentVNode("", true),
showEqualPointsPage.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(equalPointsLayoutStreamList.value, (item, index) => {
return openBlock(), createBlock(TuiSwiperItem, { key: index }, {
default: withCtx(() => [
createVNode(unref(MultiStreamView), {
class: "page-stream-container",
maxColumn: maxColumn.value,
maxRow: maxRow.value,
"stream-info-list": item,
"stream-play-mode": getStreamPlayMode(index),
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["maxColumn", "maxRow", "stream-info-list", "stream-play-mode"])
]),
_: 2
}, 1024);
}), 128)) : createCommentVNode("", true)
]),
_: 1
}, 8, ["active-index"])
], 512);
};
}
});
export {
_sfc_main as default
};