embedding external sources as optional thingy

marceldobehere · Aug 18, 2024 · a4446c1 · a4446c1
1 parent a3aef61
commit a4446c1
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -21,22 +21,25 @@ Also NOTE: This is only the statically hosted client. The server can be found [h
 * Cross Device Sync
 * Fully Open Source
 * Markdown Support (With Syntax Highlighting)
+* Deleting Messages
 
 ### Mostly working Features
 * Group Chats
 * Image/Video/File Sharing
+* Upload Status Bar / Temporary File Upload List
 * Embedded Images/Videos/Audios
 
 ### Partially implemented Features
 * Private/Group Voice/Video calls (using WebRTC)
 
 ### Planned Features
+* Editing Messages
 * Friend System / DMs (?)
  * People sending friend/message requests before being able to chat with you
  * Blocking people
  * Having open/closed "DMs"
 * Notifications
-* Upload Status Bar
+* Small Profile Pictures
 * Improved mobile usability
 * Potentially PWA Features (?)
 * Preferred Server for decentralized communication
@@ -47,7 +50,7 @@ Also NOTE: This is only the statically hosted client. The server can be found [h
 * Stickers (?)
 * Portable Core Client Lib in NodeJS/Java (May be in progress)
 * Improved Voice Chats / Potential integration into the main app
-* Multiple fully seperated Accounts
+* Multiple fully separated Accounts
 * Customizable UI/Themes
 
 

diff --git a/client/index.html b/client/index.html
@@ -34,6 +34,7 @@ <h2>Settings</h2>
                     <h3>Main Settings</h3>
                     <label>Auto Hide Chat</label><input type="checkbox" id="settings-main-input-auto-hide-chat" onclick="setSetting(['chat', 'auto-hide-chat'], this.checked)"><br>
                     <label>Auto Toggle Chat</label><input type="checkbox" id="settings-main-input-auto-show-chat" onclick="setSetting(['chat', 'auto-show-chat'], this.checked)"><br>
+                    <label>Allow Embedding External Sources</label><input type="checkbox" id="settings-main-input-allow-external-sources-global" onclick="setSetting(['chat', 'allow-external-sources-global'], this.checked)"><br>
                     <br>
                     <button onclick="exportProfile()">Export Profile</button>
                     <button onclick="importProfile()">Import Profile</button>

diff --git a/client/js/settings.js b/client/js/settings.js
@@ -3,6 +3,7 @@ const settingsElement = document.getElementById("main-app-container-settings");
 
 const settingsMainInputAutoHideChatElement = document.getElementById("settings-main-input-auto-hide-chat");
 const settingsMainInputAutoShowChatElement = document.getElementById("settings-main-input-auto-show-chat");
+const settingsMainInputAllowExternalSourcesGlobalElement = document.getElementById("settings-main-input-allow-external-sources-global");
 
 function hideSettings()
 {
@@ -13,6 +14,7 @@ async function showSettings()
 {
     settingsMainInputAutoHideChatElement.checked = getSetting(["chat", "auto-hide-chat"]);
     settingsMainInputAutoShowChatElement.checked = getSetting(["chat", "auto-show-chat"]);
+    settingsMainInputAllowExternalSourcesGlobalElement.checked = getSetting(["chat", "allow-external-sources-global"]);
 
     settingsBgElement.style.display = "block";
 }

diff --git a/client/lib/other/markedExtension.js b/client/lib/other/markedExtension.js
@@ -139,7 +139,70 @@ const renderer = {
             return `<a id="${imgId}">[Loading]</a>`;
         }
         else
-            return `<a href="${url}" target="_blank">[Image ${text}]</a>`;
+        {
+            if (settingsObj["chat"]["allow-external-sources-global"])
+            {
+                let randomId = getRandomIntInclusive(100000, 9999999);
+                let element = document.createElement("a");
+                element.href = url;
+                element.target = "_blank";
+                element.textContent = `[Image ${text}]`;
+                element.id = `img-${randomId}`;
+
+                waitForElm(`#img-${randomId}`).then(async (element) => {
+                    if (await doesImageExist(url))
+                    {
+                        let imgNode = document.createElement("img");
+                        imgNode.src = url;
+                        imgNode.alt = text;
+                        imgNode.className = "chat-image";
+                        imgNode.onload = () => fixSizeScroll(imgNode);
+                        element.replaceWith(imgNode);
+
+                        imgNode.onclick = () => {
+                            // open image in new tab
+                            let newTab = window.open(url, "_blank");
+                            newTab.focus();
+                        };
+                    }
+                    else if (await doesVideoExist(url))
+                    {
+                        let videoNode = document.createElement("video");
+                        videoNode.src = url;
+                        videoNode.alt = text;
+                        videoNode.className = "chat-video";
+                        videoNode.controls = true;
+                        videoNode.onloadeddata = () => fixSizeScroll(videoNode);
+                        element.replaceWith(videoNode);
+                    }
+                    else if (await doesAudioExist(url))
+                    {
+                        let audioNode = document.createElement("audio");
+                        audioNode.src = url;
+                        audioNode.alt = text;
+                        audioNode.className = "chat-audio";
+                        audioNode.controls = true;
+                        audioNode.onloadeddata = () => fixSizeScroll(audioNode);
+                        element.replaceWith(audioNode);
+                    }
+                    else
+                    {
+                        element.textContent = `[Unknown ${text}]`;
+                    }
+                });
+                return `<a id="img-${randomId}">[Loading]</a>`;
+            }
+            else
+            {
+                text = text.replaceAll("<", "&lt;");
+                text = text.replaceAll(">", "&gt;");
+
+                url = url.replaceAll("<", "&lt;");
+                url = url.replaceAll(">", "&gt;");
+
+                return `<a href="${url}" target="_blank">[External: ${text} (${url})]</a>`;
+            }
+        }
     },
 
     link(token) {

diff --git a/client/lib/user/settingsObj.js b/client/lib/user/settingsObj.js
@@ -6,6 +6,7 @@ function tryConformSettings(obj)
     if (obj["chat"] == undefined) obj["chat"] = {};
     if (obj["chat"]["auto-show-chat"] == undefined) obj["chat"]["auto-show-chat"] = true;
     if (obj["chat"]["auto-hide-chat"] == undefined) obj["chat"]["auto-hide-chat"] = true;
+    if (obj["chat"]["allow-external-sources-global"] == undefined) obj["chat"]["allow-external-sources-global"] = false;
 
 
     return obj;