Merge pull request #18 from chylex/textfilter

Add chat text filter option

src/main.js

@@ -17,6 +17,7 @@ const settings = {
   globalSwitch: true,
   
   chatWidth: 350,
+  chatFilters: "",
   grayTheme: false,
   hideTimestamps: false,
   
@@ -52,6 +53,7 @@ function tryRemoveElement(ele){
 
 function onSettingsUpdated(){
   generateCustomCSS();
+  refreshChatFilters();
   
   if (typeof GM_setValue !== "undefined"){
     for(let key in settings){
@@ -602,6 +604,77 @@ function generateSettingsCSS(){
   document.head.appendChild(style);
 }
 
+// Filters
+
+function getNodeText(node){
+  if (node.nodeType === Node.TEXT_NODE){
+    return node.nodeValue;
+  }
+  
+  if (node.nodeType === Node.ELEMENT_NODE){
+    if (node.tagName === "IMG"){
+      return node.getAttribute("alt") || "";
+    }
+    else{
+      let text = "";
+      
+      for(let child of node.childNodes){
+        text += getNodeText(child);
+      }
+      
+      return text;
+    }
+  }
+  
+  return "";
+}
+
+var filtersRegex = null;
+
+var filtersObserver = new MutationObserver(function(mutations){
+  for(let mutation of mutations){
+    for(let added of mutation.addedNodes){
+      let text;
+      
+      if (added.classList.contains("chat-line__message")){
+        let nodes = Array.from(added.childNodes);
+        let colon = nodes.findIndex(node => node.tagName === "SPAN" && node.innerText === ": ");
+        text = nodes.slice(colon+1).map(getNodeText).join("");
+      }
+      else{
+        text = getNodeText(added.querySelector(".qa-mod-message") || added);
+      }
+      
+      if (filtersRegex.test(text)){
+        added.style.display = "none";
+      }
+    }
+  }
+});
+
+function refreshChatFilters(){
+  let filters = (settings.chatFilters || "").split(",").map(entry => entry.trim()).filter(entry => !!entry);
+  
+  if (filters.length === 0){
+    filtersRegex = null;
+  }
+  else{
+    let options = filters.map(entry => entry.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "(?:\\S*)").replace(/\s+/g, "\\s+")).join("|");
+    filtersRegex = new RegExp("(?:^|\\s)(?:"+options+")(?:$|\\s)", "i");
+  }
+  
+  const chat = document.querySelector(".chat-list__lines .simplebar-content > div, .video-chat__message-list-wrapper ul");
+  
+  if (chat){
+    if (filtersRegex && settings.globalSwitch){
+      filtersObserver.observe(chat, { childList: true });
+    }
+    else{
+      filtersObserver.disconnect();
+    }
+  }
+}
+
 function debounce(func, wait){
   let timeout = -1;
   
@@ -638,6 +711,27 @@ function createSettingsModal(){
 </div>`;
   };
   
+  let generateTxtbox = function(title, option, cfg){
+    window.setTimeout(function(){
+      let input = document.getElementById("ttc-opt-"+option);
+      
+      input.addEventListener("input", debounce(function(){
+        settings[option] = input.value;
+        onSettingsUpdated();
+      }, cfg.wait));
+    }, 1);
+    
+    return `
+<div class="player-menu__section" data-enabled="true">
+  <div class="player-menu__header">
+    <span class="js-menu-header">${title}</span>
+  </div>
+  <div class="player-menu__item pl-flex pl-flex--nowrap">
+    <input id="ttc-opt-${option}" type="text" value="${settings[option]}" placeholder="${cfg.placeholder}">
+  </div>
+</div>`;
+  };
+  
   let generateSlider = function(title, option, cfg){
     window.setTimeout(function(){
       let slider = document.getElementById("ttc-opt-"+option);
@@ -679,6 +773,7 @@ function createSettingsModal(){
   <div class="ttc-flex-column">
     <p>General</p>
     ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
+    ${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
     ${generateToggle("Gray Theme", "grayTheme")}
     ${generateToggle("Hide Timestamps", "hideTimestamps")}
   </div>
@@ -745,6 +840,8 @@ function insertSettingsButton(){
     }
   });
   
+  refreshChatFilters();
+  
   if (isFirefox && container.classList.contains("video-chat")){
     const wrapper = document.querySelector(".video-chat__message-list-wrapper");
     const unsynced = "video-chat__message-list-wrapper--unsynced";