format messages with attachments

Author: koray-eren

sogs/static/view_room.js

@@ -10,6 +10,19 @@ const makebuffer = (raw) => {
         realLength--;
     return b.subarray(0, realLength);
 };
+
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
 const setup = async () => {
     const elem = document.getElementById("messages");
     if(elem)
@@ -53,14 +66,15 @@ const setup = async () => {
                     }
 
                     const plain = Message.decode(data).dataMessage;
-                    console.log("VERIFY:")
-                    console.log(data)
-                    console.log(Message.decode(data))
-                    console.log(Message.decode(data).dataMessage)
-                    console.log(Message)
-                    console.log(Message.verify)
-                    console.log(Message.verify(data))
-                    // if msg is a reply
+                    // console.log("VERIFY:")
+                    // console.log(data)
+                    // console.log(Message.decode(data))
+                    // console.log(Message.decode(data).dataMessage)
+                    // console.log(Message)
+                    // console.log(Message.verify)
+                    // console.log(Message.verify(data))
+
+                    // reply
                     if (plain.quote){
                         originalMsg = document.createElement('p');
                         originalMsg.classList.add('text-sm', 'italic', 'border-l-2', 'border-sessionGreen', 'pl-2');
@@ -72,9 +86,29 @@ const setup = async () => {
                         originalMsg.appendChild(document.createTextNode("..." + authorId +": "+plain.quote.text));
                         e.appendChild(originalMsg);
                     }
+                    
+                    // message body
                     e.appendChild(document.createTextNode(plain.profile.displayName +": "+plain.body));
                     e.classList.add('bg-gray-300','dark:bg-lightGray', 'w-fit', 'rounded-lg', 'p-2', 'my-2')
                     elem.appendChild(e);
+                    
+                    // attachments
+                    if (plain.attachments.length > 0){
+                        plain.attachments.forEach(attachment => {
+                            console.log(attachment);
+                            attachmentElement = document.createElement('p');
+                            attachmentElement.appendChild(document.createTextNode("📎\xa0\xa0\xa0"));
+                            
+                                                        attachmentLink = document.createElement('a');
+                                                        attachmentLink.appendChild(document.createTextNode((attachment.fileName || attachment.contentType) + ` (${formatBytes(attachment.size)})` ));
+                                                        attachmentLink.href = attachment.url;
+                                                        attachmentLink.download = (attachment.fileName || "");
+                            
+                            attachmentElement.appendChild(attachmentLink);
+                            attachmentElement.classList.add('text-sm', 'italic', 'pl-1');
+                            e.appendChild(attachmentElement);
+                        });
+                    }
 
                 }
                 catch(ex)