@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,
68 lines (67 loc) • 2.45 kB
JavaScript
import { reactive, markRaw, h, render } from "vue";
import { IconEditNameCard, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
import { MESSAGE_DURATION } from "../../../../../constants/message.mjs";
import useRoomEngine from "../../../../../hooks/useRoomEngine.mjs";
import { useI18n } from "../../../../../locales/index.mjs";
import ChangeNameCardDialog from "./changeNameCardDialog.vue.mjs";
import changeNameCardInput from "./changeNameCardInput.vue.mjs";
import { calculateByteLength } from "../../../../../utils/utils.mjs";
import { UserAction } from "../../../../type/User.mjs";
import { isMobile } from "../../../../../utils/environment.mjs";
const roomEngine = useRoomEngine();
const { t } = useI18n();
function useNameCardAction(userInfo) {
const nameCardCheck = (inputUserName) => {
const result = calculateByteLength(inputUserName) <= 32;
!result && TUIToast({
type: TOAST_TYPE.WARNING,
message: t("The user name cannot exceed 32 characters"),
duration: MESSAGE_DURATION.NORMAL
});
return result;
};
async function handleChangeUserNameCard(inputUserName) {
var _a;
if (!nameCardCheck(inputUserName)) {
return Promise.reject("The user name cannot exceed 32 characters");
}
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserNameCard({
userId: userInfo.userId,
nameCard: inputUserName
}));
TUIToast({
type: TOAST_TYPE.SUCCESS,
message: t("Name changed successfully"),
duration: MESSAGE_DURATION.NORMAL
});
} catch (error) {
TUIToast({
type: TOAST_TYPE.ERROR,
message: t("change name failed, please try again."),
duration: 5e3
});
}
}
function renderChangeNameCardDialog() {
var _a;
const Component = isMobile ? changeNameCardInput : ChangeNameCardDialog;
const vNode = h(Component, {
userInfo,
confirmFunction: handleChangeUserNameCard
});
const div = document.createElement("div");
render(vNode, div);
(_a = document.getElementById("roomContainer")) == null ? void 0 : _a.appendChild(div.childNodes[0]);
}
const changeUserNameCard = reactive({
key: UserAction.ChangeUserNameCardAction,
icon: markRaw(IconEditNameCard),
label: t("change name"),
handler: renderChangeNameCardDialog
});
return changeUserNameCard;
}
export {
useNameCardAction as default
};