@tencentcloud/roomkit-electron-vue3 2.3.3

package/es/components/RoomHeader/RoomInfo/useRoomInfoHooks.mjs

@@ -0,0 +1,79 @@
+import { ref, computed } from "vue";
+import { useI18n } from "../../../locales/index.mjs";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import { useRoomStore } from "../../../stores/room.mjs";
+import { storeToRefs } from "pinia";
+import renderMsg from "../../common/base/Message/Message.mjs";
+import { clipBoard } from "../../../utils/adapter.mjs";
+import useRoomInvite from "../../RoomInvite/useRoomInviteHooks.mjs";
+import { isWeChat } from "../../../utils/environment.mjs";
+import "../../../services/main.mjs";
+import { roomService } from "../../../services/roomService.mjs";
+import "@tencentcloud/tuiroom-engine-electron";
+import "mitt";
+import "../../../services/manager/roomActionManager.mjs";
+function useRoomInfo() {
+  const { inviteLink } = useRoomInvite();
+  const basicStore = useBasicStore();
+  const roomStore = useRoomStore();
+  const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
+  const { masterUserId } = storeToRefs(roomStore);
+  const { t } = useI18n();
+  const isShowRoomInfo = ref(false);
+  const roomType = computed(() => roomStore.isFreeSpeakMode ? t("Free Speech Room") : t("On-stage Speaking Room"));
+  const arrowDirection = ref(false);
+  const roomLinkConfig = roomService.getComponentConfig("RoomLink");
+  const masterUserName = computed(() => roomStore.getUserName(masterUserId.value) || masterUserId.value);
+  const isShowRoomInfoTitle = computed(() => masterUserName.value);
+  const conferenceTitle = computed(() => `${masterUserName.value}${t("Quick Meeting")}`);
+  const roomInfoTabList = 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 clipBoard(value);
+      renderMsg({
+        message: t("Copied successfully"),
+        type: "success"
+      });
+    } catch (error) {
+      renderMsg({
+        message: t("Copied failure"),
+        type: "error"
+      });
+    }
+  }
+  return {
+    t,
+    arrowDirection,
+    isWeChat,
+    isShowRoomInfo,
+    isShowRoomInfoTitle,
+    conferenceTitle,
+    roomInfoTabList,
+    handleCloseRoomInfo,
+    toggleShowRoomInfoStatus,
+    handleClickOutsideRoomInfoContainer,
+    onCopy
+  };
+}
+export {
+  useRoomInfo as default
+};

package/es/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/es/components/RoomHeader/UserInfo/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+import "./index.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const UserInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-45ccc1b8"]]);
+export {
+  UserInfo as default
+};

package/es/components/RoomHeader/UserInfo/index.vue2.mjs

