diff --git a/classes/Message.ts b/classes/Message.ts index a782d6a..de0d12b 100644 --- a/classes/Message.ts +++ b/classes/Message.ts @@ -12,4 +12,8 @@ export default class Message { this.userUuid = user_uuid; this.message = message; } + + getTimestamp() { + return uuidToTimestamp(this.uuid); + } } \ No newline at end of file diff --git a/components/Avatar.vue b/components/Avatar.vue index 06d36ad..dcb3b7e 100644 --- a/components/Avatar.vue +++ b/components/Avatar.vue @@ -6,7 +6,7 @@ @@ -14,25 +14,14 @@ import { NuxtImg } from '#components'; import type { GuildMemberResponse, UserResponse } from '~/types/interfaces'; -const { getDisplayName } = useProfile() +const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile() const props = defineProps<{ profile: UserResponse | GuildMemberResponse, }>(); const displayName = getDisplayName(props.profile) -let user: UserResponse -let displayAvatar: string | null - -if ("username" in props.profile) { - // assume it's a UserResponse - displayAvatar = props.profile.avatar - user = props.profile -} else { - // assume it's a GuildMemberResponse - displayAvatar = props.profile.user.avatar - user = props.profile.user -} +const displayAvatar = getAvatarUrl(props.profile) diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue index 6fc6891..c374ab9 100644 --- a/components/DefaultIcon.vue +++ b/components/DefaultIcon.vue @@ -17,6 +17,7 @@ const props = defineProps<{ }>(); let previewName = ""; +// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise if (props.name.length > 3) { let guildName: string[] = props.name.split(' ') for (let i = 0; i < 3; i ++) { diff --git a/components/Message.vue b/components/Message.vue index c6207a1..c926616 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -1,22 +1,24 @@ @@ -69,37 +71,33 @@ import MessageReply from './UserInterface/MessageReply.vue'; import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces'; const { getDisplayName } = useProfile() -const { getUser } = useAuth() const props = defineProps(); -const me = await getUser() - const contextMenu = useState("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] })); const messageElement = ref(); const dateHidden = ref(true); -const date = uuidToDate(props.message.uuid); - +const date = new Date(props.timestamp); const currentDate: Date = new Date() console.log("[MSG] message to render:", props.message); -console.log("author:", props.message.member); +console.log("author:", props.author); console.log("[MSG] reply message:", props.replyMessage); const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g; const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]); -const mediaLinks = ref([]); +const mediaLinks: string[] = []; console.log("link matches:", linkMatches); -const hideText = ref(false); +const hasEmbed = ref(false); const sanitized = ref(); onMounted(async () => { - const parsed = await parse(props.message.message, { gfm: true }); + const parsed = await parse(props.text, { gfm: true }); sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: [ "strong", "em", "br", "blockquote", @@ -123,35 +121,23 @@ onMounted(async () => { console.log("added listeners"); } - const links: string[] = []; for (const link of linkMatches) { - console.log("link:", link); - try { - const res = await $fetch.raw(link); - if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { - console.log("link is image"); - links.push(link); - } - } catch (error) { - console.error(error); + console.log("link:", link); + try { + const res = await $fetch.raw(link); + if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { + console.log("link is image"); + mediaLinks.push(link); } - - mediaLinks.value = [...links]; + if (mediaLinks.length) { + hasEmbed.value = true + }; + } catch (error) { + console.error(error); } +} - if (mediaLinks.value.length) { - const nonLinks = props.message.message.split(linkRegex); - let invalidContent = false; - for (const nonLink of nonLinks) { - if (nonLink != "" && nonLink != "\n" && nonLink != "
") { - invalidContent = true; - break; - } - } - hideText.value = !invalidContent; - }; - - console.log("media links:", mediaLinks); +console.log("media links:", mediaLinks); }); //function toggleTooltip(e: Event) { @@ -162,13 +148,13 @@ const menuItems: ContextMenuItem[] = [ { name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } } ] -console.log("me:", me); -if (props.message.member.user.uuid == me!.uuid) { +console.log("me:", props.me); +if (props.author?.user.uuid == props.me.uuid) { // Inserts "edit" option at index 1 (below the "reply" option) menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } }); } -if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) { +if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) { // Inserts "edit" option at index 2 (below the "edit" option) menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} }); } @@ -188,20 +174,14 @@ function getDayDifference(date1: Date, date2: Date) { \ No newline at end of file diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue index b99a9ea..3c769cc 100644 --- a/components/Modal/ProfilePopup.vue +++ b/components/Modal/ProfilePopup.vue @@ -27,15 +27,17 @@ -
-
-
-
- {{ " " + aboutMe }} +
+
+
+
+
+ {{ " " + aboutMe }} +
+
-