@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

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

@@ -1,43 +1,21 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
-const pinia = require("pinia");
-const electron = require("electron");
 const SvgIcon = require("../../../common/base/SvgIcon.vue.js");
 const ScreenSharingIcon = require("../../../common/icons/ScreenSharingIcon.vue.js");
 const Button = require("../../../common/base/Button.vue.js");
 const index$1 = require("../../../common/base/Dialog/index.vue.js");
 const useMitt = require("../../../../hooks/useMitt.js");
 const index = require("../../../../locales/index.js");
-const room = require("../../../../stores/room.js");
-const dataReportManager = require("../../../../services/manager/dataReportManager.js");
-require("../../../../services/main.js");
-const roomService = require("../../../../services/roomService.js");
-require("@tencentcloud/tuiroom-engine-electron");
-require("mitt");
-require("../../../../services/manager/roomActionManager.js");
-require("@tencentcloud/tui-core");
-require("../../../../utils/environment.js");
-const _hoisted_1 = { class: "local-screen-container" };
-const _hoisted_2 = { class: "local-screen-info" };
-const _hoisted_3 = { class: "text" };
+const _hoisted_1 = { class: "local-screen-info" };
+const _hoisted_2 = { class: "text" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
-  props: {
-    isMiniRegion: { type: Boolean }
-  },
   setup(__props) {
-    var _a;
-    const roomStore = room.useRoomStore();
     const { t } = index.useI18n();
     const showStopShareRegion = Vue.ref(false);
-    const { isAnnotationVisiable, isSharingScreen } = pinia.storeToRefs(roomStore);
-    const annotationSwitchLabel = Vue.computed(() => {
-      return isAnnotationVisiable.value ? t("End annotating") : t("Start annotating");
-    });
-    Vue.onMounted(() => {
-      isAnnotationVisiable.value = false;
-    });
+    const localScreenContainerRef = Vue.ref();
+    const isMiniRegion = Vue.ref(false);
     function openStopConfirmDialog() {
       showStopShareRegion.value = true;
     }
@@ -45,30 +23,28 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       showStopShareRegion.value = false;
       useMitt.default.emit("ScreenShare:stopScreenShare");
     }
-    function toggleAnnotationWindow() {
-      var _a2, _b;
-      if (isAnnotationVisiable.value) {
-        (_a2 = electron.ipcRenderer) == null ? void 0 : _a2.send("annotation:stop-annotating");
-        isAnnotationVisiable.value = false;
-        roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.stopAnnotating);
-      } else {
-        (_b = electron.ipcRenderer) == null ? void 0 : _b.send("annotation:start-annotating");
-        isAnnotationVisiable.value = true;
-        roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.startAnnotating);
-      }
-    }
-    (_a = electron.ipcRenderer) == null ? void 0 : _a.on("annotation:stop-from-annotation-window", () => {
-      isAnnotationVisiable.value = false;
-      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.stopAnnotating);
+    const resizeObserver = new ResizeObserver(() => {
+      var _a;
+      isMiniRegion.value = ((_a = localScreenContainerRef.value) == null ? void 0 : _a.offsetHeight) <= 200;
+    });
+    Vue.onMounted(() => {
+      resizeObserver.observe(localScreenContainerRef.value);
+    });
+    Vue.onBeforeUnmount(() => {
+      resizeObserver.unobserve(localScreenContainerRef.value);
     });
     return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+      return Vue.openBlock(), Vue.createElementBlock("div", {
+        class: "local-screen-container",
+        ref_key: "localScreenContainerRef",
+        ref: localScreenContainerRef
+      }, [
         Vue.createElementVNode("div", {
-          class: Vue.normalizeClass(["local-screen-control-container", { mini: _ctx.isMiniRegion }])
+          class: Vue.normalizeClass(["local-screen-control-container", { mini: isMiniRegion.value }])
         }, [
-          Vue.createElementVNode("div", _hoisted_2, [
+          Vue.createElementVNode("div", _hoisted_1, [
             Vue.createVNode(SvgIcon.default, { icon: ScreenSharingIcon.default }),
-            Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("You are sharing the screen...")), 1)
+            Vue.createElementVNode("span", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("You are sharing the screen...")), 1)
           ]),
           Vue.createVNode(Button.default, {
             size: "default",
@@ -80,17 +56,6 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             ]),
             _: 1
           }),
-          Vue.unref(isSharingScreen) ? (Vue.openBlock(), Vue.createBlock(Button.default, {
-            key: 0,
-            size: "default",
-            class: "toggle-annotating-button",
-            onClick: toggleAnnotationWindow
-          }, {
-            default: Vue.withCtx(() => [
-              Vue.createTextVNode(Vue.toDisplayString(annotationSwitchLabel.value), 1)
-            ]),
-            _: 1
-          })) : Vue.createCommentVNode("", true),
           Vue.createVNode(index$1.default, {
             modelValue: showStopShareRegion.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showStopShareRegion.value = $event),
@@ -132,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             _: 1
           }, 8, ["modelValue", "title"])
         ], 2)
-      ]);
+      ], 512);
     };
   }
 });

package/lib/components/{RoomContent/StreamRegion → Stream/common}/StreamCover/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 StreamCover = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7f0544c7"]]);
+const StreamCover = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-fad4ad60"]]);
 exports.default = StreamCover;

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;