Watching Focus

assets/chat/css/style.scss

@@ -1,6 +1,8 @@
 @import '../../common';
 @import '../../icons/icons';
 @import '~normalize.css';
+@import '~tippy.js/dist/tippy.css';
+@import '~tippy.js/dist/svg-arrow.css';
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700');
 
 *,
@@ -200,6 +202,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 +843,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 {
@@ -2162,3 +2181,13 @@ body.pref-fontscale[data-fontscale='10'] {
   font-family: 'Among Us';
   src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype');
 }
+
+.tippy-box[data-theme~='dgg'] {
+  text-align: center;
+  background-color: white;
+  color: #000;
+}
+
+.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow {
+  fill: white;
+}

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 tippy, { roundArrow } from 'tippy.js';
 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,16 @@ class Chat {
       return link.sheet;
     })();
 
+    // Tooltips
+    tippy('[data-tippy-content]', {
+      arrow: roundArrow,
+      delay: 0,
+      duration: 0,
+      maxWidth: 250,
+      hideOnClick: false,
+      theme: 'dgg',
+    });
+
     this.ishidden = (document.visibilityState || 'visible') !== 'visible';
     this.output = this.ui.find('#chat-output-frame');
     this.input = this.ui.find('#chat-input-control');
@@ -352,6 +364,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 +705,12 @@ class Chat {
       ) {
         user.createdDate = data.createdDate;
       }
+      if (
+        Object.hasOwn(data, 'watching') &&
+        !user.equalWatching(data.watching)
+      ) {
+        user.watching = data.watching;
+      }
     }
     return user;
   }
@@ -1057,10 +1081,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 +1429,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/views/embed.html

@@ -51,6 +51,13 @@
         </a>
       </div>
       <div class="chat-tools-group">
+        <a
+          id="chat-watching-focus-btn"
+          class="chat-tool-btn"
+          data-tippy-content="Highlights messages from users watching the same stream"
+        >
+          <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

@@ -40,6 +40,7 @@
     "overlayscrollbars": "^2.0.3",
     "sass-loader": "^13.2.0",
     "throttle-debounce": "~5.0.0",
+    "tippy.js": "^6.3.7",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
@@ -87,4 +88,4 @@
       "prettier -cwu --loglevel silent ."
     ]
   }
-}
+}