Merge pull request #432 from vyneer/feat/event-bar

DES-201: add a YouTube-like event bar

assets/chat/css/chat/_index.scss

@@ -9,6 +9,7 @@
 @use 'scrollbar-theme';
 @use 'toolbar';
 @use 'window-select';
+@use 'event-bar';
 
 #chat {
   min-width: a.$chat-min-width;

assets/chat/css/chat/event-bar/_event-bar-event.scss

@@ -0,0 +1,143 @@
+@use '../../abstracts/' as a;
+@use '../../messages/event/_donation' as donation;
+
+.event-bar-event {
+  position: relative;
+  cursor: pointer;
+  transition: transform 100ms;
+  animation: event-bar-appear 500ms linear;
+
+  font-size: 1.1em;
+  border-radius: 10px;
+  border-style: solid;
+  border-color: unset;
+  border-width: 2px;
+  margin: a.$gutter-sm;
+
+  .event-contents {
+    display: flex;
+    padding: 0 a.$gutter-xs 0 0.4em;
+    background-color: a.$color-chat-emphasize;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 10px;
+  }
+
+  .event-info {
+    margin-right: a.$gutter-xs;
+    max-width: 12ch;
+    overflow: hidden;
+  }
+
+  .event-icon {
+    width: 2em;
+    height: 2em;
+    border: 0.25em solid transparent;
+    opacity: 0.75;
+
+    &.subscription {
+      @include a.icon-background('../img/sub-regular.svg');
+    }
+
+    &.giftsub {
+      filter: invert(100%);
+
+      @include a.icon-background('../img/sub-gift.png');
+    }
+
+    &.massgift {
+      filter: invert(100%);
+
+      @include a.icon-background('../img/sub-mass-gift.png');
+    }
+  }
+
+  .user {
+    font-weight: 500;
+    color: a.$color-label-user;
+    display: inline-block;
+    animation: scrolling-event-username 12s linear 3s infinite;
+    word-wrap: normal;
+
+    &::before {
+      content: unset;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &.amount-0 {
+    border-color: #1c5cdb;
+  }
+
+  @each $amount, $color in donation.$amount-color-map {
+    &.amount-#{$amount} {
+      border-color: $color;
+
+      .event-icon {
+        filter: invert(100%);
+
+        @include a.icon-background('../img/donation-amount-#{$amount}.png');
+      }
+    }
+  }
+
+  &.rainbow-border {
+    background-clip: padding-box;
+    border: solid 2px transparent;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      margin: -2px;
+      border-radius: inherit;
+      background: var(--rainbow-gradient);
+    }
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &.removed {
+    animation: event-bar-disappear 500ms linear;
+  }
+}
+
+@keyframes event-bar-appear {
+  0% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes event-bar-disappear {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+}
+
+@keyframes scrolling-event-username {
+  25%,
+  50% {
+    transform: translateX(calc(-1 * max(0px, 100% - 12ch)));
+  }
+
+  75%,
+  100% {
+    transform: translateX(0%);
+  }
+}

assets/chat/css/chat/event-bar/_index.scss

@@ -0,0 +1,45 @@
+@use '../../abstracts/' as a;
+
+@use 'event-bar-event';
+
+#chat-event-bar {
+  &:empty {
+    display: none;
+  }
+
+  display: inline-flex;
+  overflow-x: scroll;
+  background: #111113;
+  z-index: 6;
+
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+#highlighted-message-wrapper {
+  position: absolute;
+  width: 100%;
+  z-index: 210;
+}
+
+#chat-event-selected {
+  .event-bar-selected-message {
+    margin: a.$gutter-sm;
+
+    .focus:not(.watching-focus) & {
+      opacity: 1;
+    }
+  }
+}
+
+.onstreamchat {
+  #chat-event-bar {
+    display: none;
+  }
+
+  #highlighted-message-wrapper {
+    display: none;
+  }
+}

assets/chat/css/messages/pinned/_frame.scss

@@ -1,6 +1,6 @@
 @use '../../abstracts/' as a;
 
-#chat-pinned-frame {
+#chat-pinned-message {
   display: none;
   padding: 4px;
   position: absolute;
