@tencentcloud/roomkit-electron-vue3 2.3.3

package/lib/components/RoomHeader/RoomInfo/useRoomInfoHooks.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const index = require("../../../locales/index.js");
+const basic = require("../../../stores/basic.js");
+const room = require("../../../stores/room.js");
+const pinia = require("pinia");
+const Message = require("../../common/base/Message/Message.js");
+const adapter = require("../../../utils/adapter.js");
+const useRoomInviteHooks = require("../../RoomInvite/useRoomInviteHooks.js");
+const environment = require("../../../utils/environment.js");
+require("../../../services/main.js");
+const roomService = require("../../../services/roomService.js");
+require("@tencentcloud/tuiroom-engine-electron");
+require("mitt");
+require("../../../services/manager/roomActionManager.js");
+function useRoomInfo() {
+  const { inviteLink } = useRoomInviteHooks.default();
+  const basicStore = basic.useBasicStore();
+  const roomStore = room.useRoomStore();
+  const { roomId, isRoomLinkVisible } = pinia.storeToRefs(basicStore);
+  const { masterUserId } = pinia.storeToRefs(roomStore);
+  const { t } = index.useI18n();
+  const isShowRoomInfo = Vue.ref(false);
+  const roomType = Vue.computed(() => roomStore.isFreeSpeakMode ? t("Free Speech Room") : t("On-stage Speaking Room"));
+  const arrowDirection = Vue.ref(false);
+  const roomLinkConfig = roomService.roomService.getComponentConfig("RoomLink");
+  const masterUserName = Vue.computed(() => roomStore.getUserName(masterUserId.value) || masterUserId.value);
+  const isShowRoomInfoTitle = Vue.computed(() => masterUserName.value);
+  const conferenceTitle = Vue.computed(() => `${masterUserName.value}${t("Quick Meeting")}`);
+  const roomInfoTabList = Vue.computed(() => [
+    { id: 1, title: "Host", content: masterUserName.value, copyLink: "", isShowCopyIcon: false, visible: true },
+    { id: 2, title: "Room Type", content: roomType.value, copyLink: "", isShowCopyIcon: false, visible: true },
+    { id: 3, title: "Room ID", content: roomId.value, copyLink: roomId.value, isShowCopyIcon: true, visible: true },
+    { id: 4, title: "Room Link", content: inviteLink.value, copyLink: inviteLink.value, isShowCopyIcon: true, visible: isRoomLinkVisible.value && roomLinkConfig.visible }
+  ]);
+  function toggleShowRoomInfoStatus() {
+    isShowRoomInfo.value = !isShowRoomInfo.value;
+    arrowDirection.value = !arrowDirection.value;
+  }
+  function handleClickOutsideRoomInfoContainer() {
+    if (isShowRoomInfo.value || arrowDirection.value) {
+      isShowRoomInfo.value = false;
+      arrowDirection.value = false;
+    }
+  }
+  function handleCloseRoomInfo() {
+    isShowRoomInfo.value = false;
+    arrowDirection.value = false;
+  }
+  async function onCopy(value) {
+    try {
+      await adapter.clipBoard(value);
+      Message.default({
+        message: t("Copied successfully"),
+        type: "success"
+      });
+    } catch (error) {
+      Message.default({
+        message: t("Copied failure"),
+        type: "error"
+      });
+    }
+  }
+  return {
+    t,
+    arrowDirection,
+    isWeChat: environment.isWeChat,
+    isShowRoomInfo,
+    isShowRoomInfoTitle,
+    conferenceTitle,
+    roomInfoTabList,
+    handleCloseRoomInfo,
+    toggleShowRoomInfoStatus,
+    handleClickOutsideRoomInfoContainer,
+    onCopy
+  };
+}
+exports.default = useRoomInfo;

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

