feat: support for images in chat

This commit is contained in:
ffqq 2023-07-12 23:12:36 +03:00
parent 9b115bf9e0
commit 9392841d12
1 changed files with 70 additions and 17 deletions

View File

@ -5,29 +5,82 @@ let statusMessage = document.getElementById("statusMessage")
let channelID = 0 let channelID = 0
// create a cache to store the images (delete this once you add SSE)
const imageCache = {};
async function updateMessages(id) { async function updateMessages(id) {
try { try {
let response = await fetch("/api/chat/getmessages/" + id); const response = await fetch(`/api/chat/getmessages/${id}`);
let messages = await response.json() const messages = await response.json();
statusMessage.innerText = "" statusMessage.innerText = "";
document.querySelectorAll(".messageParagraph").forEach(el => el.remove()); document.querySelectorAll(".messageParagraph").forEach((el) => el.remove());
for (let i in messages) {
let messageParagraph = document.createElement("p")
let timeParagraph = document.createElement("p")
messageParagraph.appendChild(document.createTextNode(messages[i]["creator"]["username"] + ": " + messages[i]["content"]))
messageParagraph.classList.add("messageParagraph")
messageParagraph.id = "messageParagraph" + messages[i]["id"]
messageParagraph.appendChild(timeParagraph)
let time = new Intl.DateTimeFormat("en-GB", { hour: "numeric", minute: "numeric" }).format(Number(messages[i]["created"].split(".")[0]) * 1000 + 20265) for (const message of messages) {
const messageParagraph = document.createElement("p");
const timeParagraph = document.createElement("p");
const { creator, content, id, created } = message;
messageParagraph.innerHTML = "<span style='color: #515051; font-size: 14px;'>" + time + "</span> " + messageParagraph.innerHTML messageParagraph.appendChild(document.createTextNode(`${creator.username}: ${content}`));
messageDiv.append(messageParagraph) messageParagraph.classList.add("messageParagraph");
messageParagraph.id = `messageParagraph${id}`;
messageParagraph.appendChild(timeParagraph);
const time = new Intl.DateTimeFormat("en-GB", { hour: "numeric", minute: "numeric" }).format(Number(created.split(".")[0]) * 1000 + 20265);
messageParagraph.innerHTML = `<span style="color: #515051; font-size: 14px;">${time}</span> ${messageParagraph.innerHTML}`;
messageDiv.append(messageParagraph);
const imgLinks = content?.match(/(https?:\/\/(?:cdn\.discordapp\.com|media\.discordapp\.net|media\.tenor\.com|i\.imgur\.com|burger\.ctaposter\.xyz)\/.+?\.(?:png|apng|webp|svg|jpg|jpeg|gif))(?=$|\s)/gi) || [];
for (const link of imgLinks) {
// delete the code below once you add sse
if (imageCache[link]) {
messageParagraph.appendChild(imageCache[link].cloneNode(true));
} else {
// delete the code above once you add sse
const img = new Image();
img.src = link;
img.className = "messageImage";
img.onload = () => {
const maxWidth = 400;
const maxHeight = 400;
let { width, height } = img;
if (width > maxWidth || height > maxHeight) {
const ratio = Math.min(maxWidth / width, maxHeight / height);
width *= ratio;
height *= ratio;
}
img.width = width;
img.height = height;
// delete the line below once you add sse
imageCache[link] = img.cloneNode(true);
messageParagraph.appendChild(img);
};
} }
}
} }
catch { } catch {
statusMessage.innerText = "Not connected" statusMessage.innerText = "Not connected";
}
}
function selectChannel(id) {
channelID = id
let selectedButton = channelDiv.querySelector(".selected");
if (selectedButton) {
selectedButton.classList.remove("selected");
} }
let channelButton = document.getElementById("channelButton" + id)
if (channelButton) {
channelButton.classList.add("selected")
}
else {
console.log("channelButton not found")
}
updateMessages(id)
} }
function selectChannel(id) { function selectChannel(id) {