@@ -0,0 +1,155 @@
+import { defineComponent, unref, openBlock, createElementBlock, createElementVNode, createVNode, toDisplayString, normalizeClass, withDirectives, vShow, createCommentVNode, isRef, withCtx, createTextVNode } from "vue";
+import Dialog from "../../common/base/Dialog/index.vue.mjs";
+import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
+import ArrowStrokeSelectDownIcon from "../../common/icons/ArrowStrokeSelectDownIcon.vue.mjs";
+import useUserInfo from "./useUserInfoHooks.mjs";
+import Avatar from "../../common/Avatar.vue.mjs";
+import TuiButton from "../../common/base/Button.vue.mjs";
+import TuiInput from "../../common/base/Input.vue.mjs";
+import { isInnerScene } from "../../../utils/constants.mjs";
+import "../../../services/main.mjs";
+import { roomService } from "../../../services/roomService.mjs";
+import "../../../locales/index.mjs";
+import TUIRoomEngine from "@tencentcloud/tuiroom-engine-electron";
+import "mitt";
+import "../../../services/manager/roomActionManager.mjs";
+import renderMsg from "../../common/base/Message/Message.mjs";
+import { MESSAGE_DURATION } from "../../../constants/message.mjs";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import { useRoomStore } from "../../../stores/room.mjs";
+const _hoisted_1 = { class: "name" };
+const _hoisted_2 = {
+  key: 0,
+  class: "user-control-container"
+};
+const _hoisted_3 = { class: "edit-content" };
+const _sfc_main = /* @__PURE__ */ 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.getComponentConfig("UserInfo");
+    const basicStore = useBasicStore();
+    const roomStore = useRoomStore();
+    const {
+      t,
+      showUserControl,
+      showUserNameEdit,
+      userInfoRef,
+      tempUserName,
+      handleUserControl,
+      showEditUserNameDialog,
+      closeEditUserNameDialog
+    } = useUserInfo();
+    const props = __props;
+    const showEditNameContainer = isInnerScene && props.isShowEditName;
+    async function handleSaveUserName(userName) {
+      if (userName.length === 0) {
+        renderMsg({
+          type: "warning",
+          message: t("Username length should be greater than 0"),
+          duration: 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 unref(userInfoConfig).visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "userInfoRef",
+        ref: userInfoRef,
+        class: "user-info-container"
+      }, [
+        createElementVNode("div", {
+          class: "user-info-content",
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(handleUserControl) && unref(handleUserControl)(...args))
+        }, [
+          createVNode(Avatar, {
+            class: "avatar",
+            "img-src": _ctx.avatarUrl
+          }, null, 8, ["img-src"]),
+          createElementVNode("div", _hoisted_1, toDisplayString(_ctx.userName || _ctx.userId), 1),
+          createVNode(SvgIcon, {
+            class: normalizeClass([unref(showUserControl) ? "up-icon" : "down-icon"]),
+            icon: ArrowStrokeSelectDownIcon
+          }, null, 8, ["class"])
+        ]),
+        unref(showUserControl) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          withDirectives(createElementVNode("div", null, [
+            createElementVNode("div", {
+              class: "user-control-item-head",
+              onClick: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(showEditUserNameDialog) && unref(showEditUserNameDialog)(...args))
+            }, toDisplayString(unref(t)("Edit profile")), 1)
+          ], 512), [
+            [vShow, unref(showEditNameContainer)]
+          ]),
+          createElementVNode("div", {
+            class: "user-control-item-foot",
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("log-out"))
+          }, toDisplayString(unref(t)("Log out")), 1)
+        ])) : createCommentVNode("", true),
+        createVNode(Dialog, {
+          modelValue: unref(showUserNameEdit),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(showUserNameEdit) ? showUserNameEdit.value = $event : null),
+          title: unref(t)("Edit profile"),
+          modal: true,
+          width: "480px",
+          "close-on-click-modal": true,
+          "append-to-body": true
+        }, {
+          footer: withCtx(() => [
+            createVNode(TuiButton, {
+              class: "button",
+              size: "default",
+              onClick: unref(closeEditUserNameDialog)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            createVNode(TuiButton, {
+              class: "button",
+              size: "default",
+              type: "primary",
+              onClick: _cache[4] || (_cache[4] = ($event) => handleSaveUserName(unref(tempUserName)))
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Save")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("span", null, toDisplayString(unref(t)("User Name")), 1),
+              createVNode(TuiInput, {
+                modelValue: unref(tempUserName),
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(tempUserName) ? tempUserName.value = $event : null),
+                class: "edit-name-input",
+                placeholder: unref(t)("Please input user name")
+              }, null, 8, ["modelValue", "placeholder"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ], 512)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/RoomHeader/UserInfo/index.vue3.mjs

@@ -0,0 +1 @@
+

package/es/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/es/components/RoomHeader/UserInfo/useUserInfoHooks.mjs

@@ -0,0 +1,48 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { useI18n } from "../../../locales/index.mjs";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import { storeToRefs } from "pinia";
+function useUserInfo() {
+  const { t } = useI18n();
+  const basicStore = useBasicStore();
+  const { userName } = storeToRefs(basicStore);
+  const userInfoRef = ref();
+  const showUserControl = ref(false);
+  const showUserNameEdit = ref(false);
+  const tempUserName = 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;
+  }
+  onMounted(() => {
+    window.addEventListener("click", hideUserControl);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("click", hideUserControl);
+  });
+  return {
+    t,
+    showUserControl,
+    showUserNameEdit,
+    userInfoRef,
+    tempUserName,
+    handleUserControl,
+    showEditUserNameDialog,
+    closeEditUserNameDialog
+  };
+}
+export {
+  useUserInfo as default
+};

package/es/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/es/components/RoomHeader/index/LayoutControl.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./LayoutControl.vue2.mjs";
+import "./LayoutControl.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const LayoutControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-80cb6f9f"]]);
+export {
+  LayoutControl as default
+};

package/es/components/RoomHeader/index/LayoutControl.vue2.mjs

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

package/es/components/RoomHeader/index/LayoutControl.vue3.mjs

@@ -0,0 +1 @@
+

package/es/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/es/components/RoomHeader/index/NetworkInfo.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./NetworkInfo.vue2.mjs";
+import "./NetworkInfo.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const NetworkInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7764fd2c"]]);
+export {
+  NetworkInfo as default
+};