@@ -38,7 +38,7 @@
 }
 
 .onstreamchat {
-  #chat-pinned-frame {
+  #chat-pinned-message {
     display: none !important;
   }
 }

assets/chat/js/chat.js

@@ -32,6 +32,7 @@ import {
   ChatSettingsMenu,
   ChatUserInfoMenu,
 } from './menus';
+import ChatEventBar from './event-bar/EventBar';
 import ChatAutoComplete from './autocomplete';
 import ChatInputHistory from './history';
 import ChatUserFocus from './focus';
@@ -56,6 +57,7 @@ import makeSafeForRegex, {
 import { HashLinkConverter, MISSING_ARG_ERROR } from './hashlinkconverter';
 import ChatCommands from './commands';
 import MessageTemplateHTML from '../../views/templates.html';
+import EventBarEvent from './event-bar/EventBarEvent';
 
 class Chat {
   constructor(config) {
@@ -150,6 +152,7 @@ class Chat {
     this.source.on('ADDPHRASE', (data) => this.onADDPHRASE(data));
     this.source.on('REMOVEPHRASE', (data) => this.onREMOVEPHRASE(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));
@@ -317,6 +320,11 @@ class Chat {
     this.mainwindow = new ChatWindow('main').into(this);
     this.mutedtimer = new MutedTimer(this);
     this.chatpoll = new ChatPoll(this);
+
+    this.eventBar = new ChatEventBar();
+    this.eventBar.on('eventSelected', () => this.onEVENTSELECTED());
+    this.eventBar.on('eventUnselected', () => this.onEVENTUNSELECTED());
+
     this.pinnedMessage = null;
 
     this.windowToFront('main');
@@ -1329,18 +1337,52 @@ class Chat {
 
   onSUBSCRIPTION(data) {
     MessageBuilder.subscription(data).into(this);
+    const eventBarEvent = new EventBarEvent(
+      this,
+      MessageTypes.SUBSCRIPTION,
+      data,
+    );
+    this.eventBar.add(eventBarEvent);
+    if (this.eventBar.length === 1) {
+      this.mainwindow.update();
+    }
   }
 
   onGIFTSUB(data) {
     MessageBuilder.gift(data).into(this);
+    const eventBarEvent = new EventBarEvent(this, MessageTypes.GIFTSUB, data);
+    this.eventBar.add(eventBarEvent);
+    if (this.eventBar.length === 1) {
+      this.mainwindow.update();
+    }
   }
 
   onMASSGIFT(data) {
     MessageBuilder.massgift(data).into(this);
+    const eventBarEvent = new EventBarEvent(this, MessageTypes.MASSGIFT, data);
+    this.eventBar.add(eventBarEvent);
+    if (this.eventBar.length === 1) {
+      this.mainwindow.update();
+    }
   }
 
   onDONATION(data) {
     MessageBuilder.donation(data).into(this);
+    const eventBarEvent = new EventBarEvent(this, MessageTypes.DONATION, data);
+    this.eventBar.add(eventBarEvent);
+    if (this.eventBar.length === 1) {
+      this.mainwindow.update();
+    }
+  }
+
+  onPAIDEVENTS(lines) {
+    lines.forEach((line) => {
+      const { eventname, data } = this.source.parse({ data: line });
+      const eventBarEvent = new EventBarEvent(this, eventname, data);
+      this.eventBar.add(eventBarEvent);
+    });
+    this.mainwindow.update();
+    this.eventBar.sort();
   }
 
   onADDPHRASE(data) {
@@ -1522,6 +1564,16 @@ class Chat {
     MessageBuilder.death(data.data, user, data.timestamp).into(this);
   }
 
+  onEVENTSELECTED() {
+    this.userfocus.toggleFocus('', false, true);
+    // Hide full pinned message interface to make everything look nice
+    if (this.pinnedMessage) this.pinnedMessage.hidden = true;
+  }
+
+  onEVENTUNSELECTED() {
+    if (this.pinnedMessage) this.pinnedMessage.hidden = false;
+  }
+
   cmdSHOWPOLL() {
     if (this.chatpoll.poll) {
       this.chatpoll.show();