@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -1,15 +1,26 @@
 import { StreamInfo } from '../../../stores/room';
 
 interface Props {
-    stream: StreamInfo;
-    enlargeDomId?: string;
-    changeLargeStream?: boolean;
+    streamInfo: StreamInfo;
+    isEnlarge?: boolean;
+    aspectRatio?: string;
+    isNeedPlayStream?: boolean;
+    observerViewInVisible?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isEnlarge: boolean;
+    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_TypePropsToRuntimeProps<Props>>> & {
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isEnlarge: boolean;
+    isNeedPlayStream: boolean;
+}>>> & {
     "onRoom-dblclick"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+}, {
+    isEnlarge: boolean;
+    isNeedPlayStream: boolean;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -20,3 +31,11 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         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/index.vue.mjs

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

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

@@ -1,248 +1,105 @@
-import { defineComponent, computed, ref, watch, nextTick, openBlock, createElementBlock, createBlock, Fragment, createVNode, createCommentVNode, createElementVNode, normalizeClass, toDisplayString, unref } from "vue";
-import { useRoomStore } from "../../../stores/room.mjs";
-import TuiAvatar from "../../common/Avatar.vue.mjs";
+import { defineComponent, computed, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, withDirectives, normalizeStyle, createBlock, Fragment, createVNode, unref } from "vue";
+import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
+import StreamPlay from "./StreamPlay/index.vue.mjs";
+import StreamCover from "./StreamCover/index.vue.mjs";
+import LocalScreenView from "./LocalScreenView/index.vue.mjs";
 import { useBasicStore } from "../../../stores/basic.mjs";
-import logger from "../../../utils/common/logger/index.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 LoadingIcon from "../../common/icons/LoadingIcon.vue.mjs";
-import { useI18n } from "../../../locales/index.mjs";
-import { TUIVideoStreamType, TUIRole } from "@tencentcloud/tuiroom-engine-electron";
-import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
-import { isInnerScene } from "../../../utils/constants.mjs";
-import ScreenOpenIcon from "../../common/icons/ScreenOpenIcon.vue.mjs";
-import LocalScreenStream from "../LocalScreenStream/index.vue.mjs";
-const _hoisted_1 = {
-  key: 0,
-  class: "loading-region"
-};
-const _hoisted_2 = ["id"];
-const _hoisted_3 = { class: "corner-user-info-container" };
-const _hoisted_4 = ["title"];
-const _hoisted_5 = { key: 3 };
-const logPrefix = "[StreamRegion]";
+import vDblTouch from "../../../directives/vDblTouch.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    stream: {},
-    enlargeDomId: {},
-    changeLargeStream: { type: Boolean }
+    streamInfo: {},
+    isEnlarge: { type: Boolean, default: false },
+    aspectRatio: {},
+    isNeedPlayStream: { type: Boolean, default: true },
+    observerViewInVisible: { type: Boolean }
   },
   emits: ["room-dblclick"],
   setup(__props) {
-    const roomEngine = useGetRoomEngine();
-    const basicStore = useBasicStore();
-    const roomStore = useRoomStore();
-    const { t } = useI18n();
     const props = __props;
-    const isLocalScreen = computed(() => props.stream && (props.stream.userId === basicStore.userId && props.stream.streamType === TUIVideoStreamType.kScreenStream));
-    const isMiniRegion = computed(() => !!(props.enlargeDomId && `${props.stream.userId}_${props.stream.streamType}` !== props.enlargeDomId));
-    const streamRegionRef = ref();
-    const centerUserInfoRef = ref();
-    const loading = ref(false);
-    const playRegionDomId = computed(() => `${props.stream.userId}_${props.stream.streamType}`);
-    const showMasterIcon = computed(() => {
-      const { userId, streamType } = props.stream;
-      return userId === roomStore.masterUserId && streamType === TUIVideoStreamType.kCameraStream;
-    });
-    const showAdminIcon = computed(() => {
-      const { userId, streamType } = props.stream;
-      return roomStore.getUserRole(userId) === TUIRole.kAdministrator && streamType === TUIVideoStreamType.kCameraStream;
-    });
-    const showIcon = computed(() => showMasterIcon.value || showAdminIcon.value);
-    const isScreenStream = computed(() => props.stream.streamType === TUIVideoStreamType.kScreenStream);
-    const userInfo = computed(() => {
-      if (isInnerScene) {
-        return `${props.stream.nameCard || props.stream.userName} | ${props.stream.userId}`;
+    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 props.stream.nameCard || props.stream.userName || props.stream.userId;
+      return Number(props.aspectRatio.split(":")[0]);
     });
-    watch(
-      () => props.stream.hasVideoStream,
-      async (val) => {
-        var _a, _b;
-        if (props.stream.userId === basicStore.userId && props.stream.streamType === TUIVideoStreamType.kCameraStream) {
-          if (val) {
-            await nextTick();
-            const userIdEl = document == null ? void 0 : document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              logger.debug(`${logPrefix}watch isVideoStreamAvailable:`, props.stream.userId, userIdEl);
-              await ((_a = roomEngine.instance) == null ? void 0 : _a.setLocalVideoView({
-                view: `${playRegionDomId.value}`
-              }));
-            }
-          } else {
-            await ((_b = roomEngine.instance) == null ? void 0 : _b.setLocalVideoView({
-              view: null
-            }));
-          }
-        }
-      },
-      { immediate: true }
-    );
-    const streamTypeToFetch = computed(() => {
-      const { streamType, userId } = props.stream;
-      const { kScreenStream, kCameraStream } = TUIVideoStreamType;
-      const { defaultStreamType } = roomStore;
-      const { userId: localUserId } = basicStore;
-      if (streamType === kScreenStream) {
-        return kScreenStream;
+    const heightRatio = computed(() => {
+      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
+        return 0;
       }
-      if (playRegionDomId.value === props.enlargeDomId || userId === localUserId) {
-        return kCameraStream;
+      return Number(props.aspectRatio.split(":")[1]);
+    });
+    function handleStreamRegionSize() {
+      if (!streamRegionContainerRef.value) {
+        return;
       }
-      if (streamType === kCameraStream) {
-        return defaultStreamType;
+      const containerWidth = streamRegionContainerRef.value.offsetWidth;
+      const containerHeight = streamRegionContainerRef.value.offsetHeight;
+      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;
+        }
       }
-      return streamType;
-    });
-    const startPlayRemoteVideo = async () => {
-      var _a, _b;
-      const { userId } = props.stream;
-      loading.value = true;
-      (_a = roomEngine.instance) == null ? void 0 : _a.setRemoteVideoView({ userId, streamType: streamTypeToFetch.value, view: `${playRegionDomId.value}` });
-      await ((_b = roomEngine.instance) == null ? void 0 : _b.startPlayRemoteVideo({ userId, streamType: streamTypeToFetch.value }));
-      loading.value = false;
-    };
-    const stopPlayRemoteVideo = async () => {
-      var _a;
-      loading.value = false;
-      await ((_a = roomEngine.instance) == null ? void 0 : _a.stopPlayRemoteVideo({ userId: props.stream.userId, streamType: streamTypeToFetch.value }));
-    };
-    if (props.stream.streamType === TUIVideoStreamType.kCameraStream || props.stream.streamType === TUIVideoStreamType.kCameraStreamLow) {
-      watch(
-        () => [props.stream.hasVideoStream, props.stream.isVisible],
-        async (val, oldVal) => {
-          if (props.stream.userId === basicStore.userId) {
-            return;
-          }
-          const [hasVideoStream, isVisible] = val;
-          if (hasVideoStream && isVisible) {
-            await nextTick();
-            const userIdEl = document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              logger.debug(`${logPrefix}watch isVideoStreamAvailable:`, props.stream.userId, userIdEl);
-              await startPlayRemoteVideo();
-            }
-          }
-          if (oldVal) {
-            const [oldHasVideoStream, oldIsVisible] = oldVal;
-            if (oldHasVideoStream && oldIsVisible && (!hasVideoStream || !isVisible)) {
-              await stopPlayRemoteVideo();
-            }
-          }
-        },
-        { immediate: true }
-      );
+      streamStyle.value.width = `${width}px`;
+      streamStyle.value.height = `${height}px`;
     }
-    if (props.stream.streamType === TUIVideoStreamType.kScreenStream) {
-      watch(
-        () => [props.stream.hasScreenStream, props.stream.isVisible],
-        async (val, oldVal) => {
-          if (props.stream.userId === basicStore.userId) {
-            return;
-          }
-          const [hasScreenStream, isVisible] = val;
-          if (hasScreenStream && isVisible) {
-            await nextTick();
-            const userIdEl = document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              logger.debug(`${logPrefix}watch isScreenStreamAvailable:`, props.stream.userId, userIdEl);
-              await startPlayRemoteVideo();
-            }
-          }
-          if (oldVal) {
-            const [oldHasScreenStream, oldIsVisible] = oldVal;
-            if (oldHasScreenStream && oldIsVisible && (!hasScreenStream || !isVisible)) {
-              await stopPlayRemoteVideo();
-            }
-          }
-        },
-        { immediate: true }
-      );
-    }
-    watch(
-      () => props.enlargeDomId,
-      async (val, oldVal) => {
-        var _a;
-        if (playRegionDomId.value === oldVal || playRegionDomId.value === val) {
-          await nextTick();
-          const userIdEl = document.getElementById(`${playRegionDomId.value}`);
-          if (userIdEl) {
-            if (basicStore.userId === props.stream.userId) {
-              if (props.stream.hasVideoStream) {
-                await ((_a = roomEngine.instance) == null ? void 0 : _a.setLocalVideoView({
-                  view: `${playRegionDomId.value}`
-                }));
-              }
-            } else {
-              await startPlayRemoteVideo();
-            }
-          }
-        }
-      },
-      { immediate: true }
-    );
+    const ro = new ResizeObserver(() => {
+      handleStreamRegionSize();
+    });
+    onMounted(() => {
+      ro.observe(streamRegionContainerRef.value);
+    });
+    onBeforeUnmount(() => {
+      ro.unobserve(streamRegionContainerRef.value);
+    });
     return (_ctx, _cache) => {
-      return playRegionDomId.value !== _ctx.enlargeDomId ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        ref_key: "streamRegionRef",
-        ref: streamRegionRef,
-        class: "user-stream-container",
-        onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick"))
+      return openBlock(), createElementBlock("div", {
+        class: "stream-region-container",
+        ref_key: "streamRegionContainerRef",
+        ref: streamRegionContainerRef
       }, [
-        isLocalScreen.value ? (openBlock(), createBlock(LocalScreenStream, {
-          key: 0,
-          "is-mini-region": isMiniRegion.value
-        }, null, 8, ["is-mini-region"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          loading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createVNode(SvgIcon, {
-              icon: LoadingIcon,
-              class: "loading"
-            })
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            id: playRegionDomId.value,
-            class: "stream-region"
-          }, null, 8, _hoisted_2),
-          !_ctx.stream.hasVideoStream && !_ctx.stream.hasScreenStream ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            ref_key: "centerUserInfoRef",
-            ref: centerUserInfoRef,
-            class: "center-user-info-container"
-          }, [
-            createVNode(TuiAvatar, {
-              class: "avatar-region",
-              "img-src": _ctx.stream.avatarUrl
-            }, null, 8, ["img-src"])
-          ], 512)) : 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,
-              "user-id": _ctx.stream.userId,
-              "is-muted": !_ctx.stream.hasAudioStream,
-              size: "small"
-            }, null, 8, ["user-id", "is-muted"])) : createCommentVNode("", true),
-            isScreenStream.value ? (openBlock(), createBlock(SvgIcon, {
-              key: 2,
-              icon: ScreenOpenIcon,
-              class: "screen-icon"
-            })) : createCommentVNode("", true),
-            createElementVNode("span", {
-              class: "user-name",
-              title: userInfo.value
-            }, toDisplayString(userInfo.value), 9, _hoisted_4),
-            isScreenStream.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("is sharing their screen")), 1)) : createCommentVNode("", true)
-          ])
-        ], 64))
-      ], 544)) : createCommentVNode("", true);
+        withDirectives((openBlock(), createElementBlock("div", {
+          class: "stream-region",
+          onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick")),
+          style: normalizeStyle(streamStyle.value)
+        }, [
+          isLocalScreen.value ? (openBlock(), createBlock(LocalScreenView, {
+            key: 0,
+            streamInfo: _ctx.streamInfo,
+            isMiniRegion: !_ctx.isEnlarge
+          }, null, 8, ["streamInfo", "isMiniRegion"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createVNode(StreamPlay, {
+              streamInfo: _ctx.streamInfo,
+              isEnlarge: _ctx.isEnlarge,
+              isNeedPlayStream: _ctx.isNeedPlayStream,
+              observerViewInVisible: _ctx.observerViewInVisible
+            }, null, 8, ["streamInfo", "isEnlarge", "isNeedPlayStream", "observerViewInVisible"]),
+            createVNode(StreamCover, { streamInfo: _ctx.streamInfo }, null, 8, ["streamInfo"])
+          ], 64))
+        ], 36)), [
+          [
+            unref(vDblTouch),
+            () => {
+              _ctx.$emit("room-dblclick");
+            }
+          ]
+        ])
+      ], 512);
     };
   }
 });

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

