@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,
102 lines (101 loc) • 4.07 kB
JavaScript
import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, createCommentVNode, toDisplayString, createVNode } from "vue";
import { storeToRefs } from "pinia";
import MessageText from "../MessageTypes/MessageText.vue.mjs";
import { isMobile } from "../../../utils/environment.mjs";
import useMessageList from "./useMessageListHook.mjs";
import { getScrollInfo } from "../../../utils/domOperation.mjs";
import { throttle } from "../../../utils/utils.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
const _hoisted_1 = ["title"];
const _hoisted_2 = { class: "message-body" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MessageListPC",
setup(__props) {
const messageListRef = ref();
const roomStore = useRoomStore();
const { getDisplayName } = storeToRefs(roomStore);
const {
messageList,
setMessageListInfo,
handleGetHistoryMessageList,
isCompleted,
getDisplaySenderName
} = useMessageList();
let isScrollAtBottom = true;
const handleMessageListScroll = (e) => {
const messageContainer = e.target;
const bottom = messageContainer.scrollHeight - messageContainer.scrollTop - messageContainer.clientHeight;
isScrollAtBottom = bottom <= 80;
if (messageContainer.scrollTop < 40 && !isCompleted.value) {
handleGetHistoryMessageList();
}
};
const handleScroll = throttle(handleMessageListScroll, 1e3);
async function scrollToLatestMessage() {
const { scrollHeight } = await getScrollInfo("#messageScrollList");
if (messageListRef.value) {
messageListRef.value.scrollTop = scrollHeight;
}
}
watch(messageList, async (newMessageList, oldMessageList) => {
var _a;
if (newMessageList.length === 0) return;
const lastMessage = newMessageList.slice(-1);
const oldLastMessage = oldMessageList.slice(-1);
const isSendByMe = lastMessage[0].flow === "out";
const isNewMessage = lastMessage[0].ID !== ((_a = oldLastMessage[0]) == null ? void 0 : _a.ID);
await nextTick();
if (isScrollAtBottom) {
scrollToLatestMessage();
return;
}
if (isSendByMe && isNewMessage) {
scrollToLatestMessage();
}
});
onMounted(() => {
var _a;
setMessageListInfo();
(_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
var _a;
(_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(unref(isMobile) ? "message-list-container-h5" : "message-list-container")
}, [
createElementVNode("div", {
id: "messageScrollList",
ref_key: "messageListRef",
ref: messageListRef,
class: "message-list"
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(messageList), (item, index) => {
return openBlock(), createElementBlock("div", {
key: item.ID,
ref_for: true,
ref: "messageAimId",
class: normalizeClass(["message-item", `${"out" === item.flow ? "is-me" : ""}`])
}, [
unref(getDisplaySenderName)(index) ? (openBlock(), createElementBlock("div", {
key: 0,
class: "message-header",
title: item.nick || item.from
}, toDisplayString(unref(getDisplayName)(item.from)), 9, _hoisted_1)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_2, [
createVNode(MessageText, {
data: item.payload.text
}, null, 8, ["data"])
])
], 2);
}), 128))
], 512)
], 2);
};
}
});
export {
_sfc_main as default
};