@@ -0,0 +1,41 @@
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    userId: string;
+    userName: string;
+    avatarUrl?: string | undefined;
+    isShowEditName?: boolean | undefined;
+}>, {
+    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<{
+    userId: string;
+    userName: string;
+    avatarUrl?: string | undefined;
+    isShowEditName?: boolean | undefined;
+}>, {
+    isShowEditName: boolean;
+}>>> & {
+    "onLog-out"?: ((...args: any[]) => any) | undefined;
+    "onUpdate-user-name"?: ((...args: any[]) => any) | undefined;
+}, {
+    isShowEditName: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+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

@@ -0,0 +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");
+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-45ccc1b8"]]);
+exports.default = UserInfo;

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

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const index = require("../../common/base/Dialog/index.vue.js");
+const SvgIcon = require("../../common/base/SvgIcon.vue.js");
+const ArrowStrokeSelectDownIcon = require("../../common/icons/ArrowStrokeSelectDownIcon.vue.js");
+const useUserInfoHooks = require("./useUserInfoHooks.js");
+const Avatar = require("../../common/Avatar.vue.js");
+const Button = require("../../common/base/Button.vue.js");
+const Input = require("../../common/base/Input.vue.js");
+const constants = require("../../../utils/constants.js");
+require("../../../services/main.js");
+const roomService = require("../../../services/roomService.js");
+require("../../../locales/index.js");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+require("mitt");
+require("../../../services/manager/roomActionManager.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" };
+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: {},
+    isShowEditName: { type: Boolean, default: false }
+  },
+  emits: ["log-out", "update-user-name"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const userInfoConfig = roomService.roomService.getComponentConfig("UserInfo");
+    const basicStore = basic.useBasicStore();
+    const roomStore = room.useRoomStore();
+    const {
+      t,
+      showUserControl,
+      showUserNameEdit,
+      userInfoRef,
+      tempUserName,
+      handleUserControl,
+      showEditUserNameDialog,
+      closeEditUserNameDialog
+    } = useUserInfoHooks.default();
+    const props = __props;
+    const showEditNameContainer = constants.isInnerScene && props.isShowEditName;
+    async function handleSaveUserName(userName) {
+      if (userName.length === 0) {
+        Message.default({
+          type: "warning",
+          message: t("Username length should be greater than 0"),
+          duration: message.MESSAGE_DURATION.NORMAL
+        });
+        return;
+      }
+      emits("update-user-name", userName);
+      basicStore.setUserName(userName);
+      TUIRoomEngine.setSelfInfo({ userName, avatarUrl: roomStore.localUser.avatarUrl || "" });
+      roomStore.setLocalUser({ userName });
+      closeEditUserNameDialog();
+    }
+    return (_ctx, _cache) => {
+      return Vue.unref(userInfoConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
+        key: 0,
+        ref_key: "userInfoRef",
+        ref: userInfoRef,
+        class: "user-info-container"
+      }, [
+        Vue.createElementVNode("div", {
+          class: "user-info-content",
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => Vue.unref(handleUserControl) && Vue.unref(handleUserControl)(...args))
+        }, [
+          Vue.createVNode(Avatar.default, {
+            class: "avatar",
+            "img-src": _ctx.avatarUrl
+          }, null, 8, ["img-src"]),
+          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(_ctx.userName || _ctx.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, Vue.unref(showEditNameContainer)]
+          ]),
+          Vue.createElementVNode("div", {
+            class: "user-control-item-foot",
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("log-out"))
+          }, Vue.toDisplayString(Vue.unref(t)("Log out")), 1)
+        ])) : Vue.createCommentVNode("", true),
+        Vue.createVNode(index.default, {
+          modelValue: Vue.unref(showUserNameEdit),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => Vue.isRef(showUserNameEdit) ? showUserNameEdit.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(closeEditUserNameDialog)
+            }, {
+              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) => handleSaveUserName(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(Input.default, {
+                modelValue: Vue.unref(tempUserName),
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => Vue.isRef(tempUserName) ? tempUserName.value = $event : null),
+                class: "edit-name-input",
+                placeholder: Vue.unref(t)("Please input user name")
+              }, null, 8, ["modelValue", "placeholder"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ], 512)) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

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

@@ -0,0 +1 @@
+"use strict";

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

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

