gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'main' into settings-page

Browse source
This commit is contained in:
JustTemmie 2025-06-01 16:38:02 +02:00
commit cb5360c687
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
2 changed files with 93 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/Message.vue
View file

@ -55,10 +55,6 @@ const dateHidden = ref<boolean>(true);
const date = new Date(props.timestamp);
console.log("Message.vue: message:", props.text);
console.log("Message.vue: message type:", props.type);
console.log("Message.vue: is last?", props.last);
let dateHour = date.getHours();
let dateMinute = date.getMinutes();
if (props.format == "12") {
@ -75,7 +71,12 @@ if (props.format == "12") {
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
}
onMounted(() => {
console.log("message:", props.text);
console.log("author:", props.username);
onMounted(async () => {
console.log("adding listeners")
await nextTick();
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
dateHidden.value = false;
});
@ -83,6 +84,7 @@ onMounted(() => {
messageElement.value?.addEventListener("mouseleave", (e: Event) => {
dateHidden.value = true;
});
console.log("added listeners");
});
//function toggleTooltip(e: Event) {

123
components/MessageArea.vue
View file

@ -4,7 +4,7 @@
<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
format="12" :type="messagesType[message.uuid]"
:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'"
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
:last="i == messages.length - 1" />
</div>
<div id="message-box" class="rounded-corners">
@ -34,50 +34,65 @@ const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
);
function groupMessage(message: MessageResponse) {
messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
const previousMessage = ref<MessageResponse>();
console.log("message:", message.message);
const firstByUser = firstMessageByUsers.value[message.user.uuid];
if (firstByUser) {
console.log("first by user exists");
if (message.user.uuid != firstByUser.user.uuid) {
console.log("message is by new user, setting their first message")
firstMessageByUsers.value[message.user.uuid] = message;
console.log("RETURNING FALSE");
messagesType.value[message.uuid] = "normal";
return;
}
} else {
console.log("first by user doesn't exist");
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
console.log("message:", message.message);
console.log("author:", message.user.username, `(${message.user.uuid})`);
if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
console.log("no previous message or author is different than last messsage's");
messagesType.value[message.uuid] = "normal";
previousMessage.value = message;
console.log("set previous message to:", previousMessage.value.message);
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
firstMessageByUsers.value[message.user.uuid] = message;
return;
}
const firstByUser = firstMessageByUsers.value[message.user.uuid];
if (firstByUser) {
console.log("first by user exists:", firstByUser);
if (message.user.uuid != firstByUser.user.uuid) {
console.log("message is by new user, setting their first message")
firstMessageByUsers.value[message.user.uuid] = message;
console.log("RETURNING FALSE");
messagesType.value[message.uuid] = "normal";
return;
}
const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
const timestamp = messageTimestamps.value[message.uuid];
console.log("first message timestamp:", prevTimestamp);
console.log("timestamp:", timestamp);
const diff = (timestamp - prevTimestamp);
console.log("min diff:", messageGroupingMaxDifference);
console.log("diff:", diff);
const lessThanMax = diff <= messageGroupingMaxDifference;
console.log("group?", lessThanMax);
if (!lessThanMax) {
console.log("diff exceeds max");
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
firstMessageByUsers.value[message.user.uuid] = message;
messagesType.value[message.uuid] = "normal";
return;
}
console.log("RETURNING " + lessThanMax.toString().toUpperCase());
messagesType.value[message.uuid] = "grouped";
} else {
console.log("first by user doesn't exist");
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
firstMessageByUsers.value[message.user.uuid] = message;
console.log("RETURNING FALSE");
messagesType.value[message.uuid] = "normal";
return;
}
const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
const timestamp = messageTimestamps.value[message.uuid];
console.log("first message timestamp:", prevTimestamp);
console.log("timestamp:", timestamp);
const diff = Math.abs(timestamp - prevTimestamp);
console.log("min diff:", messageGroupingMaxDifference);
console.log("diff:", diff);
const lessThanMax = diff <= messageGroupingMaxDifference;
console.log("group?", lessThanMax);
if (!lessThanMax) {
console.log("diff exceeds max");
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
firstMessageByUsers.value[message.user.uuid] = message;
messagesType.value[message.uuid] = "normal";
return;
}
console.log("RETURNING " + lessThanMax.toString().toUpperCase());
messagesType.value[message.uuid] = "grouped";
}
const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
if (messagesRes) {
messagesRes.reverse();
console.log("messages res:", messagesRes.map(msg => msg.message));
@ -97,6 +112,7 @@ if (messagesRes) messages.value = messagesRes;
const accessToken = useCookie("access_token").value;
const apiBase = useCookie("api_base").value;
const { refresh } = useAuth();
const { fetchMessages } = useApi();
let ws: WebSocket;
@ -147,9 +163,42 @@ function sendMessage(e: Event) {
}
}
const route = useRoute();
onMounted(async () => {
if (import.meta.server) return;
if (messagesElement.value) {
scrollToBottom(messagesElement);
let fetched = false;
const amount = messages.value.length;
let offset = messages.value.length;
messagesElement.value.addEventListener("scroll", async (e) => {
if (e.target) {
const target = e.target as HTMLDivElement;
if (target.scrollTop <= target.scrollHeight * 0.1) {
if (fetched) return;
fetched = true;
console.log("scroll height is at 10% or less");
//console.log("current oldest:", currentOldestMessage);
const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
if (olderMessages) {
olderMessages.reverse();
console.log("older messages:", olderMessages);
if (olderMessages.length == 0) return;
for (const [i, oldMessage] of olderMessages.entries()) {
console.log("old message:", oldMessage);
messages.value.unshift(oldMessage);
for (const message of messages.value) {
groupMessage(message);
}
}
offset += offset;
}
} else {
fetched = false;
}
}
});
}
});