Merge pull request #23 from wompmacho/add-stream-overlay-option

unable to Add stream overlay option, alternatives and fixes, also rename project

package.json

@@ -1,6 +1,6 @@
 {
   "name": "WompChat",
-  "version": "1.0.4",
+  "version": "1.0.3",
   "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
   "scripts": {
     "start": "webpack --progress --watch",

src/chat_overlay.js

@@ -0,0 +1,50 @@
+import './stylus/content.styl';
+import './stylus/chat_overlay.styl';
+
+
+const message_container =  document.getElementById("message_container");
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+
+    if(sender.origin == "https://www.youtube.com"){
+      
+      if (request.message == "preloadMessages"){
+        message_container.prepend(convertToHTMLElm(request.node));
+        message_container.scrollIntoView({block: 'end'});
+      }
+
+      if (request.message == "newMessage"){
+        message_container.append(convertToHTMLElm(request.node));
+        message_container.scrollIntoView({block: 'end'});
+      }
+
+      if (request.message == "removeMessage"){
+        destroyMessage(convertToHTMLElm(request.node));
+      }
+    }
+  }
+);
+
+function convertToHTMLElm(node){
+
+  //var node = new DOMParser().parseFromString(node, 'text/html').documentElement;
+  var temp = document.createElement('div');
+  temp.innerHTML = node;
+  node = temp.firstChild;
+
+  return node;
+}
+
+function destroyMessage(node){
+
+  const messageId = node.getAttribute('message-id');
+
+  console.log(messageId);
+  console.log(message);
+
+  const message = document.querySelectorAll(`[message-id=${messageId}]`);
+  if(message != undefined){
+    message.destroy();
+  }
+}

src/config.js