package/es/components/RoomHeader/index/NetworkInfo.vue2.mjs

@@ -0,0 +1,136 @@
+import { defineComponent, ref, reactive, shallowRef, watchEffect, onUnmounted, withDirectives, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { useBasicStore } from "../../../stores/basic.mjs";
+import { storeToRefs } from "pinia";
+import roomAegis from "../../../utils/aegis/index.mjs";
+import { useI18n } from "../../../locales/index.mjs";
+import TUIRoomEngine, { TUINetworkQuality, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-electron";
+import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
+import IconButton from "../../common/base/IconButton.vue.mjs";
+import vClickOutside from "../../../directives/vClickOutside.mjs";
+import NetworkStabilityIcon from "../../common/icons/NetworkStabilityIcon.vue.mjs";
+import NetworkFluctuationIcon from "../../common/icons/NetworkFluctuationIcon.vue.mjs";
+import NetworkLagIcon from "../../common/icons/NetworkLagIcon.vue.mjs";
+import NetworkDisconnectedIcon from "../../common/icons/NetworkDisconnectedIcon.vue.mjs";
+import ArrowStrokeUpIcon from "../../common/icons/ArrowStrokeUpIcon.vue.mjs";
+import { IconButtonLayout } from "../../../constants/room.mjs";
+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__ */ defineComponent({
+  __name: "NetworkInfo",
+  setup(__props) {
+    const roomEngine = useGetRoomEngine();
+    const { t } = useI18n();
+    const basicStore = useBasicStore();
+    const { networkInfo } = storeToRefs(basicStore);
+    const networkBoard = ref();
+    const showNetworkInfo = ref(false);
+    const state = reactive({
+      title: "",
+      titleType: void 0,
+      networkIcon: null
+    });
+    const qualityMap = {
+      [TUINetworkQuality.kQualityExcellent]: {
+        title: "Stability",
+        titleType: "success",
+        icon: shallowRef(NetworkStabilityIcon)
+      },
+      [TUINetworkQuality.kQualityPoor]: {
+        title: "Fluctuation",
+        titleType: "warning",
+        icon: shallowRef(NetworkFluctuationIcon)
+      },
+      [TUINetworkQuality.kQualityVeryBad]: {
+        title: "Lag",
+        titleType: "danger",
+        icon: shallowRef(NetworkLagIcon)
+      },
+      [TUINetworkQuality.kQualityDown]: {
+        title: "Disconnected",
+        titleType: "info",
+        icon: shallowRef(NetworkDisconnectedIcon)
+      }
+    };
+    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;
+      roomAegis.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(TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+    });
+    onUnmounted(() => {
+      var _a;
+      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(IconButton, {
+          layout: unref(IconButtonLayout).HORIZONTAL,
+          icon: state.networkIcon,
+          onClickIcon: handleClickNetworkIcon
+        }, {
+          title: withCtx(() => [
+            createElementVNode("span", {
+              class: normalizeClass([`title-type-${state.titleType}`])
+            }, toDisplayString(unref(t)(`${state.title}`)), 3)
+          ]),
+          _: 1
+        }, 8, ["layout", "icon"]),
+        showNetworkInfo.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "networkBoard",
+          ref: networkBoard,
+          class: "network-info-board"
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("span", null, toDisplayString(unref(t)("Latency")), 1),
+            createElementVNode("span", {
+              class: normalizeClass(["title-latency", `title-type-${state.titleType}`])
+            }, toDisplayString(`${unref(networkInfo).delay} ms`), 3)
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("span", null, toDisplayString(unref(t)("Packet loss")), 1),
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createVNode(ArrowStrokeUpIcon),
+                createElementVNode("span", null, toDisplayString(`${unref(networkInfo).upLoss}%`), 1)
+              ]),
+              createElementVNode("div", _hoisted_6, [
+                createVNode(ArrowStrokeUpIcon, { class: "arrow-down" }),
+                createElementVNode("span", null, toDisplayString(`${unref(networkInfo).downLoss}%`), 1)
+              ])
+            ])
+          ])
+        ], 512)) : createCommentVNode("", true)
+      ])), [
+        [unref(vClickOutside), handleClickOutSide]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/RoomHeader/index/NetworkInfo.vue3.mjs

@@ -0,0 +1 @@
+

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

package/es/components/RoomHeader/index/index.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./index.vue2.mjs";
+import "./index.vue3.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const RoomHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28759190"]]);
+export {
+  RoomHeader as default
+};