@tencentcloud/roomkit-electron-vue3 2.7.1 → 2.8.1

package/lib/components/Stream/common/StreamList/index.vue.d.ts

@@ -0,0 +1,27 @@
+import { StreamInfo } from '../../../../stores/room';
+import { StreamPlayMode, StreamPlayQuality } from '../../../../services/manager/mediaManager';
+
+interface Props {
+    streamInfoList?: StreamInfo[];
+    column: number;
+    row: number;
+    fillMode?: 'fill' | 'contain';
+    aspectRatio?: string;
+    streamPlayQuality?: StreamPlayQuality;
+    streamPlayMode?: StreamPlayMode;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-view-dblclick": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+    "onStream-view-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/components/{RoomContent → Stream/common}/StreamList/index.vue.js

@@ -2,6 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
-const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const StreamList = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-c8176dc0"]]);
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
+const StreamList = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-98fb6ce5"]]);
 exports.default = StreamList;

package/lib/components/{RoomContent → Stream/common}/StreamList/index.vue2.js

@@ -2,42 +2,60 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
 const index = require("../StreamRegion/index.vue.js");
-const environment = require("../../../utils/environment.js");
+const environment = require("../../../../utils/environment.js");
+const domOperation = require("../../../../utils/domOperation.js");
+const utils = require("../../../../utils/utils.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   props: {
     streamInfoList: {},
+    column: {},
+    row: {},
+    fillMode: {},
     aspectRatio: {},
-    horizontalCount: {},
-    verticalCount: {},
-    isNeedPlayStream: { type: Boolean, default: true },
-    observerViewInVisible: { type: Boolean }
+    streamPlayQuality: {},
+    streamPlayMode: {}
   },
-  emits: ["room-dblclick"],
-  setup(__props) {
+  emits: ["stream-view-dblclick"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const singleStreamMargin = environment.isPC ? 8 : 4;
     const props = __props;
     const streamListContainerRef = Vue.ref();
     const streamListRef = Vue.ref();
-    const currentPageIndex = Vue.ref(0);
-    const maxCountEveryPage = Vue.computed(
-      () => props.horizontalCount * props.verticalCount
-    );
-    const isGridLayout = Vue.computed(
-      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
+    const isEqualPointsLayout = Vue.computed(
+      () => props.column !== Infinity && props.row !== Infinity
     );
+    const isHorizontalInfinityLayout = Vue.computed(() => props.column === Infinity);
+    const isVerticalInfinityLayout = Vue.computed(() => props.row === Infinity);
     Vue.watch(
-      () => props.streamInfoList.length,
-      (val, oldVal) => {
-        if (oldVal === 0) {
-          handleLayout();
-        }
-        if (isGridLayout.value && currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
-          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
-          handleEqualPointsLayout();
-        }
-      }
+      () => [props.column, props.row],
+      async () => {
+        await Vue.nextTick();
+        handleLayout();
+      },
+      { immediate: true }
     );
-    const singleStreamMargin = environment.isPC ? 8 : 4;
+    const validStreamInfoList = Vue.computed(() => {
+      var _a;
+      return (_a = props.streamInfoList) == null ? void 0 : _a.filter(
+        (item) => item && item.userId && !utils.isUndefined(item.streamType)
+      );
+    });
+    function handleLayout() {
+      if (isHorizontalInfinityLayout.value) {
+        handleHorizontalInfinityLayout();
+        return;
+      }
+      if (isVerticalInfinityLayout.value) {
+        handleVerticalInfinityLayout();
+        return;
+      }
+      if (isEqualPointsLayout.value) {
+        handleEqualPointsLayout();
+        return;
+      }
+    }
     const streamListStyle = Vue.ref({
       width: "0",
       height: "0"
@@ -61,19 +79,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       return Number(props.aspectRatio.split(":")[1]);
     });
     async function handleEqualPointsLayout() {
-      const number = currentPageIndex.value > 0 ? maxCountEveryPage.value : props.streamInfoList.slice(0, maxCountEveryPage.value).length;
-      if (number <= 0 || !streamListContainerRef.value) {
+      if (!props.streamInfoList || !streamListContainerRef.value) {
         return;
       }
       const containerRect = streamListContainerRef.value.getBoundingClientRect();
       const containerWidth = Math.floor(containerRect.width);
       const containerHeight = Math.floor(containerRect.height);
-      const horizontalStreamNumber = props.horizontalCount;
-      const verticalStreamNumber = props.verticalCount;
-      const contentWidth = (containerWidth - horizontalStreamNumber * singleStreamMargin) / horizontalStreamNumber;
-      const contentHeight = (containerHeight - verticalStreamNumber * singleStreamMargin) / verticalStreamNumber;
-      let width = containerWidth;
-      let height = containerWidth;
+      const contentWidth = (containerWidth - props.column * singleStreamMargin) / props.column;
+      const contentHeight = (containerHeight - props.row * singleStreamMargin) / props.row;
+      let width = contentWidth;
+      let height = contentHeight;
       if (widthRatio.value && heightRatio.value) {
         const scaleWidth = contentWidth / widthRatio.value;
         const scaleHeight = contentHeight / heightRatio.value;
@@ -88,76 +103,26 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }
       streamStyle.value.width = `${width}px`;
       streamStyle.value.height = `${height}px`;
-      streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
-      streamListStyle.value.height = `${verticalStreamNumber * (height + singleStreamMargin)}px`;
-    }
-    function getContentSize(element) {
-      const computedStyle = getComputedStyle(element);
-      const paddingTop = Number(computedStyle.paddingTop.replace("px", ""));
-      const paddingBottom = Number(computedStyle.paddingBottom.replace("px", ""));
-      const borderTop = Number(computedStyle.borderTopWidth.replace("px", ""));
-      const borderBottom = Number(
-        computedStyle.borderBottomWidth.replace("px", "")
-      );
-      const paddingLeft = Number(computedStyle.paddingLeft.replace("px", ""));
-      const paddingRight = Number(computedStyle.paddingRight.replace("px", ""));
-      const borderLeft = Number(computedStyle.borderLeftWidth.replace("px", ""));
-      const borderRight = Number(computedStyle.borderRightWidth.replace("px", ""));
-      const contentWidth = element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
-      const contentHeight = element.offsetHeight - paddingTop - paddingBottom - borderTop - borderBottom;
-      return { width: contentWidth, height: contentHeight };
+      streamListStyle.value.width = `${props.column * (width + singleStreamMargin)}px`;
+      streamListStyle.value.height = `${props.row * (height + singleStreamMargin)}px`;
     }
     function handleHorizontalInfinityLayout() {
       streamListStyle.value = {};
-      const contentHeight = getContentSize(streamListContainerRef.value).height;
-      const contentWidth = contentHeight * 16 / 9;
+      const contentHeight = domOperation.getContentSize(streamListContainerRef.value).height;
+      const contentWidth = contentHeight * widthRatio.value / heightRatio.value;
       streamStyle.value.width = `${contentWidth}px`;
       streamStyle.value.height = `${contentHeight}px`;
     }
     function handleVerticalInfinityLayout() {
       streamListStyle.value = {};
-      const contentWidth = getContentSize(streamListContainerRef.value).width;
-      const contentHeight = contentWidth * 9 / 16;
+      const contentWidth = domOperation.getContentSize(streamListContainerRef.value).width;
+      const contentHeight = contentWidth * heightRatio.value / widthRatio.value;
       streamStyle.value.width = `${contentWidth}px`;
       streamStyle.value.height = `${contentHeight}px`;
     }
-    const isHorizontalInfinityLayout = Vue.computed(
-      () => props.horizontalCount === Infinity
-    );
-    const isVerticalInfinityLayout = Vue.computed(
-      () => props.verticalCount === Infinity
-    );
-    const isEqualPointsLayout = Vue.computed(
-      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
-    );
-    function handleLayout() {
-      if (isHorizontalInfinityLayout.value) {
-        handleHorizontalInfinityLayout();
-        return;
-      }
-      if (isVerticalInfinityLayout.value) {
-        handleVerticalInfinityLayout();
-        return;
-      }
-      if (isEqualPointsLayout.value) {
-        handleEqualPointsLayout();
-        return;
-      }
+    function handleStreamDblClick(streamInfo) {
+      emits("stream-view-dblclick", streamInfo);
     }
-    Vue.onMounted(() => {
-      handleLayout();
-    });
-    Vue.watch(
-      () => [
-        props.horizontalCount,
-        props.verticalCount,
-        props.streamInfoList.length
-      ],
-      () => {
-        handleLayout();
-      },
-      { immediate: true }
-    );
     const resizeObserver = new ResizeObserver(() => {
       handleLayout();
     });
@@ -187,17 +152,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           style: Vue.normalizeStyle(streamListStyle.value),
           onWheel: handleWheel
         }, [
-          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(_ctx.streamInfoList, (streamInfo) => {
+          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(validStreamInfoList.value, (streamInfo) => {
             return Vue.openBlock(), Vue.createBlock(index.default, {
               class: "stream-list-item",
               key: `${streamInfo.userId}_${streamInfo.streamType}`,
-              onRoomDblclick: ($event) => _ctx.$emit("room-dblclick", streamInfo),
               streamInfo,
               style: Vue.normalizeStyle(streamStyle.value),
-              isNeedPlayStream: _ctx.isNeedPlayStream,
-              observerViewInVisible: _ctx.observerViewInVisible,
-              isEnlarge: false
-            }, null, 8, ["onRoomDblclick", "streamInfo", "style", "isNeedPlayStream", "observerViewInVisible"]);
+              streamPlayMode: _ctx.streamPlayMode,
+              streamPlayQuality: _ctx.streamPlayQuality,
+              onStreamViewDblclick: handleStreamDblClick
+            }, null, 8, ["streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
           }), 128))
         ], 36)
       ], 2);

package/{es/components/RoomContent/StreamRegion → lib/components/Stream/common}/StreamPlay/index.vue.d.ts

@@ -1,17 +1,20 @@
 import { StreamInfo } from '../../../../stores/room';
+import { StreamPlayMode, StreamPlayQuality } from '../../../../services/manager/mediaManager';
 
 interface Props {
     streamInfo: StreamInfo;
-    isEnlarge: boolean;
-    isNeedPlayStream?: boolean;
-    observerViewInVisible?: boolean;
+    streamPlayQuality?: StreamPlayQuality;
+    streamPlayMode?: StreamPlayMode;
 }
 declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    isNeedPlayStream: boolean;
+    streamPlayQuality: StreamPlayQuality;
+    streamPlayMode: StreamPlayMode;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    isNeedPlayStream: boolean;
+    streamPlayQuality: StreamPlayQuality;
+    streamPlayMode: StreamPlayMode;
 }>>>, {
-    isNeedPlayStream: boolean;
+    streamPlayQuality: StreamPlayQuality;
+    streamPlayMode: StreamPlayMode;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/lib/components/{RoomContent/StreamRegion → Stream/common}/StreamPlay/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
-const StreamPlay = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-41b7eb08"]]);
+const StreamPlay = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-8eda9173"]]);
 exports.default = StreamPlay;

package/lib/components/{RoomContent/StreamRegion → Stream/common}/StreamPlay/index.vue2.js

@@ -4,6 +4,7 @@ const Vue = require("vue");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 const room = require("../../../../stores/room.js");
 const roomService = require("../../../../services/roomService.js");
+const mediaManager = require("../../../../services/manager/mediaManager.js");
 const basic = require("../../../../stores/basic.js");
 const pinia = require("pinia");
 const utils = require("../../../../utils/utils.js");
@@ -12,12 +13,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   props: {
     streamInfo: {},
-    isEnlarge: { type: Boolean },
-    isNeedPlayStream: { type: Boolean, default: true },
-    observerViewInVisible: { type: Boolean }
+    streamPlayQuality: { default: mediaManager.StreamPlayQuality.Default },
+    streamPlayMode: { default: mediaManager.StreamPlayMode.PLAY }
   },
   setup(__props) {
-    const mediaManager = roomService.roomService.getMediaManager();
+    const mediaManager$1 = roomService.roomService.getMediaManager();
     const basicStore = basic.useBasicStore();
     const roomStore = room.useRoomStore();
     const { defaultStreamType, streamInfoObj } = pinia.storeToRefs(roomStore);
@@ -27,15 +27,21 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const playRegionDomId = Vue.computed(
       () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
     );
+    const isNeedPlayStream = Vue.computed(
+      () => props.streamPlayMode !== mediaManager.StreamPlayMode.STOP && props.streamInfo.hasVideoStream
+    );
     const streamTypeToFetch = Vue.computed(() => {
       const { streamType, userId } = props.streamInfo;
       const { userId: localUserId } = basicStore;
       if (streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
         return TUIRoomEngine.TUIVideoStreamType.kScreenStream;
       }
-      if (props.isEnlarge || userId === localUserId) {
+      if (props.streamPlayQuality === mediaManager.StreamPlayQuality.HIGH || userId === localUserId) {
         return TUIRoomEngine.TUIVideoStreamType.kCameraStream;
       }
+      if (props.streamPlayQuality === mediaManager.StreamPlayQuality.LOW) {
+        return TUIRoomEngine.TUIVideoStreamType.kCameraStreamLow;
+      }
       return defaultStreamType.value;
     });
     async function startPlayVideo() {
@@ -43,17 +49,17 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         return;
       }
       await Vue.nextTick();
-      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
-        await mediaManager.startPlayVideo({
+      if (isNeedPlayStream.value) {
+        await mediaManager$1.startPlayVideo({
           userId: props.streamInfo.userId,
           streamType: streamTypeToFetch.value,
           view: playRegionDomRef.value,
-          observerViewInVisible: props.observerViewInVisible
+          observerViewInVisible: props.streamPlayMode === mediaManager.StreamPlayMode.PLAY_IN_VISIBLE
         });
       }
     }
     async function stopPlayVideo() {
-      await mediaManager.stopPlayVideo({
+      await mediaManager$1.stopPlayVideo({
         userId: props.streamInfo.userId,
         streamType: streamTypeToFetch.value,
         view: playRegionDomRef.value
@@ -63,19 +69,18 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       () => [
         props.streamInfo.userId,
         props.streamInfo.streamType,
-        props.streamInfo.hasVideoStream,
-        props.isNeedPlayStream
+        isNeedPlayStream.value
       ],
       async (val, oldVal) => {
         const [oldUserId, oldStreamType] = oldVal;
         if (oldUserId !== props.streamInfo.userId || oldStreamType !== props.streamInfo.streamType) {
-          mediaManager.stopPlayVideo({
+          mediaManager$1.stopPlayVideo({
             userId: oldUserId,
             streamType: oldStreamType,
             view: playRegionDomRef.value
           });
         }
-        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        if (isNeedPlayStream.value) {
           await startPlayVideo();
         } else {
           await stopPlayVideo();
@@ -85,18 +90,18 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     Vue.watch(
       () => streamTypeToFetch,
       async () => {
-        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        if (isNeedPlayStream.value) {
           await startPlayVideo();
         }
       }
     );
     Vue.onMounted(async () => {
-      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+      if (isNeedPlayStream.value) {
         await startPlayVideo();
       }
     });
     Vue.onBeforeUnmount(async () => {
-      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+      if (isNeedPlayStream.value) {
         await stopPlayVideo();
       }
     });

package/lib/components/Stream/common/StreamRegion/index.vue.d.ts

@@ -0,0 +1,25 @@
+import { StreamInfo } from '../../../../stores/room';
+import { StreamPlayMode, StreamPlayQuality } from '../../../../services/manager/mediaManager';
+
+interface Props {
+    streamInfo: StreamInfo;
+    streamPlayQuality?: StreamPlayQuality;
+    streamPlayMode?: StreamPlayMode;
+    aspectRatio?: string;
+    supportTouchScale?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-view-dblclick": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+    "onStream-view-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/components/{RoomContent → Stream/common}/StreamRegion/index.vue.js

@@ -2,6 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
-const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const StreamRegion = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-2fa4d966"]]);
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
+const StreamRegion = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-31a2e486"]]);
 exports.default = StreamRegion;

package/lib/components/{RoomContent → Stream/common}/StreamRegion/index.vue2.js

@@ -2,25 +2,26 @@
 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 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: {},
-    isEnlarge: { type: Boolean, default: false },
+    streamPlayQuality: {},
+    streamPlayMode: {},
     aspectRatio: {},
-    isNeedPlayStream: { type: Boolean, default: true },
-    observerViewInVisible: { type: Boolean },
     supportTouchScale: { type: Boolean }
   },
-  emits: ["room-dblclick"],
-  setup(__props) {
+  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
@@ -43,8 +44,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (!streamRegionContainerRef.value) {
         return;
       }
-      const containerWidth = streamRegionContainerRef.value.offsetWidth;
-      const containerHeight = streamRegionContainerRef.value.offsetHeight;
+      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) {
@@ -62,6 +63,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       streamStyle.value.width = `${width}px`;
       streamStyle.value.height = `${height}px`;
     }
+    function handleStreamDblClick() {
+      emits("stream-view-dblclick", props.streamInfo);
+    }
     const ro = new ResizeObserver(() => {
       handleStreamRegionSize();
     });
@@ -79,31 +83,24 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }, [
         Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
           class: "stream-region",
-          onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick")),
+          onStreamViewDblclick: handleStreamDblClick,
           style: Vue.normalizeStyle(streamStyle.value)
         }, [
           isLocalScreen.value ? (Vue.openBlock(), Vue.createBlock(index.default, {
             key: 0,
-            streamInfo: _ctx.streamInfo,
-            isMiniRegion: !_ctx.isEnlarge
-          }, null, 8, ["streamInfo", "isMiniRegion"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
+            streamInfo: _ctx.streamInfo
+          }, null, 8, ["streamInfo"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
             Vue.withDirectives(Vue.createVNode(index$1.default, {
               streamInfo: _ctx.streamInfo,
-              isEnlarge: _ctx.isEnlarge,
-              isNeedPlayStream: _ctx.isNeedPlayStream,
-              observerViewInVisible: _ctx.observerViewInVisible
-            }, null, 8, ["streamInfo", "isEnlarge", "isNeedPlayStream", "observerViewInVisible"]), [
+              "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),
-            () => {
-              _ctx.$emit("room-dblclick");
-            }
-          ]
+          [Vue.unref(vDblTouch.default), handleStreamDblClick]
         ])
       ], 512);
     };

package/lib/components/common/Language.vue.js

@@ -9,10 +9,10 @@ const index = require("../../locales/index.js");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 require("@tencentcloud/tuiroom-engine-electron");
+require("../../utils/environment.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../utils/environment.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "Language",
   setup(__props) {

package/lib/components/common/SwitchTheme.vue.js

@@ -9,10 +9,10 @@ const index = require("../../locales/index.js");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 require("@tencentcloud/tuiroom-engine-electron");
+require("../../utils/environment.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../utils/environment.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "SwitchTheme",
   props: {

package/lib/components/common/base/Button.vue.d.ts

@@ -37,8 +37,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     size: "large" | "default";
     type: "primary" | "success" | "warning" | "danger" | "info" | "text";
     customStyle: string | false | import('vue').CSSProperties | StyleValue[] | null;
-    loading: boolean;
     disabled: boolean;
+    loading: boolean;
     round: boolean;
     plain: boolean;
 }, {}>;

package/lib/components/common/base/Checkbox/index.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
 }>>> & {
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
     disabled: boolean;
+    modelValue: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/components/common/base/Dialog/index.vue.d.ts

@@ -33,10 +33,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     cancelButton: string;
     titleIcon: null;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+    cancel: (...args: any[]) => void;
     close: (...args: any[]) => void;
     confirm: (...args: any[]) => void;
-    cancel: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
 }, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     title: string;
     modelValue: boolean;
@@ -51,10 +51,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     cancelButton: string;
     titleIcon: null;
 }>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
-    onConfirm?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     width: string | number;

package/lib/components/common/base/IconButton.vue.d.ts

@@ -45,13 +45,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
 }, {
     title: string;
     icon: Component | null;
-    disabled: boolean;
-    theme: "white" | "black";
-    layout: IconButtonLayout;
     hasMore: boolean;
     hideHoverEffect: boolean;
+    disabled: boolean;
     isActive: boolean;
+    layout: IconButtonLayout;
     isNotSupport: boolean;
+    theme: "white" | "black";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;