@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.1

package/lib/components/RoomContent/StreamRegion/LocalScreenView/index.vue.js

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
 const LocalScreenView = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-222da582"]]);

package/lib/components/RoomContent/StreamRegion/StreamCover/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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
-const StreamCover = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-0b4e6bcc"]]);
+const StreamCover = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7f0544c7"]]);
 exports.default = StreamCover;

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

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
 const StreamPlay = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-41b7eb08"]]);

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

@@ -6,6 +6,7 @@ interface Props {
     aspectRatio?: string;
     isNeedPlayStream?: boolean;
     observerViewInVisible?: boolean;
+    supportTouchScale?: boolean;
 }
 declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     isEnlarge: boolean;

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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* 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-5ad6ef67"]]);
+const StreamRegion = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-2fa4d966"]]);
 exports.default = StreamRegion;

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

@@ -7,6 +7,7 @@ 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 vTouchScale = require("../../../directives/vTouchScale.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   props: {
@@ -14,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     isEnlarge: { type: Boolean, default: false },
     aspectRatio: {},
     isNeedPlayStream: { type: Boolean, default: true },
-    observerViewInVisible: { type: Boolean }
+    observerViewInVisible: { type: Boolean },
+    supportTouchScale: { type: Boolean }
   },
   emits: ["room-dblclick"],
   setup(__props) {
@@ -85,12 +87,14 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             streamInfo: _ctx.streamInfo,
             isMiniRegion: !_ctx.isEnlarge
           }, null, 8, ["streamInfo", "isMiniRegion"])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
-            Vue.createVNode(index$1.default, {
+            Vue.withDirectives(Vue.createVNode(index$1.default, {
               streamInfo: _ctx.streamInfo,
               isEnlarge: _ctx.isEnlarge,
               isNeedPlayStream: _ctx.isNeedPlayStream,
               observerViewInVisible: _ctx.observerViewInVisible
-            }, null, 8, ["streamInfo", "isEnlarge", "isNeedPlayStream", "observerViewInVisible"]),
+            }, null, 8, ["streamInfo", "isEnlarge", "isNeedPlayStream", "observerViewInVisible"]), [
+              [Vue.unref(vTouchScale.default), props.supportTouchScale]
+            ]),
             Vue.createVNode(index$2.default, { streamInfo: _ctx.streamInfo }, null, 8, ["streamInfo"])
           ], 64))
         ], 36)), [

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

@@ -1,6 +1,6 @@
 "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");
+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"]]);

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

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
 const MasterApplyControl = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-b9f78f6d"]]);

package/lib/components/RoomFooter/ApplyControl/MemberApplyControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const MemberApplyControl_vue_vue_type_script_setup_true_lang = require("./MemberApplyControl.vue2.js");
 ;/* empty css                         */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const MemberApplyControl = /* @__PURE__ */ _pluginVue_exportHelper.default(MemberApplyControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-9768c70f"]]);
+const MemberApplyControl = /* @__PURE__ */ _pluginVue_exportHelper.default(MemberApplyControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-58a201bd"]]);
 exports.default = MemberApplyControl;

package/lib/components/RoomFooter/ApplyControl/MemberApplyControl.vue2.js

@@ -72,13 +72,13 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         isApplyingOnSeat.value ? cancelSeatApplication() : sendSeatApplication();
       }
     }
