@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

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

@@ -1,176 +1,117 @@
-import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, createBlock, createCommentVNode, vShow, createVNode } from "vue";
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, createVNode, unref } from "vue";
 import { storeToRefs } from "pinia";
 import { useRoomStore } from "../../../stores/room.mjs";
 import { useBasicStore } from "../../../stores/basic.mjs";
 import { LAYOUT } from "../../../constants/render.mjs";
-import StreamRegion from "../StreamRegion/index.vue.mjs";
-import StreamList from "../StreamList/index.vue.mjs";
-import logger from "../../../utils/common/logger/index.mjs";
-import ArrowStrokeTurnPageIcon from "../../common/icons/ArrowStrokeTurnPageIcon.vue.mjs";
+import _sfc_main$1 from "../../Stream/SingleStreamView/index.vue.mjs";
+import MultiStreamView from "../../Stream/MultiStreamView/index.vue.mjs";
 import ArrowStroke from "../../common/ArrowStroke.vue.mjs";
-import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
-import TUIRoomEngine__default, { TUIVideoStreamType, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-electron";
-import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
-const _hoisted_1 = {
-  key: 1,
-  class: "turn-page-container"
-};
-const logPrefix = "[StreamContainer]";
+import useStreamContainer from "./useStreamContainerHooks.mjs";
+import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
-  props: {
-    showRoomTool: { type: Boolean }
-  },
   setup(__props) {
-    const roomEngine = useGetRoomEngine();
     const roomStore = useRoomStore();
-    const { streamList, streamNumber, remoteStreamList } = storeToRefs(roomStore);
+    const {
+      localStream,
+      streamList,
+      remoteStreamList,
+      localScreenStream,
+      remoteScreenStream
+    } = storeToRefs(roomStore);
     const basicStore = useBasicStore();
-    const { layout } = storeToRefs(basicStore);
-    const showSideList = ref(true);
-    const enlargeStream = ref(null);
-    const horizontalCount = ref(1);
-    const verticalCount = ref(1);
-    const currentPageIndex = ref(0);
-    const maxCountEveryPage = computed(
-      () => horizontalCount.value * verticalCount.value
-    );
-    const totalPage = computed(
-      () => Math.ceil(streamList.value.length / maxCountEveryPage.value)
-    );
-    const showTurnPageControl = computed(
-      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && totalPage.value > 1
-    );
-    const showTurnPageLeftArrow = computed(
-      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > 0
-    );
-    const showTurnPageRightArrow = computed(
-      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value < totalPage.value - 1
-    );
-    function handleTurnPageLeft() {
-      currentPageIndex.value = currentPageIndex.value - 1;
-    }
-    function handleTurnPageRight() {
-      currentPageIndex.value = currentPageIndex.value + 1;
-    }
-    const showStreamList = computed(() => {
+    const { showRoomTool, layout } = storeToRefs(basicStore);
+    const { getStreamKey } = useStreamContainer();
+    const maxColumn = ref();
+    const maxRow = ref();
+    const excludeStreamInfoList = computed(() => {
       var _a;
-      if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
-        return streamList.value.slice(
-          currentPageIndex.value * maxCountEveryPage.value,
-          (currentPageIndex.value + 1) * maxCountEveryPage.value
-        );
-      }
       if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIVideoStreamType.kScreenStream) {
-        return streamList.value.filter((item) => item !== enlargeStream.value);
+        return [enlargeStream.value];
       }
-      return streamList.value;
+      return [];
     });
-    watch(
-      () => streamList.value.length,
-      (val) => {
-        if (val === 1) {
-          basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
-          enlargeStream.value = null;
-          return;
-        }
-      }
+    const isSideListLayout = computed(
+      () => [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
     );
-    const streamContainerClass = ref("stream-container-flatten");
-    const enlargedContainerRef = ref();
-    const arrowDirection = computed(() => {
-      let arrowDirection2 = "right";
-      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
-        arrowDirection2 = showSideList.value ? "up" : "down";
+    const fixedStream = ref(null);
+    const enlargeStream = computed(() => {
+      if (!isSideListLayout.value) {
+        return null;
       }
-      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
-        arrowDirection2 = showSideList.value ? "right" : "left";
+      if (fixedStream.value) {
+        return fixedStream.value;
       }
-      return arrowDirection2;
-    });
-    const strokePosition = computed(() => {
-      let strokePosition2 = "";
-      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
-        strokePosition2 = "bottom";
-      }
-      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
-        strokePosition2 = "left";
+      if (localScreenStream.value) {
+        return localScreenStream.value;
       }
-      return strokePosition2;
-    });
-    function handleClickIcon() {
-      showSideList.value = !showSideList.value;
-    }
-    function getEnlargeStream() {
-      var _a;
-      if ((_a = roomStore.localScreenStream) == null ? void 0 : _a.hasVideoStream) {
-        return roomStore.localScreenStream;
+      if (remoteScreenStream.value) {
+        return remoteScreenStream.value;
       }
       if (remoteStreamList.value.length > 0) {
-        const remoteScreenStream = remoteStreamList.value.find(
-          (stream) => stream.streamType === TUIVideoStreamType.kScreenStream && stream.hasVideoStream
-        );
-        return remoteScreenStream ? remoteScreenStream : remoteStreamList.value[0];
+        return remoteStreamList.value[0];
       }
-      return roomStore.localStream;
-    }
-    async function handleNineEqualPointsLayout() {
-      streamContainerClass.value = "stream-container-flatten";
-      enlargeStream.value = null;
-      horizontalCount.value = Math.min(
-        Math.ceil(Math.sqrt(streamList.value.length)),
-        3
-      );
-      verticalCount.value = Math.min(
-        Math.ceil(streamList.value.length / horizontalCount.value),
-        3
-      );
-      currentPageIndex.value = 0;
-    }
-    async function handleRightSideListLayout() {
-      streamContainerClass.value = "stream-container-right";
-      horizontalCount.value = 1;
-      verticalCount.value = Infinity;
-      if (!enlargeStream.value) {
-        enlargeStream.value = getEnlargeStream();
+      return localStream.value;
+    });
+    watch(
+      () => streamList.value.length,
+      (val) => {
+        if (val === 1 && isSideListLayout.value) {
+          basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
+        }
       }
-    }
-    async function handleTopSideListLayout() {
-      streamContainerClass.value = "stream-container-top";
-      horizontalCount.value = Infinity;
-      verticalCount.value = 1;
-      if (!enlargeStream.value) {
-        enlargeStream.value = getEnlargeStream();
+    );
+    watch(
+      () => {
+        var _a, _b;
+        return ((_a = localScreenStream.value) == null ? void 0 : _a.hasVideoStream) || ((_b = remoteScreenStream.value) == null ? void 0 : _b.hasVideoStream);
+      },
+      (val, oldVal) => {
+        if (val && !oldVal) {
+          fixedStream.value = null;
+          if (!isSideListLayout.value) {
+            basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
+          }
+        }
       }
-    }
-    function handleEnlargeStreamRegion(stream) {
-      if (layout.value === LAYOUT.NINE_EQUAL_POINTS && streamList.value.length > 1) {
+    );
+    watch(
+      () => streamList.value.map((stream) => getStreamKey(stream)),
+      (val, oldVal) => {
+        if (fixedStream.value) {
+          const fixedStreamKey = getStreamKey(fixedStream.value);
+          if (!val.includes(fixedStreamKey) && oldVal.includes(fixedStreamKey)) {
+            fixedStream.value = null;
+          }
+        }
+      }
+    );
+    function handleStreamViewDblclick(stream) {
+      if (!isSideListLayout.value && streamList.value.length > 1) {
         basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
       }
-      enlargeStream.value = stream;
+      fixedStream.value = stream;
     }
+    const streamContainerClass = ref("stream-container-flatten");
     async function handleLayout() {
       switch (layout.value) {
         case LAYOUT.NINE_EQUAL_POINTS:
-          handleNineEqualPointsLayout();
+          streamContainerClass.value = "stream-container-flatten";
+          maxColumn.value = 3;
+          maxRow.value = 3;
           break;
         case LAYOUT.RIGHT_SIDE_LIST:
-          handleRightSideListLayout();
+          streamContainerClass.value = "stream-container-right";
+          maxColumn.value = 1;
+          maxRow.value = Infinity;
           break;
         case LAYOUT.TOP_SIDE_LIST:
-          handleTopSideListLayout();
+          streamContainerClass.value = "stream-container-top";
+          maxColumn.value = Infinity;
+          maxRow.value = 1;
           break;
       }
     }
-    watch(streamNumber, (val) => {
-      if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
-        horizontalCount.value = Math.min(Math.ceil(Math.sqrt(val)), 3);
-        verticalCount.value = Math.min(Math.ceil(val / horizontalCount.value), 3);
-        if (currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
-          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
-        }
-      }
-    });
     watch(
       layout,
       () => {
@@ -178,147 +119,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const showIconControl = computed(
-      () => [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
-    );
-    const onUserVideoStateChanged = (eventInfo) => {
-      var _a, _b;
-      const { userId, streamType, hasVideo } = eventInfo;
-      if (streamType === TUIVideoStreamType.kScreenStream) {
-        if (hasVideo) {
-          enlargeStream.value = userId === basicStore.userId ? roomStore.localScreenStream : roomStore.streamInfoObj[`${userId}_${streamType}`];
-          if (enlargeStream.value && [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) === -1) {
-            basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
-          }
-          if (userId !== basicStore.userId) {
-            roomStore.setHasOtherScreenShare(true);
-          }
-        } else {
-          if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
-            handleLargeStreamLeave();
-          }
-          if (userId !== basicStore.userId) {
-            roomStore.setHasOtherScreenShare(false);
-          }
-          logger.debug(
-            `${logPrefix} onUserVideoStateChanged: stop`,
-            userId,
-            streamType
-          );
-          (_b = roomEngine.instance) == null ? void 0 : _b.stopPlayRemoteVideo({
-            userId,
-            streamType
-          });
-        }
+    const showSideList = ref(true);
+    const arrowDirection = computed(() => {
+      let arrowDirection2 = "right";
+      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
+        arrowDirection2 = showSideList.value ? "up" : "down";
       }
-    };
-    const onSeatListChanged = (eventInfo) => {
-      var _a;
-      const { leftList } = eventInfo;
-      const leftUserIdList = leftList.map((item) => item.userId);
-      if (enlargeStream.value && leftUserIdList.includes((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
-        handleLargeStreamLeave();
+      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
+        arrowDirection2 = showSideList.value ? "right" : "left";
       }
-    };
-    const onRemoteUserLeaveRoom = (eventInfo) => {
-      var _a;
-      const {
-        userInfo: { userId }
-      } = eventInfo;
-      if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
-        handleLargeStreamLeave();
+      return arrowDirection2;
+    });
+    const strokePosition = computed(() => {
+      let strokePosition2 = "";
+      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
+        strokePosition2 = "bottom";
       }
-    };
-    const handleLargeStreamLeave = () => {
-      if (roomStore.remoteStreamList.length === 0) {
-        basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
-        enlargeStream.value = null;
-      } else {
-        [enlargeStream.value] = roomStore.remoteStreamList;
+      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
+        strokePosition2 = "left";
       }
-    };
-    TUIRoomEngine__default.once("ready", () => {
-      var _a, _b, _c;
-      (_a = roomEngine.instance) == null ? void 0 : _a.on(
-        TUIRoomEvents.onRemoteUserLeaveRoom,
-        onRemoteUserLeaveRoom
-      );
-      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_c = roomEngine.instance) == null ? void 0 : _c.on(
-        TUIRoomEvents.onUserVideoStateChanged,
-        onUserVideoStateChanged
-      );
-    });
-    onUnmounted(() => {
-      var _a, _b, _c;
-      (_a = roomEngine.instance) == null ? void 0 : _a.off(
-        TUIRoomEvents.onRemoteUserLeaveRoom,
-        onRemoteUserLeaveRoom
-      );
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_c = roomEngine.instance) == null ? void 0 : _c.off(
-        TUIRoomEvents.onUserVideoStateChanged,
-        onUserVideoStateChanged
-      );
+      return strokePosition2;
     });
+    function handleClickIcon() {
+      showSideList.value = !showSideList.value;
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         id: "streamContainer",
         class: normalizeClass(streamContainerClass.value)
       }, [
-        withDirectives(createElementVNode("div", {
-          ref_key: "enlargedContainerRef",
-          ref: enlargedContainerRef,
-          class: "enlarged-stream-container"
-        }, [
-          enlargeStream.value ? (openBlock(), createBlock(StreamRegion, {
-            key: 0,
-            streamInfo: enlargeStream.value,
-            aspectRatio: "16:9",
-            isEnlarge: true,
-            observerViewInVisible: true
-          }, null, 8, ["streamInfo"])) : createCommentVNode("", true)
-        ], 512), [
-          [vShow, enlargeStream.value]
-        ]),
-        createVNode(StreamList, {
-          class: normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`]),
-          streamInfoList: showStreamList.value,
-          horizontalCount: horizontalCount.value,
-          verticalCount: verticalCount.value,
-          aspectRatio: "16:9",
-          observerViewInVisible: true,
-          onRoomDblclick: handleEnlargeStreamRegion
-        }, null, 8, ["class", "streamInfoList", "horizontalCount", "verticalCount"]),
-        showIconControl.value && (_ctx.showRoomTool || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
+        enlargeStream.value ? (openBlock(), createBlock(_sfc_main$1, {
           key: 0,
+          class: "enlarged-stream-container",
+          streamInfo: enlargeStream.value
+        }, null, 8, ["streamInfo"])) : createCommentVNode("", true),
+        createVNode(MultiStreamView, {
+          class: normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`]),
+          maxColumn: maxColumn.value,
+          maxRow: maxRow.value,
+          excludeStreamInfoList: excludeStreamInfoList.value,
+          onStreamViewDblclick: handleStreamViewDblclick
+        }, null, 8, ["class", "maxColumn", "maxRow", "excludeStreamInfoList"]),
+        isSideListLayout.value && (unref(showRoomTool) || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
+          key: 1,
           class: normalizeClass([`arrow-stroke-${arrowDirection.value}`]),
           "stroke-position": strokePosition.value,
           "arrow-direction": arrowDirection.value,
           "has-stroke": showSideList.value,
           onClickArrow: handleClickIcon
-        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : createCommentVNode("", true),
-        showTurnPageControl.value && _ctx.showRoomTool ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          withDirectives(createElementVNode("div", {
-            class: "turn-page-arrow-container left-container",
-            onClick: handleTurnPageLeft
-          }, [
-            createVNode(SvgIcon, { icon: ArrowStrokeTurnPageIcon })
-          ], 512), [
-            [vShow, showTurnPageLeftArrow.value]
-          ]),
-          withDirectives(createElementVNode("div", {
-            class: "turn-page-arrow-container right-container",
-            onClick: handleTurnPageRight
-          }, [
-            createVNode(SvgIcon, {
-              class: "turn-page-right",
-              icon: ArrowStrokeTurnPageIcon
-            })
-          ], 512), [
-            [vShow, showTurnPageRightArrow.value]
-          ])
-        ])) : createCommentVNode("", true)
+        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : createCommentVNode("", true)
       ], 2);
     };
   }

package/es/components/RoomContent/StreamContainer/useStreamContainerHooks.d.ts

@@ -1,13 +1,6 @@
-import { Ref } from 'vue';
 import { StreamInfo } from '../../../stores/room';
 
 export default function useStreamContainer(): {
-    currentRemoteSpeakerUserId: Ref<string>;
-    currentSpeakerUserId: Ref<string>;
-    onUserVoiceVolumeChanged: (eventInfo: {
-        userVolumeList: any[];
-    }) => void;
-    isSameStream: (stream1: StreamInfo | null, stream2: StreamInfo | null) => boolean;
-    getStreamKey: (stream: StreamInfo | null) => string;
-    t: any;
+    isSameStream: (stream1: StreamInfo | null | undefined, stream2: StreamInfo | null | undefined) => boolean;
+    getStreamKey: (stream: StreamInfo | null | undefined) => string;
 };

package/es/components/RoomContent/StreamContainer/useStreamContainerHooks.mjs

@@ -0,0 +1,11 @@
+function useStreamContainer() {
+  const isSameStream = (stream1, stream2) => getStreamKey(stream1) === getStreamKey(stream2);
+  const getStreamKey = (stream) => `${stream == null ? void 0 : stream.userId}_${stream == null ? void 0 : stream.streamType}`;
+  return {
+    isSameStream,
+    getStreamKey
+  };
+}
+export {
+  useStreamContainer as default
+};

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

@@ -1,15 +1,2 @@
-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<{
-    showRoomTool: boolean;
-}>>>, {}, {}>;
+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;
-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/index.vue.mjs

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

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

@@ -3,13 +3,10 @@ import StreamContainer from "./StreamContainer/index.vue.mjs";
 const _hoisted_1 = { class: "content-container" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
-  props: {
-    showRoomTool: { type: Boolean }
-  },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(StreamContainer, { "show-room-tool": _ctx.showRoomTool }, null, 8, ["show-room-tool"])
+        createVNode(StreamContainer)
       ]);
     };
   }

