roomkit-web-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,
171 lines (170 loc) • 6.91 kB
JavaScript
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, toDisplayString, createBlock, withCtx, createCommentVNode, Fragment, renderList, withDirectives, vShow } from "vue";
import _imports_0 from "../../../assets/imgs/room_owner.png.mjs";
import _imports_1 from "../../../assets/imgs/room_un_mute_audio.png.mjs";
import _imports_2 from "../../../assets/imgs/room_mute_audio_red.png.mjs";
import _imports_3 from "../../../assets/imgs/room_un_mute_video.png.mjs";
import _imports_4 from "../../../assets/imgs/room_mute_video_red.png.mjs";
import TuiAvatar from "../../common/Avatar.vue2.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import { storeToRefs } from "pinia";
import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
import ScreenOpenIcon from "../../common/icons/ScreenOpenIcon.vue.mjs";
import MemberInvite from "../MemberInvite/MemberInvite.vue2.mjs";
import { useI18n } from "../../../locales/index.mjs";
import { isMobile } from "../../../utils/environment.mjs";
import { TUIRole } from "@tencentcloud/tuiroom-engine-js";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@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: _imports_1,
style: { "width": "20px", "height": "20px" }
};
const _hoisted_5 = {
key: 1,
src: _imports_2,
style: { "width": "20px", "height": "20px" }
};
const _hoisted_6 = {
key: 2,
src: _imports_3,
style: { "width": "20px", "height": "20px" }
};
const _hoisted_7 = {
key: 3,
src: _imports_4,
style: { "width": "20px", "height": "20px" }
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MemberInfo",
props: {
userInfo: {},
showStateIcon: { type: Boolean }
},
setup(__props) {
const { t } = useI18n();
const props = __props;
const basicStore = useBasicStore();
const roomStore = useRoomStore();
const { isMaster, isSpeakAfterTakingSeatMode } = storeToRefs(roomStore);
const isMe = computed(() => basicStore.userId === props.userInfo.userId);
const isTargetUserRoomOwner = computed(
() => props.userInfo.userRole === TUIRole.kRoomOwner
);
const isTargetUserAdmin = computed(
() => props.userInfo.userRole === TUIRole.kAdministrator
);
const extraInfo = 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 = computed(
() => isSpeakAfterTakingSeatMode.value && !props.userInfo.onSeat
);
const iconList = computed(() => {
const list = [];
if (props.userInfo.hasScreenStream) {
list.push({ icon: ScreenOpenIcon });
}
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 openBlock(), createElementBlock("div", {
class: normalizeClass([unref(isMobile) ? "member-info-mobile" : "member-info"])
}, [
createElementVNode("div", {
class: normalizeClass(
!_ctx.showStateIcon && isTargetUserAdmin.value ? "member-basic-info-admin" : "member-basic-info"
)
}, [
createVNode(TuiAvatar, {
class: "avatar-url",
"img-src": _ctx.userInfo.avatarUrl
}, null, 8, ["img-src"]),
createElementVNode("div", _hoisted_1, toDisplayString(unref(roomService).getDisplayName(_ctx.userInfo)), 1),
createElementVNode("div", _hoisted_2, [
isTargetUserRoomOwner.value || isTargetUserAdmin.value ? (openBlock(), createBlock(SvgIcon, {
key: 0,
color: isTargetUserAdmin.value ? "#F06C4B" : "#4791FF",
class: normalizeClass(isTargetUserAdmin.value ? "admin-icon" : "master-icon")
}, {
default: withCtx(() => _cache[0] || (_cache[0] = [
createElementVNode("img", {
src: _imports_0,
style: { "width": "20px", "height": "20px" }
}, null, -1)
])),
_: 1
}, 8, ["color", "class"])) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass(`user-extra-info ${isTargetUserAdmin.value ? "user-extra-info-admin" : ""}`)
}, toDisplayString(extraInfo.value), 3)
])
], 2),
_ctx.showStateIcon ? (openBlock(), createElementBlock("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(iconList.value, (item, index) => {
return openBlock(), createBlock(SvgIcon, {
key: index,
icon: typeof item.icon === "string" ? void 0 : item.icon,
class: normalizeClass(["state-icon", { "disable-icon": item.disable }]),
size: 20
}, {
default: withCtx(() => [
item.icon === "AudioOpenIcon" ? (openBlock(), createElementBlock("img", _hoisted_4)) : createCommentVNode("", true),
item.icon === "AudioCloseIcon" ? (openBlock(), createElementBlock("img", _hoisted_5)) : createCommentVNode("", true),
item.icon === "VideoOpenIcon" ? (openBlock(), createElementBlock("img", _hoisted_6)) : createCommentVNode("", true),
item.icon === "VideoCloseIcon" ? (openBlock(), createElementBlock("img", _hoisted_7)) : createCommentVNode("", true)
]),
_: 2
}, 1032, ["icon", "class"]);
}), 128))
])) : createCommentVNode("", true),
withDirectives(createVNode(MemberInvite, {
class: "member-invite",
"user-info": props.userInfo
}, null, 8, ["user-info"]), [
[vShow, !props.userInfo.isInRoom]
])
], 2);
};
}
});
export {
_sfc_main as default
};