@tencentcloud/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,
156 lines (155 loc) • 6.5 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const index = require("../../common/base/Dialog/index.js");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const index$1 = require("../../common/base/Input/index.js");
const useUserInfoHooks = require("./useUserInfoHooks.js");
const Avatar = require("../../common/Avatar.vue2.js");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
require("../../../locales/index.js");
require("../../../utils/environment.js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const message = require("../../../constants/message.js");
const basic = require("../../../stores/basic.js");
const room = require("../../../stores/room.js");
const _hoisted_1 = { class: "name" };
const _hoisted_2 = {
key: 0,
class: "user-control-container"
};
const _hoisted_3 = { class: "edit-content" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "UserInfoPC",
props: {
userId: {},
userName: {},
avatarUrl: {},
isShowEditName: { type: Boolean }
},
emits: ["log-out", "update-user-name"],
setup(__props, { emit: __emit }) {
const emits = __emit;
const userInfoConfig = roomService.roomService.getComponentConfig("UserInfo");
const basicStore = basic.useBasicStore();
const roomStore = room.useRoomStore();
const {
t,
showUserControl,
isUserNameEditorVisible,
userInfoRef,
tempUserName,
handleUserControl,
showEditUserNameDialog,
closeUserNameEditor
} = useUserInfoHooks.default();
const props = __props;
async function saveUserName(userName) {
const { userId } = props;
if (userName.length === 0) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: t("Username length should be greater than 0"),
duration: message.MESSAGE_DURATION.NORMAL
});
return;
}
await TUIRoomEngine.setSelfInfo({
userName,
avatarUrl: roomStore.localUser.avatarUrl || ""
});
basicStore.setUserName(userName);
roomStore.updateUserInfo({ userId, userName });
emits("update-user-name", userName);
closeUserNameEditor();
}
return (_ctx, _cache) => {
return Vue.unref(userInfoConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", {
key: 0,
ref_key: "userInfoRef",
ref: userInfoRef,
class: "user-info-container"
}, [
Vue.createElementVNode("div", {
class: "user-info-content",
onClick: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => Vue.unref(handleUserControl) && Vue.unref(handleUserControl)(...args))
}, [
Vue.createVNode(Avatar.default, {
class: "avatar",
"img-src": _ctx.avatarUrl
}, null, 8, ["img-src"]),
Vue.createElementVNode("div", _hoisted_1, Vue.toDisplayString(props.userName || props.userId), 1),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconArrowStrokeSelectDown), {
size: "12",
class: Vue.normalizeClass([Vue.unref(showUserControl) ? "up-icon" : "down-icon"])
}, null, 8, ["class"])
]),
Vue.unref(showUserControl) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
Vue.withDirectives(Vue.createElementVNode("div", null, [
Vue.createElementVNode("div", {
class: "user-control-item-head",
onClick: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => Vue.unref(showEditUserNameDialog) && Vue.unref(showEditUserNameDialog)(...args))
}, Vue.toDisplayString(Vue.unref(t)("Edit profile")), 1)
], 512), [
[Vue.vShow, props.isShowEditName]
]),
Vue.createElementVNode("div", {
class: "user-control-item-foot",
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("log-out"))
}, Vue.toDisplayString(Vue.unref(t)("Log out")), 1)
])) : Vue.createCommentVNode("", true),
Vue.createVNode(Vue.unref(index.default), {
modelValue: Vue.unref(isUserNameEditorVisible),
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => Vue.isRef(isUserNameEditorVisible) ? isUserNameEditorVisible.value = $event : null),
title: Vue.unref(t)("Edit profile"),
modal: true,
width: "480px",
"close-on-click-modal": true,
"append-to-body": true
}, {
footer: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: Vue.unref(closeUserNameEditor),
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
}, 8, ["onClick"]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: _cache[4] || (_cache[4] = ($event) => saveUserName(Vue.unref(tempUserName))),
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Save")), 1)
]),
_: 1
})
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("div", _hoisted_3, [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("User Name")), 1),
Vue.createVNode(Vue.unref(index$1.default), {
"model-value": Vue.unref(tempUserName),
onInput: _cache[3] || (_cache[3] = ($event) => tempUserName.value = $event),
class: "edit-name-input",
maxlength: "16",
placeholder: Vue.unref(t)("Please input user name")
}, null, 8, ["model-value", "placeholder"])
])
]),
_: 1
}, 8, ["modelValue", "title"])
], 512)) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;