@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const basicStore = basic.useBasicStore();
     const {
       isAudience,
-      localStream,
+      localUser,
       isLocalAudioIconDisable,
       isMicrophoneDisableForAllUser,
       userVolumeObj
@@ -52,7 +52,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         });
         return;
       }
-      if (localStream.value.hasAudioStream) {
+      if (localUser.value.hasAudioStream) {
         await ((_a = roomEngine.instance) == null ? void 0 : _a.muteLocalAudio());
         if (roomStore.isMicrophoneDisableForAllUser) {
           roomStore.setCanControlSelfAudio(false);
@@ -81,7 +81,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       const { userId, requestAction, requestId } = eventInfo.request;
       if (requestAction === TUIRoomEngine.TUIRequestAction.kRequestToOpenRemoteMicrophone) {
         const userRole = roomStore.getUserRole(userId) === TUIRoomEngine.TUIRole.kRoomOwner ? t("RoomOwner") : t("Admin");
-        dialogContent.value = t("Sb invites you to turn on the microphone", { role: userRole });
+        dialogContent.value = t("Sb invites you to turn on the microphone", {
+          role: userRole
+        });
         requestOpenMicRequestId.value = requestId;
         showRequestOpenMicDialog.value = true;
       }
@@ -119,15 +121,18 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     Vue.onUnmounted(() => {
       var _a, _b;
       (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onRequestReceived, onRequestReceived);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEngine.TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+      (_b = roomEngine.instance) == null ? void 0 : _b.off(
+        TUIRoomEngine.TUIRoomEvents.onRequestCancelled,
+        onRequestCancelled
+      );
     });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", null, [
         Vue.createVNode(AudioMediaControl.default, {
           "has-more": hasMore.value,
-          "is-muted": !Vue.unref(localStream).hasAudioStream,
+          "is-muted": !Vue.unref(localUser).hasAudioStream,
           "is-disabled": Vue.unref(isLocalAudioIconDisable),
-          "audio-volume": Vue.unref(userVolumeObj)[Vue.unref(localStream).userId],
+          "audio-volume": Vue.unref(userVolumeObj)[Vue.unref(localUser).userId],
           onClick: handleAudioMediaClick
         }, null, 8, ["has-more", "is-muted", "is-disabled", "audio-volume"]),
         Vue.createVNode(index$1.default, {

package/lib/components/RoomFooter/ChatControl.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/lib/components/RoomFooter/EndControl/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/lib/components/RoomFooter/EndControl/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 EndControl = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-288c67ea"]]);
+const EndControl = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-99d2acdf"]]);
 exports.default = EndControl;

package/lib/components/RoomFooter/EndControl/index.vue2.js

@@ -2,12 +2,12 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
 const Button = require("../../common/base/Button.vue.js");
-const Select = require("../../common/base/Select.vue.js");
-const Option = require("../../common/base/Option.vue.js");
+const index$1 = require("../../common/base/Select/index.vue.js");
+const index$2 = require("../../common/base/Option/index.vue.js");
 const index = require("../../common/base/Dialog/index.vue.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 const useEndControlHooks = require("./useEndControlHooks.js");
-const index$1 = require("../../../utils/common/logger/index.js");
+const index$3 = require("../../../utils/common/logger/index.js");
 require("../../../services/main.js");
 const roomService = require("../../../services/roomService.js");
 require("../../../locales/index.js");
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       resetState,
       isMasterWithOneRemoteUser,
       isMasterWithRemoteUser,
-      remoteUserList
+      remoteEnteredUserList
     } = useEndControlHooks.default();
     function handleEndBtnClick() {
       stopMeeting();
@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         return;
       }
       if (isMasterWithRemoteUser.value) {
-        selectedUser.value = remoteUserList.value[0].userId;
+        selectedUser.value = remoteEnteredUserList.value[0].userId;
         if (isMasterWithOneRemoteUser.value) {
           transferAndLeave();
           return;
@@ -60,11 +60,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     }
     async function dismissRoom() {
       try {
-        index$1.default.log(`${logPrefix}dismissRoom: enter`);
+        index$3.default.log(`${logPrefix}dismissRoom: enter`);
         resetState();
         await roomService.roomService.dismissRoom();
       } catch (error) {
-        index$1.default.error(`${logPrefix}dismissRoom error:`, error);
+        index$3.default.error(`${logPrefix}dismissRoom error:`, error);
       }
     }
     async function leaveRoom() {
@@ -72,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         resetState();
         await roomService.roomService.leaveRoom();
       } catch (error) {
-        index$1.default.error(`${logPrefix}leaveRoom error:`, error);
+        index$3.default.error(`${logPrefix}leaveRoom error:`, error);
       }
     }
     async function transferAndLeave() {
@@ -82,12 +82,15 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }
       try {
         const userId = selectedUser.value;
-        const changeUserRoleResponse = await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({ userId, userRole: TUIRoomEngine.TUIRole.kRoomOwner }));
-        index$1.default.log(`${logPrefix}transferAndLeave:`, changeUserRoleResponse);
+        const changeUserRoleResponse = await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({
+          userId,
+          userRole: TUIRoomEngine.TUIRole.kRoomOwner
+        }));
+        index$3.default.log(`${logPrefix}transferAndLeave:`, changeUserRoleResponse);
         resetState();
         await roomService.roomService.leaveRoom();
       } catch (error) {
-        index$1.default.error(`${logPrefix}transferAndLeave error:`, error);
+        index$3.default.error(`${logPrefix}transferAndLeave error:`, error);
       }
     }
     return (_ctx, _cache) => {
@@ -179,7 +182,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             Vue.unref(currentDialogType) === Vue.unref(DialogType).TransferDialog ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
               Vue.createElementVNode("div", null, Vue.toDisplayString(Vue.unref(t)("New host")), 1),
               Vue.createElementVNode("div", null, [
-                Vue.createVNode(Select.default, {
+                Vue.createVNode(index$1.default, {
                   modelValue: Vue.unref(selectedUser),
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => Vue.isRef(selectedUser) ? selectedUser.value = $event : null),
                   teleported: false,
@@ -187,8 +190,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
                   theme: "white"
                 }, {
                   default: Vue.withCtx(() => [
-                    (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(remoteUserList), (user) => {
-                      return Vue.openBlock(), Vue.createBlock(Option.default, {
+                    (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(remoteEnteredUserList), (user) => {
+                      return Vue.openBlock(), Vue.createBlock(index$2.default, {
                         key: user.userId,
                         value: user.userId,
                         label: user.nameCard || user.userName,

package/lib/components/RoomFooter/EndControl/useEndControlHooks.js

@@ -32,24 +32,48 @@ function useEndControl() {
   const chatStore = chat.useChatStore();
   index$1.default.log(`${logPrefix} basicStore:`, basicStore);
   const roomStore = room.useRoomStore();
-  const { localUser, remoteUserList, applyToAnchorList } = pinia.storeToRefs(roomStore);
-  const title = Vue.computed(() => currentDialogType.value === 0 ? t("Leave room?") : t("Select a new host"));
-  const isShowLeaveRoomDialog = Vue.computed(() => roomStore.isMaster && remoteUserList.value.length > 0 || !roomStore.isMaster);
+  const { localUser, remoteEnteredUserList, applyToAnchorList } = pinia.storeToRefs(roomStore);
+  const title = Vue.computed(
+    () => currentDialogType.value === 0 ? t("Leave room?") : t("Select a new host")
+  );
+  const isShowLeaveRoomDialog = Vue.computed(
+    () => roomStore.isMaster && remoteEnteredUserList.value.length > 0 || !roomStore.isMaster
+  );
   const { isSidebarOpen, sidebarName } = pinia.storeToRefs(basicStore);
-  const showSideBar = Vue.computed(() => isSidebarOpen.value && sidebarName.value === "transfer-leave");
+  const showSideBar = Vue.computed(
+    () => isSidebarOpen.value && sidebarName.value === "transfer-leave"
+  );
   const selectedUser = Vue.ref("");
   const showTransfer = Vue.ref(false);
   const searchName = Vue.ref("");
-  const filteredList = Vue.computed(() => remoteUserList.value.filter((searchUser) => {
-    var _a, _b;
-    return ((_a = searchUser.nameCard) == null ? void 0 : _a.includes(searchName.value)) || searchUser.userId.includes(searchName.value) || ((_b = searchUser.userName) == null ? void 0 : _b.includes(searchName.value));
-  }));
+  const filteredList = Vue.computed(
+    () => remoteEnteredUserList.value.filter(
+      (searchUser) => {
+        var _a, _b;
+        return ((_a = searchUser.nameCard) == null ? void 0 : _a.includes(searchName.value)) || searchUser.userId.includes(searchName.value) || ((_b = searchUser.userName) == null ? void 0 : _b.includes(searchName.value));
+      }
+    )
+  );
   const hasNoData = Vue.computed(() => filteredList.value.length === 0);
-  const isMasterWithOneRemoteUser = Vue.computed(() => remoteUserList.value.length === 1);
-  const isMasterWithRemoteUser = Vue.computed(() => remoteUserList.value.length > 0);
-  const isMasterWithoutRemoteUser = Vue.computed(() => roomStore.isMaster && remoteUserList.value.length === 0);
-  const showEndButtonContent = Vue.computed(() => roomStore.isMaster ? t("EndPC") : t("Leave"));
-  const showEndDialogContent = Vue.computed(() => roomStore.isMaster ? isMasterWithoutRemoteUser.value ? t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed.') : t('You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed. If you choose "Leave Room", the current room will not be disbanded, and your hosting privileges will be transferred to other members.') : t("Are you sure you want to leave this room?"));
+  const isMasterWithOneRemoteUser = Vue.computed(
+    () => remoteEnteredUserList.value.length === 1
+  );
+  const isMasterWithRemoteUser = Vue.computed(
+    () => remoteEnteredUserList.value.length > 0
+  );
+  const isMasterWithoutRemoteUser = Vue.computed(
+    () => roomStore.isMaster && remoteEnteredUserList.value.length === 0
+  );
+  const showEndButtonContent = Vue.computed(
+    () => roomStore.isMaster ? t("EndPC") : t("Leave")
+  );
+  const showEndDialogContent = Vue.computed(
+    () => roomStore.isMaster ? isMasterWithoutRemoteUser.value ? t(
+      'You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed.'
+    ) : t(
+      'You are currently the host of the room, please choose the corresponding operation. If you choose "End Room", the current room will be disbanded and all members will be removed. If you choose "Leave Room", the current room will not be disbanded, and your hosting privileges will be transferred to other members.'
+    ) : t("Are you sure you want to leave this room?")
+  );
   function toggleMangeMemberSidebar() {
     if (basicStore.setSidebarOpenStatus && sidebarName.value === "transfer-leave") {
       basicStore.setSidebarOpenStatus(false);
@@ -106,11 +130,7 @@ function useEndControl() {
     const { userId, userRole } = eventInfo;
     const isLocal = roomStore.localUser.userId === userId;
     const oldUserRole = roomStore.getUserRole(userId);
-    if (isLocal) {
-      roomStore.setLocalUser({ userRole });
-    } else {
-      roomStore.setRemoteUserRole(userId, userRole);
-    }
+    roomStore.updateUserInfo({ userId, userRole });
     switch (userRole) {
       case TUIRoomEngine.TUIRole.kGeneralUser:
         if (isLocal) {
@@ -121,7 +141,10 @@ function useEndControl() {
             roomStore.setCanControlSelfVideo(false);
           }
           if (oldUserRole === TUIRoomEngine.TUIRole.kAdministrator) {
-            Message.default({ type: "warning", message: t("Your administrator status has been revoked") });
+            Message.default({
+              type: "warning",
+              message: t("Your administrator status has been revoked")
+            });
           }
           if (roomStore.localStream.hasAudioStream) {
             roomStore.setCanControlSelfAudio(true);
@@ -133,7 +156,10 @@ function useEndControl() {
         break;
       case TUIRoomEngine.TUIRole.kAdministrator:
         if (isLocal) {
-          Message.default({ type: "success", message: t("You have become a administrator") });
+          Message.default({
+            type: "success",
+            message: t("You have become a administrator")
+          });
           roomStore.setCanControlSelfAudio(true);
           roomStore.setCanControlSelfVideo(true);
           if (roomStore.isSpeakAfterTakingSeatMode) {
@@ -144,10 +170,16 @@ function useEndControl() {
       case TUIRoomEngine.TUIRole.kRoomOwner: {
         roomStore.setMasterUserId(userId);
         if (isLocal) {
-          Message.default({ type: "success", message: `${t("You are now a room owner")}` });
+          Message.default({
+            type: "success",
+            message: `${t("You are now a room owner")}`
+          });
           if (roomStore.isSpeakAfterTakingSeatMode) {
             if (!roomStore.isAnchor) {
-              await ((_a = roomEngine.instance) == null ? void 0 : _a.takeSeat({ seatIndex: -1, timeout: 0 }));
+              await ((_a = roomEngine.instance) == null ? void 0 : _a.takeSeat({
+                seatIndex: -1,
+                timeout: 0
+              }));
             }
             handleUpdateSeatApplicationList();
           }
@@ -175,7 +207,10 @@ function useEndControl() {
   roomService.roomService.lifeCycleManager.on("mount", handleMount);
   Vue.onUnmounted(() => {
     var _a;
-    (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+    (_a = roomEngine.instance) == null ? void 0 : _a.off(
+      TUIRoomEngine.TUIRoomEvents.onUserRoleChanged,
+      onUserRoleChanged
+    );
     roomService.roomService.lifeCycleManager.off("mount", handleMount);
   });
   return {
@@ -207,7 +242,7 @@ function useEndControl() {
     showSideBar,
     isMasterWithOneRemoteUser,
     isMasterWithRemoteUser,
-    remoteUserList
+    remoteEnteredUserList
   };
 }
 exports.default = useEndControl;

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

@@ -21,7 +21,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const { t } = index.useI18n();
     const fullScreenConfig = roomService.roomService.getComponentConfig("FullScreen");
     const isFullScreen = Vue.ref(false);
-    const title = Vue.computed(() => isFullScreen.value ? t("Exit") : t("Full screen"));
+    const title = Vue.computed(
+      () => isFullScreen.value ? t("Exit") : t("Full screen")
+    );
     function toggleScreen() {
       if (isFullScreen.value) {
         utils.exitFullScreen();
@@ -39,12 +41,22 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       isFullScreen.value = !!document.fullscreenElement;
     }
     Vue.onMounted(() => {
-      ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach((item) => {
+      [
+        "fullscreenchange",
+        "webkitfullscreenchange",
+        "mozfullscreenchange",
+        "msfullscreenchange"
+      ].forEach((item) => {
         window.addEventListener(item, handleFullScreenChange);
       });
     });
     Vue.onUnmounted(() => {
-      ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach((item) => {
+      [
+        "fullscreenchange",
+        "webkitfullscreenchange",
+        "mozfullscreenchange",
+        "msfullscreenchange"
+      ].forEach((item) => {
         window.removeEventListener(item, handleFullScreenChange);
       });
     });

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

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

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

@@ -13,14 +13,11 @@ const roomService = require("../../services/roomService.js");
 require("@tencentcloud/tuiroom-engine-electron");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
+const vClickOutside = require("../../directives/vClickOutside.js");
 const _hoisted_1 = {
   key: 0,
   class: "invite-control-container"
 };
-const _hoisted_2 = {
-  key: 0,
-  class: "invite-container"
-};
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "InviteControl",
   setup(__props) {
@@ -31,42 +28,41 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const inviteRef = Vue.ref();
     const inviteControlConfig = roomService.roomService.getComponentConfig("InviteControl");
     function toggleInviteSidebar() {
+      isShowInviteTab.value = !isShowInviteTab.value;
       if (environment.isMobile) {
-        isShowInviteTab.value = true;
         if (basicStore.sidebarName === "invite") {
           basicStore.setSidebarName("");
           return;
         }
         basicStore.setSidebarName("invite");
-      } else {
-        if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === "invite") {
-          basicStore.setSidebarOpenStatus(false);
-          basicStore.setSidebarName("");
-          return;
-        }
-        basicStore.setSidebarOpenStatus(true);
-        basicStore.setSidebarName("invite");
       }
     }
     function handleCloseInvite() {
       isShowInviteTab.value = false;
     }
+    function handleClickOutSide() {
+      if (isShowInviteTab.value) {
+        isShowInviteTab.value = false;
+      }
+    }
     return (_ctx, _cache) => {
-      return Vue.unref(inviteControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+      return Vue.unref(inviteControlConfig).visible ? Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
         Vue.createVNode(IconButton.default, {
+          class: "invite",
           "is-active": Vue.unref(sidebarName) === "invite",
           title: Vue.unref(t)("Invite"),
           icon: InviteIcon.default,
           onClickIcon: toggleInviteSidebar
         }, null, 8, ["is-active", "title"]),
-        isShowInviteTab.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
-          Vue.createVNode(index$1.default, {
-            ref_key: "inviteRef",
-            ref: inviteRef,
-            onOnCloseInvite: handleCloseInvite
-          }, null, 512)
-        ])) : Vue.createCommentVNode("", true)
-      ])) : Vue.createCommentVNode("", true);
+        isShowInviteTab.value ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
+          key: 0,
+          ref_key: "inviteRef",
+          ref: inviteRef,
+          onOnCloseInvite: handleCloseInvite
+        }, null, 512)) : Vue.createCommentVNode("", true)
+      ])), [
+        [Vue.unref(vClickOutside.default), handleClickOutSide]
+      ]) : Vue.createCommentVNode("", true);
     };
   }
 });

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

@@ -19,7 +19,9 @@ const _hoisted_1 = {
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "ManageMemberControl",
   setup(__props) {
-    const manageMemberControlConfig = roomService.roomService.getComponentConfig("ManageMemberControl");
+    const manageMemberControlConfig = roomService.roomService.getComponentConfig(
+      "ManageMemberControl"
+    );
     const { t } = index.useI18n();
     const basicStore = basic.useBasicStore();
     const { sidebarName } = pinia.storeToRefs(basicStore);

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

@@ -18,11 +18,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   setup(__props) {
     const moreControlConfig = roomService.roomService.getComponentConfig("MoreControl");
-    const {
-      t,
-      basicStore,
-      sidebarName
-    } = useMoreControlHooks.default();
+    const { t, basicStore, sidebarName } = useMoreControlHooks.default();
     function toggleMoreSidebar() {
       if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === "more") {
         basicStore.setSidebarOpenStatus(false);

package/lib/components/RoomFooter/MoreControl/useMoreControlHooks.js

@@ -9,7 +9,9 @@ function useControl() {
   const { t } = index.useI18n();
   const basicStore = basic.useBasicStore();
   const { sidebarName } = pinia.storeToRefs(basicStore);
-  const iconName = Vue.computed(() => sidebarName.value === "more" ? icon.ICON_NAME.MoreActive : icon.ICON_NAME.More);
+  const iconName = Vue.computed(
+    () => sidebarName.value === "more" ? icon.ICON_NAME.MoreActive : icon.ICON_NAME.More
+  );
   return {
     t,
     basicStore,

package/lib/components/RoomFooter/ScreenShareControl/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/lib/components/RoomFooter/ScreenShareControl/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 ScreenShareControl = /* @__PURE__ */ _pluginVue_exportHelper.default(Index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-9e5b6506"]]);
+const ScreenShareControl = /* @__PURE__ */ _pluginVue_exportHelper.default(Index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-416f6a17"]]);
 exports.default = ScreenShareControl;