Finished up with implementing media link embeds in chat.

www/js/channel/chatPostprocessor.js

@@ -29,8 +29,8 @@ class chatPostprocessor{
     splitBody(){
         //Create an empty array to hold the body
         this.bodyArray = [];
-        //Split string by words (except for file seperator to keep link placeholders in-tact)
-        const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b(?!␜)/g); //Group words together 
+        //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);
 
         //for each word in the splitstring
         splitString.forEach((string) => {
@@ -62,6 +62,25 @@ class chatPostprocessor{
 
                 //Inject it into the original string, and add it to string array
                 stringArray.push(wordObj.string.replace('␜',link.outerHTML));
+            }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));
+            }else if(wordObj.type == 'video'){
+                //Create a video node from our link
+                const vid = document.createElement('video');
+                vid.classList.add('chat-video');
+                vid.src = wordObj.link;
+                vid.controls = false;
+                vid.autoplay = true;
+                vid.loop = true;
+
+                //Inject it into the original string, and add it to string array
+                stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
             }
         });
 
@@ -92,6 +111,12 @@ class chatPostprocessor{
     }
 
     processLinks(){
+        //If we don't have links
+        if(this.rawData.links == null){
+            //Don't bother
+            return;
+        }
+
         this.rawData.links.forEach((link, linkIndex) => {
             this.bodyArray.forEach((wordObj, wordIndex) => {
                 //Check current wordobj for link (placeholder may contain whitespace with it)
@@ -102,7 +127,7 @@ class chatPostprocessor{
                         //but we also don't want to clobber any surrounding whitespace
                         string: wordObj.string.replace(`␜${linkIndex}␜`, '␜'),
                         link: link.link,
-                        type: "link"
+                        type: link.type
                     }
                 }
             })

www/js/channel/commandPreprocessor.js

@@ -39,6 +39,8 @@ class commandPreprocessor{
     }
 
     processLinks(){
+        //Strip out file seperators in-case the user is being a smart-ass
+        this.message = this.message.replaceAll('␜','');
         //Split message by links
         var splitMessage = this.message.split(/(https?:\/\/[^\s]+)/g);
         //Create an empty array to hold links