@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,
211 lines (210 loc) • 8.14 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const chatExtension = require("../chatExtension.js");
const handleRoomMessage = require("./handleRoomMessage.js");
const index = require("../../locales/index.js");
const _hoisted_1 = { class: "content" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { class: "content-desc" };
const _hoisted_5 = { class: "title" };
const _hoisted_6 = { class: "users" };
const _hoisted_7 = ["src", "alt"];
const _hoisted_8 = {
key: 0,
class: "room-info"
};
const _hoisted_9 = {
key: 2,
class: /* @__PURE__ */ Vue.normalizeClass(["room-info", "center"])
};
const defaultAvatarUrl = "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png";
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "RoomMessageCard",
props: {
message: {}
},
setup(__props) {
const { t } = index.useI18n();
const props = __props;
const roomCardData = Vue.ref({
roomId: "",
isRoomMessage: false,
isRoomCreateByMe: false,
isMessageFromMe: false,
roomState: chatExtension.RoomState.CREATING,
userList: [],
isInnerRoom: false,
myProfile: {},
ownerName: "",
owner: ""
});
const roomMessageCard = new handleRoomMessage.HandleRoomMessage();
Vue.watchEffect(() => {
roomMessageCard.initialize(props.message);
const {
isRoomMessage,
isRoomCreateByMe,
roomState,
userList,
roomId,
isInnerRoom,
myProfile,
isMessageFromMe,
ownerName,
owner
} = roomMessageCard.messageData;
roomCardData.value = {
roomId,
isRoomMessage,
isRoomCreateByMe,
isMessageFromMe,
roomState,
userList,
isInnerRoom,
myProfile,
ownerName,
owner
};
});
const avatarLoadError = (e) => {
e.target.src = defaultAvatarUrl;
};
const contentTitleClass = Vue.computed(() => {
const stateMap = {
[chatExtension.RoomState.CREATED]: "success",
[chatExtension.RoomState.CREATING]: "primary",
[chatExtension.RoomState.DESTROYING]: "default",
[chatExtension.RoomState.DESTROYED]: "default"
};
return stateMap[roomCardData.value.roomState];
});
const footerClass = Vue.computed(() => {
const stateMap = {
[chatExtension.RoomState.CREATED]: "default",
[chatExtension.RoomState.CREATING]: "center",
[chatExtension.RoomState.DESTROYING]: "center",
[chatExtension.RoomState.DESTROYED]: "center"
};
return stateMap[roomCardData.value.roomState];
});
const roomInfo = Vue.computed(() => {
if (roomCardData.value.roomState === chatExtension.RoomState.CREATING) {
return {
visible: true,
message: `${t("Initiating")}...`
};
}
if (roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
return {
visible: true,
message: roomCardData.value.userList.length > 1 ? t("X people have joined", {
number: roomCardData.value.userList.length - 1
}) : t("Waiting for members to join the meeting")
};
}
if (!roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
return {
visible: true,
message: t("X people are in the meeting", {
number: roomCardData.value.userList.length
})
};
}
return {
visible: false,
message: ""
};
});
const roomStatus = Vue.computed(() => {
if (roomCardData.value.roomState === chatExtension.RoomState.CREATED) {
return {
visible: true,
message: roomCardData.value.isInnerRoom ? t("Already joined") : t("Enter the meeting")
};
}
return {
visible: false,
message: ""
};
});
const roomDestroy = Vue.computed(() => {
if (roomCardData.value.roomState === chatExtension.RoomState.DESTROYING) {
return {
visible: true,
message: `${t("Ending meeting")}...`
};
}
if (roomCardData.value.roomState === chatExtension.RoomState.DESTROYED) {
return {
visible: true,
message: t("The meeting has ended")
};
}
return {
visible: false,
message: ""
};
});
const enterRoom = () => {
chatExtension.chatExtension.enterRoom(roomCardData.value.roomId, props.message);
};
return (_ctx, _cache) => {
return roomCardData.value.isRoomMessage ? (Vue.openBlock(), Vue.createElementBlock("div", {
key: 0,
class: Vue.normalizeClass([
"room-message-container",
roomCardData.value.isMessageFromMe ? "isMe" : "notMe"
])
}, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["room-message-card-container", roomCardData.value.roomState])
}, [
Vue.createElementVNode("div", _hoisted_1, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["content-title", contentTitleClass.value])
}, [
_cache[0] || (_cache[0] = Vue.createElementVNode("span", { class: "icon" }, null, -1)),
Vue.unref(chatExtension.RoomState).CREATED === roomCardData.value.roomState ? (Vue.openBlock(), Vue.createElementBlock("p", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Meeting in progress")), 1)) : (Vue.openBlock(), Vue.createElementBlock("p", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Meeting")), 1))
], 2),
Vue.createElementVNode("div", _hoisted_4, [
Vue.createElementVNode("div", _hoisted_5, Vue.toDisplayString(`${roomCardData.value.ownerName || roomCardData.value.owner}${Vue.unref(t)("Quick Conference")}`), 1),
Vue.createElementVNode("ul", _hoisted_6, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(roomCardData.value.userList, (user, index2) => {
return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [
index2 <= 4 ? (Vue.openBlock(), Vue.createElementBlock("li", {
key: user.userId
}, [
Vue.createElementVNode("img", {
src: user.faceUrl || defaultAvatarUrl,
alt: user.nickName || user.userId,
onerror: avatarLoadError
}, null, 8, _hoisted_7)
])) : Vue.createCommentVNode("", true),
index2 === 5 ? (Vue.openBlock(), Vue.createElementBlock("li", {
class: "more",
key: user.userId
}, "...")) : Vue.createCommentVNode("", true)
], 64);
}), 256))
])
])
]),
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["footer", footerClass.value, roomCardData.value.isInnerRoom && "in-room"])
}, [
roomInfo.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_8, Vue.toDisplayString(roomInfo.value.message), 1)) : Vue.createCommentVNode("", true),
roomStatus.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", {
key: 1,
class: Vue.normalizeClass(["room-status"]),
onClick: enterRoom
}, Vue.toDisplayString(roomStatus.value.message), 1)) : Vue.createCommentVNode("", true),
roomDestroy.value.visible ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_9, Vue.toDisplayString(roomDestroy.value.message), 1)) : Vue.createCommentVNode("", true)
], 2)
], 2)
], 2)) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;