Merge pull request #70 from Armored-Dragon/ArmoredChat-Fixes

ArmoredChat Fixes
overte-org · Mar 7, 2024 · fa72211 · fa72211
2 parents 63a894f + e11a302
commit fa72211
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 30 deletions.
diff --git a/applications/armored-chat/README.md b/applications/armored-chat/README.md
@@ -1,10 +1,9 @@
 # Armored Chat
 
-Armored Chat is a light-weight alternative chat application that extends the existing chat features.
+Armored Chat is a light-weight chat application that allows members of a world to communicate with text.
 
 ## Features
 
-- (wip) Drop-in replacement for Fluffy chat
 - (wip) E2EE Direct messages
 - (wip) Group chats
 
@@ -14,7 +13,6 @@ Armored Chat is a light-weight alternative chat application that extends the exi
 
 TODO:
 
-- Algorithm
 - Key exchange
 - When and where
 - How

diff --git a/applications/armored-chat/armored_chat.js b/applications/armored-chat/armored_chat.js
@@ -10,7 +10,7 @@
 (function () {
   "use strict";
   // TODO: Encryption + PMs
-  // TODO: Find window init event method
+  // TODO: Open in external web browser
 
   var app_is_visible = false;
   var settings = {
@@ -25,6 +25,7 @@
   var app_button;
   const channels = ["domain", "local", "system"];
   var max_local_distance = 20; // Maximum range for the local chat
+  var message_history = Settings.getValue("ArmoredChat-Messages", []);
 
   startup();
 
@@ -62,7 +63,7 @@
   }
   function _openWindow() {
     chat_overlay_window = new Desktop.createWindow(Script.resourcesPath() + "qml/hifi/tablet/DynamicWebview.qml", {
-      title: "Overte Chat",
+      title: "Chat",
       size: { x: 550, y: 400 },
       additionalFlags: Desktop.ALWAYS_ON_TOP,
       visible: app_is_visible, // FIXME Invalid?
@@ -72,8 +73,6 @@
 
     chat_overlay_window.closed.connect(toggleMainChatWindow);
     chat_overlay_window.sendToQml({ url: Script.resolvePath("./index.html") });
-    // FIXME: Loadsettings need to happen after the window is initialized?
-    // Script.setTimeout(_loadSettings, 1000);
     chat_overlay_window.webEventReceived.connect(onWebEventReceived);
   }
 
@@ -84,12 +83,12 @@
   Messages.messageReceived.connect(receivedMessage);
 
   function receivedMessage(channel, message) {
-    console.log(`Received message:\n${message}`);
-    var message = JSON.parse(message);
-
     channel = channel.toLowerCase();
     if (channel !== "chat") return;
 
+    console.log(`Received message:\n${message}`);
+    var message = JSON.parse(message);
+
     message.channel = message.channel.toLowerCase();
 
     // For now, while we are working on superseding Floof, we will allow compatibility with it.
@@ -100,16 +99,22 @@
     // Check the channel is valid
     if (!channels.includes(message.channel)) return;
 
-    // FIXME: Not doing distance check?
     // If message is local, and if player is too far away from location, don't do anything
     if (channel === "local" && Vec3.distance(MyAvatar.position, message.position) < max_local_distance) return;
 
-    // Floof chat compatibility.
-    if (message.type) delete message.type;
+    // NOTE: Floof chat compatibility.
+    message.type = "show_message";
 
     // Update web view of to new message
     _emitEvent({ type: "show_message", ...message });
 
+    // Save message to our history
+    let saved_message = message;
+    delete saved_message.position;
+    message_history.push(message);
+    if (message_history.length > settings.max_history) message_history.shift();
+    Settings.setValue("ArmoredChat-Messages", message_history);
+
     // Display on popup chat area
     _overlayMessage({ sender: message.displayName, message: message });
   }
@@ -121,9 +126,6 @@
 
     var parsed = JSON.parse(event);
 
-    // Not our app? Not our problem!
-    // if (parsed.app !== "ArmoredChat") return;
-
     switch (parsed.type) {
       case "page_update":
         app_data.current_page = parsed.page;
@@ -134,7 +136,7 @@
         break;
 
       case "open_url":
-        Window.openUrl(parsed.message.toString());
+        new OverlayWebWindow({ source: parsed.url.toString(), width: 500, height: 400 });
         break;
 
       case "setting_update":
@@ -218,6 +220,13 @@
       chat_overlay_window.presentationMode = settings.external_window ? Desktop.PresentationMode.NATIVE : Desktop.PresentationMode.VIRTUAL;
       _emitEvent({ type: "setting_update", setting_name: "external_window", setting_value: true });
     }
+
+    // Refill the history with the saved messages
+    message_history.forEach((message) => {
+      delete message.action;
+      console.log(`Prefilling ${JSON.stringify(message)}`);
+      _emitEvent({ type: "show_message", ...message });
+    });
   }
   function _saveSettings() {
     console.log("Saving config");

diff --git a/applications/armored-chat/index.css b/applications/armored-chat/index.css
@@ -85,6 +85,9 @@ body .page .content.message-list .message .body {
   word-wrap: anywhere;
   overflow-x: hidden;
 }
+body .page .content.message-list .message .body a {
+  color: white;
+}
 body .page .content.message-list .message .body .image-container {
   width: 100%;
   max-width: 400px;
@@ -93,6 +96,20 @@ body .page .content.message-list .message .body .image-container {
 body .page .content.message-list .message .body .image-container img {
   width: auto;
   height: 100%;
+}
+body .page .content.message-list .message .embeds {
+  width: 100%;
+  overflow-x: hidden;
+}
+body .page .content.message-list .message .embeds a {
+  color: white;
+}
+body .page .content.message-list .message .embeds .image-container {
+  width: 100%;
+  max-width: 400px;
+  max-height: 300px;
+}
+body .page .content.message-list .message .embeds .image-container img {
   max-width: 400px;
   max-height: 300px;
 }

diff --git a/applications/armored-chat/index.html b/applications/armored-chat/index.html
@@ -186,30 +186,32 @@
     // Clone template message
     let message_template = qs("#message-listing");
     let message_clone = message_template.content.cloneNode(true);
+    let message_embeds = "";
+    message_clone.querySelector(".body").innerHTML = "";
+    message_clone.querySelector(".embeds").innerHTML = "";
 
     // Youtube embeds
     let yt_url = message.message.match(/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g);
     if (yt_url) {
-      message.message = message.message.replace(
-        yt_url,
-        `${yt_url}
-          <br>
-          <iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${yt_url.toString().split("/")[3]}' frameborder='0'></iframe>`
-      );
+      yt_url.forEach((url) => {
+        message_embeds += `<iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${url.toString().split("/")[3]}' frameborder='0'></iframe><br>`;
+      });
     }
 
     // Image embeds
     let image_link = message.message.match(/.+.(png|jpg|jpeg|webp)/g);
     if (image_link) {
-      message.message = message.message.replace(image_link, `${image_link}<br><span class='image-container'><img src='${image_link}'></span>`);
+      image_link.forEach((image) => {
+        message_embeds += `<span class='image-container'><img src='${image}'></span><br>`;
+      });
     }
 
     // Linkify links
-    let link_regex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm;
-
-    if (message.message.match(link_regex)) {
-      message.message = message.message.replace(link_regex, (match) => {
-        return `<a href='#' onclick='_emitEvent({type:"open_url", url: match.toString()})'>${match}</a>`;
+    let link_url = message.message.match(/(?:^|\s)(https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+(?:\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)?(?=\s|$)/g);
+    if (link_url) {
+      link_url.forEach((link) => {
+        message_embeds += `<a href='#' onclick='_emitEvent({type:"open_url", url: "${link}" })'>${link}</a><br>`;
+        message.message = message.message.replace(link, "");
       });
     }
 
@@ -220,7 +222,9 @@
       month: "long",
       day: "numeric",
     });
-    message_clone.querySelector(".body").innerHTML = message.message;
+
+    message_clone.querySelector(".embeds").innerHTML = message_embeds;
+    message_clone.querySelector(".body").innerText = message.message;
     // Append to the message list
     qs("#" + target + " .message-list").appendChild(message_clone);
     // Scroll to the bottom of the page
@@ -260,6 +264,7 @@
     <div class="pfp"><img src="./img/ui/user_white.png" /></div>
     <div class="name">[NAME]</div>
     <div class="timestamp" title="[DATE]">[TIMESTAMP]</div>
+    <div class="embeds">[EMBEDS]</div>
     <div class="body">[CONTENT]</div>
   </div>
 </template>

diff --git a/applications/armored-chat/index.scss b/applications/armored-chat/index.scss
@@ -95,6 +95,10 @@ body {
           word-wrap: anywhere;
           overflow-x: hidden;
 
+          a {
+            color: white;
+          }
+
           .image-container {
             width: 100%;
             max-width: 400px;
@@ -104,6 +108,28 @@ body {
               width: auto;
               height: 100%;
 
+              // max-width: 400px;
+              // max-height: 300px;
+            }
+          }
+        }
+
+        .embeds {
+          width: 100%;
+
+          overflow-x: hidden;
+          a {
+            color: white;
+          }
+
+          .image-container {
+            width: 100%;
+            max-width: 400px;
+            max-height: 300px;
+
+            img {
+              // width: auto;
+              // height: 100%;
               max-width: 400px;
               max-height: 300px;
             }