@tencentcloud/roomkit-web-vue3/es/components/RoomHeader/roomHeaderPC/NetworkInfo.vue2.mjs

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

import { defineComponent, ref, reactive, shallowRef, watchEffect, onUnmounted, withDirectives, createCommentVNode, createElementBlock, openBlock, createVNode, unref, withCtx, createElementVNode, normalizeClass, toDisplayString } from "vue";
import { useBasicStore } from "../../../stores/basic.mjs";
import { storeToRefs } from "pinia";
import { useI18n } from "../../../locales/index.mjs";
import TUIRoomEngine__default, { TUINetworkQuality, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
import useRoomEngine from "../../../hooks/useRoomEngine.mjs";
import IconButton from "../../common/base/IconButton.vue.mjs";
import vClickOutside from "../../../directives/vClickOutside.mjs";
import { IconNetworkDisconnected, IconNetworkLag, IconNetworkFluctuation, IconNetworkStability, IconArrowStrokeUp } from "@tencentcloud/uikit-base-component-vue3";
import { IconButtonLayout } from "../../../constants/room.mjs";
const _hoisted_1 = {
  key: 0,
  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 = useRoomEngine();
    const { t } = useI18n();
    const basicStore = useBasicStore();
    const { networkInfo } = storeToRefs(basicStore);
    const networkBoard = ref();
    const showNetworkInfo = ref(false);
    const isShowNetworkContainer = ref(false);
    const state = reactive({
      title: "",
      titleType: void 0,
      networkIcon: null
    });
    const qualityMap = {
      [TUINetworkQuality.kQualityExcellent]: {
        title: "Stability",
        titleType: "success",
        icon: shallowRef(IconNetworkStability)
      },
      [TUINetworkQuality.kQualityPoor]: {
        title: "Fluctuation",
        titleType: "warning",
        icon: shallowRef(IconNetworkFluctuation)
      },
      [TUINetworkQuality.kQualityVeryBad]: {
        title: "Lag",
        titleType: "danger",
        icon: shallowRef(IconNetworkLag)
      },
      [TUINetworkQuality.kQualityDown]: {
        title: "Disconnected",
        titleType: "info",
        icon: shallowRef(IconNetworkDisconnected)
      }
    };
    watchEffect(() => {
      const quality = qualityMap[networkInfo.value.quality];
      if (quality) {
        isShowNetworkContainer.value = true;
        state.title = quality.title;
        state.titleType = quality.titleType;
        state.networkIcon = quality.icon;
      }
    });
    function handleClickNetworkIcon() {
      showNetworkInfo.value = !showNetworkInfo.value;
    }
    function handleClickOutSide() {
      if (showNetworkInfo.value) {
        showNetworkInfo.value = false;
      }
    }
    async function onUserNetworkQualityChanged({
      userNetworkList
    }) {
      userNetworkList.forEach((userNetwork) => {
        basicStore.setNetworkInfo(userNetwork);
      });
    }
    TUIRoomEngine__default.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 isShowNetworkContainer.value ? 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(unref(IconArrowStrokeUp)),
                createElementVNode("span", null, toDisplayString(`${unref(networkInfo).upLoss}%`), 1)
              ]),
              createElementVNode("div", _hoisted_6, [
                createVNode(unref(IconArrowStrokeUp), { class: "arrow-down" }),
                createElementVNode("span", null, toDisplayString(`${unref(networkInfo).downLoss}%`), 1)
              ])
            ])
          ])
        ], 512)) : createCommentVNode("", true)
      ])), [
        [unref(vClickOutside), handleClickOutSide]
      ]) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};