Merge branch 'main' into settings-page
All checks were successful
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
All checks were successful
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
This commit is contained in:
commit
1302826ba8
9 changed files with 153 additions and 75 deletions
|
|
@ -1,38 +1,36 @@
|
|||
<template>
|
||||
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
|
||||
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
|
||||
<div class="left-column">
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
|
||||
<Icon v-else name="lucide:user" class="message-author-avatar" />
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-metadata">
|
||||
<span class="message-author-username">
|
||||
<span class="message-author-username" tabindex="0">
|
||||
{{ username }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
{{ messageDate }}
|
||||
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-text" v-html="sanitized"></div>
|
||||
<div class="message-text" v-html="sanitized" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
|
||||
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
|
||||
<div class="left-column">
|
||||
<div>
|
||||
<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
|
||||
{{ messageDate }}
|
||||
</span>
|
||||
</div>
|
||||
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
|
||||
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-text" v-html="sanitized"></div>
|
||||
<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DOMPurify from 'dompurify';
|
||||
import { parseInline } from 'marked';
|
||||
import { parse } from 'marked';
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string,
|
||||
|
|
@ -46,38 +44,20 @@ const props = defineProps<{
|
|||
last: boolean
|
||||
}>();
|
||||
|
||||
const messageDate = ref<string>();
|
||||
|
||||
const messageElement = ref<HTMLDivElement>();
|
||||
|
||||
const dateHidden = ref<boolean>(true);
|
||||
|
||||
const date = new Date(props.timestamp);
|
||||
|
||||
let dateHour = date.getHours();
|
||||
let dateMinute = date.getMinutes();
|
||||
if (props.format == "12") {
|
||||
if (dateHour > 12) {
|
||||
dateHour = dateHour - 12;
|
||||
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
|
||||
} else {
|
||||
if (dateHour == 0) {
|
||||
dateHour = 12;
|
||||
}
|
||||
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
|
||||
}
|
||||
} else {
|
||||
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
|
||||
}
|
||||
|
||||
console.log("message:", props.text);
|
||||
console.log("author:", props.username);
|
||||
|
||||
const sanitized = ref<string>();
|
||||
|
||||
onMounted(async () => {
|
||||
const parsed = await parseInline(props.text, {gfm: true });
|
||||
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });
|
||||
const parsed = await parse(props.text, { gfm: true });
|
||||
sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
|
||||
console.log("adding listeners")
|
||||
await nextTick();
|
||||
messageElement.value?.addEventListener("mouseenter", (e: Event) => {
|
||||
|
|
@ -101,14 +81,24 @@ onMounted(async () => {
|
|||
text-align: left;
|
||||
/* border: 1px solid lightcoral; */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 19fr;
|
||||
grid-template-columns: 2dvw 1fr;
|
||||
align-items: center;
|
||||
column-gap: 1dvw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background-color: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
.normal-message {
|
||||
margin-top: 1dvh;
|
||||
}
|
||||
|
||||
.grouped-message {
|
||||
margin-top: .3em;
|
||||
}
|
||||
|
||||
#last-message {
|
||||
margin-bottom: 2dvh;
|
||||
}
|
||||
|
|
@ -124,8 +114,8 @@ onMounted(async () => {
|
|||
margin-left: .5dvw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1dvh;
|
||||
height: 100%;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
|
|
@ -134,15 +124,15 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
.message-author-avatar {
|
||||
height: 2.3em;
|
||||
width: 2.3em;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
margin-right: .5dvw;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.author-username {
|
||||
|
|
@ -156,10 +146,29 @@ onMounted(async () => {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.side-message-date {
|
||||
font-size: .625em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/*
|
||||
.message-date-tooltip {
|
||||
height: 20px;;
|
||||
width: 20px;
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<style module>
|
||||
.message-text ul, h1, h2, h3, h4, h5, h6 {
|
||||
padding-top: 1dvh;
|
||||
padding-bottom: 1dvh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-text ul {
|
||||
padding-left: 2dvw;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MessageResponse } from '~/types/interfaces';
|
||||
import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
|
||||
import scrollToBottom from '~/utils/scrollToBottom';
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
|
@ -101,6 +101,11 @@ if (messagesRes) {
|
|||
}
|
||||
}
|
||||
|
||||
function pushMessage(message: MessageResponse) {
|
||||
groupMessage(message);
|
||||
messages.value.push(message);
|
||||
}
|
||||
|
||||
const messages = ref<MessageResponse[]>([]);
|
||||
|
||||
const messageInput = ref<string>();
|
||||
|
|
@ -137,14 +142,13 @@ if (accessToken && apiBase) {
|
|||
console.log("message uuid:", event.data.uuid);
|
||||
const parsedData = JSON.parse(event.data);
|
||||
|
||||
groupMessage(parsedData);
|
||||
console.log("parsed message type:", messagesType.value[parsedData.uuid]);
|
||||
console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
|
||||
messages.value.push(parsedData);
|
||||
pushMessage(parsedData);
|
||||
await nextTick();
|
||||
if (messagesElement.value) {
|
||||
console.log("scrolling to bottom");
|
||||
scrollToBottom(messagesElement);
|
||||
scrollToBottom(messagesElement.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -168,7 +172,7 @@ const route = useRoute();
|
|||
onMounted(async () => {
|
||||
if (import.meta.server) return;
|
||||
if (messagesElement.value) {
|
||||
scrollToBottom(messagesElement);
|
||||
scrollToBottom(messagesElement.value);
|
||||
let fetched = false;
|
||||
const amount = messages.value.length;
|
||||
let offset = messages.value.length;
|
||||
|
|
@ -203,14 +207,40 @@ onMounted(async () => {
|
|||
}
|
||||
});
|
||||
|
||||
let scrollPosition = ref<Record<string, ScrollPosition>>({});
|
||||
|
||||
onActivated(async () => {
|
||||
await nextTick();
|
||||
console.log("scroll activated");
|
||||
if (messagesElement.value) {
|
||||
if (scrollPosition.value[route.params.channelId as string]) {
|
||||
console.log("saved scroll position:", scrollPosition.value);
|
||||
setScrollPosition(messagesElement.value, scrollPosition.value[route.params.channelId as string]);
|
||||
console.log("scrolled to saved scroll position");
|
||||
} else {
|
||||
scrollToBottom(messagesElement.value);
|
||||
console.log("scrolled to bottom");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
console.log("scroll hi");
|
||||
if (messagesElement.value && from.params.channelId) {
|
||||
scrollPosition.value[from.params.channelId as string] = getScrollPosition(messagesElement.value)
|
||||
console.log("set saved scroll position to:", scrollPosition.value);
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#message-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 8fr 1fr;
|
||||
justify-content: space-between;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
overflow: hidden;
|
||||
|
|
@ -247,7 +277,6 @@ onMounted(async () => {
|
|||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1dvh;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue