@tencentcloud/roomkit-electron-vue3
Version:
<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,
140 lines (139 loc) • 6.06 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Avatar = require("../../common/Avatar.vue.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 VideoOpenIcon = require("../../common/icons/VideoOpenIcon.vue.js");
const VideoCloseIcon = require("../../common/icons/VideoCloseIcon.vue.js");
const AudioOpenIcon = require("../../common/icons/AudioOpenIcon.vue.js");
const AudioCloseIcon = require("../../common/icons/AudioCloseIcon.vue.js");
const ScreenOpenIcon = require("../../common/icons/ScreenOpenIcon.vue.js");
const ApplyActiveIcon = require("../../common/icons/ApplyActiveIcon.vue.js");
const MemberInvite = require("../MemberInvite/MemberInvite.vue.js");
const index = require("../../../locales/index.js");
const environment = require("../../../utils/environment.js");
const UserIcon = require("../../common/icons/UserIcon.vue.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
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 _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.default : AudioCloseIcon.default
});
list.push({
icon: props.userInfo.hasVideoStream ? VideoOpenIcon.default : VideoCloseIcon.default
});
}
if (isAudienceRole.value && !props.userInfo.isUserApplyingToAnchor) {
list.push({ icon: AudioCloseIcon.default, disable: true });
list.push({ icon: VideoCloseIcon.default, disable: true });
}
if (isAudienceRole.value && props.userInfo.isUserApplyingToAnchor) {
list.push({ icon: ApplyActiveIcon.default, size: 20 });
}
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,
icon: UserIcon.default,
color: isTargetUserAdmin.value ? "#F06C4B" : "#4791FF",
class: Vue.normalizeClass(isTargetUserAdmin.value ? "admin-icon" : "master-icon")
}, null, 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: item.icon,
class: Vue.normalizeClass(["state-icon", { "disable-icon": item.disable }]),
size: item.size
}, null, 8, ["icon", "class", "size"]);
}), 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;