Started work on emotes schema and administration endpoints. Improvements to Link/Media embeds in chat.

www/js/adminPanel.js

@@ -215,6 +215,18 @@ class canopyAdminUtils{
             utils.ux.displayResponseError(await response.json());
         }
     }
+
+    async getEmotes(){
+        var response = await fetch(`/api/admin/emote`,{
+            method: "GET"
+        });
+
+        if(response.status == 200){
+            return await response.json();
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
 }
 
 class adminUserList{

www/js/channel/chatPostprocessor.js

@@ -30,7 +30,7 @@ class chatPostprocessor{
         //Create an empty array to hold the body
         this.bodyArray = [];
         //Split string by word-boundries, with negative/forward lookaheads to exclude file seperators so we don't split link placeholders
-        const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b(?!␜)/g);
+        const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b/g);
 
         //for each word in the splitstring
         splitString.forEach((string) => {
@@ -46,13 +46,14 @@ class chatPostprocessor{
     }
 
     injectBody(){
-        //Create empty array to hold strings
-        var stringArray = [];
+        //Clear our chat body
+        this.chatBody.innerHTML = "";
         
         //Extract strings into the empty array
         this.bodyArray.forEach((wordObj) => {
             if(wordObj.type == 'word'){
-                stringArray.push(wordObj.string);
+                //Inject current wordObj string into the chat body
+                this.chatBody.innerHTML += wordObj.string
             }else if(wordObj.type == 'link'){
                 //Create a link node from our link
                 const link = document.createElement('a');
@@ -60,16 +61,17 @@ class chatPostprocessor{
                 link.href = wordObj.link;
                 link.innerHTML = wordObj.link;
 
-                //Inject it into the original string, and add it to string array
-                stringArray.push(wordObj.string.replace('␜',link.outerHTML));
+                //Append node to chatBody
+                this.injectNode(wordObj, link);
             }else if(wordObj.type == 'image'){
                 //Create an img node from our link
                 const img = document.createElement('img');
                 img.classList.add('chat-img');
                 img.src = wordObj.link;
 
-                //Inject it into the original string, and add it to string array
-                stringArray.push(wordObj.string.replace('␜',img.outerHTML));
+                //stringArray.push(wordObj.string.replace('␜',img.outerHTML));
+                //Append node to chatBody
+                this.injectNode(wordObj, img);
             }else if(wordObj.type == 'video'){
                 //Create a video node from our link
                 const vid = document.createElement('video');
@@ -78,14 +80,27 @@ class chatPostprocessor{
                 vid.controls = false;
                 vid.autoplay = true;
                 vid.loop = true;
+                vid.muted = true;
 
-                //Inject it into the original string, and add it to string array
-                stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
+                //stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
+                this.injectNode(wordObj, vid);
             }
         });
+    }
 
-        //Join the strings to fill the chat entry
-        this.chatBody.innerHTML = stringArray.join("");
+    //Like string.replace except it actually injects the node so we can keep things like event handlers
+    injectNode(wordObj, node, placeholder = '␜'){
+        //Split string by the placeholder so we can keep surrounding whitespace
+        const splitWord = wordObj.string.split(placeholder, 2);
+
+        //Append the first half of the string
+        this.chatBody.innerHTML += splitWord[0];
+
+        //Append the node
+        this.chatBody.appendChild(node);
+
+        //Append the second half of the string
+        this.chatBody.innerHTML += splitWord[1];
     }
 
     addWhitespace(){
@@ -120,12 +135,12 @@ class chatPostprocessor{
         this.rawData.links.forEach((link, linkIndex) => {
             this.bodyArray.forEach((wordObj, wordIndex) => {
                 //Check current wordobj for link (placeholder may contain whitespace with it)
-                if(wordObj.string.match(`␜${linkIndex}␜`)){
+                if(wordObj.string.match(`␜${linkIndex}`)){
                     //Set current word object in the body array to the new link object
                     this.bodyArray[wordIndex] = {
                         //Don't want to use a numbered placeholder to make this easier during body injection
                         //but we also don't want to clobber any surrounding whitespace
-                        string: wordObj.string.replace(`␜${linkIndex}␜`, '␜'),
+                        string: wordObj.string.replace(`␜${linkIndex}`, '␜'),
                         link: link.link,
                         type: link.type
                     }

www/js/channel/commandPreprocessor.js

@@ -51,7 +51,7 @@ class commandPreprocessor{
                 //I looked online for obscure characters that no one would use to prevent people from chatting embed placeholders
                 //Then I found this fucker, turns out it's literally made for the job lmao (even if it was originally intended for paper/magnetic tape)
                 //Replace link with indexed placeholder
-                splitMessage[chunkIndex] = `␜${this.links.length}␜`
+                splitMessage[chunkIndex] = `␜${this.links.length}`
 
                 //push current chunk as link
                 this.links.push(chunk);