@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.2

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

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const room = require("../../../../stores/room.js");
+const roomService = require("../../../../services/roomService.js");
+const basic = require("../../../../stores/basic.js");
+const pinia = require("pinia");
+const utils = require("../../../../utils/utils.js");
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    streamInfo: {},
+    isEnlarge: { type: Boolean },
+    isNeedPlayStream: { type: Boolean, default: true },
+    observerViewInVisible: { type: Boolean }
+  },
+  setup(__props) {
+    const mediaManager = roomService.roomService.getMediaManager();
+    const basicStore = basic.useBasicStore();
+    const roomStore = room.useRoomStore();
+    const { defaultStreamType, streamInfoObj } = pinia.storeToRefs(roomStore);
+    const props = __props;
+    const playRegionDomRef = Vue.ref();
+    const nanoId = utils.getNanoId(5);
+    const playRegionDomId = Vue.computed(
+      () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
+    );
+    const streamTypeToFetch = Vue.computed(() => {
+      const { streamType, userId } = props.streamInfo;
+      const { userId: localUserId } = basicStore;
+      if (streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
+        return TUIRoomEngine.TUIVideoStreamType.kScreenStream;
+      }
+      if (props.isEnlarge || userId === localUserId) {
+        return TUIRoomEngine.TUIVideoStreamType.kCameraStream;
+      }
+      return defaultStreamType.value;
+    });
+    async function startPlayVideo() {
+      if (!streamInfoObj.value[`${props.streamInfo.userId}_${props.streamInfo.streamType}`] || !playRegionDomRef.value) {
+        return;
+      }
+      await Vue.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
+      });
+    }
+    Vue.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();
+        }
+      }
+    );
+    Vue.watch(
+      () => streamTypeToFetch,
+      async () => {
+        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+          await startPlayVideo();
+        }
+      }
+    );
+    Vue.onMounted(async () => {
+      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        await startPlayVideo();
+      }
+    });
+    Vue.onBeforeUnmount(async () => {
+      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+        await stopPlayVideo();
+      }
+    });
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", {
+        ref_key: "playRegionDomRef",
+        ref: playRegionDomRef,
+        id: playRegionDomId.value,
+        class: "stream-play-container"
+      }, null, 8, _hoisted_1);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/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/lib/components/RoomContent/StreamRegion/index.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
-require("./index.vue3.js");
+;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const StreamRegion = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-d119ad48"]]);
+const StreamRegion = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-5ad6ef67"]]);
 exports.default = StreamRegion;

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

@@ -1,250 +1,107 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
-const room = require("../../../stores/room.js");
-const Avatar = require("../../common/Avatar.vue.js");
-const basic = require("../../../stores/basic.js");
-const index$1 = require("../../../utils/common/logger/index.js");
-const AudioIcon = require("../../common/AudioIcon.vue.js");
-const SvgIcon = require("../../common/base/SvgIcon.vue.js");
-const UserIcon = require("../../common/icons/UserIcon.vue.js");
-const LoadingIcon = require("../../common/icons/LoadingIcon.vue.js");
-const index = require("../../../locales/index.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
-const useRoomEngine = require("../../../hooks/useRoomEngine.js");
-const constants = require("../../../utils/constants.js");
-const ScreenOpenIcon = require("../../common/icons/ScreenOpenIcon.vue.js");
-const index$2 = require("../LocalScreenStream/index.vue.js");
-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]";
+const index$1 = require("./StreamPlay/index.vue.js");
+const index$2 = require("./StreamCover/index.vue.js");
+const index = require("./LocalScreenView/index.vue.js");
+const basic = require("../../../stores/basic.js");
+const vDblTouch = require("../../../directives/vDblTouch.js");
 const _sfc_main = /* @__PURE__ */ Vue.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 = useRoomEngine.default();
-    const basicStore = basic.useBasicStore();
-    const roomStore = room.useRoomStore();
-    const { t } = index.useI18n();
     const props = __props;
-    const isLocalScreen = Vue.computed(() => props.stream && (props.stream.userId === basicStore.userId && props.stream.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream));
-    const isMiniRegion = Vue.computed(() => !!(props.enlargeDomId && `${props.stream.userId}_${props.stream.streamType}` !== props.enlargeDomId));
-    const streamRegionRef = Vue.ref();
-    const centerUserInfoRef = Vue.ref();
-    const loading = Vue.ref(false);
-    const playRegionDomId = Vue.computed(() => `${props.stream.userId}_${props.stream.streamType}`);
-    const showMasterIcon = Vue.computed(() => {
-      const { userId, streamType } = props.stream;
-      return userId === roomStore.masterUserId && streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStream;
-    });
-    const showAdminIcon = Vue.computed(() => {
-      const { userId, streamType } = props.stream;
-      return roomStore.getUserRole(userId) === TUIRoomEngine.TUIRole.kAdministrator && streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStream;
-    });
-    const showIcon = Vue.computed(() => showMasterIcon.value || showAdminIcon.value);
-    const isScreenStream = Vue.computed(() => props.stream.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream);
-    const userInfo = Vue.computed(() => {
-      if (constants.isInnerScene) {
-        return `${props.stream.nameCard || props.stream.userName} | ${props.stream.userId}`;
+    const basicStore = basic.useBasicStore();
+    const isLocalScreen = Vue.computed(
+      () => props.streamInfo && props.streamInfo.userId === basicStore.userId && props.streamInfo.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream
+    );
+    const streamRegionContainerRef = Vue.ref();
+    const streamStyle = Vue.ref({ width: "", height: "" });
+    const widthRatio = Vue.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]);
     });
