add message reading

2026-05-29 09:32:24 +02:00 · 2026-05-29 09:32:24 +02:00 · f957a081f3
commit f957a081f3
parent be26703908
4 changed files with 176 additions and 0 deletions
--- a/android/app/src/main/assets/public/index.html
+++ b/android/app/src/main/assets/public/index.html
@ -109,6 +109,7 @@
                    //if fails continue loading encryption may be broken
                    console.error(e);
                }
+                await delay(600); //because we need to wair for animations
                await refreshDms();
            } else {
                showBlahNotification("error:auth.failed.redirect.to.login");
--- a/android/app/src/main/assets/public/main.js
+++ b/android/app/src/main/assets/public/main.js
@ -1770,6 +1770,8 @@ async function openDm(dmId, username, targetId) {
            }
        }
        
+        await loadDmMessages(dmId);
+        
        setActiveRoombarItem(`dm-btn-${dmId}`);
        clearAction("dmopen");
    } catch (e) {
@ -1778,3 +1780,88 @@ async function openDm(dmId, username, targetId) {
        showBlahNotification("error:dm.open.failed");
    }
 }
+
+async function loadDmMessages(dmId) {
+    try {
+        let payload = JSON.stringify({ string1: dmId, string2: "50", string3: "" });
+        let res = await fetchEncrypted("dm/messages/get", payload);
+        
+        if (res && res.startsWith("error:")) {
+            showBlahNotification(res);
+            return;
+        }
+        
+        let messages = JSON.parse(res);
+        await renderMessages(messages);
+    } catch (e) {
+        console.error(e);
+        showBlahNotification("error:dm.messages.fetch.failed");
+    }
+}
+
+async function renderMessages(messages) {
+    let container = document.getElementById("chat-messages");
+    if (!container) return;
+    
+    let entries = Object.entries(messages).sort((a,b) => parseInt(a[0]) - parseInt(b[0]));
+    
+    let html = "";
+    let lastAuthor = null;
+    
+    for (let [msgId, msg] of entries) {
+        let content = msg.content;
+        
+        if (msg.key && msg.key !== "") {
+            try {
+                content = await decryptAesGcmFromBase64(content, currentDmKey);
+            } catch(e) {
+                content = `<span style="color:var(--error-color)"><blah>error:messages.decrypt.failed</blah></span>`;
+            }
+        }
+        content = content.replace(/\{blah\((.*?)\)\}/g, (match, p1) => {
+            return processBlah(p1);
+        });
+        
+        // Also still process the whole thing in case it's just "dm.begin.notice" without {blah()}
+        content = processBlah(content);
+        
+        if (msg.type === "larp.info") {
+            html += `<div style="text-align: center; opacity: 0.5; padding: 1rem; font-size: 0.9rem;">${content}</div>`;
+            lastAuthor = null;
+        } else {
+            let showAvatar = lastAuthor !== msg.author;
+            lastAuthor = msg.author;
+            
+            let authorName = "Unknown";
+            let pfp = "assets/default_avatar.png";
+            if (msg.author !== "0") {
+                let fullUsername = await fetchAsync(`${url}/idtoname?id=${msg.author}`);
+                if (fullUsername && !fullUsername.startsWith("error:")) {
+                    authorName = fullUsername.split(':')[0];
+                    pfp = await getAvatarUrl(msg.author, fullUsername);
+                }
+            }
+            
+            let date = new Date(parseInt(msg.timestamp));
+            let timeStr = date.toLocaleString();
+            
+            let extraClass = showAvatar ? "with-avatar" : "";
+            
+            html += `
+            <div class="chat-message ${extraClass}">
+                <img src="${showAvatar ? pfp : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='}" class="chat-message-pfp">
+                <div class="chat-message-content">
+                    ${showAvatar ? `<div class="chat-message-header">
+                        <span class="chat-message-author">${authorName}</span>
+                        <span class="chat-message-timestamp">${timeStr}</span>
+                    </div>` : ""}
+                    <div class="chat-message-text">${content}</div>
+                </div>
+            </div>
+            `;
+        }
+    }
+    
+    container.innerHTML = html;
+    container.scrollTop = container.scrollHeight;
+}
--- a/webroot/index.html
+++ b/webroot/index.html
@ -109,6 +109,7 @@
                    //if fails continue loading encryption may be broken
                    console.error(e);
                }
