@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,
110 lines (109 loc) • 4.49 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
const index$1 = require("../StreamPlay/index.vue.js");
const index$2 = require("../StreamCover/index.vue.js");
const index = require("../LocalScreenView/index.vue.js");
const basic = require("../../../../stores/basic.js");
const vDblTouch = require("../../../../directives/vDblTouch.js");
const vTouchScale = require("../../../../directives/vTouchScale.js");
const domOperation = require("../../../../utils/domOperation.js");
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
props: {
streamInfo: {},
streamPlayQuality: {},
streamPlayMode: {},
aspectRatio: {},
supportTouchScale: { type: Boolean }
},
emits: ["stream-view-dblclick"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const basicStore = basic.useBasicStore();
const isLocalScreen = Vue.computed(
() => props.streamInfo && props.streamInfo.userId === basicStore.userId && props.streamInfo.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream
);
const streamRegionContainerRef = Vue.ref();
const streamStyle = Vue.ref({ width: "", height: "" });
const widthRatio = Vue.computed(() => {
if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
return 0;
}
return Number(props.aspectRatio.split(":")[0]);
});
const heightRatio = Vue.computed(() => {
if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
return 0;
}
return Number(props.aspectRatio.split(":")[1]);
});
function handleStreamRegionSize() {
if (!streamRegionContainerRef.value) {
return;
}
const containerWidth = domOperation.getContentSize(streamRegionContainerRef.value).width;
const containerHeight = domOperation.getContentSize(streamRegionContainerRef.value).height;
let width = containerWidth;
let height = containerHeight;
if (widthRatio.value && heightRatio.value) {
const scaleWidth = containerWidth / widthRatio.value;
const scaleHeight = containerHeight / heightRatio.value;
if (scaleWidth > scaleHeight) {
width = containerHeight / heightRatio.value * widthRatio.value;
height = containerHeight;
}
if (scaleWidth <= scaleHeight) {
width = containerWidth;
height = containerWidth / widthRatio.value * heightRatio.value;
}
}
streamStyle.value.width = `${width}px`;
streamStyle.value.height = `${height}px`;
}
function handleStreamDblClick() {
emits("stream-view-dblclick", props.streamInfo);
}
const ro = new ResizeObserver(() => {
handleStreamRegionSize();
});
Vue.onMounted(() => {
ro.observe(streamRegionContainerRef.value);
});
Vue.onBeforeUnmount(() => {
ro.unobserve(streamRegionContainerRef.value);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
class: "stream-region-container",
ref_key: "streamRegionContainerRef",
ref: streamRegionContainerRef
}, [
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
class: "stream-region",
onStreamViewDblclick: handleStreamDblClick,
style: Vue.normalizeStyle(streamStyle.value)
}, [
isLocalScreen.value ? (Vue.openBlock(), Vue.createBlock(index.default, {
key: 0,
streamInfo: _ctx.streamInfo
}, null, 8, ["streamInfo"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
Vue.withDirectives(Vue.createVNode(index$1.default, {
streamInfo: _ctx.streamInfo,
"stream-play-mode": _ctx.streamPlayMode,
"stream-play-quality": _ctx.streamPlayQuality
}, null, 8, ["streamInfo", "stream-play-mode", "stream-play-quality"]), [
[Vue.unref(vTouchScale.default), props.supportTouchScale]
]),
Vue.createVNode(index$2.default, { streamInfo: _ctx.streamInfo }, null, 8, ["streamInfo"])
], 64))
], 36)), [
[Vue.unref(vDblTouch.default), handleStreamDblClick]
])
], 512);
};
}
});
exports.default = _sfc_main;