Watching Focus

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   rules: {
     'class-methods-use-this': 'off',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'no-param-reassign': ['error', { props: false }],
     'prefer-destructuring': ['error', { object: true, array: false }],

assets/chat/css/style.scss

@@ -1,6 +1,7 @@
 @import '../../common';
 @import '../../icons/icons';
 @import '~normalize.css';
+@import '~bootstrap';
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700');
 
 *,
@@ -200,6 +201,11 @@ hr {
       center;
     background-size: contain;
   }
+  #chat-watching-focus-btn .btn-icon {
+    background: transparent url('../img/icon-watching.svg') no-repeat center
+      center;
+    background-size: contain;
+  }
   #chat-settings-btn .btn-icon {
     background: transparent url('../img/icon-settings.svg') no-repeat center
       center;
@@ -836,8 +842,20 @@ hr {
   }
 }
 
+.watching-focus {
+  .msg-emote,
+  .msg-user {
+    opacity: 0.3;
+
+    &.watching-same,
+    &.msg-highlight {
+      opacity: 1;
+    }
+  }
+}
+
 /* Focus or highlight a line */
-.focus .msg-chat {
+.focus:not(.watching-focus) .msg-chat {
   opacity: 0.3;
 
   &.msg-pinned {

assets/chat/js/chat.js

@@ -2,6 +2,7 @@ import { fetch } from 'whatwg-fetch';
 import $ from 'jquery';
 import { debounce } from 'throttle-debounce';
 import moment from 'moment';
+import { Tooltip } from 'bootstrap';
 import {
   KEYCODES,
   DATE_FORMATS,
@@ -102,6 +103,7 @@ class Chat {
     this.regexhighlightnicks = null;
     this.regexhighlightself = null;
     this.replyusername = null;
+    this.watchingfocus = false;
 
     // An interface to tell the chat to do things via chat commands, or via emit
     // e.g. control.emit('CONNECT', 'ws://localhost:9001') is essentially chat.cmdCONNECT('ws://localhost:9001')
@@ -265,6 +267,9 @@ class Chat {
       return link.sheet;
     })();
 
+    const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltipList.forEach((el) => new Tooltip(el));
+
     this.ishidden = (document.visibilityState || 'visible') !== 'visible';
     this.output = this.ui.find('#chat-output-frame');
     this.input = this.ui.find('#chat-input-control');
@@ -352,6 +357,12 @@ class Chat {
       }
     });
 
+    // Watching focus
+    this.ui.on('click touch', '#chat-watching-focus-btn', () => {
+      this.watchingfocus = !this.watchingfocus;
+      this.ui.toggleClass('watching-focus', this.watchingfocus);
+    });
+
     // Chat focus / menu close when clicking on some areas
     let downinoutput = false;
     this.output.on('mousedown', () => {
@@ -687,6 +698,12 @@ class Chat {
       ) {
         user.createdDate = data.createdDate;
       }
+      if (
+        Object.hasOwn(data, 'watching') &&
+        !user.equalWatching(data.watching)
+      ) {
+        user.watching = data.watching;
+      }
     }
     return user;
   }
@@ -1057,10 +1074,21 @@ class Chat {
     ) {
       if (win.lastmessage.type === MessageTypes.EMOTE) {
         win.lastmessage.incEmoteCount();
+
+        if (this.user.equalWatching(usr.watching)) {
+          win.lastmessage.ui.classList.toggle('watching-same', true);
+        }
+
         this.mainwindow.update();
       } else {
         win.removeLastMessage();
-        MessageBuilder.emote(textonly, data.timestamp, 2).into(this);
+        const msg = MessageBuilder.emote(textonly, data.timestamp, 2).into(
+          this,
+        );
+
+        if (this.user.equalWatching(usr.watching)) {
+          msg.ui.classList.add('watching-same');
+        }
       }
     } else if (!this.resolveMessage(data.nick, data.data)) {
       MessageBuilder.message(data.data, usr, data.timestamp).into(this);
@@ -1394,6 +1422,9 @@ class Chat {
   onUPDATEUSER(data) {
     if (this.user?.id === data.id) {
       this.setUser(data);
+      for (const window of this.windows.values()) {
+        window.updateMessages(this);
+      }
     }
   }
 

assets/chat/js/messages/ChatMessage.js

@@ -40,6 +40,7 @@ export default class ChatMessage extends ChatUIMessage {
     this.unformatted = unformatted;
     this.ignored = false;
     this.censorType = null;
+    this.watching = null;
   }
 
   html(chat = null) {
@@ -146,4 +147,11 @@ export default class ChatMessage extends ChatUIMessage {
     this.ui.classList.toggle('msg-own', isOwn);
     this.isown = isOwn;
   }
+
+  setWatching(user) {
+    this.ui.classList.toggle(
+      'watching-same',
+      user.equalWatching(this.watching),
+    );
+  }
 }

assets/chat/js/messages/ChatUserMessage.js

@@ -37,6 +37,13 @@ export default class ChatUserMessage extends ChatMessage {
     if (this.user && this.user.username) {
       classes.push(...this.user.features);
       attr['data-username'] = this.user.username;
+
+      if (this.user.watching) {
+        this.watching = this.user.watching;
+        if (chat.user.equalWatching(this.user.watching)) {
+          classes.push('watching-same');
+        }
+      }
     }
     if (this.mentioned && this.mentioned.length > 0)
       attr['data-mentioned'] = this.mentioned.join(' ').toLowerCase();

assets/chat/js/user.js

@@ -39,6 +39,12 @@ class ChatUser {
    */
   features = [];
 
+  /**
+   * User's watching embed.
+   * @type {?Object}
+   */
+  watching = null;
+
   /**
    * @param {string|User} user
    */
@@ -52,6 +58,7 @@ class ChatUser {
       this.username = this.displayName.toLowerCase();
       this.createdDate = user.createdDate || '';
       this.features = user.features || [];
+      this.watching = user.watching || null;
     }
   }
 
@@ -111,6 +118,13 @@ class ChatUser {
     }
     return 0;
   }
+
+  equalWatching(embed) {
+    return (
+      this.watching?.platform === embed?.platform &&
+      this.watching?.id === embed?.id
+    );
+  }
 }
 
 export default ChatUser;

assets/chat/js/window.js

@@ -135,6 +135,7 @@ class ChatWindow extends EventEmitter {
         message.highlight(chat.shouldHighlightMessage(message));
         message.setTag(chat.taggednicks.get(username));
         message.setTagTitle(chat.taggednotes.get(username));
+        message.setWatching(chat.user);
 
         if (message.moderated) {
           message.censor(parseInt(chat.settings.get('showremoved') || '1', 10));

assets/demo.js

@@ -49,6 +49,7 @@ switch ((Chat.reqParam('t') || 'embed').toUpperCase()) {
 
   case 'EMBED':
   default:
+    html.attr('data-bs-theme', 'dark');
     chat
       .withGui(embedHtml)
       .then(() => chat.loadEmotesAndFlairs())

assets/views/embed.html

@@ -51,6 +51,15 @@
         </a>
       </div>
       <div class="chat-tools-group">
+        <a
+          id="chat-watching-focus-btn"
+          class="chat-tool-btn"
+          title="Highlights messages from users watching the same stream"
+          data-bs-placement="top"
+          data-bs-toggle="tooltip"
+        >
+          <i class="btn-icon"></i>
+        </a>
         <a id="chat-settings-btn" class="chat-tool-btn" title="Settings">
           <i class="btn-icon"></i>
         </a>

package.json

@@ -48,6 +48,7 @@
     "@babel/preset-env": "^7.14.2",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^9.1.2",
+    "bootstrap": "^5.3.2",
     "css-loader": "^6.7.3",
     "eslint": "^8.27.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -87,4 +88,4 @@
       "prettier -cwu --loglevel silent ."
     ]
   }
-}
+}