@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/es/components/RoomContent/StreamList/index.vue.d.ts

@@ -0,0 +1,39 @@
+import { StreamInfo } from '../../../stores/room';
+
+interface Props {
+    streamInfoList: StreamInfo[];
+    aspectRatio?: string;
+    horizontalCount: number;
+    verticalCount: number;
+    isNeedPlayStream?: boolean;
+    observerViewInVisible?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isNeedPlayStream: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "room-dblclick": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isNeedPlayStream: boolean;
+}>>> & {
+    "onRoom-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {
+    isNeedPlayStream: boolean;
+}, {}>;
+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;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/components/RoomContent/StreamList/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+/* empty css            */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const StreamList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8705c714"]]);
+export {
+  StreamList as default
+};

package/es/components/RoomContent/StreamList/index.vue2.mjs

@@ -0,0 +1,193 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock } from "vue";
+import StreamRegion from "../StreamRegion/index.vue.mjs";
+import { isPC } from "../../../utils/environment.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    streamInfoList: {},
+    aspectRatio: {},
+    horizontalCount: {},
+    verticalCount: {},
+    isNeedPlayStream: { type: Boolean, default: true },
+    observerViewInVisible: { type: Boolean }
+  },
+  emits: ["room-dblclick"],
+  setup(__props) {
+    const props = __props;
+    const streamListContainerRef = ref();
+    const streamListRef = ref();
+    const currentPageIndex = ref(0);
+    const maxCountEveryPage = computed(
+      () => props.horizontalCount * props.verticalCount
+    );
+    const isGridLayout = computed(
+      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
+    );
+    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();
+        }
+      }
+    );
+    const singleStreamMargin = isPC ? 8 : 4;
+    const streamListStyle = ref({
+      width: "0",
+      height: "0"
+    });
+    const streamStyle = ref({
+      width: "0",
+      height: "0",
+      "--stream-margin": `${singleStreamMargin / 2}px`
+    });
+    const widthRatio = computed(() => {
+      var _a, _b;
+      if (!props.aspectRatio || ((_a = props.aspectRatio) == null ? void 0 : _a.indexOf(":")) < 0) {
+        return 0;
+      }
+      return Number((_b = props.aspectRatio) == null ? void 0 : _b.split(":")[0]);
+    });
+    const heightRatio = computed(() => {
+      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
+        return 0;
+      }
+      return Number(props.aspectRatio.split(":")[1]);
+    });
+    async function handleEqualPointsLayout() {
+      var _a, _b;
+      const number = currentPageIndex.value > 0 ? maxCountEveryPage.value : props.streamInfoList.slice(0, maxCountEveryPage.value).length;
+      if (number <= 0 || !streamListContainerRef.value) {
+        return;
+      }
+      const containerWidth = (_a = streamListContainerRef.value) == null ? void 0 : _a.offsetWidth;
+      const containerHeight = (_b = streamListContainerRef.value) == null ? void 0 : _b.offsetHeight;
+      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;
+      if (widthRatio.value && heightRatio.value) {
+        const scaleWidth = contentWidth / widthRatio.value;
+        const scaleHeight = contentHeight / heightRatio.value;
+        if (scaleWidth > scaleHeight) {
+          width = contentHeight / heightRatio.value * widthRatio.value;
+          height = contentHeight;
+        }
+        if (scaleWidth <= scaleHeight) {
+          width = contentWidth;
+          height = contentWidth / widthRatio.value * heightRatio.value;
+        }
+      }
+      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 handleHorizontalInfinityLayout() {
+      streamListStyle.value = {};
+      const containerHeight = streamListRef.value.offsetHeight;
+      const contentHeight = containerHeight;
+      const contentWidth = containerHeight * 16 / 9;
+      streamStyle.value.width = `${contentWidth}px`;
+      streamStyle.value.height = `${contentHeight}px`;
+    }
+    function handleVerticalInfinityLayout() {
+      streamListStyle.value = {};
+      const containerWidth = streamListRef.value.offsetWidth;
+      const contentWidth = containerWidth;
+      const contentHeight = containerWidth * 9 / 16;
+      streamStyle.value.width = `${contentWidth}px`;
+      streamStyle.value.height = `${contentHeight}px`;
+    }
+    const isHorizontalInfinityLayout = computed(
+      () => props.horizontalCount === Infinity
+    );
+    const isVerticalInfinityLayout = computed(
+      () => props.verticalCount === Infinity
+    );
+    const isEqualPointsLayout = computed(
+      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
+    );
+    function handleLayout() {
+      if (isHorizontalInfinityLayout.value) {
+        handleHorizontalInfinityLayout();
+        return;
+      }
+      if (isVerticalInfinityLayout.value) {
+        handleVerticalInfinityLayout();
+        return;
+      }
+      if (isEqualPointsLayout.value) {
+        handleEqualPointsLayout();
+        return;
+      }
+    }
+    onMounted(() => {
+      handleLayout();
+    });
+    watch(
+      () => [
+        props.horizontalCount,
+        props.verticalCount,
+        props.streamInfoList.length
+      ],
+      () => {
+        handleLayout();
+      },
+      { immediate: true }
+    );
+    const resizeObserver = new ResizeObserver(() => {
+      handleLayout();
+    });
+    onMounted(() => {
+      resizeObserver.observe(streamListContainerRef.value);
+    });
+    onBeforeUnmount(() => {
+      resizeObserver.unobserve(streamListContainerRef.value);
+    });
+    function handleWheel(event) {
+      streamListContainerRef.value.scrollLeft += event.deltaY;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "streamListContainerRef",
+        ref: streamListContainerRef,
+        class: normalizeClass({
+          "horizontal-infinity-layout": isHorizontalInfinityLayout.value,
+          "vertical-infinity-layout": isVerticalInfinityLayout.value,
+          "equal-points-layout": isEqualPointsLayout.value
+        })
+      }, [
+        createElementVNode("div", {
+          class: "stream-list",
+          ref_key: "streamListRef",
+          ref: streamListRef,
+          style: normalizeStyle(streamListStyle.value),
+          onWheel: handleWheel
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.streamInfoList, (streamInfo) => {
+            return openBlock(), createBlock(StreamRegion, {
+              class: "stream-list-item",
+              key: `${streamInfo.userId}_${streamInfo.streamType}`,
+              onRoomDblclick: ($event) => _ctx.$emit("room-dblclick", streamInfo),
+              streamInfo,
+              style: normalizeStyle(streamStyle.value),
+              isNeedPlayStream: _ctx.isNeedPlayStream,
+              observerViewInVisible: _ctx.observerViewInVisible,
+              isEnlarge: false
+            }, null, 8, ["onRoomDblclick", "streamInfo", "style", "isNeedPlayStream", "observerViewInVisible"]);
+          }), 128))
+        ], 36)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/RoomContent/{LocalScreenStream → StreamRegion/LocalScreenView}/index.vue.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     isMiniRegion: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/es/components/RoomContent/StreamRegion/LocalScreenView/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+const LocalScreenView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8dd28263"]]);
+export {
+  LocalScreenView as default
+};

