Started work on emote panel in admin page.

www/js/adminPanel.js

@@ -517,8 +517,57 @@ class adminTokeCommandList{
     }
 }
 
+class adminEmoteList{
+    constructor(){
+        this.linkPrompt = document.querySelector('new-emote-link-input');
+        this.namePrompt = document.querySelector('new-emote-link-input');
+        this.emoteList = document.querySelector('#emote-list');
+
+        this.updateList();
+    }
+
+    async updateList(){
+        const list = await adminUtil.getEmotes();
+        this.renderEmoteList(list);
+    }
+
+    renderEmoteList(list){
+        //Clear the current list
+        this.emoteList.innerHTML = "";
+
+        //For each emote in the list
+        list.forEach((emote) => {
+            const emoteSpan = document.createElement('span');
+            emoteSpan.classList.add('emote-list-emote');
+
+            //If the emote is an image
+            if(emote.type == 'image'){
+                //Create image node
+                var emoteMedia = document.createElement('img');
+                //add link as source
+                emoteMedia.src = emote.link;
+            //if emote is a video
+            }else if(emote.type == 'video'){
+                //create video node
+                var emoteMedia = document.createElement('video');
+                //Add video link
+                emoteMeida.src = emote.link;
+                //Set video properties
+                emoteMedia.autoplay = true;
+                emoteMedia.muted = true;
+                emoteMedia.controls = false;
+            }
+
+            emoteSpan.appendChild(emoteMedia);
+
+            this.emoteList.appendChild(emoteSpan);
+        });
+    }
+}
+
 const adminUtil = new canopyAdminUtils();
 const userList = new adminUserList();
 const permissionList = new adminPermissionList();
 const userBanList = new adminUserBanList();
-const tokeCommandList = new adminTokeCommandList();
+const tokeCommandList = new adminTokeCommandList();
+const emoteList = new adminEmoteList();

www/js/channel/chatPostprocessor.js

@@ -7,9 +7,9 @@ class chatPostprocessor{
         //Set current chat nodes
         this.chatEntry = chatEntry;
         this.chatBody = this.chatEntry.querySelector(".chat-entry-body");
-        //Split the chat body into an array of objects representing each word
-        //We could pass this through arguments but these functions wont be very interoperable anyways since they expect a purpose-made hashtable
-        this.splitBody();
+
+        //Split the chat message into an array of objects representing each word
+        this.splitMessage();
 
         //Inject links into un-processed placeholders
         this.processLinks();
@@ -26,9 +26,9 @@ class chatPostprocessor{
         return this.chatEntry;
     }
 
-    splitBody(){
+    splitMessage(){
         //Create an empty array to hold the body
-        this.bodyArray = [];
+        this.messageArray = [];
         //Split string by word-boundries, with negative lookaheads to exclude file seperators so we don't split link placeholders
         const splitString = this.rawData.msg.split(/(?<!␜)\b/g);
 
@@ -41,7 +41,7 @@ class chatPostprocessor{
             }
 
             //Add it to our body array
-            this.bodyArray.push(wordObj);
+            this.messageArray.push(wordObj);
         });
     }
 
@@ -51,7 +51,7 @@ class chatPostprocessor{
 
         const _this = this;
         //For each word object
-        this.bodyArray.forEach((wordObj) => {
+        this.messageArray.forEach((wordObj) => {
             if(wordObj.type == 'word'){
                 //Inject current wordObj string into the chat body
                 injectString(wordObj.string);
@@ -60,7 +60,7 @@ class chatPostprocessor{
                 const link = document.createElement('a');
                 link.classList.add('chat-link');
                 link.href = wordObj.link;
-                //Use textContent to be safe since links can't be escaped
+                //Use textContent to be safe since links can't be escaped serverside
                 link.textContent = wordObj.link;
 
                 //Append node to chatBody
@@ -70,7 +70,7 @@ class chatPostprocessor{
                 const badLink = document.createElement('a');
                 badLink.classList.add('chat-dead-link', 'danger-link');
                 badLink.href = wordObj.link;
-                //Use textContent to be safe since links can't be escaped
+                //Use textContent to be safe since links can't be escaped serverside
                 badLink.textContent = wordObj.link;
 
                 //Append node to chatBody
@@ -91,7 +91,6 @@ class chatPostprocessor{
                 img.classList.add('chat-img');
                 img.src = wordObj.link;
 
-                //stringArray.push(wordObj.string.replace('␜',img.outerHTML));
                 //Append node to chatBody
                 injectNode(wordObj, img);
             }else if(wordObj.type == 'video'){
@@ -104,7 +103,6 @@ class chatPostprocessor{
                 vid.loop = true;
                 vid.muted = true;
 
-                //stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
                 injectNode(wordObj, vid);
             }
         });
@@ -115,8 +113,9 @@ class chatPostprocessor{
             if(typeof item == "string"){
                 //Add it to the chat's innerHTML (it should already be escaped by the server)
                 this.chatBody.innerHTML += item;
+            //Otherwise it should be a DOM node
             }else{
-                //Otherwise it should be a DOM node, therefore we should append it
+                //Append the node to our chat body
                 this.chatBody.appendChild(item);
             }
         })
@@ -151,12 +150,14 @@ class chatPostprocessor{
 
     addWhitespace(){
         //for each word object in the body
-        this.bodyArray.forEach((wordObj, wordIndex) => {
+        this.messageArray.forEach((wordObj, wordIndex) => {
             //if the word object hasn't been pre-processed elsewhere
             if(wordObj.type == "word"){
+                //Create an empty array to hold our word
                 var wordArray = [];
-                //Add invisible whitespace in-between characters to keep it from breaking page layout
-                this.bodyArray[wordIndex].string.split("").forEach((char, charIndex) => {
+                //For each character in the string of the current word object
+                this.messageArray[wordIndex].string.split("").forEach((char, charIndex) => {
+                    //push the current character to the wordArray
                     wordArray.push(char);
                     //After eight characters
                     if(charIndex > 8){
@@ -166,7 +167,8 @@ class chatPostprocessor{
 
                 });
 
-                this.bodyArray[wordIndex].string = wordArray.join("");
+                //Join the wordArray into a single string, and use it to set the current wordObject's string
+                this.messageArray[wordIndex].string = wordArray.join("");
             }
         });
     }
@@ -178,12 +180,14 @@ class chatPostprocessor{
             return;
         }
 
+        //For every link received in this message
         this.rawData.links.forEach((link, linkIndex) => {
-            this.bodyArray.forEach((wordObj, wordIndex) => {
+            //For every word obj in the message array
+            this.messageArray.forEach((wordObj, wordIndex) => {
                 //Check current wordobj for link (placeholder may contain whitespace with it)
                 if(wordObj.string.match(`␜${linkIndex}`)){
                     //Set current word object in the body array to the new link object
-                    this.bodyArray[wordIndex] = {
+                    this.messageArray[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}`, '␜'),