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