Allow moderators to remove events

assets/chat/css/chat/_output.scss

@@ -4,6 +4,7 @@
   flex: 1;
   overflow: hidden;
   width: 100%;
+  position: relative;
 }
 
 .chat-output {

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

@@ -5,7 +5,6 @@
   position: relative;
   cursor: pointer;
   transition: transform 100ms;
-  animation: event-bar-appear 500ms linear;
 
   font-size: 1.1em;
   border-radius: 10px;
@@ -103,6 +102,12 @@
     transform: scale(1.05);
   }
 
+  // Ensure `removed` can override `enter` because `enter` is not removed from
+  // the event after the animation completes.
+  &.enter {
+    animation: event-bar-appear 500ms linear;
+  }
+
   &.removed {
     animation: event-bar-disappear 500ms linear;
   }

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

@@ -18,28 +18,32 @@
   }
 }
 
-#highlighted-message-wrapper {
+#chat-event-selected {
   position: absolute;
-  width: 100%;
   z-index: 210;
-}
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
 
-#chat-event-selected {
   .event-bar-selected-message {
     margin: a.$gutter-sm;
 
     .focus:not(.watching-focus) & {
       opacity: 1;
     }
   }
+
+  &.hidden {
+    display: none;
+  }
 }
 
 .onstreamchat {
   #chat-event-bar {
     display: none;
   }
 
-  #highlighted-message-wrapper {
+  #chat-event-selected,
+  #chat-pinned-message {
     display: none;
   }
 }

assets/chat/css/menus/_event-action-menu.scss

@@ -0,0 +1,23 @@
+@use '../abstracts/' as a;
+
+#event-action-menu {
+  height: fit-content;
+  width: fit-content;
+  min-width: 75px;
+  max-width: 250px;
+  z-index: 221;
+
+  .chat-menu-inner {
+    background-color: a.$color-surface-dark3;
+  }
+
+  .event-action {
+    transition: background-color 150ms ease;
+    color: a.$color-light;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      background-color: a.$color-surface-dark4;
+    }
+  }
+}

assets/chat/css/menus/_index.scss

@@ -7,6 +7,7 @@
 @use 'user-info';
 @use 'user-list';
 @use 'whispers-list';
+@use 'event-action-menu';
 
 .chat-menu {
   display: none;

assets/chat/css/messages/event/_event.scss

@@ -32,15 +32,16 @@
   }
 
   .event-icon {
-    width: 2.25em;
-    height: 2.25em;
     color: a.$color-chat-disabled;
     position: relative;
     text-decoration: none;
     display: inline-block;
     border: 0.25em solid transparent;
     flex-shrink: 0;
     opacity: 0.75;
+    width: 100%;
+    height: 100%;
+    transition: background 200ms ease;
   }
 
   .event-bottom {
@@ -50,6 +51,21 @@
     border-bottom-left-radius: 10px;
   }
 
+  .event-button {
+    width: 2.25em;
+    height: 2.25em;
+
+    &:hover:not(:disabled) {
+      .event-icon {
+        @include a.icon-background('../img/icon-ellipsis-vertical.svg');
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
   &:not(:has(.event-bottom)) {
     .event-top {
       border-bottom-right-radius: 10px;

assets/chat/js/chat.js

@@ -31,6 +31,7 @@ import {
   ChatEmoteTooltip,
   ChatSettingsMenu,
   ChatUserInfoMenu,
+  ChatEventActionMenu,
 } from './menus';
 import ChatEventBar from './event-bar/EventBar';
 import ChatAutoComplete from './autocomplete';
@@ -378,6 +379,18 @@ class Chat {
       ),
     );
 
+    const eventActionMenu = new ChatEventActionMenu(
+      this.ui.find('#event-action-menu'),
+      this.ui.find('.msg-event .event-button'),
+      this,
+    );
+    eventActionMenu.on('removeEvent', this.handleRemoveEvent.bind(this));
+    eventActionMenu.on(
+      'removeEvent',
+      this.eventBar.unselect.bind(this.eventBar),
+    );
+    this.menus.set('event-action-menu', eventActionMenu);
+
     this.autocomplete.bind(this);
 
     // Chat input
@@ -1337,50 +1350,73 @@ 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();
+
+    // Don't add events when loading messages from history because the
+    // `PAIDEVENTS` payload will contain those events
+    if (!this.backlogloading) {
+      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();
+
+    if (!this.backlogloading) {
+      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();
+
+    if (!this.backlogloading) {
+      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();
+
+    if (!this.backlogloading) {
+      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);
+    const events = lines.map((l) => {
+      const { eventname, data } = this.source.parse({ data: l });
+      return new EventBarEvent(this, eventname, data);
     });
+    this.eventBar.replaceEvents(events);
+
     this.mainwindow.update();
     this.eventBar.sort();
   }
@@ -1565,7 +1601,6 @@ class Chat {
   }
 
   onEVENTSELECTED() {
-    this.userfocus.toggleFocus('', false, true);
     // Hide full pinned message interface to make everything look nice
     if (this.pinnedMessage) this.pinnedMessage.hidden = true;
   }
@@ -2601,6 +2636,11 @@ class Chat {
     hostname = hostname.split('?')[0];
     return hostname;
   }
+
+  handleRemoveEvent(eventUuid) {
+    ChatMenu.closeMenus(this);
+    this.source.send('REMOVEEVENT', { data: eventUuid });
+  }
 }
 
 export default Chat;

assets/chat/js/const.js

@@ -106,6 +106,7 @@ const hintstrings = new Map(
     bigscreen: `Bigscreen! Did you know you can have the chat on the left or right side of the stream by clicking the swap icon in the top left?`,
     danisold:
       'Destiny is an Amazon Associate. He earns a commission on qualifying purchases of any product on Amazon linked in Destiny.gg chat.',
+    cantremoveevent: 'This event could not be removed.',
   }),
 );