package/es/components/RoomContent/{LocalScreenStream → StreamRegion/LocalScreenView}/index.vue2.mjs

@@ -1,10 +1,12 @@
-import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, toDisplayString, unref, withCtx, createTextVNode } from "vue";
-import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
-import ScreenSharingIcon from "../../common/icons/ScreenSharingIcon.vue.mjs";
-import TuiButton from "../../common/base/Button.vue.mjs";
-import Dialog from "../../common/base/Dialog/index.vue.mjs";
-import bus from "../../../hooks/useMitt.mjs";
-import { useI18n } from "../../../locales/index.mjs";
+import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, toDisplayString, unref, withCtx, createTextVNode, createBlock, createCommentVNode } from "vue";
+import { ipcRenderer } from "electron";
+import SvgIcon from "../../../common/base/SvgIcon.vue.mjs";
+import ScreenSharingIcon from "../../../common/icons/ScreenSharingIcon.vue.mjs";
+import TuiButton from "../../../common/base/Button.vue.mjs";
+import Dialog from "../../../common/base/Dialog/index.vue.mjs";
+import bus from "../../../../hooks/useMitt.mjs";
+import { useI18n } from "../../../../locales/index.mjs";
+import { useBasicStore } from "../../../../stores/basic.mjs";
 const _hoisted_1 = { class: "local-screen-container" };
 const _hoisted_2 = { class: "local-screen-info" };
 const _hoisted_3 = { class: "text" };
