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