roomkit-web-vue3/lib/components/ManageMember/MemberItemCommon/MemberInfo.vue3.js

<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,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const room_owner = require("../../../assets/imgs/room_owner.png.js");
const room_un_mute_audio = require("../../../assets/imgs/room_un_mute_audio.png.js");
const room_mute_audio_red = require("../../../assets/imgs/room_mute_audio_red.png.js");
const room_un_mute_video = require("../../../assets/imgs/room_un_mute_video.png.js");
const room_mute_video_red = require("../../../assets/imgs/room_mute_video_red.png.js");
const Avatar = require("../../common/Avatar.vue2.js");
const basic = require("../../../stores/basic.js");
const room = require("../../../stores/room.js");
const pinia = require("pinia");
const SvgIcon = require("../../common/base/SvgIcon.vue.js");
const ScreenOpenIcon = require("../../common/icons/ScreenOpenIcon.vue.js");
const MemberInvite = require("../MemberInvite/MemberInvite.vue2.js");
const index = require("../../../locales/index.js");
const environment = require("../../../utils/environment.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const _hoisted_1 = { class: "user-name" };
const _hoisted_2 = { class: "role-info" };
const _hoisted_3 = {
  key: 0,
  class: "member-av-state"
};
const _hoisted_4 = {
  key: 0,
  src: room_un_mute_audio.default,
  style: { "width": "20px", "height": "20px" }
};
const _hoisted_5 = {
  key: 1,
  src: room_mute_audio_red.default,
  style: { "width": "20px", "height": "20px" }
};
const _hoisted_6 = {
  key: 2,
  src: room_un_mute_video.default,
  style: { "width": "20px", "height": "20px" }
};
const _hoisted_7 = {
  key: 3,
  src: room_mute_video_red.default,
  style: { "width": "20px", "height": "20px" }
};
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "MemberInfo",
  props: {
    userInfo: {},
    showStateIcon: { type: Boolean }
  },
  setup(__props) {
    const { t } = index.useI18n();
    const props = __props;
    const basicStore = basic.useBasicStore();
    const roomStore = room.useRoomStore();
    const { isMaster, isSpeakAfterTakingSeatMode } = pinia.storeToRefs(roomStore);
    const isMe = Vue.computed(() => basicStore.userId === props.userInfo.userId);
    const isTargetUserRoomOwner = Vue.computed(
      () => props.userInfo.userRole === TUIRoomEngine.TUIRole.kRoomOwner
    );
    const isTargetUserAdmin = Vue.computed(
      () => props.userInfo.userRole === TUIRoomEngine.TUIRole.kAdministrator
    );
    const extraInfo = Vue.computed(() => {
      if (isMaster.value && isMe.value) {
        return `${t("Host")}, ${t("Me")}`;
      }
      if (isTargetUserRoomOwner.value) {
        return t("Host");
      }
      if (isTargetUserAdmin.value && isMe.value) {
        return `${t("Admin")}, ${t("Me")}`;
      }
      if (isTargetUserAdmin.value) {
        return t("Admin");
      }
      if (isMe.value) {
        return t("Me");
      }
      return "";
    });
    const isAudienceRole = Vue.computed(
      () => isSpeakAfterTakingSeatMode.value && !props.userInfo.onSeat
    );
    const iconList = Vue.computed(() => {
      const list = [];
      if (props.userInfo.hasScreenStream) {
        list.push({ icon: ScreenOpenIcon.default });
      }
      if (!isAudienceRole.value) {
        list.push({
          icon: props.userInfo.hasAudioStream ? "AudioOpenIcon" : "AudioCloseIcon"
        });
        list.push({
          icon: props.userInfo.hasVideoStream ? "VideoOpenIcon" : "VideoCloseIcon"
        });
      }
      if (isAudienceRole.value && !props.userInfo.isUserApplyingToAnchor) {
        list.push({ icon: "AudioCloseIcon", disable: true });
        list.push({ icon: "VideoCloseIcon", disable: true });
      }
      return list;
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        class: Vue.normalizeClass([Vue.unref(environment.isMobile) ? "member-info-mobile" : "member-info"])
      }, [
        Vue.createElementVNode("div", {
          class: Vue.normalizeClass(
            !_ctx.showStateIcon && isTargetUserAdmin.value ? "member-basic-info-admin" : "member-basic-info"
          )
        }, [
          Vue.createVNode(Avatar.default, {
            class: "avatar-url",
            "img-src": _ctx.userInfo.avatarUrl
          }, null, 8, ["img-src"]),
          Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(Vue.unref(roomService.roomService).getDisplayName(_ctx.userInfo)), 1),
          Vue.createElementVNode("div", _hoisted_2, [
            isTargetUserRoomOwner.value || isTargetUserAdmin.value ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
              key: 0,
              color: isTargetUserAdmin.value ? "#F06C4B" : "#4791FF",
              class: Vue.normalizeClass(isTargetUserAdmin.value ? "admin-icon" : "master-icon")
            }, {
              default: Vue.withCtx(() => _cache[0] || (_cache[0] = [
                Vue.createElementVNode("img", {
                  src: room_owner.default,
                  style: { "width": "20px", "height": "20px" }
                }, null, -1)
              ])),
              _: 1
            }, 8, ["color", "class"])) : Vue.createCommentVNode("", true),
            Vue.createElementVNode("div", {
              class: Vue.normalizeClass(`user-extra-info ${isTargetUserAdmin.value ? "user-extra-info-admin" : ""}`)
            }, Vue.toDisplayString(extraInfo.value), 3)
          ])
        ], 2),
        _ctx.showStateIcon ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(iconList.value, (item, index2) => {
            return Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
              key: index2,
              icon: typeof item.icon === "string" ? void 0 : item.icon,
              class: Vue.normalizeClass(["state-icon", { "disable-icon": item.disable }]),
              size: 20
            }, {
              default: Vue.withCtx(() => [
                item.icon === "AudioOpenIcon" ? (Vue.openBlock(), Vue.createElementBlock("img", _hoisted_4)) : Vue.createCommentVNode("", true),
                item.icon === "AudioCloseIcon" ? (Vue.openBlock(), Vue.createElementBlock("img", _hoisted_5)) : Vue.createCommentVNode("", true),
                item.icon === "VideoOpenIcon" ? (Vue.openBlock(), Vue.createElementBlock("img", _hoisted_6)) : Vue.createCommentVNode("", true),
                item.icon === "VideoCloseIcon" ? (Vue.openBlock(), Vue.createElementBlock("img", _hoisted_7)) : Vue.createCommentVNode("", true)
              ]),
              _: 2
            }, 1032, ["icon", "class"]);
          }), 128))
        ])) : Vue.createCommentVNode("", true),
        Vue.withDirectives(Vue.createVNode(MemberInvite.default, {
          class: "member-invite",
          "user-info": props.userInfo
        }, null, 8, ["user-info"]), [
          [Vue.vShow, !props.userInfo.isInRoom]
        ])
      ], 2);
    };
  }
});
exports.default = _sfc_main;