@@ -14,8 +16,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isMiniRegion: { type: Boolean }
   },
   setup(__props) {
+    var _a;
     const { t } = useI18n();
+    const basicStore = useBasicStore();
     const showStopShareRegion = ref(false);
+    const isAnnotatingStarted = ref(false);
+    const isAnnotationWindowVisiable = computed(() => basicStore.isSharingScreen);
+    const annotationSwitchLabel = computed(() => {
+      return isAnnotatingStarted.value ? t("End annotating") : t("Start annotating");
+    });
+    onMounted(() => {
+      isAnnotatingStarted.value = false;
+    });
     function openStopConfirmDialog() {
       showStopShareRegion.value = true;
     }
@@ -23,6 +35,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       showStopShareRegion.value = false;
       bus.emit("ScreenShare:stopScreenShare");
     }
+    function toggleAnnotationWindow() {
+      var _a2, _b;
+      if (isAnnotatingStarted.value) {
+        (_a2 = ipcRenderer) == null ? void 0 : _a2.send("annotation:stop-annotating");
+        isAnnotatingStarted.value = false;
+      } else {
+        (_b = ipcRenderer) == null ? void 0 : _b.send("annotation:start-annotating");
+        isAnnotatingStarted.value = true;
+      }
+    }
+    (_a = ipcRenderer) == null ? void 0 : _a.on("annotation:stop-from-annotation-window", () => {
+      isAnnotatingStarted.value = false;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
@@ -42,6 +67,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
+          isAnnotationWindowVisiable.value ? (openBlock(), createBlock(TuiButton, {
+            key: 0,
+            size: "default",
+            class: "toggle-annotating-button",
+            onClick: toggleAnnotationWindow
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(annotationSwitchLabel.value), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
           createVNode(Dialog, {
             modelValue: showStopShareRegion.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showStopShareRegion.value = $event),
@@ -76,7 +112,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("span", null, toDisplayString(unref(t)("Others will no longer see your screen after you stop sharing. Are you sure you want to stop?")), 1)
+              createElementVNode("span", null, toDisplayString(unref(t)(
+                "Others will no longer see your screen after you stop sharing. Are you sure you want to stop?"
+              )), 1)
             ]),
             _: 1
           }, 8, ["modelValue", "title"])

package/es/components/RoomContent/StreamRegion/StreamCover/index.vue.d.ts

@@ -0,0 +1,18 @@
+import { StreamInfo } from '../../../../stores/room';
+
+interface Props {
+    streamInfo: StreamInfo;
+    enlargeDomId?: string;
+    changeLargeStream?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+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/es/components/RoomContent/StreamRegion/StreamCover/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+const StreamCover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0b4e6bcc"]]);
+export {
+  StreamCover as default
+};

package/es/components/RoomContent/StreamRegion/StreamCover/index.vue2.mjs

@@ -0,0 +1,110 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createCommentVNode, createElementVNode, createBlock, unref, toDisplayString } from "vue";
+import { useRoomStore } from "../../../../stores/room.mjs";
+import Avatar from "../../../common/Avatar.vue.mjs";
+import AudioIcon from "../../../common/AudioIcon.vue.mjs";
+import SvgIcon from "../../../common/base/SvgIcon.vue.mjs";
+import UserIcon from "../../../common/icons/UserIcon.vue.mjs";
+import { useI18n } from "../../../../locales/index.mjs";
+import { TUIVideoStreamType, TUIRole } from "@tencentcloud/tuiroom-engine-electron";
+import { isInnerScene } from "../../../../utils/constants.mjs";
+import ScreenOpenIcon from "../../../common/icons/ScreenOpenIcon.vue.mjs";
+import { isPC, isMobile } from "../../../../utils/environment.mjs";
+import { storeToRefs } from "pinia";
+import LoadingIcon from "../../../common/icons/LoadingIcon.vue.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "loading-region"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "center-user-info-container"
+};
+const _hoisted_3 = { class: "corner-user-info-container" };
+const _hoisted_4 = ["title"];
+const _hoisted_5 = { key: 3 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    streamInfo: {},
+    enlargeDomId: {},
+    changeLargeStream: { type: Boolean }
+  },
+  setup(__props) {
+    const roomStore = useRoomStore();
+    const { t } = useI18n();
+    const props = __props;
+    const { userVolumeObj } = storeToRefs(roomStore);
+    const userInfo = computed(() => roomStore.userInfoObj[props.streamInfo.userId]);
+    const displayName = computed(() => {
+      if (isInnerScene) {
+        return `${roomStore.getDisplayName(props.streamInfo.userId)} | ${props.streamInfo.userId}`;
+      }
+      return roomStore.getDisplayName(props.streamInfo.userId);
+    });
+    const showMasterIcon = computed(() => {
+      const { userId, streamType } = props.streamInfo;
+      return userId === roomStore.masterUserId && streamType === TUIVideoStreamType.kCameraStream;
+    });
+    const showAdminIcon = computed(() => {
+      const { userId, streamType } = props.streamInfo;
+      return roomStore.getUserRole(userId) === TUIRole.kAdministrator && streamType === TUIVideoStreamType.kCameraStream;
+    });
+    const showVoiceBorder = computed(() => {
+      if (isPC) {
+        return false;
+      }
+      return props.streamInfo.hasAudioStream && userVolumeObj.value[props.streamInfo.userId] !== 0;
+    });
+    const showIcon = computed(() => showMasterIcon.value || showAdminIcon.value);
+    const isScreenStream = computed(
+      () => props.streamInfo.streamType === TUIVideoStreamType.kScreenStream
+    );
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["stream-cover-container", [showVoiceBorder.value ? "border" : ""]])
+      }, [
+        _ctx.streamInfo.isLoading ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(SvgIcon, {
+            icon: LoadingIcon,
+            class: "loading"
+          })
+        ])) : createCommentVNode("", true),
+        !_ctx.streamInfo.hasVideoStream ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(Avatar, {
+            class: "avatar-region",
+            "img-src": (_a = userInfo.value) == null ? void 0 : _a.avatarUrl
+          }, null, 8, ["img-src"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3, [
+          showIcon.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(showMasterIcon.value ? "master-icon" : "admin-icon")
+          }, [
+            createVNode(UserIcon)
+          ], 2)) : createCommentVNode("", true),
+          !isScreenStream.value ? (openBlock(), createBlock(AudioIcon, {
+            key: 1,
+            class: normalizeClass(["audio-icon", { "is-mobile": unref(isMobile) }]),
+            "user-id": _ctx.streamInfo.userId,
+            "is-muted": !_ctx.streamInfo.hasAudioStream,
+            size: "small"
+          }, null, 8, ["class", "user-id", "is-muted"])) : createCommentVNode("", true),
+          isScreenStream.value ? (openBlock(), createBlock(SvgIcon, {
+            key: 2,
+            icon: ScreenOpenIcon,
+            class: "screen-icon"
+          })) : createCommentVNode("", true),
+          createElementVNode("span", {
+            class: normalizeClass(["user-name", unref(isPC) ? "is-pc" : "is-mobile"]),
+            title: displayName.value
+          }, toDisplayString(displayName.value), 11, _hoisted_4),
+          isScreenStream.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("is sharing their screen")), 1)) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/RoomContent/StreamRegion/StreamPlay/index.vue.d.ts