-    const inviteDialogInfo = {
+    const inviteDialogInfo = Vue.computed(() => ({
       content: t("You can turn on the microphone and camera once you are on stage"),
       confirmButtonText: t("Agree to the stage"),
       cancelButtonText: t("Reject"),
       handleConfirm: () => handleInvite(true),
       handleCancel: () => handleInvite(false)
-    };
+    }));
     const leaveSeatDialogInfo = Vue.computed(() => ({
       content: localUser.value.userRole === TUIRoomEngine.TUIRole.kAdministrator ? t("To go on stage again, a new application needs to be initiated") : t(
         "To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve"
@@ -89,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       handleCancel: () => handleStepDownDialogVisible()
     }));
     const currentDialogInfo = Vue.computed(
-      () => currentDialogType.value === "inviteDialog" ? inviteDialogInfo : leaveSeatDialogInfo.value
+      () => currentDialogType.value === "inviteDialog" ? inviteDialogInfo.value : leaveSeatDialogInfo.value
     );
     async function sendSeatApplication() {
       var _a, _b;
@@ -166,7 +166,6 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
         roomStore.setCanControlSelfAudio(false);
       }
-      basicStore.setIsOpenMic(false);
     }
     function hideApplyAttention() {
       showMemberApplyAttention.value = false;

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-cd06ed0b"]]);
+const BasicBeauty = /* @__PURE__ */ _pluginVue_exportHelper.default(BasicBeauty_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-2e9e258c"]]);
 exports.default = BasicBeauty;

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

@@ -12,7 +12,9 @@ const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 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");
@@ -90,7 +92,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const isLoading = Vue.ref(false);
     const sliderValue = Vue.ref(0);
     const beautyLevels = Vue.reactive({
-      close: 0,
+      smoother: 0,
+      whitening: 0,
+      ruddy: 0
+    });
+    const savedBeautyLevels = Vue.reactive({
       smoother: 0,
       whitening: 0,
       ruddy: 0
@@ -110,16 +116,18 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
         view: "test-preview"
       }));
-      await onBeautyPropertyClick(appliedBasicBeautyItem.value);
       isLoading.value = false;
+      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.setBasicBeauty);
     };
     const closeBeautySettingPanel = async () => {
       var _a;
       isDialogVisible.value = false;
+      Object.assign(beautyLevels, savedBeautyLevels);
+      await onBeautyPropertyClick(appliedBasicBeautyItem.value);
       (_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
       selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
     };
-    const confirmBeautySetting = async () => {
+    const saveBeautySetting = async () => {
       if (!isAllowed.value) return;
       appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
       if (selectBasicBeautyItem.value === "close") {
@@ -137,6 +145,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           Math.floor(beautyLevels.ruddy / 100 * 9)
         );
       }
+      Object.assign(savedBeautyLevels, beautyLevels);
       closeBeautySettingPanel();
     };
     const startBeautyTest = async () => {
@@ -156,6 +165,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         0
       );
     };
