Show what a user is watching in the user info menu (#385)

* Add watching-subheader to user-info class * Update ChatUserInfoMenu.js for watching subheader * linted
destinygg · Dec 27, 2023 · 790b0b2 · 790b0b2
1 parent c4a9c6d
commit 790b0b2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/assets/chat/js/menus/ChatUserInfoMenu.js b/assets/chat/js/menus/ChatUserInfoMenu.js
@@ -13,6 +13,10 @@ export default class ChatUserInfoMenu extends ChatMenuFloating {
 
     this.header = this.ui.find('.toolbar span');
 
+    this.watchingSubheader = this.ui.find(
+      '.user-info h5.watching-subheader',
+    )[0];
+
     this.createdDateSubheader = this.ui.find('.user-info h5.date-subheader')[0];
 
     this.tagSubheader = this.ui.find('.user-info h5.tag-subheader')[0];
@@ -237,6 +241,15 @@ export default class ChatUserInfoMenu extends ChatMenuFloating {
     const tagNote = this.chat.taggednotes.get(this.clickedNick);
     const usernameFeatures = selectedUser.classList.value;
 
+    const watchingEmbed = this.buildWatchingEmbed(this.clickedNick);
+    if (watchingEmbed !== '') {
+      this.watchingSubheader.style.display = '';
+      this.watchingSubheader.replaceChildren('Watching: ', watchingEmbed);
+    } else {
+      this.watchingSubheader.style.display = 'none';
+      this.watchingSubheader.replaceChildren();
+    }
+
     const formattedDate = this.buildCreatedDate(this.clickedNick);
     if (formattedDate) {
       this.createdDateSubheader.style.display = '';
@@ -292,6 +305,14 @@ export default class ChatUserInfoMenu extends ChatMenuFloating {
     this.redraw();
   }
 
+  buildWatchingEmbed(nick) {
+    const user = this.chat.users.get(nick);
+    if (!user?.watching) {
+      return '';
+    }
+    return `${user.watching.id} on ${user.watching.platform}`;
+  }
+
   buildCreatedDate(nick) {
     const user = this.chat.users.get(nick.toLowerCase());
     if (!user?.createdDate) {

diff --git a/assets/views/embed.html b/assets/views/embed.html
@@ -255,6 +255,7 @@ <h5><span>Users</span> <i class="chat-menu-close"></i></h5>
         <h5><span>User Info</span> <i class="chat-menu-close"></i></h5>
       </div>
       <div class="user-info">
+        <h5 class="watching-subheader">Watching:</h5>
         <h5 class="date-subheader"></h5>
         <h5 class="tag-subheader"></h5>
         <h5 class="flairs-subheader">Flairs:</h5>