package/lib/components/RoomHeader/UserInfo/useUserInfoHooks.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const index = require("../../../locales/index.js");
+const basic = require("../../../stores/basic.js");
+const pinia = require("pinia");
+function useUserInfo() {
+  const { t } = index.useI18n();
+  const basicStore = basic.useBasicStore();
+  const { userName } = pinia.storeToRefs(basicStore);
+  const userInfoRef = Vue.ref();
+  const showUserControl = Vue.ref(false);
+  const showUserNameEdit = Vue.ref(false);
+  const tempUserName = Vue.ref("");
+  function handleUserControl() {
+    showUserControl.value = !showUserControl.value;
+  }
+  function hideUserControl(event) {
+    var _a;
+    if (!((_a = userInfoRef.value) == null ? void 0 : _a.contains(event.target))) {
+      showUserControl.value = false;
+    }
+  }
+  function showEditUserNameDialog() {
+    showUserNameEdit.value = true;
+    tempUserName.value = userName.value;
+  }
+  function closeEditUserNameDialog() {
+    showUserNameEdit.value = false;
+  }
+  Vue.onMounted(() => {
+    window.addEventListener("click", hideUserControl);
+  });
+  Vue.onUnmounted(() => {
+    window.removeEventListener("click", hideUserControl);
+  });
+  return {
+    t,
+    showUserControl,
+    showUserNameEdit,
+    userInfoRef,
+    tempUserName,
+    handleUserControl,
+    showEditUserNameDialog,
+    closeEditUserNameDialog
+  };
+}
+exports.default = useUserInfo;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const LayoutControl_vue_vue_type_script_setup_true_lang = require("./LayoutControl.vue2.js");
+require("./LayoutControl.vue3.js");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
+const LayoutControl = /* @__PURE__ */ _pluginVue_exportHelper.default(LayoutControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-80cb6f9f"]]);
+exports.default = LayoutControl;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const render = require("../../../constants/render.js");
+const basic = require("../../../stores/basic.js");
+const room = require("../../../stores/room.js");
+const pinia = require("pinia");
+const index$1 = require("../../../utils/aegis/index.js");
+const index = require("../../../locales/index.js");
+const room$1 = require("../../../constants/room.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const LayoutIcon = require("../../common/icons/LayoutIcon.vue.js");
+const vClickOutside = require("../../../directives/vClickOutside.js");
+require("../../../services/main.js");
+const roomService = require("../../../services/roomService.js");
+require("@tencentcloud/tuiroom-engine-electron");
+require("mitt");
+require("../../../services/manager/roomActionManager.js");
+const _withScopeId = (n) => (Vue.pushScopeId("data-v-80cb6f9f"), n = n(), Vue.popScopeId(), n);
+const _hoisted_1 = {
+  key: 0,
+  class: "layout-container"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "layout-list"
+};
+const _hoisted_3 = { class: "layout-block-container" };
+const _hoisted_4 = { class: "layout-title" };
+const _hoisted_5 = { class: "layout-block-container" };
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("div", { class: "left-container" }, null, -1));
+const _hoisted_7 = { class: "right-container" };
+const _hoisted_8 = { class: "layout-title" };
+const _hoisted_9 = { class: "layout-block-container" };
+const _hoisted_10 = { class: "top-container" };
+const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("div", { class: "bottom-container" }, null, -1));
+const _hoisted_12 = { class: "layout-title" };
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "LayoutControl",
+  setup(__props) {
+    const { t } = index.useI18n();
+    const basicStore = basic.useBasicStore();
+    const { layout } = pinia.storeToRefs(basicStore);
+    const roomStore = room.useRoomStore();
+    const { streamNumber } = pinia.storeToRefs(roomStore);
+    const showLayoutList = Vue.ref(false);
+    const isStreamNumberLessThanTwo = Vue.computed(() => streamNumber.value < 2);
+    const layoutControlConfig = roomService.roomService.getComponentConfig("LayoutControl");
+    function handleClick(layout2) {
+      basicStore.setLayout(layout2);
+      index$1.default.reportEvent({ name: "layout", ext1: layout2 });
+    }
+    function handleClickLayoutIcon() {
+      if (isStreamNumberLessThanTwo.value) {
+        return;
+      }
+      showLayoutList.value = !showLayoutList.value;
+    }
+    function handleClickOutSide() {
+      if (showLayoutList.value) {
+        showLayoutList.value = false;
+      }
+    }
+    return (_ctx, _cache) => {
+      return Vue.unref(layoutControlConfig).visible ? Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createVNode(IconButton.default, {
+          title: Vue.unref(t)("Layout"),
+          disabled: isStreamNumberLessThanTwo.value,
+          layout: Vue.unref(room$1.IconButtonLayout).HORIZONTAL,
+          onClickIcon: handleClickLayoutIcon
+        }, {
+          default: Vue.withCtx(() => [
+            Vue.createVNode(LayoutIcon.default)
+          ]),
+          _: 1
+        }, 8, ["title", "disabled", "layout"]),
+        showLayoutList.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+          Vue.createElementVNode("div", {
+            class: Vue.normalizeClass(["layout1", "layout-item", `${Vue.unref(layout) === Vue.unref(render.LAYOUT).NINE_EQUAL_POINTS ? "checked" : ""}`]),
+            onClick: _cache[0] || (_cache[0] = ($event) => handleClick(Vue.unref(render.LAYOUT).NINE_EQUAL_POINTS))
+          }, [
+            Vue.createElementVNode("div", _hoisted_3, [
+              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(9).fill(""), (item, index2) => {
+                return Vue.openBlock(), Vue.createElementBlock("div", {
+                  key: index2,
+                  class: "layout-block"
+                });
+              }), 128))
+            ]),
+            Vue.createElementVNode("span", _hoisted_4, Vue.toDisplayString(Vue.unref(t)("Grid")), 1)
+          ], 2),
+          Vue.createElementVNode("div", {
+            class: Vue.normalizeClass(["layout2", "layout-item", `${Vue.unref(layout) === Vue.unref(render.LAYOUT).RIGHT_SIDE_LIST ? "checked" : ""}`]),
+            onClick: _cache[1] || (_cache[1] = ($event) => handleClick(Vue.unref(render.LAYOUT).RIGHT_SIDE_LIST))
+          }, [
+            Vue.createElementVNode("div", _hoisted_5, [
+              _hoisted_6,
+              Vue.createElementVNode("div", _hoisted_7, [
+                (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(3).fill(""), (item, index2) => {
+                  return Vue.openBlock(), Vue.createElementBlock("div", {
+                    key: index2,
+                    class: "layout-block"
+                  });
+                }), 128))
+              ])
+            ]),
+            Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(Vue.unref(t)("Gallery on right")), 1)
+          ], 2),
+          Vue.createElementVNode("div", {
+            class: Vue.normalizeClass(["layout3", "layout-item", `${Vue.unref(layout) === Vue.unref(render.LAYOUT).TOP_SIDE_LIST ? "checked" : ""}`]),
+            onClick: _cache[2] || (_cache[2] = ($event) => handleClick(Vue.unref(render.LAYOUT).TOP_SIDE_LIST))
+          }, [
+            Vue.createElementVNode("div", _hoisted_9, [
+              Vue.createElementVNode("div", _hoisted_10, [
+                (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(3).fill(""), (item, index2) => {
+                  return Vue.openBlock(), Vue.createElementBlock("div", {
+                    key: index2,
+                    class: "layout-block"
+                  });
+                }), 128))
+              ]),
+              _hoisted_11
+            ]),
+            Vue.createElementVNode("span", _hoisted_12, Vue.toDisplayString(Vue.unref(t)("Gallery at top")), 1)
+          ], 2)
+        ])) : Vue.createCommentVNode("", true)
+      ])), [
+        [Vue.unref(vClickOutside.default), handleClickOutSide]
+      ]) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/RoomHeader/index/LayoutControl.vue3.js

