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,
223 lines (222 loc) • 9.38 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const room = require("../../../stores/room.js");
const basic = require("../../../stores/basic.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const Swiper = require("../../common/base/Swiper.vue2.js");
const SwiperItem = require("../../common/base/SwiperItem.vue2.js");
const useStreamContainerHooks = require("./useStreamContainerHooks.js");
const index_vue_vue_type_script_setup_true_lang = require("../../Stream/SingleStreamView/index.vue.js");
const index = require("../../Stream/MultiStreamView/index.js");
const mediaManager = require("../../../services/manager/mediaManager.js");
const MAX_COLUMN = 2;
const MAX_ROW = 3;
const SUPPORT_LARGE_FLOAT_PAGE = true;
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "StreamContainerH5",
setup(__props) {
const basicStore = basic.useBasicStore();
pinia.storeToRefs(basicStore);
const roomStore = room.useRoomStore();
const {
streamList,
cameraStreamList,
localStream,
masterUserId,
streamInfoObj,
remoteStreamList,
remoteScreenStream,
currentSpeakerInfo
} = pinia.storeToRefs(roomStore);
const maxColumn = Vue.ref(MAX_COLUMN);
const maxRow = Vue.ref(MAX_ROW);
const showLargeAndFloatPage = Vue.computed(() => SUPPORT_LARGE_FLOAT_PAGE);
const showEqualPointsPage = Vue.computed(
() => streamList.value.length > 2
);
const maxCountEveryPage = Vue.computed(() => maxColumn.value * maxRow.value);
const swiperActiveIndex = Vue.ref(0);
function handleSwiperChange(index2) {
swiperActiveIndex.value = index2;
}
function getStreamPlayMode(index2) {
const equalPointsPageIndex = showLargeAndFloatPage.value ? swiperActiveIndex.value - 1 : swiperActiveIndex.value;
return Math.abs(index2 - equalPointsPageIndex) <= 1 ? mediaManager.StreamPlayMode.PLAY : mediaManager.StreamPlayMode.STOP;
}
Vue.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 = Vue.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 = Vue.ref(null);
const enlargeStream = Vue.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}_${TUIRoomEngine.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}_${TUIRoomEngine.TUIVideoStreamType.kCameraStream}`]) {
return remoteStreamList.value[0];
}
return streamInfoObj.value[`${masterUserId.value}_${TUIRoomEngine.TUIVideoStreamType.kCameraStream}`];
}
return localStream.value;
});
const isEnlargeScreenStream = Vue.computed(
() => {
var _a;
return ((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIRoomEngine.TUIVideoStreamType.kScreenStream;
}
);
const { isSameStream, getStreamKey } = useStreamContainerHooks.default();
Vue.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;
}
}
}
);
Vue.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 = Vue.ref({ width: "0", height: "0 " });
Vue.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}_${TUIRoomEngine.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}_${TUIRoomEngine.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 = Vue.ref();
Vue.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;
}
Vue.watch(
() => equalPointsLayoutStreamList.value.length,
(val) => {
if (val < 2) {
swiperActiveIndex.value = 0;
}
}
);
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
ref_key: "streamContainerRef",
ref: streamContainerRef,
class: "stream-container"
}, [
Vue.createVNode(Swiper.default, {
"active-index": swiperActiveIndex.value,
onChange: handleSwiperChange,
class: "page-stream-container"
}, {
default: Vue.withCtx(() => [
showLargeAndFloatPage.value ? (Vue.openBlock(), Vue.createBlock(SwiperItem.default, { key: 0 }, {
default: Vue.withCtx(() => [
Vue.createVNode(index_vue_vue_type_script_setup_true_lang.default, {
class: "enlarged-stream",
streamInfo: enlargeStream.value,
"support-touch-scale": isEnlargeScreenStream.value
}, null, 8, ["streamInfo", "support-touch-scale"])
]),
_: 1
})) : Vue.createCommentVNode("", true),
showEqualPointsPage.value ? (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, { key: 1 }, Vue.renderList(equalPointsLayoutStreamList.value, (item, index$1) => {
return Vue.openBlock(), Vue.createBlock(SwiperItem.default, { key: index$1 }, {
default: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(index.default), {
class: "page-stream-container",
maxColumn: maxColumn.value,
maxRow: maxRow.value,
"stream-info-list": item,
"stream-play-mode": getStreamPlayMode(index$1),
onStreamViewDblclick: handleStreamViewDblclick
}, null, 8, ["maxColumn", "maxRow", "stream-info-list", "stream-play-mode"])
]),
_: 2
}, 1024);
}), 128)) : Vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["active-index"])
], 512);
};
}
});
exports.default = _sfc_main;