DES-201: add a YouTube-like event bar

assets/chat/css/style.scss

@@ -765,13 +765,121 @@ hr {
   background-color: $color-chat-highlight;
 }
 
-/* Pinned Messages */
-#chat-pinned-frame {
-  display: none;
+/* Event bar */
+#chat-event-bar {
+  &:empty {
+    display: none !important;
+  }
+
+  display: inline-flex;
+  overflow-x: scroll !important;
+  background: #151515;
+  z-index: 6;
+
+  // width = height (lmao firefox)
+  scrollbar-width: none;
+  --ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .msg-event-bar-wrapper {
+    cursor: pointer;
+    transition:
+      transform 500ms,
+      opacity 500ms;
+    opacity: 0;
+    transform: scale(0.1);
+
+    &.active {
+      transform: unset;
+      opacity: 1;
+    }
+
+    &:hover {
+      transition: transform 100ms;
+      transform: scale(1.05) !important;
+    }
+
+    &.removed {
+      transform: scale(0.1) !important;
+    }
+  }
+
+  .msg-chat {
+    margin: $gutter-sm $gutter-sm $gutter-sm $gutter-sm;
+    border-width: 2px;
+  }
+
+  .user {
+    &.scrolling {
+      display: inline-block;
+      animation: scrolling-event-username 12s linear 3s infinite;
+      word-wrap: normal;
+    }
+
+    &::before {
+      content: unset;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .event-top {
+    padding: 0 $gutter-xs 0 0.4em;
+  }
+
+  .event-info {
+    padding-right: $gutter-xs;
+
+    &.scrolling {
+      overflow: hidden;
+      width: 74px;
+    }
+  }
+
+  .event-icon {
+    width: 2em;
+    height: 2em;
+  }
+
+  .rainbow-border::before {
+    margin: -2px;
+  }
+}
+
+@keyframes scrolling-event-username {
+  25%,
+  50% {
+    transform: translateX(calc(-100% + 74px));
+  }
+
+  75%,
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+/* Hovering frame containing highlighted event from event bar and pinned message */
+#chat-hover-frame {
   padding: 4px;
   position: absolute;
   width: 100%;
   z-index: 210;
+}
+
+/* Event highlight frame */
+#chat-event-highlight-frame {
+  .msg-event-bar {
+    margin: $gutter-sm $gutter-sm $gutter-sm $gutter-sm;
+  }
+}
+
+/* Pinned Messages */
+#chat-pinned-frame {
+  display: none;
 
   &.active {
     display: block;
@@ -878,6 +986,10 @@ hr {
   &.msg-pinned {
     opacity: 1;
   }
+
+  &.msg-event-bar {
+    opacity: 1;
+  }
 }
 
 /* Emotes and combo */
@@ -1890,7 +2002,10 @@ button.btn {
   #chat-output-frame {
     margin: 0;
   }
-  #chat-pinned-frame {
+  #chat-event-bar {
+    display: none !important;
+  }
+  #chat-hover-frame {
     display: none !important;
   }
 

assets/chat/js/chat.js

@@ -31,6 +31,7 @@ import {
   ChatEmoteTooltip,
   ChatSettingsMenu,
   ChatUserInfoMenu,
+  ChatEventBar,
 } from './menus';
 import ChatAutoComplete from './autocomplete';
 import ChatInputHistory from './history';
@@ -145,6 +146,7 @@ class Chat {
     this.source.on('DONATION', (data) => this.onDONATION(data));
     this.source.on('UPDATEUSER', (data) => this.onUPDATEUSER(data));
     this.source.on('DEATH', (data) => this.onDEATH(data));
+    this.source.on('PAIDEVENTS', (data) => this.onPAIDEVENTS(data));
 
     this.control.on('SEND', (data) => this.cmdSEND(data));
     this.control.on('HINT', (data) => this.cmdHINT(data));
@@ -294,6 +296,7 @@ class Chat {
     this.mainwindow = new ChatWindow('main').into(this);
     this.mutedtimer = new MutedTimer(this);
     this.chatpoll = new ChatPoll(this);
+    this.eventBar = new ChatEventBar(this);
     this.pinnedMessage = null;
 
     this.windowToFront('main');
@@ -1284,19 +1287,54 @@ class Chat {
   }
 
   onSUBSCRIPTION(data) {
-    MessageBuilder.subscription(data).into(this);
+    const event = MessageBuilder.subscription(data);
+    event.into(this);
+    this.eventBar.add(event);
   }
 
   onGIFTSUB(data) {
-    MessageBuilder.gift(data).into(this);
+    const event = MessageBuilder.gift(data);
+    event.into(this);
+    this.eventBar.add(event);
   }
 
   onMASSGIFT(data) {
-    MessageBuilder.massgift(data).into(this);
+    const event = MessageBuilder.massgift(data);
+    event.into(this);
+    this.eventBar.add(event);
   }
 
   onDONATION(data) {
-    MessageBuilder.donation(data).into(this);
+    const event = MessageBuilder.donation(data);
+    event.into(this);
+    this.eventBar.add(event);
+  }
+
+  onPAIDEVENTS(lines) {
+    lines.forEach((line) => {
+      const { eventname, data } = this.source.parse({ data: line });
+      switch (eventname) {
+        case 'SUBSCRIPTION': {
+          this.eventBar.add(MessageBuilder.subscription(data));
+          break;
+        }
+        case 'GIFTSUB': {
+          this.eventBar.add(MessageBuilder.gift(data));
+          break;
+        }
+        case 'MASSGIFT': {
+          this.eventBar.add(MessageBuilder.massgift(data));
+          break;
+        }
+        case 'DONATION': {
+          this.eventBar.add(MessageBuilder.donation(data));
+          break;
+        }
+        default:
+          break;
+      }
+    });
+    this.eventBar.sort();
   }
 
   onPRIVMSGSENT() {

assets/chat/js/focus.js

@@ -9,7 +9,10 @@ class ChatUserFocus {
     this.chat = chat;
     this.css = css;
     this.focused = [];
-    this.chat.output.on('click', (e) => this.toggleElement(e.target));
+    this.chat.output.on('click', (e) => {
+      this.toggleElement(e.target);
+      this.chat.eventBar.unhighlight();
+    });
   }
 
   toggleElement(target) {