+    const throttleStartBeautyTest = utils.throttle(startBeautyTest, 300);
     Vue.watch(sliderValue, async (newValue) => {
       if (selectBasicBeautyItem.value === "smoother") {
         beautyLevels.smoother = newValue;
@@ -166,7 +176,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (selectBasicBeautyItem.value === "ruddy") {
         beautyLevels.ruddy = newValue;
       }
-      await startBeautyTest();
+      await throttleStartBeautyTest();
     });
     const onBeautyPropertyClick = async (type) => {
       if (type === "close") {
@@ -286,7 +296,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
               Vue.createVNode(Button.default, {
                 class: "button",
                 disabled: !isAllowed.value,
-                onClick: confirmBeautySetting
+                onClick: saveBeautySetting
               }, {
                 default: Vue.withCtx(() => [
                   Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Save")), 1)

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

@@ -14,6 +14,7 @@ require("@tencentcloud/tuiroom-engine-electron");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
+const dataReportManager = require("../../services/manager/dataReportManager.js");
 require("../../utils/environment.js");
 const _hoisted_1 = {
   key: 0,
@@ -36,6 +37,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       basicStore.setSidebarOpenStatus(true);
       basicStore.setSidebarName("chat");
       chatStore.updateUnReadCount(0);
+      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.openChat);
     }
     return (_ctx, _cache) => {
       return Vue.unref(chatControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [

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

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* 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-99d2acdf"]]);

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

@@ -1,2 +1,6 @@
-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, {
+    "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/InviteControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const InviteControl_vue_vue_type_script_setup_true_lang = require("./InviteControl.vue2.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-6d1625ef"]]);
+const InviteControl = /* @__PURE__ */ _pluginVue_exportHelper.default(InviteControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4ac291aa"]]);
 exports.default = InviteControl;

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

@@ -6,14 +6,14 @@ const InviteIcon = require("../common/icons/InviteIcon.vue.js");
 const basic = require("../../stores/basic.js");
 const pinia = require("pinia");
 const index = require("../../locales/index.js");
-const environment = require("../../utils/environment.js");
-const index$1 = require("../RoomInvite/index.vue.js");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 require("@tencentcloud/tuiroom-engine-electron");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
+const environment = require("../../utils/environment.js");
+const index$1 = require("../RoomInvite/index.vue.js");
 const vClickOutside = require("../../directives/vClickOutside.js");
 const _hoisted_1 = {
   key: 0,
@@ -21,12 +21,14 @@ const _hoisted_1 = {
 };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "InviteControl",
-  setup(__props) {
+  emits: ["show-overlay"],
+  setup(__props, { emit: __emit }) {
+    const isShowInviteTab = Vue.ref(false);
+    const inviteRef = Vue.ref();
     const basicStore = basic.useBasicStore();
     const { sidebarName } = pinia.storeToRefs(basicStore);
     const { t } = index.useI18n();
-    const isShowInviteTab = Vue.ref(false);
-    const inviteRef = Vue.ref();
+    const emit = __emit;
     const inviteControlConfig = roomService.roomService.getComponentConfig("InviteControl");
     function toggleInviteSidebar() {
       isShowInviteTab.value = !isShowInviteTab.value;
@@ -36,11 +38,12 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           return;
         }
         basicStore.setSidebarName("invite");
+        emit("show-overlay", {
+          name: "RoomInviteOverlay",
+          visible: isShowInviteTab.value
+        });
       }
     }
-    function handleCloseInvite() {
-      isShowInviteTab.value = false;
-    }
     function handleClickOutSide() {
       if (isShowInviteTab.value) {
         isShowInviteTab.value = false;
@@ -55,11 +58,10 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           icon: InviteIcon.default,
           onClickIcon: toggleInviteSidebar
         }, null, 8, ["is-active", "title"]),
-        isShowInviteTab.value ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
+        !Vue.unref(environment.isMobile) && isShowInviteTab.value ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
           key: 0,
           ref_key: "inviteRef",
-          ref: inviteRef,
-          onOnCloseInvite: handleCloseInvite
+          ref: inviteRef
         }, null, 512)) : Vue.createCommentVNode("", true)
       ])), [
         [Vue.unref(vClickOutside.default), handleClickOutSide]

package/lib/components/RoomFooter/ScreenShareControl/Index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Index_vue_vue_type_script_setup_true_lang = require("./Index.vue2.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-eea074b0"]]);
+const ScreenShareControl = /* @__PURE__ */ _pluginVue_exportHelper.default(Index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-9823e608"]]);
 exports.default = ScreenShareControl;

package/lib/components/RoomFooter/ScreenShareControl/Index.vue2.js

@@ -66,9 +66,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (hasOtherScreenShare.value) {
         Message.default({
           type: "warning",
-          message: t(
-            "Another user is currently sharing the screen, screen sharing is not possible."
-          ),
+          message: t("Another user is sharing the screen."),
           duration: message.MESSAGE_DURATION.LONG
         });
         return;

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

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

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

@@ -58,12 +58,12 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
         view: "stream-preview"
       }));
-      await applyVirtualBackground(appliedBackground.value);
       isLoading.value = false;
     };
     const closeSettingPanel = async () => {
       var _a;
       isDialogVisible.value = false;
+      await applyVirtualBackground(appliedBackground.value);
       (_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
       selectedBackground.value = appliedBackground.value;
     };
@@ -107,6 +107,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           width: "600px",
           modal: true,
           "append-to-room-container": true,
+          "close-on-click-modal": false,
           onClose: closeSettingPanel
         }, {
           default: Vue.withCtx(() => [

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

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
 const RoomFooter = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-25bccb00"]]);

package/lib/components/RoomHeader/RoomInfo/index.vue.js

@@ -1,6 +1,6 @@
 "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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
 const RoomInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f229d2be"]]);

package/lib/components/RoomHeader/UserInfo/index.vue.d.ts

@@ -1,15 +1,17 @@
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     userId: string;
     userName: string;
     avatarUrl?: string;
-}>, {}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    isShowEditName?: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "log-out": (...args: any[]) => void;
     "update-user-name": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     userId: string;
     userName: string;
     avatarUrl?: string;
-}>, {}>>> & {
+    isShowEditName?: boolean;
+}>>> & {
     "onLog-out"?: ((...args: any[]) => any) | undefined;
     "onUpdate-user-name"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
@@ -23,11 +25,3 @@ 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/RoomHeader/UserInfo/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");
+const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const UserInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-ad1b1d26"]]);
+const UserInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-be17229c"]]);
 exports.default = UserInfo;

package/lib/components/RoomHeader/UserInfo/index.vue2.js

@@ -1,18 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const index = require("../../common/base/Dialog/index.vue.js");
 const SvgIcon = require("../../common/base/SvgIcon.vue.js");
+const Button = require("../../common/base/Button.vue.js");
+const index$1 = require("../../common/base/Input/index.vue.js");
 const ArrowStrokeSelectDownIcon = require("../../common/icons/ArrowStrokeSelectDownIcon.vue.js");
 const useUserInfoHooks = require("./useUserInfoHooks.js");
 const Avatar = require("../../common/Avatar.vue.js");
 require("../../../services/main.js");
 const roomService = require("../../../services/roomService.js");
 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 Message = require("../../common/base/Message/Message.js");
+const message = require("../../../constants/message.js");
 const basic = require("../../../stores/basic.js");
 const room = require("../../../stores/room.js");
 const _hoisted_1 = { class: "name" };
@@ -20,25 +25,50 @@ const _hoisted_2 = {
   key: 0,
   class: "user-control-container"
 };
+const _hoisted_3 = { class: "edit-content" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",
   props: {
     userId: {},
     userName: {},
-    avatarUrl: {}
+    avatarUrl: {},
+    isShowEditName: { type: Boolean }
   },
   emits: ["log-out", "update-user-name"],
   setup(__props, { emit: __emit }) {
+    const emits = __emit;
     const userInfoConfig = roomService.roomService.getComponentConfig("UserInfo");
-    basic.useBasicStore();
-    room.useRoomStore();
+    const basicStore = basic.useBasicStore();
+    const roomStore = room.useRoomStore();
     const {
       t,
       showUserControl,
+      isUserNameEditorVisible,
       userInfoRef,
+      tempUserName,
       handleUserControl,
-      closeEditUserNameDialog
+      showEditUserNameDialog,
+      closeUserNameEditor
     } = useUserInfoHooks.default();
+    const props = __props;
+    async function saveUserName(userName) {
+      if (userName.length === 0) {
+        Message.default({
+          type: "warning",
+          message: t("Username length should be greater than 0"),
+          duration: message.MESSAGE_DURATION.NORMAL
+        });
+        return;
+      }
+      await TUIRoomEngine.setSelfInfo({
+        userName,
+        avatarUrl: roomStore.localUser.avatarUrl || ""
+      });
+      basicStore.setUserName(userName);
+      roomStore.setLocalUser({ userName });
+      emits("update-user-name", userName);
+      closeUserNameEditor();
+    }
     return (_ctx, _cache) => {
       return Vue.unref(userInfoConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
         key: 0,
@@ -55,18 +85,73 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             class: "avatar",
             "img-src": _ctx.avatarUrl
           }, null, 8, ["img-src"]),
-          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(_ctx.userName || _ctx.userId), 1),
+          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(props.userName || props.userId), 1),
           Vue.createVNode(SvgIcon.default, {
             class: Vue.normalizeClass([Vue.unref(showUserControl) ? "up-icon" : "down-icon"]),
             icon: ArrowStrokeSelectDownIcon.default
           }, null, 8, ["class"])
         ]),
         Vue.unref(showUserControl) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+          Vue.withDirectives(Vue.createElementVNode("div", null, [
+            Vue.createElementVNode("div", {
+              class: "user-control-item-head",
+              onClick: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => Vue.unref(showEditUserNameDialog) && Vue.unref(showEditUserNameDialog)(...args))
+            }, Vue.toDisplayString(Vue.unref(t)("Edit profile")), 1)
+          ], 512), [
+            [Vue.vShow, props.isShowEditName]
+          ]),
           Vue.createElementVNode("div", {
             class: "user-control-item-foot",
-            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("log-out"))
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("log-out"))
           }, Vue.toDisplayString(Vue.unref(t)("Log out")), 1)
