fix up setting, url handling, images, notif sound

scripts/communityScripts/armored-chat/armored_chat.js

@@ -14,7 +14,8 @@
     var settings = {
         external_window: false,
         maximum_messages: 200,
-        join_notification: true
+        join_notification: true,
+        use_chat_bubbles: true,
     };
 
     // Global vars
@@ -27,7 +28,6 @@
     var maxLocalDistance = 20; // Maximum range for the local chat
     var palData = AvatarManager.getPalData().data;
     var isTyping = false;
-    var useChatBubbles = false;
 
     Controller.keyPressEvent.connect(keyPressEvent);
     Messages.subscribe("Chat"); // Floofchat
@@ -128,7 +128,7 @@
         _emitEvent({ type: "show_message", ...message });
 
         // Show new message on screen
-        if (message.channel !== "local" || !useChatBubbles) {
+        if (message.channel !== "local" || !settings.use_chat_bubbles) {
             Messages.sendLocalMessage(
                 "Floof-Notif",
                 JSON.stringify({
@@ -167,7 +167,7 @@
                 break;
             case "setting_change":
                 if (event.setting === "worldspace_chat_bubbles") {
-                    useChatBubbles = event.value;
+                    settings.use_chat_bubbles = event.value;
                     Messages.sendLocalMessage(
                         "ChatBubbles-Config",
                         JSON.stringify({
@@ -301,7 +301,7 @@
         settings = Settings.getValue("ArmoredChat-Config", settings);
 
         const chatBubbleSettings = Settings.getValue("ChatBubbles-Config", { enabled: true });
-        if (chatBubbleSettings.enabled) { useChatBubbles = true; }
+        if (chatBubbleSettings.enabled) { settings.use_chat_bubbles = true; }
 
         if (messageHistory) {
             // Load message history
@@ -314,13 +314,7 @@
         }
 
         // Send current settings to the app
-        _emitEvent({
-            type: "initial_settings",
-            settings: {
-                worldspace_chat_bubbles: useChatBubbles,
-                ...settings
-            }
-        });
+        _emitEvent({ type: "initial_settings", settings: settings });
     }
     function _saveSettings() {
         console.log("Saving config");

scripts/communityScripts/armored-chat/armored_chat.qml

@@ -641,7 +641,7 @@ Rectangle {
                 if (message.settings.external_window) s_external_window.checked = true;
                 if (message.settings.maximum_messages) s_maximum_messages.value = message.settings.maximum_messages;
                 if (message.settings.join_notification) s_join_notification.checked = true;
-                if (message.settings.worldspace_chat_bubbles) s_chat_bubbles.checked = true;
+                if (message.settings.use_chat_bubbles) s_chat_bubbles.checked = true;
                 break;
         }
     }

scripts/communityScripts/armored-chat/armored_chat_quick_message.qml

@@ -43,6 +43,14 @@ Item {
             Keys.onLeftPressed: { moveLeft(); }
             Keys.onRightPressed: { moveRight(); }
 
+            onTextChanged: {
+                if (text === "") {
+                    toScript({type: "action", action: "end_typing"});
+                } else {
+                    toScript({type: "action", action: "start_typing"});
+                }
+            }
+
             function moveLeft(){
                 if (cursorPosition > 0){
                     cursorPosition--

scripts/communityScripts/chatBubbles/chatBubbles.js

@@ -24,6 +24,8 @@ const BUBBLE_WIDTH_MAX_CHARS = 24; // roughly 18 ems per meter
 const MAX_DISTANCE = 20;
 const SELF_BUBBLES = false;
 
+const NOTIFY_SOUND = SoundCache.getSound(Script.resolvePath("./assets/notify.wav"));
+
 let settings = {
     enabled: true,
 };
@@ -101,19 +103,53 @@ function ChatBubbles_SpawnBubble(data, senderID) {
     const scale = AvatarList.getAvatar(senderID).scale;
 
     let link;
+    let linkIsImage = false;
 
-    try {
+    // only handles cases where the whole message is just a URL,
+    // text with a URL in the middle is ignored
     const maybeURL = data.message.trim();
 
-        if (maybeURL.startsWith("https://") || maybeURL.startsWith("http://")) {
+    if (
+        (maybeURL.startsWith("https://") || maybeURL.startsWith("http://")) &&
+            !/\s+/g.test(maybeURL) &&
+            /[A-Za-z0-9-._~:/?#\[\]@!$&'()*+,;%=]+/g.test(maybeURL)
+    ) {
         link = maybeURL;
+
+        const chunkBeforeQuery = maybeURL.split("?", 2)[0];
+
+        if (
+            chunkBeforeQuery.endsWith(".jpg") ||
+                chunkBeforeQuery.endsWith(".png") ||
+                chunkBeforeQuery.endsWith(".gif") ||
+                chunkBeforeQuery.endsWith(".svg") ||
+                chunkBeforeQuery.endsWith(".webp")
+        ) {
+            linkIsImage = true;
+        }
     }
-    } catch (e) {}
 
     const [text, lineCount] = ChatBubbles_WrapText(data.message);
-    const height = lineCount * BUBBLE_LINE_HEIGHT;
+    let height = lineCount * BUBBLE_LINE_HEIGHT;
 
-	const bubbleEntity = Entities.addEntity({
+    let bubbleEntity;
+    if (link !== undefined && linkIsImage) {
+        height = BUBBLE_WIDTH / 3;
+        bubbleEntity = Entities.addEntity({
+            type: "Image",
+            parentID: senderID,
+            imageURL: link,
+            emissive: true,
+            keepAspectRatio: true,
+            ignorePickIntersection: true,
+            dimensions: [BUBBLE_WIDTH, height, 0.01],
+            localPosition: [0, scale + (height / 2) + 0.1, 0],
+            canCastShadow: false,
+            billboardMode: "yaw",
+            grab: {grabbable: false},
+        }, "local");
+    } else {
+        bubbleEntity = Entities.addEntity({
             type: "Text",
             parentID: senderID,
             text: text,
@@ -132,7 +168,7 @@ function ChatBubbles_SpawnBubble(data, senderID) {
             alignment: "center",
             verticalAlignment: "center",
             grab: {grabbable: false},
-        script: (link === undefined) ? undefined :
+            script: (link === undefined && !linkIsImage) ? undefined :
 `(function() {
     this.mousePressOnEntity = function(entity, event) {
         if (event.isPrimaryButton) {
@@ -142,6 +178,7 @@ function ChatBubbles_SpawnBubble(data, senderID) {
     };
 })`
         }, "local");
+    }
 
     for (const bubble of Object.values(currentBubbles[senderID])) {
         let { localPosition } = Entities.getEntityProperties(bubble.entity, "localPosition");
@@ -157,7 +194,11 @@ function ChatBubbles_SpawnBubble(data, senderID) {
             let fade = 1.0;
 
             const fadeInterval = Script.setInterval(() => {
+                if (linkIsImage) {
+                    Entities.editEntity(bubble.entity, { alpha: fade });
+                } else {
                     Entities.editEntity(bubble.entity, { textAlpha: fade, backgroundAlpha: fade * 0.5 });
+                }
                 fade -= (1 / BUBBLE_ANIM_FPS) / BUBBLE_FADE_TIME;
             }, 1000 / BUBBLE_ANIM_FPS);
 
@@ -170,6 +211,12 @@ function ChatBubbles_SpawnBubble(data, senderID) {
     };
 
     currentBubbles[senderID][bubbleIndex] = bubble;
+
+    Audio.playSound(NOTIFY_SOUND, {
+        position: data.position,
+        volume: 0.25,
+        localOnly: true,
+    });
 }
 
 function ChatBubbles_IndicatorTick(senderID) {
@@ -243,6 +290,8 @@ function ChatBubbles_RecvMsg(channel, msg, senderID, localOnly) {
         for (const [key, value] of Object.entries(data)) {
             settings[key] = value;
         }
+
+        Settings.setValue("ChatBubbles-Config", settings);
         return;
     }
 

scripts/defaultScripts.js

@@ -47,7 +47,7 @@ var DEFAULT_SCRIPTS_SEPARATE = [
     "simplifiedUI/ui/simplifiedNametag/simplifiedNametag.js",
     {"stable": "system/more/app-more.js", "beta": "https://more.overte.org/more/app-more.js"},
     "communityScripts/armored-chat/armored_chat.js",
-    "communityScripts/chatBubbles.js",
+    "communityScripts/chatBubbles/chatBubbles.js",
     //"system/chat.js"
 ];