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,
146 lines (145 loc) • 5.53 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, toDisplayString, unref, withDirectives, createTextVNode, createCommentVNode, Fragment, renderList, isRef, withCtx, vShow } from "vue";
import TuiAvatar from "../../common/Avatar.vue2.mjs";
import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
import { isWeChat } from "../../../utils/environment.mjs";
import Dialog from "../../common/base/Dialog/index.mjs";
import vTap from "../../../directives/vTap.mjs";
import useMemberControl from "./useMemberControlHooks.mjs";
import { useI18n } from "../../../locales/index.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import Input from "../../common/base/Input/index.mjs";
const _hoisted_1 = { class: "member-control-container" };
const _hoisted_2 = { class: "member-title" };
const _hoisted_3 = { class: "member-title-content" };
const _hoisted_4 = {
key: 0,
class: "tab-cancel"
};
const _hoisted_5 = { class: "control-title" };
const _hoisted_6 = { class: "input-content" };
const _hoisted_7 = { class: "input" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MemberControlH5",
props: {
userInfo: {},
showMemberControl: { type: Boolean }
},
emits: ["on-close-control"],
setup(__props, { emit: __emit }) {
const props = __props;
const { t } = useI18n();
const {
controlList,
handleCancelDialog,
handleAction,
isDialogVisible,
dialogData,
tempUserName,
isShowInput,
editorInputEleContainer,
editorInputEle
} = useMemberControl(props);
const emit = __emit;
function handleCloseControl() {
isShowInput.value = false;
emit("on-close-control");
}
function handleCloseInput(event) {
if (isWeChat) {
isShowInput.value = false;
} else if (event.target !== event.currentTarget) {
return;
} else {
isShowInput.value = false;
}
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(TuiAvatar, {
class: "avatar-url",
"img-src": _ctx.userInfo.avatarUrl
}, null, 8, ["img-src"]),
createElementVNode("div", _hoisted_3, toDisplayString(unref(roomService).getDisplayName(_ctx.userInfo)), 1),
unref(isWeChat) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_4, [
createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
])), [
[
unref(vTap),
handleCloseControl,
void 0,
{ stop: true }
]
]) : createCommentVNode("", true)
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(controlList), (item) => {
return withDirectives((openBlock(), createElementBlock("div", {
key: item.key,
class: "user-operate-item"
}, [
createVNode(SvgIcon, {
icon: item.icon,
class: "icon-svg"
}, null, 8, ["icon"]),
createElementVNode("div", _hoisted_5, toDisplayString(item.title), 1)
])), [
[unref(vTap), () => item.func(_ctx.userInfo)]
]);
}), 128)),
createVNode(unref(Dialog), {
modelValue: unref(isDialogVisible),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isDialogVisible) ? isDialogVisible.value = $event : null),
title: unref(dialogData).title,
width: "480px",
modal: true,
"append-to-room-container": true,
"confirm-button": unref(dialogData).confirmText,
"cancel-button": unref(t)("Cancel"),
onConfirm: _cache[1] || (_cache[1] = ($event) => unref(handleAction)(props.userInfo)),
onCancel: unref(handleCancelDialog)
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(unref(dialogData).content), 1)
]),
_: 1
}, 8, ["modelValue", "title", "confirm-button", "cancel-button", "onCancel"]),
withDirectives((openBlock(), createElementBlock("div", {
class: "input-content-container",
ref_key: "editorInputEleContainer",
ref: editorInputEleContainer
}, [
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
createVNode(unref(Input), {
ref_key: "editorInputEle",
ref: editorInputEle,
theme: unref(roomService).basicStore.defaultTheme,
"model-value": unref(tempUserName),
type: "text",
enterkeyhint: "done",
onInput: _cache[2] || (_cache[2] = ($event) => tempUserName.value = $event),
onDone: _cache[3] || (_cache[3] = ($event) => unref(handleAction)(props.userInfo))
}, null, 8, ["theme", "model-value"])
])
])
])), [
[
unref(vTap),
handleCloseInput,
void 0,
{ stop: true }
],
[vShow, unref(isShowInput)]
])
]);
};
}
});
export {
_sfc_main as default
};