roomkit-web-vue3/es/components/RoomHeader/UserInfo/UserInfoH5.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, unref, openBlock, createElementBlock, withDirectives, createVNode, createElementVNode, toDisplayString, withModifiers, createCommentVNode } from "vue";
import TuiAvatar from "../../common/Avatar.vue2.mjs";
import useUserInfo from "./useUserInfoHooks.mjs";
import vTap from "../../../directives/vTap.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "../../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../../utils/environment.mjs";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
const _hoisted_1 = { class: "user-info-content" };
const _hoisted_2 = { class: "name" };
const _hoisted_3 = {
  key: 0,
  class: "user-control-container"
};
const _hoisted_4 = { class: "logout-mobile" };
const _hoisted_5 = { class: "logout-mobile-main" };
const _hoisted_6 = { class: "logout" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "UserInfoH5",
  props: {
    userId: {},
    userName: {},
    avatarUrl: {}
  },
  emits: ["log-out"],
  setup(__props) {
    const userInfoConfig = roomService.getComponentConfig("UserInfo");
    const { userInfoRef, showUserControl, t, handleUserControl } = useUserInfo();
    return (_ctx, _cache) => {
      return unref(userInfoConfig).visible ? (openBlock(), createElementBlock("div", {
        key: 0,
        ref_key: "userInfoRef",
        ref: userInfoRef,
        class: "user-info-container"
      }, [
        withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
          createVNode(TuiAvatar, {
            class: "avatar",
            "img-src": _ctx.avatarUrl
          }, null, 8, ["img-src"]),
          createElementVNode("div", _hoisted_2, toDisplayString(_ctx.userName || _ctx.userId), 1)
        ])), [
          [unref(vTap), unref(handleUserControl)]
        ]),
        unref(showUserControl) ? (openBlock(), createElementBlock("div", _hoisted_3, [
          createElementVNode("div", _hoisted_4, [
            createElementVNode("div", _hoisted_5, [
              withDirectives((openBlock(), createElementBlock("div", _hoisted_6, [
                createElementVNode("i", null, toDisplayString(unref(t)("Log out")), 1)
              ])), [
                [unref(vTap), () => _ctx.$emit("log-out")]
              ]),
              createElementVNode("div", {
                class: "close",
                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => showUserControl.value = false, ["stop"]))
              }, [
                createElementVNode("i", null, toDisplayString(unref(t)("Cancel")), 1)
              ])
            ])
          ])
        ])) : createCommentVNode("", true)
      ], 512)) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};