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.15 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const MessageText = require("../MessageTypes/MessageText.vue2.js");
const environment = require("../../../utils/environment.js");
const useMessageListHook = require("./useMessageListHook.js");
const domOperation = require("../../../utils/domOperation.js");
const utils = require("../../../utils/utils.js");
const room = require("../../../stores/room.js");
const _hoisted_1 = ["title"];
const _hoisted_2 = { class: "message-body" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "MessageListPC",
setup(__props) {
const messageListRef = Vue.ref();
const roomStore = room.useRoomStore();
const { getDisplayName } = pinia.storeToRefs(roomStore);
const {
messageList,
setMessageListInfo,
handleGetHistoryMessageList,
isCompleted,
getDisplaySenderName
} = useMessageListHook.default();
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 = utils.throttle(handleMessageListScroll, 1e3);
async function scrollToLatestMessage() {
const { scrollHeight } = await domOperation.getScrollInfo("#messageScrollList");
if (messageListRef.value) {
messageListRef.value.scrollTop = scrollHeight;
}
}
Vue.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 Vue.nextTick();
if (isScrollAtBottom) {
scrollToLatestMessage();
return;
}
if (isSendByMe && isNewMessage) {
scrollToLatestMessage();
}
});
Vue.onMounted(() => {
var _a;
setMessageListInfo();
(_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
});
Vue.onUnmounted(() => {
var _a;
(_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
class: Vue.normalizeClass(Vue.unref(environment.isMobile) ? "message-list-container-h5" : "message-list-container")
}, [
Vue.createElementVNode("div", {
id: "messageScrollList",
ref_key: "messageListRef",
ref: messageListRef,
class: "message-list"
}, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(messageList), (item, index) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: item.ID,
ref_for: true,
ref: "messageAimId",
class: Vue.normalizeClass(["message-item", `${"out" === item.flow ? "is-me" : ""}`])
}, [
Vue.unref(getDisplaySenderName)(index) ? (Vue.openBlock(), Vue.createElementBlock("div", {
key: 0,
class: "message-header",
title: item.nick || item.from
}, Vue.toDisplayString(Vue.unref(getDisplayName)(item.from)), 9, _hoisted_1)) : Vue.createCommentVNode("", true),
Vue.createElementVNode("div", _hoisted_2, [
Vue.createVNode(MessageText.default, {
data: item.payload.text
}, null, 8, ["data"])
])
], 2);
}), 128))
], 512)
], 2);
};
}
});
exports.default = _sfc_main;