@@ -17,6 +17,7 @@ const CONFIG = {
     setTwitchColors: false,
     setLiveChat: true,
     allowTextSlider: false,
+    setGreenScreen: false,
 
     // Var
     textSizeSlider: 'inherit',

src/content/ChatScroller.js

@@ -29,7 +29,7 @@ class ChatScroller {
   }
   
   scroll() {
-    this.scroller.scrollTop = 9999;
+    this.scroller.scrollIntoView({block: 'end'});
   }
 
   getScroller() {

src/content/ChatWatcher.js

@@ -2,8 +2,6 @@ import Emotes from './Emotes';
 import Message from './Message';
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 
-
-
 class ChatWatcher {
 
   constructor() {
@@ -14,7 +12,6 @@ class ChatWatcher {
   }
 
   init() {
-
     return new Promise((res, rej) => {
       this.getChatContainer().then(Emotes.init).then(() => {
         this.addEmotePopup();
@@ -44,6 +41,10 @@ class ChatWatcher {
       const node = messages[i];
       if(this.isMessageNode(node)) {
         const message = new Message(node);
+     
+        // chrome.runtime.sendMessage({message: "preloadMessages", node: node.outerHTML}, function(response) {
+        //   // dont need to do anything
+        // });
       }
     }
   }
@@ -54,8 +55,6 @@ class ChatWatcher {
 
       mutations.forEach(mutation => {
 
-        
-
         const { addedNodes, removedNodes } = mutation;
         
         // Added nodes
@@ -64,6 +63,11 @@ class ChatWatcher {
             const node = addedNodes[i];
             if(this.isMessageNode(node)) {
               this.onNewMessage(node);
+       
+              // send message
+              // chrome.runtime.sendMessage({message: "newMessage", node: node.outerHTML}, function(response) {
+              //   // dont need to do anything
+              // });
             }
           }
         }
@@ -186,8 +190,6 @@ class ChatWatcher {
       emoteAppend(keysITer);
     }
 
- 
-
     //  add div to doc
     chatButtonSelectionList.appendChild(popUpDiv);
 
@@ -197,6 +199,14 @@ class ChatWatcher {
       console.log('emote popup button clicked');
     });
 
+    // escape for popup div
+    document.onkeydown = function(evt) {
+      if (evt.key === "Escape" && !popUpDiv.classList.contains('hideElement')) {
+        popUpDiv.classList.toggle('hideElement');
+        return;
+      }
+  };
+
     //  get input area
     var inputArea = document.querySelector('#input.yt-live-chat-text-input-field-renderer');
     var inputAreaLabel = document.querySelector('#label.yt-live-chat-text-input-field-renderer');
@@ -218,6 +228,7 @@ class ChatWatcher {
     }
 
     console.log((keysITer.length+1) + " Emotes Added");
+
   }// end addEmotePopup
 
   ///////////////////////////////////////////////////////////////////

src/content/Emotes/index.js

@@ -105,6 +105,10 @@ class Emotes {
         url = urls[1];
       }
 
+      //  fix for overlay, remove "//" at start of url 
+      var protocol = "https:";
+      url = protocol.concat(url);
+
       this.dictionary.set(name, new Emote({ code: name, url }));
       this.franker_Dictionary.set(name, new Emote({ code: name, url }));
     }

src/content/Message.js

@@ -202,15 +202,7 @@ class Message {
       }
     }    
   }
-
   ///////////////////////////////////////////////////////////////////
-
-  //  removes color attr
-  removelternateLineColor(){
-    this.node.classList.remove("set-background-color-one");
-    this.node.classList.remove("set-background-color-two");
-  }
-
 }// end Message
 
 export default Message;

src/content/index.js

@@ -74,6 +74,14 @@ class Main {
     }
 
     ///////////////////////////////////////////////////////////////////
+
+    //Live Chat Default Option
+    if (PersistentSyncStorage.data.options.setGreenScreen) {
+      var chat = document.querySelector('yt-live-chat-item-list-renderer');
+      chat.classList.add('green_sceen');
+    } else {
+      // do nothing, let user pick option if not set as default in options menu
+    }
   }
 
   init() {

src/html/chat_overlay.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Chat Overlay</title>
+    <link rel="stylesheet" href="./youtube.css">
+  </head>
+  <body>
+    <div id="message_container"></div>
+    <script src="../chat_overlay.js"></script>
+  </body>
+</html>

src/html/options.html

@@ -115,6 +115,13 @@
           </div>
         </div>
 
+        <div class="options-table">
+          <div class="option-row">
+            <div class="option-cell"><label for="setGreenScreen">Green Screen Chat</label></div>
+            <div class="option-cell"><input disabled type="checkbox" id="setGreenScreen" class="option-input"></div>
+          </div>
+        </div>
+
       </div>
 
       <hr>
@@ -136,6 +143,11 @@
           </div>
         </div>
       </span>
+      
+      <hr>
+      
+      <!-- <button class="chat_overlay" id="chat_overlay" >Chat Overlay</button> -->
+
     <div id="save-status">&nbsp;</div>
   </div>
 

src/options.js

@@ -113,16 +113,20 @@ PersistentSyncStorage.on('ready', () => {
     input.addEventListener('change', inputOnChange);
 
     switch (input.id) {
-
       case 'enableBTTVEmotes':
         input.removeAttribute('disabled');
         break;
 
-        if(PersistentSyncStorage.data.options.allowTextSlider == true){
-          textSizeSlider.disabled = false;
-        }else{
-          textSizeSlider.disabled = true;
-        }
+      case 'enableFrankerEmotes':
+        input.removeAttribute('disabled');
+        break;
+
+      case 'enableTwitchEmotes':
+        input.removeAttribute('disabled');
+        break;
+
+      case 'kappaFix':
+        input.removeAttribute('disabled');
         break;
 
       case 'theaterModeFix':
@@ -157,10 +161,6 @@ PersistentSyncStorage.on('ready', () => {
         input.removeAttribute('disabled');
         break;
 
-      case 'allowTextSlider' :
-        //
-        break;
-
       case 'allowTextSlider':
         input.removeAttribute('disabled');
         if(PersistentSyncStorage.data.options.allowTextSlider == true){
@@ -170,6 +170,10 @@ PersistentSyncStorage.on('ready', () => {
         }
         break;
 
+      case 'setGreenScreen':
+        input.removeAttribute('disabled');
+        break;
+
       default:
         // shouldn't get hete if handled
         break;
@@ -181,3 +185,8 @@ var infoButton = document.getElementById('infoButton');
 infoButton.addEventListener('click', function(){
   chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' });
 });
+
+// var chat_overlay = document.getElementById('chat_overlay');
+// chat_overlay.addEventListener('click', function(){
+//   chrome.tabs.create({ url: 'html/chat_overlay.html' });
+// });

src/stylus/chat_overlay.styl

@@ -0,0 +1,40 @@
+html
+  overflow: scroll;
+  overflow-x: hidden;
+  background-color:#00ff00 !important
+
+::-webkit-scrollbar 
+  width: 0px;  
+  background: transparent;  
+
+::-webkit-scrollbar-thumb 
+  background: #FF0000;
+
+yt-live-chat-text-message-renderer 
+  font-family: Impact, Charcoal, sans-serif !important
+  background-color: transparent !important
+  #timestamp
+    font-size: 1.5em !important
+    vertical-align: middle !important
+    color: white !important
+    font-weight: 700 !important
+  img
+    vertical-align: middle !important
+    height: 2em !important;
+    width: auto !important;
+  #author-name
+    font-size: 1.5em !important
+    vertical-align: middle !important
+    color: white !important
+    font-weight: 700 !important
+  #message
+    font-size: 2em !important
+    color: white !important
+  #Emote
+    vertical-align: middle
+
+
+
+.message_container
+  overflow-y: scroll !important;
+  scroll-behavior: smooth

src/stylus/content.styl

@@ -42,22 +42,22 @@
   #content
     display: inline-block
     vertical-align: middle
-  #timestamp.yt-live-chat-text-message-renderer
-    font-size: 1em
-    display: inline-block 
-    vertical-align: middle
 
 .showTimeStamp
   #timestamp.yt-live-chat-text-message-renderer
     display: inline-block 
+    vertical-align: middle
+
 
 .Emote
+  height: 100%;
+  vertical-align: bottom;
+  
   img
     height: 1.75em
     align-self: center
-    vertical-align: sub;
     display:inline-block
-    vertical-align: middle
+    vertical-align: middle !important
 
 emote_div:hover
    background-size: 100% //100% 
@@ -213,3 +213,10 @@ emote_div:hover
   right: 0px  !important
   top: 0px  !important
   border: 1px solid #4e4e4e
+
+.green_sceen
+  background-color:  #00ff00 !important
+  font-weight: 700 !important
+  -webkit-text-stroke: 1px #000000
+  yt-live-chat-text-message-renderer:nth-child(odd)
+    background-color:  #00ff00 !important

webpack.config.js

@@ -23,7 +23,8 @@ module.exports = {
     content: './content/',
     background: './background/',
     options: './options.js',
-    welcomePage: './welcomePage.js'
+    welcomePage: './welcomePage.js',
+    chat_overlay: './chat_overlay.js'
 
   },
   output: {

webpack.prod.js

@@ -24,7 +24,8 @@ module.exports = {
     content: './content/',
     background: './background/',
     options: './options.js',
-    welcomePage: './welcomePage.js'
+    welcomePage: './welcomePage.js',
+    chat_overlay: './chat_overlay.js'
   },
   output: {
     path: distPath,