diff --git a/components/Message.vue b/components/Message.vue index c926616..fc62cf9 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -43,9 +43,9 @@ {{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }} -
+
+ -
-
+
@@ -89,10 +89,10 @@ 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: string[] = []; +const mediaLinks = ref([]); console.log("link matches:", linkMatches); -const hasEmbed = ref(false); +const hideText = ref(false); const sanitized = ref(); @@ -121,23 +121,35 @@ 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"); - mediaLinks.push(link); + 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); } - if (mediaLinks.length) { - hasEmbed.value = true - }; - } catch (error) { - console.error(error); - } -} -console.log("media links:", mediaLinks); + mediaLinks.value = [...links]; + } + + 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); }); //function toggleTooltip(e: Event) {