@@ -1,6 +1,6 @@
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     showRoomTool: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     showRoomTool: boolean;
 }>>>, {}, {}>;
 export default _default;

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

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

package/es/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/es/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue.mjs

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

package/es/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue2.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList } from "vue";
 import ApplyStageLabelIcon from "../../../common/icons/ApplyStageLabelIcon.vue.mjs";
 import useMasterApplyControl from "../../../../hooks/useMasterApplyControl.mjs";
-import TuiAvatar from "../../../common/Avatar.vue.mjs";
+import Avatar from "../../../common/Avatar.vue.mjs";
 import Dialog from "../../../common/base/Dialog/index.vue.mjs";
 import SvgIcon from "../../../common/base/SvgIcon.vue.mjs";
 import TuiButton from "../../../common/base/Button.vue.mjs";
@@ -86,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   class: "apply-item"
                 }, [
                   createElementVNode("div", _hoisted_5, [
-                    createVNode(TuiAvatar, {
+                    createVNode(Avatar, {
                       class: "avatar-url",
                       "img-src": item.avatarUrl
                     }, null, 8, ["img-src"]),

package/es/components/RoomFooter/ApplyControl/MemberApplyControl.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/es/components/RoomFooter/ApplyControl/MemberApplyControl.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./MemberApplyControl.vue2.mjs";
-import "./MemberApplyControl.vue3.mjs";
+/* empty css                         */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const MemberApplyControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-915fbd92"]]);
+const MemberApplyControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9768c70f"]]);
 export {
   MemberApplyControl as default
 };

package/es/components/RoomFooter/ApplyControl/MemberApplyControl.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, unref, toDisplayString, createCommentVNode, withCtx, createTextVNode } from "vue";
+import { defineComponent, ref, watch, computed, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, createVNode, unref, normalizeClass, toDisplayString, createCommentVNode, withCtx, createTextVNode } from "vue";
 import { isMobile } from "../../../utils/environment.mjs";
 import IconButton from "../../common/base/IconButton.vue.mjs";
 import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
@@ -15,8 +15,9 @@ import { useI18n } from "../../../locales/index.mjs";
 import { storeToRefs } from "pinia";
 import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
 import logger from "../../../utils/common/logger/index.mjs";
-import TUIRoomEngine__default, { TUIRole, TUIErrorCode, TUIRoomEvents, TUIRequestCallbackType, TUIRequestAction } from "@tencentcloud/tuiroom-engine-electron";
+import TUIRoomEngine__default, { TUIRole, TUIErrorCode, TUIRoomEvents, TUIRequestAction, TUIRequestCallbackType } from "@tencentcloud/tuiroom-engine-electron";
 import TuiButton from "../../common/base/Button.vue.mjs";
+import { debounce } from "../../../utils/utils.mjs";
 const _hoisted_1 = { class: "apply-control-container" };
 const _hoisted_2 = {
   key: 0,
@@ -41,21 +42,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const currentDialogTitle = ref("");
     const currentConfirmButton = ref("");
     const currentDialogType = ref("inviteDialog");
-    watch([localUser, isApplyingOnSeat, lang], ([localUser2, isApplyingOnSeat2]) => {
-      if (localUser2.onSeat) {
-        iconName.value = StepDownIcon;
-        iconTitle.value = t("Step down");
-        hideApplyAttention();
-      } else {
-        if (isApplyingOnSeat2) {
-          iconName.value = CancelStageIcon;
-          iconTitle.value = t("Cancel Apply");
+    watch(
+      [localUser, isApplyingOnSeat, lang],
+      ([localUser2, isApplyingOnSeat2]) => {
+        if (localUser2.onSeat) {
+          iconName.value = StepDownIcon;
+          iconTitle.value = t("Step down");
+          hideApplyAttention();
         } else {
-          iconName.value = ApplyStageIcon;
-          iconTitle.value = t("Apply for the stage");
+          if (isApplyingOnSeat2) {
+            iconName.value = CancelStageIcon;
+            iconTitle.value = t("Cancel Apply");
+          } else {
+            iconName.value = ApplyStageIcon;
+            iconTitle.value = t("Apply for the stage");
+          }
         }
-      }
-    }, { immediate: true, deep: true });
+      },
+      { immediate: true, deep: true }
+    );
+    const toggleApplySpeechDebounce = debounce(toggleApplySpeech, 300);
     async function toggleApplySpeech() {
       hideApplyAttention();
       if (localUser.value.onSeat) {
@@ -72,13 +78,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleCancel: () => handleInvite(false)
     };
     const leaveSeatDialogInfo = computed(() => ({
-      content: localUser.value.userRole === TUIRole.kAdministrator ? t("To go on stage again, a new application needs to be initiated") : t("To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve"),
+      content: localUser.value.userRole === TUIRole.kAdministrator ? t("To go on stage again, a new application needs to be initiated") : t(
+        "To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve"
+      ),
       confirmButtonText: t("Step down"),
       cancelButtonText: t("Cancel"),
       handleConfirm: () => leaveSeat(),
       handleCancel: () => handleStepDownDialogVisible()
     }));
-    const currentDialogInfo = computed(() => currentDialogType.value === "inviteDialog" ? inviteDialogInfo : leaveSeatDialogInfo.value);
+    const currentDialogInfo = computed(
+      () => currentDialogType.value === "inviteDialog" ? inviteDialogInfo : leaveSeatDialogInfo.value
+    );
     async function sendSeatApplication() {
       var _a, _b;
       if (isAdmin.value) {
@@ -104,10 +114,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderMsg({ type: "success", message: t("Succeed on stage") });
               break;
             case TUIRequestCallbackType.kRequestRejected:
-              renderMsg({ type: "warning", message: t("Application to go on stage was rejected") });
+              renderMsg({
+                type: "warning",
+                message: t("Application to go on stage was rejected")
+              });
               break;
             case TUIRequestCallbackType.kRequestTimeout:
-              renderMsg({ type: "warning", message: t("The request to go on stage has timed out") });
+              renderMsg({
+                type: "warning",
+                message: t("The request to go on stage has timed out")
+              });
               break;
           }
         }
@@ -125,7 +141,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         duration: MESSAGE_DURATION.NORMAL
       });
       try {
-        await ((_a = roomEngine.instance) == null ? void 0 : _a.cancelRequest({ requestId: applyToAnchorRequestId.value }));
+        await ((_a = roomEngine.instance) == null ? void 0 : _a.cancelRequest({
+          requestId: applyToAnchorRequestId.value
+        }));
         isApplyingOnSeat.value = false;
       } catch (error) {
         logger.log("member cancelSpeechApplication", error);
@@ -146,16 +164,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
         roomStore.setCanControlSelfAudio(false);
       }
+      basicStore.setIsOpenMic(false);
     }
     function hideApplyAttention() {
       showMemberApplyAttention.value = false;
     }
     async function onRequestReceived(eventInfo) {
-      const { request: { userId, requestId, requestAction } } = eventInfo;
+      const {
+        request: { userId, requestId, requestAction }
+      } = eventInfo;
       if (requestAction === TUIRequestAction.kRequestRemoteUserOnSeat) {
         inviteToAnchorRequestId.value = requestId;
         const userRole = roomStore.getUserRole(userId) === TUIRole.kRoomOwner ? t("RoomOwner") : t("Admin");
-        currentDialogTitle.value = t("Sb invites you to speak on stage", { role: userRole });
+        currentDialogTitle.value = t("Sb invites you to speak on stage", {
+          role: userRole
+        });
         currentConfirmButton.value = t("Agree to the stage");
         showDialog.value = true;
         currentDialogType.value = "inviteDialog";
@@ -177,9 +200,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }));
       } catch (error) {
         if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
-          renderMsg({ type: "warning", message: t("The stage is full, please contact the host") });
+          renderMsg({
+            type: "warning",
+            message: t("The stage is full, please contact the host")
+          });
         } else {
-          logger.error("Failure of a user to accept/reject a roomOwner invitation", error);
+          logger.error(
+            "Failure of a user to accept/reject a roomOwner invitation",
+            error
+          );
         }
       } finally {
         showDialog.value = false;
@@ -188,7 +217,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     async function onKickedOffSeat() {
       renderMsg({
         type: "warning",
-        message: t("You have been invited by the host to step down, please raise your hand if you need to speak"),
+        message: t(
+          "You have been invited by the host to step down, please raise your hand if you need to speak"
+        ),
         duration: MESSAGE_DURATION.NORMAL
       });
     }
@@ -201,7 +232,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       var _a, _b, _c;
       (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+      (_b = roomEngine.instance) == null ? void 0 : _b.off(
+        TUIRoomEvents.onRequestCancelled,
+        onRequestCancelled
+      );
       (_c = roomEngine.instance) == null ? void 0 : _c.off(TUIRoomEvents.onKickedOffSeat, onKickedOffSeat);
     });
     return (_ctx, _cache) => {
@@ -210,8 +244,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(IconButton, {
             title: iconTitle.value,
             icon: iconName.value,
-            onClickIcon: toggleApplySpeech
-          }, null, 8, ["title", "icon"]),
+            onClickIcon: unref(toggleApplySpeechDebounce)
+          }, null, 8, ["title", "icon", "onClickIcon"]),
           showMemberApplyAttention.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
             createElementVNode("span", {
               class: normalizeClass(unref(isMobile) ? "mobile-info" : "info")