@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

package/lib/components/RoomContent/StreamContainer/index.vue2.js

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

package/lib/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/lib/components/RoomContent/StreamContainer/useStreamContainerHooks.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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
+  };
+}
+exports.default = useStreamContainer;

package/lib/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/lib/components/RoomContent/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 RoomContent = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-be119a3f"]]);
+const RoomContent = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-54e0d400"]]);
 exports.default = RoomContent;

package/lib/components/RoomContent/index.vue2.js

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

package/lib/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/lib/components/RoomFooter/AIControl.vue.js

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

package/lib/components/RoomFooter/AIControl.vue2.js

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

package/lib/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue2.js

@@ -11,10 +11,10 @@ require("../../../../services/main.js");
 const roomService = require("../../../../services/roomService.js");
 require("../../../../locales/index.js");
 require("@tencentcloud/tuiroom-engine-electron");
+require("../../../../utils/environment.js");
 require("mitt");
 require("../../../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../../../utils/environment.js");
 const _hoisted_1 = {
   key: 0,
   class: "apply-list"

package/lib/components/RoomFooter/AudioControl.vue2.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Vue = require("vue");
 const pinia = require("pinia");
 const Message = require("../common/base/Message/Message.js");
-const index$2 = require("../common/base/Dialog/index.vue.js");
+const index$1 = require("../common/base/Dialog/index.vue.js");
 const room = require("../../stores/room.js");
 const message = require("../../constants/message.js");
 const index = require("../../locales/index.js");
@@ -13,7 +13,7 @@ const environment = require("../../utils/environment.js");
 const Button = require("../common/base/Button.vue.js");
 const AudioMediaControl = require("../common/AudioMediaControl.vue.js");
 const basic = require("../../stores/basic.js");
-const index$1 = require("../common/base/MessageBox/index.js");
+const index$2 = require("../common/base/MessageBox/index.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "AudioControl",
   emits: ["click"],
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         const microphoneList = await ((_b = roomEngine.instance) == null ? void 0 : _b.getMicDevicesList());
         const hasMicrophoneDevice = microphoneList.length > 0;
         if (!hasMicrophoneDevice && !environment.isWeChat) {
-          index$1.default({
+          index$2.default({
             title: t("Note"),
             message: t("Microphone not detected on current device"),
             confirmButtonText: t("Sure")
@@ -135,7 +135,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           "audio-volume": Vue.unref(userVolumeObj)[Vue.unref(localUser).userId],
           onClick: handleAudioMediaClick
         }, null, 8, ["has-more", "is-muted", "is-disabled", "audio-volume"]),
-        Vue.createVNode(index$2.default, {
+        Vue.createVNode(index$1.default, {
           modelValue: showRequestOpenMicDialog.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showRequestOpenMicDialog.value = $event),
           title: Vue.unref(t)("Tips"),

package/lib/components/RoomFooter/BasicBeauty.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const BasicBeauty_vue_vue_type_script_setup_true_lang = require("./BasicBeauty.vue2.js");
 ;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const BasicBeauty = /* @__PURE__ */ _pluginVue_exportHelper.default(BasicBeauty_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-2e9e258c"]]);
+const BasicBeauty = /* @__PURE__ */ _pluginVue_exportHelper.default(BasicBeauty_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-fe9977d2"]]);
 exports.default = BasicBeauty;

package/lib/components/RoomFooter/BasicBeauty.vue2.js

@@ -9,12 +9,12 @@ const index = require("../../locales/index.js");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const environment = require("../../utils/environment.js");
+const utils = require("../../utils/utils.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
 const dataReportManager = require("../../services/manager/dataReportManager.js");
-const environment = require("../../utils/environment.js");
-const utils = require("../../utils/utils.js");
 const index$1 = require("../common/base/Dialog/index.vue.js");
 const Button = require("../common/base/Button.vue.js");
 const Slider = require("../common/base/Slider.vue.js");
@@ -70,7 +70,10 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const isBeautyStarted = Vue.ref(false);
     const componentConfig = roomService.roomService.componentManager.getComponentConfig("BasicBeauty");
     const isAllowed = Vue.computed(
-      () => roomService.roomService.roomStore.localStream.hasVideoStream
+      () => {
+        var _a;
+        return (_a = roomService.roomService.roomStore.localStream) == null ? void 0 : _a.hasVideoStream;
+      }
     );
     Vue.watch(isLocalStreamMirror, async (val) => {
       var _a;