-    Vue.watch(
-      () => props.stream.hasVideoStream,
-      async (val) => {
-        var _a, _b;
-        if (props.stream.userId === basicStore.userId && props.stream.streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStream) {
-          if (val) {
-            await Vue.nextTick();
-            const userIdEl = document == null ? void 0 : document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              index$1.default.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 = Vue.computed(() => {
-      const { streamType, userId } = props.stream;
-      const { kScreenStream, kCameraStream } = TUIRoomEngine.TUIVideoStreamType;
-      const { defaultStreamType } = roomStore;
-      const { userId: localUserId } = basicStore;
-      if (streamType === kScreenStream) {
-        return kScreenStream;
+    const heightRatio = Vue.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 === TUIRoomEngine.TUIVideoStreamType.kCameraStream || props.stream.streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStreamLow) {
-      Vue.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 Vue.nextTick();
-            const userIdEl = document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              index$1.default.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 }
-      );
-    }
-    if (props.stream.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
-      Vue.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 Vue.nextTick();
-            const userIdEl = document.getElementById(`${playRegionDomId.value}`);
-            if (userIdEl) {
-              index$1.default.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 }
-      );
+      streamStyle.value.width = `${width}px`;
+      streamStyle.value.height = `${height}px`;
     }
-    Vue.watch(
-      () => props.enlargeDomId,
-      async (val, oldVal) => {
-        var _a;
-        if (playRegionDomId.value === oldVal || playRegionDomId.value === val) {
-          await Vue.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();
+    });
+    Vue.onMounted(() => {
+      ro.observe(streamRegionContainerRef.value);
+    });
+    Vue.onBeforeUnmount(() => {
+      ro.unobserve(streamRegionContainerRef.value);
+    });
     return (_ctx, _cache) => {
-      return playRegionDomId.value !== _ctx.enlargeDomId ? (Vue.openBlock(), Vue.createElementBlock("div", {
-        key: 0,
-        ref_key: "streamRegionRef",
-        ref: streamRegionRef,
-        class: "user-stream-container",
-        onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick"))
+      return Vue.openBlock(), Vue.createElementBlock("div", {
+        class: "stream-region-container",
+        ref_key: "streamRegionContainerRef",
+        ref: streamRegionContainerRef
       }, [
-        isLocalScreen.value ? (Vue.openBlock(), Vue.createBlock(index$2.default, {
-          key: 0,
-          "is-mini-region": isMiniRegion.value
-        }, null, 8, ["is-mini-region"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
-          loading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-            Vue.createVNode(SvgIcon.default, {
-              icon: LoadingIcon.default,
-              class: "loading"
-            })
-          ])) : Vue.createCommentVNode("", true),
-          Vue.createElementVNode("div", {
-            id: playRegionDomId.value,
-            class: "stream-region"
-          }, null, 8, _hoisted_2),
-          !_ctx.stream.hasVideoStream && !_ctx.stream.hasScreenStream ? (Vue.openBlock(), Vue.createElementBlock("div", {
-            key: 1,
-            ref_key: "centerUserInfoRef",
-            ref: centerUserInfoRef,
-            class: "center-user-info-container"
-          }, [
-            Vue.createVNode(Avatar.default, {
-              class: "avatar-region",
-              "img-src": _ctx.stream.avatarUrl
-            }, null, 8, ["img-src"])
-          ], 512)) : Vue.createCommentVNode("", true),
-          Vue.createElementVNode("div", _hoisted_3, [
-            showIcon.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
-              key: 0,
-              class: Vue.normalizeClass(showMasterIcon.value ? "master-icon" : "admin-icon")
-            }, [
-              Vue.createVNode(UserIcon.default)
-            ], 2)) : Vue.createCommentVNode("", true),
-            !isScreenStream.value ? (Vue.openBlock(), Vue.createBlock(AudioIcon.default, {
-              key: 1,
-              "user-id": _ctx.stream.userId,
-              "is-muted": !_ctx.stream.hasAudioStream,
-              size: "small"
-            }, null, 8, ["user-id", "is-muted"])) : Vue.createCommentVNode("", true),
-            isScreenStream.value ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
-              key: 2,
-              icon: ScreenOpenIcon.default,
-              class: "screen-icon"
-            })) : Vue.createCommentVNode("", true),
-            Vue.createElementVNode("span", {
-              class: "user-name",
-              title: userInfo.value
-            }, Vue.toDisplayString(userInfo.value), 9, _hoisted_4),
-            isScreenStream.value ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_5, Vue.toDisplayString(Vue.unref(t)("is sharing their screen")), 1)) : Vue.createCommentVNode("", true)
-          ])
-        ], 64))
-      ], 544)) : Vue.createCommentVNode("", true);
+        Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
+          class: "stream-region",
+          onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick")),
+          style: Vue.normalizeStyle(streamStyle.value)
+        }, [
+          isLocalScreen.value ? (Vue.openBlock(), Vue.createBlock(index.default, {
+            key: 0,
+            streamInfo: _ctx.streamInfo,
+            isMiniRegion: !_ctx.isEnlarge
+          }, null, 8, ["streamInfo", "isMiniRegion"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
+            Vue.createVNode(index$1.default, {
+              streamInfo: _ctx.streamInfo,
+              isEnlarge: _ctx.isEnlarge,
+              isNeedPlayStream: _ctx.isNeedPlayStream,
+              observerViewInVisible: _ctx.observerViewInVisible
+            }, null, 8, ["streamInfo", "isEnlarge", "isNeedPlayStream", "observerViewInVisible"]),
+            Vue.createVNode(index$2.default, { streamInfo: _ctx.streamInfo }, null, 8, ["streamInfo"])
+          ], 64))
+        ], 36)), [
+          [
+            Vue.unref(vDblTouch.default),
+            () => {
+              _ctx.$emit("room-dblclick");
+            }
+          ]
+        ])
+      ], 512);
     };
   }
 });