-        ])) : Vue.createCommentVNode("", true)
+        ])) : Vue.createCommentVNode("", true),
+        Vue.createVNode(index.default, {
+          modelValue: Vue.unref(isUserNameEditorVisible),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => Vue.isRef(isUserNameEditorVisible) ? isUserNameEditorVisible.value = $event : null),
+          title: Vue.unref(t)("Edit profile"),
+          modal: true,
+          width: "480px",
+          "close-on-click-modal": true,
+          "append-to-body": true
+        }, {
+          footer: Vue.withCtx(() => [
+            Vue.createVNode(Button.default, {
+              class: "button",
+              size: "default",
+              onClick: Vue.unref(closeUserNameEditor)
+            }, {
+              default: Vue.withCtx(() => [
+                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            Vue.createVNode(Button.default, {
+              class: "button",
+              size: "default",
+              type: "primary",
+              onClick: _cache[4] || (_cache[4] = ($event) => saveUserName(Vue.unref(tempUserName)))
+            }, {
+              default: Vue.withCtx(() => [
+                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Save")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: Vue.withCtx(() => [
+            Vue.createElementVNode("div", _hoisted_3, [
+              Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("User Name")), 1),
+              Vue.createVNode(index$1.default, {
+                "model-value": Vue.unref(tempUserName),
+                onInput: _cache[3] || (_cache[3] = ($event) => tempUserName.value = $event),
+                class: "edit-name-input",
+                maxlength: "16",
+                placeholder: Vue.unref(t)("Please input user name")
+              }, null, 8, ["model-value", "placeholder"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
       ], 512)) : Vue.createCommentVNode("", true);
     };
   }

package/lib/components/RoomHeader/UserInfo/useUserInfoHooks.d.ts

@@ -1,6 +1,12 @@
+import { Ref } from 'vue';
+
 export default function useUserInfo(): {
     t: any;
-    showUserControl: import('vue').Ref<boolean>;
-    userInfoRef: import('vue').Ref<any>;
+    showUserControl: Ref<boolean>;
+    isUserNameEditorVisible: Ref<boolean>;
+    userInfoRef: Ref<any>;
+    tempUserName: Ref<string>;
     handleUserControl: () => void;
+    showEditUserNameDialog: () => void;
+    closeUserNameEditor: () => void;
 };