Watching Focus

assets/chat/css/style.scss

@@ -200,6 +200,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 +841,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

@@ -102,6 +102,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')
@@ -352,6 +353,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 +694,12 @@ class Chat {
       ) {
         user.createdDate = data.createdDate;
       }
+      if (
+        Object.hasOwn(data, 'watching') &&
+        !user.equalWatching(data.watching)
+      ) {
+        user.watching = data.watching;
+      }
     }
     return user;
   }
@@ -1059,10 +1072,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);
@@ -1396,6 +1420,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/ChatUserMessage.js

@@ -27,6 +27,7 @@ export default class ChatUserMessage extends ChatMessage {
     this.title = '';
     this.slashme = false;
     this.mentioned = [];
+    this.watching = null;
   }
 
   html(chat = null) {
@@ -37,6 +38,13 @@ export default class ChatUserMessage extends ChatMessage {
     if (this.user && this.user.username) {
       classes.push(...this.user.features);
       attr['data-username'] = this.user.username.toLowerCase();
+
+      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();
@@ -108,4 +116,11 @@ export default class ChatUserMessage extends ChatMessage {
     this.ui.classList.toggle('msg-own', isOwn);
     this.isown = isOwn;
   }
+
+  setWatching(user) {
+    this.ui.classList.toggle(
+      'watching-same',
+      user.watching && user.equalWatching(this.watching),
+    );
+  }
 }

assets/chat/js/user.js

@@ -8,12 +8,14 @@ class ChatUser {
       this.username = args;
       this.createdDate = args;
       this.features = [];
+      this.watching = null;
     } else {
       this.id = args.id || null;
       this.nick = args.nick || '';
       this.username = args.nick || '';
       this.createdDate = args.createdDate || '';
       this.features = args.features || [];
+      this.watching = args.watching || null;
     }
   }
 
@@ -73,6 +75,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"
+          title="Watching Focus"
+        >
+          <i class="btn-icon"></i>
+        </a>
         <a id="chat-settings-btn" class="chat-tool-btn" title="Settings">
           <i class="btn-icon"></i>
         </a>