+                await delay(600); //because we need to wair for animations
                await refreshDms();
            } else {
                showBlahNotification("error:auth.failed.redirect.to.login");
--- a/webroot/main.js
+++ b/webroot/main.js
@ -1770,6 +1770,8 @@ async function openDm(dmId, username, targetId) {
            }
        }
        
+        await loadDmMessages(dmId);
+        
        setActiveRoombarItem(`dm-btn-${dmId}`);
        clearAction("dmopen");
    } catch (e) {
@ -1778,3 +1780,88 @@ async function openDm(dmId, username, targetId) {
        showBlahNotification("error:dm.open.failed");
    }
 }
+
+async function loadDmMessages(dmId) {
+    try {
+        let payload = JSON.stringify({ string1: dmId, string2: "50", string3: "" });
+        let res = await fetchEncrypted("dm/messages/get", payload);
+        
+        if (res && res.startsWith("error:")) {
+            showBlahNotification(res);
+            return;
+        }
+        
+        let messages = JSON.parse(res);
+        await renderMessages(messages);
+    } catch (e) {
+        console.error(e);
+        showBlahNotification("error:dm.messages.fetch.failed");
+    }
+}
+
+async function renderMessages(messages) {
+    let container = document.getElementById("chat-messages");
+    if (!container) return;
+    
+    let entries = Object.entries(messages).sort((a,b) => parseInt(a[0]) - parseInt(b[0]));
+    
+    let html = "";
+    let lastAuthor = null;
+    
+    for (let [msgId, msg] of entries) {
+        let content = msg.content;
+        
+        if (msg.key && msg.key !== "") {
+            try {
+                content = await decryptAesGcmFromBase64(content, currentDmKey);
+            } catch(e) {
+                content = `<span style="color:var(--error-color)"><blah>error:messages.decrypt.failed</blah></span>`;
+            }
+        }
+        content = content.replace(/\{blah\((.*?)\)\}/g, (match, p1) => {
+            return processBlah(p1);
+        });
+        
+        // Also still process the whole thing in case it's just "dm.begin.notice" without {blah()}
+        content = processBlah(content);
+        
+        if (msg.type === "larp.info") {
+            html += `<div style="text-align: center; opacity: 0.5; padding: 1rem; font-size: 0.9rem;">${content}</div>`;
+            lastAuthor = null;
+        } else {
+            let showAvatar = lastAuthor !== msg.author;
+            lastAuthor = msg.author;
+            
+            let authorName = "Unknown";
+            let pfp = "assets/default_avatar.png";
+            if (msg.author !== "0") {
+                let fullUsername = await fetchAsync(`${url}/idtoname?id=${msg.author}`);
+                if (fullUsername && !fullUsername.startsWith("error:")) {
+                    authorName = fullUsername.split(':')[0];
+                    pfp = await getAvatarUrl(msg.author, fullUsername);
+                }
+            }
+            
+            let date = new Date(parseInt(msg.timestamp));
+            let timeStr = date.toLocaleString();
+            
+            let extraClass = showAvatar ? "with-avatar" : "";
+            
+            html += `
+            <div class="chat-message ${extraClass}">
+                <img src="${showAvatar ? pfp : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='}" class="chat-message-pfp">
+                <div class="chat-message-content">
+                    ${showAvatar ? `<div class="chat-message-header">
+                        <span class="chat-message-author">${authorName}</span>
+                        <span class="chat-message-timestamp">${timeStr}</span>
+                    </div>` : ""}
+                    <div class="chat-message-text">${content}</div>
+                </div>
+            </div>
+            `;
+        }
+    }
+    
+    container.innerHTML = html;
+    container.scrollTop = container.scrollHeight;
+}