@@ -0,0 +1 @@
+"use strict";

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const NetworkInfo_vue_vue_type_script_setup_true_lang = require("./NetworkInfo.vue2.js");
+require("./NetworkInfo.vue3.js");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
+const NetworkInfo = /* @__PURE__ */ _pluginVue_exportHelper.default(NetworkInfo_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7764fd2c"]]);
+exports.default = NetworkInfo;

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

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const basic = require("../../../stores/basic.js");
+const pinia = require("pinia");
+const index$1 = require("../../../utils/aegis/index.js");
+const index = require("../../../locales/index.js");
+const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const useRoomEngine = require("../../../hooks/useRoomEngine.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const vClickOutside = require("../../../directives/vClickOutside.js");
+const NetworkStabilityIcon = require("../../common/icons/NetworkStabilityIcon.vue.js");
+const NetworkFluctuationIcon = require("../../common/icons/NetworkFluctuationIcon.vue.js");
+const NetworkLagIcon = require("../../common/icons/NetworkLagIcon.vue.js");
+const NetworkDisconnectedIcon = require("../../common/icons/NetworkDisconnectedIcon.vue.js");
+const ArrowStrokeUpIcon = require("../../common/icons/ArrowStrokeUpIcon.vue.js");
+const room = require("../../../constants/room.js");
+const _hoisted_1 = { class: "network-info-container" };
+const _hoisted_2 = { class: "network-detail-item" };
+const _hoisted_3 = { class: "network-detail-item" };
+const _hoisted_4 = { class: "network-detail-packet" };
+const _hoisted_5 = { class: "network-detail-packet-item" };
+const _hoisted_6 = { class: "network-detail-packet-item" };
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NetworkInfo",
+  setup(__props) {
+    const roomEngine = useRoomEngine.default();
+    const { t } = index.useI18n();
+    const basicStore = basic.useBasicStore();
+    const { networkInfo } = pinia.storeToRefs(basicStore);
+    const networkBoard = Vue.ref();
+    const showNetworkInfo = Vue.ref(false);
+    const state = Vue.reactive({
+      title: "",
+      titleType: void 0,
+      networkIcon: null
+    });
+    const qualityMap = {
+      [TUIRoomEngine.TUINetworkQuality.kQualityExcellent]: {
+        title: "Stability",
+        titleType: "success",
+        icon: Vue.shallowRef(NetworkStabilityIcon.default)
+      },
+      [TUIRoomEngine.TUINetworkQuality.kQualityPoor]: {
+        title: "Fluctuation",
+        titleType: "warning",
+        icon: Vue.shallowRef(NetworkFluctuationIcon.default)
+      },
+      [TUIRoomEngine.TUINetworkQuality.kQualityVeryBad]: {
+        title: "Lag",
+        titleType: "danger",
+        icon: Vue.shallowRef(NetworkLagIcon.default)
+      },
+      [TUIRoomEngine.TUINetworkQuality.kQualityDown]: {
+        title: "Disconnected",
+        titleType: "info",
+        icon: Vue.shallowRef(NetworkDisconnectedIcon.default)
+      }
+    };
+    Vue.watchEffect(() => {
+      const quality = qualityMap[networkInfo.value.quality];
+      if (quality) {
+        state.title = quality.title;
+        state.titleType = quality.titleType;
+        state.networkIcon = quality.icon;
+      }
+    });
+    function handleClickNetworkIcon() {
+      showNetworkInfo.value = !showNetworkInfo.value;
+      index$1.default.reportEvent({ name: "networkInfo", ext1: "networkInfo" });
+    }
+    function handleClickOutSide() {
+      if (showNetworkInfo.value) {
+        showNetworkInfo.value = false;
+      }
+    }
+    async function onUserNetworkQualityChanged({ userNetworkList }) {
+      userNetworkList.forEach((userNetwork) => {
+        basicStore.setNetworkInfo(userNetwork);
+      });
+    }
+    TUIRoomEngine.once("ready", () => {
+      var _a;
+      (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEngine.TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+    });
+    Vue.onUnmounted(() => {
+      var _a;
+      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+    });
+    return (_ctx, _cache) => {
+      return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createVNode(IconButton.default, {
+          layout: Vue.unref(room.IconButtonLayout).HORIZONTAL,
+          icon: state.networkIcon,
+          onClickIcon: handleClickNetworkIcon
+        }, {
+          title: Vue.withCtx(() => [
+            Vue.createElementVNode("span", {
+              class: Vue.normalizeClass([`title-type-${state.titleType}`])
+            }, Vue.toDisplayString(Vue.unref(t)(`${state.title}`)), 3)
+          ]),
+          _: 1
+        }, 8, ["layout", "icon"]),
+        showNetworkInfo.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "networkBoard",
+          ref: networkBoard,
+          class: "network-info-board"
+        }, [
+          Vue.createElementVNode("div", _hoisted_2, [
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Latency")), 1),
+            Vue.createElementVNode("span", {
+              class: Vue.normalizeClass(["title-latency", `title-type-${state.titleType}`])
+            }, Vue.toDisplayString(`${Vue.unref(networkInfo).delay} ms`), 3)
+          ]),
+          Vue.createElementVNode("div", _hoisted_3, [
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Packet loss")), 1),
+            Vue.createElementVNode("div", _hoisted_4, [
+              Vue.createElementVNode("div", _hoisted_5, [
+                Vue.createVNode(ArrowStrokeUpIcon.default),
+                Vue.createElementVNode("span", null, Vue.toDisplayString(`${Vue.unref(networkInfo).upLoss}%`), 1)
+              ]),
+              Vue.createElementVNode("div", _hoisted_6, [
+                Vue.createVNode(ArrowStrokeUpIcon.default, { class: "arrow-down" }),
+                Vue.createElementVNode("span", null, Vue.toDisplayString(`${Vue.unref(networkInfo).downLoss}%`), 1)
+              ])
+            ])
+          ])
+        ], 512)) : Vue.createCommentVNode("", true)
+      ])), [
+        [Vue.unref(vClickOutside.default), handleClickOutSide]
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/RoomHeader/index/NetworkInfo.vue3.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "log-out": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    "onLog-out"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;