@@ -0,0 +1,33 @@
+import { StreamInfo } from '../../../../stores/room';
+
+interface Props {
+    streamInfo: StreamInfo;
+    isEnlarge: boolean;
+    isNeedPlayStream?: boolean;
+    observerViewInVisible?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isNeedPlayStream: boolean;
+}>, {}, 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;
+}>>>, {
+    isNeedPlayStream: boolean;
+}, {}>;
+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;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/components/RoomContent/StreamRegion/StreamPlay/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+const StreamPlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41b7eb08"]]);
+export {
+  StreamPlay as default
+};

package/es/components/RoomContent/StreamRegion/StreamPlay/index.vue2.mjs

@@ -0,0 +1,113 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, nextTick } from "vue";
+import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
+import { useRoomStore } from "../../../../stores/room.mjs";
+import { roomService } from "../../../../services/roomService.mjs";
+import { useBasicStore } from "../../../../stores/basic.mjs";
+import { storeToRefs } from "pinia";
+import { getNanoId } from "../../../../utils/utils.mjs";
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    streamInfo: {},
+    isEnlarge: { type: Boolean },
+    isNeedPlayStream: { type: Boolean, default: true },
+    observerViewInVisible: { type: Boolean }
+  },
+  setup(__props) {
+    const mediaManager = roomService.getMediaManager();
+    const basicStore = useBasicStore();
+    const roomStore = useRoomStore();
+    const { defaultStreamType, streamInfoObj } = storeToRefs(roomStore);
+    const props = __props;
+    const playRegionDomRef = ref();
+    const nanoId = getNanoId(5);
+    const playRegionDomId = computed(
+      () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
+    );
+    const streamTypeToFetch = computed(() => {
+      const { streamType, userId } = props.streamInfo;
+      const { userId: localUserId } = basicStore;
+      if (streamType === TUIVideoStreamType.kScreenStream) {
+        return TUIVideoStreamType.kScreenStream;
+      }
+      if (props.isEnlarge || userId === localUserId) {
+        return TUIVideoStreamType.kCameraStream;
+      }
+      return defaultStreamType.value;
+    });
+    async function startPlayVideo() {
+      if (!streamInfoObj.value[`${props.streamInfo.userId}_${props.streamInfo.streamType}`] || !playRegionDomRef.value) {
+        return;
+      }
+      await nextTick();
+      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        await mediaManager.startPlayVideo({
+          userId: props.streamInfo.userId,
+          streamType: streamTypeToFetch.value,
+          view: playRegionDomRef.value,
+          observerViewInVisible: props.observerViewInVisible
+        });
+      }
+    }
+    async function stopPlayVideo() {
+      await mediaManager.stopPlayVideo({
+        userId: props.streamInfo.userId,
+        streamType: streamTypeToFetch.value,
+        view: playRegionDomRef.value
+      });
+    }
+    watch(
+      () => [
+        props.streamInfo.userId,
+        props.streamInfo.streamType,
+        props.streamInfo.hasVideoStream,
+        props.isNeedPlayStream
+      ],
+      async (val, oldVal) => {
+        const [oldUserId, oldStreamType] = oldVal;
+        if (oldUserId !== props.streamInfo.userId || oldStreamType !== props.streamInfo.streamType) {
+          mediaManager.stopPlayVideo({
+            userId: oldUserId,
+            streamType: oldStreamType,
+            view: playRegionDomRef.value
+          });
+        }
+        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+          await startPlayVideo();
+        } else {
+          await stopPlayVideo();
+        }
+      }
+    );
+    watch(
+      () => streamTypeToFetch,
+      async () => {
+        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+          await startPlayVideo();
+        }
+      }
+    );
+    onMounted(async () => {
+      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        await startPlayVideo();
+      }
+    });
+    onBeforeUnmount(async () => {
+      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        await stopPlayVideo();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "playRegionDomRef",
+        ref: playRegionDomRef,
+        id: playRegionDomId.value,
+        class: "stream-play-container"
+      }, null, 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};