package/lib/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/lib/components/RoomContent/index.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
-require("./index.vue3.js");
+;/* 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-62c87292"]]);
+const RoomContent = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-be119a3f"]]);
 exports.default = RoomContent;

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

@@ -0,0 +1,6 @@
+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;
+}, {}, {}>;
+export default _default;

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

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

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const IconButton = require("../common/base/IconButton.vue.js");
+const AIIcon = require("../common/icons/AIIcon.vue.js");
+const AITranscription = require("../common/icons/AITranscription.vue.js");
+const AISubtitles = require("../common/icons/AISubtitles.vue.js");
+require("../../services/main.js");
+const roomService = require("../../services/roomService.js");
+const index = require("../../locales/index.js");
+require("@tencentcloud/tuiroom-engine-electron");
+require("mitt");
+require("../../services/manager/roomActionManager.js");
+require("@tencentcloud/tui-core");
+require("../../utils/environment.js");
+const SvgIcon = require("../common/base/SvgIcon.vue.js");
+const _hoisted_1 = {
+  key: 0,
+  class: "more-control-container"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "tool-box"
+};
+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 }) {
+    const { t } = index.useI18n();
+    const emit = __emit;
+    const AIControlConfig = roomService.roomService.getComponentConfig("AIControl");
+    const { basicStore } = roomService.roomService;
+    const isSidebarOpen = Vue.computed(() => basicStore.isSidebarOpen);
+    const sidebarName = Vue.computed(() => basicStore.sidebarName);
+    const showToolBox = Vue.ref(false);
+    const showSubtitles = Vue.ref(false);
+    Vue.watch(isSidebarOpen, (newValue) => {
+      showToolBox.value = newValue && false;
+    });
+    function toggleToolBox() {
+      showToolBox.value = !showToolBox.value;
+    }
+    const toggleAITranscription = () => {
+      if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === "aiTranscription") {
+        basicStore.setSidebarOpenStatus(false);
+        basicStore.setSidebarName("");
+        return;
+      }
+      basicStore.setSidebarOpenStatus(true);
+      basicStore.setSidebarName("aiTranscription");
+      showToolBox.value = false;
+    };
+    const openAISubtitles = () => {
+      showSubtitles.value = !showSubtitles.value;
+      showToolBox.value = false;
+      emit("show-overlay", {
+        name: "AISubtitlesOverlay",
+        visible: showSubtitles.value
+      });
+    };
+    return (_ctx, _cache) => {
+      return Vue.unref(AIControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createVNode(IconButton.default, {
+          "is-active": sidebarName.value === "aiTranscription",
+          title: Vue.unref(t)("AI Assistant"),
+          icon: AIIcon.default,
+          onClickIcon: toggleToolBox
+        }, null, 8, ["is-active", "title"]),
+        !isSidebarOpen.value && showToolBox.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+          Vue.createElementVNode("div", {
+            class: "tool-box-item",
+            onClick: openAISubtitles
+          }, [
+            Vue.createVNode(SvgIcon.default, {
+              class: "icon",
+              icon: AISubtitles.default
+            }),
+            !showSubtitles.value ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Turn on AI real-time subtitles")), 1)) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_4, Vue.toDisplayString(Vue.unref(t)("Turn off AI real-time subtitles")), 1))
+          ]),
+          Vue.createElementVNode("div", {
+            class: "tool-box-item",
+            onClick: toggleAITranscription
+          }, [
+            Vue.createVNode(SvgIcon.default, {
+              class: "icon",
+              icon: AITranscription.default
+            }),
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Enable AI real-time meeting recording")), 1)
+          ])
+        ])) : Vue.createCommentVNode("", true)
+      ])) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/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;