package/es/components/RoomFooter/AIControl.vue.d.ts

@@ -1,6 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "show-overlay": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+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/AIControl.vue.mjs

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

package/es/components/RoomFooter/AIControl.vue2.mjs

@@ -7,11 +7,12 @@ import "../../services/main.mjs";
 import { roomService } from "../../services/roomService.mjs";
 import { useI18n } from "../../locales/index.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
+import "../../utils/environment.mjs";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
 import "@tencentcloud/tui-core";
-import "../../utils/environment.mjs";
 import SvgIcon from "../common/base/SvgIcon.vue.mjs";
+import { OverlayMap, useRoomOverlayHooks } from "../RoomOverlay/useRoomOverlayHooks.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "more-control-container"
@@ -24,10 +25,9 @@ const _hoisted_3 = { key: 0 };
 const _hoisted_4 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AIControl",
-  emits: ["show-overlay"],
-  setup(__props, { emit: __emit }) {
+  setup(__props) {
+    const { toggleOverlayVisibility } = useRoomOverlayHooks();
     const { t } = useI18n();
-    const emit = __emit;
     const AIControlConfig = roomService.getComponentConfig("AIControl");
     const { basicStore } = roomService;
     const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
@@ -53,10 +53,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const openAISubtitles = () => {
       showSubtitles.value = !showSubtitles.value;
       showToolBox.value = false;
-      emit("show-overlay", {
-        name: "AISubtitlesOverlay",
-        visible: showSubtitles.value
-      });
+      toggleOverlayVisibility(OverlayMap.AISubtitlesOverlay, showSubtitles.value);
     };
     return (_ctx, _cache) => {
       return unref(AIControlConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [

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

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createTextVNode } from "vue";
+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 Avatar from "../../../common/Avatar.vue.mjs";
@@ -9,10 +9,10 @@ import "../../../../services/main.mjs";
 import { roomService } from "../../../../services/roomService.mjs";
 import "../../../../locales/index.mjs";
 import "@tencentcloud/tuiroom-engine-electron";
+import "../../../../utils/environment.mjs";
 import "mitt";
 import "../../../../services/manager/roomActionManager.mjs";
 import "@tencentcloud/tui-core";
-import "../../../../utils/environment.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "apply-list"

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

@@ -15,7 +15,7 @@ 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, { TUIErrorCode, TUIRole, TUIRoomEvents, TUIRequestAction, TUIRequestCallbackType } 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" };

package/es/components/RoomFooter/AudioControl.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, onUnmounted, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, toDisplayString, createTextVNode } from "vue";
+import { defineComponent, computed, ref, onUnmounted, openBlock, createElementBlock, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode } from "vue";
 import { storeToRefs } from "pinia";
 import renderMsg from "../common/base/Message/Message.mjs";
 import Dialog from "../common/base/Dialog/index.vue.mjs";

package/es/components/RoomFooter/BasicBeauty.vue.mjs

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

package/es/components/RoomFooter/BasicBeauty.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, reactive, unref, openBlock, createElementBlock, createVNode, nextTick, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass, withDirectives, isRef, vModelCheckbox, createTextVNode } from "vue";
+import { defineComponent, ref, computed, watch, reactive, unref, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass, withDirectives, isRef, vModelCheckbox, createTextVNode, nextTick } from "vue";
 import { storeToRefs } from "pinia";
 import IconButton from "../common/base/IconButton.vue.mjs";
 import SvgIcon from "../common/base/SvgIcon.vue.mjs";
@@ -6,13 +6,13 @@ import BasicBeautyIcon from "../common/icons/BasicBeautyIcon.vue.mjs";
 import { useI18n } from "../../locales/index.mjs";
 import "../../services/main.mjs";
 import { roomService } from "../../services/roomService.mjs";
-import { TRTCVideoFillMode, TRTCVideoRotation, TRTCVideoMirrorType } from "@tencentcloud/tuiroom-engine-electron";
+import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from "@tencentcloud/tuiroom-engine-electron";
+import { isMobile } from "../../utils/environment.mjs";
+import { throttle } from "../../utils/utils.mjs";
 import "mitt";
 import "../../services/manager/roomActionManager.mjs";
 import "@tencentcloud/tui-core";
 import { MetricsKey } from "../../services/manager/dataReportManager.mjs";
-import { isMobile } from "../../utils/environment.mjs";
-import { throttle } from "../../utils/utils.mjs";
 import Dialog from "../common/base/Dialog/index.vue.mjs";
 import TuiButton from "../common/base/Button.vue.mjs";
 import Slider from "../common/base/Slider.vue.mjs";
@@ -68,7 +68,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isBeautyStarted = ref(false);
     const componentConfig = roomService.componentManager.getComponentConfig("BasicBeauty");
     const isAllowed = computed(
-      () => roomService.roomStore.localStream.hasVideoStream
+      () => {
+        var _a;
+        return (_a = roomService.roomStore.localStream) == null ? void 0 : _a.hasVideoStream;
+      }
     );
     watch(isLocalStreamMirror, async (val) => {
       var _a;