feat(chat): GIFs in Dashboard

Author: zunderscore

src/backend/chat/chat-helpers.ts

@@ -246,6 +246,7 @@ class FirebotChatHelpers {
         const sharedChatRoom = SharedChatCache.participants[sharedChatRoomId];
         const isSharedChatMessage = sharedChatRoomId != null && sharedChatRoomId !== AccountAccess.getAccounts().streamer.userId;
         const isGigantified = msg.tags.get("msg-id") === "gigantified-emote-message";
+        const isGif = msg.tags.has("gifs") && !!msg.tags.get("gifs")?.length;
         const firebotChatMessage: FirebotChatMessage = {
             id: msg.tags.get("id"),
             username: msg.userInfo.userName,
@@ -258,6 +259,7 @@ class FirebotChatHelpers {
             isHiddenFromChatFeed: false,
             isReply: msg.tags.has("reply-parent-msg-id"),
             isGigantified: isGigantified,
+            isGif: isGif,
             replyParentMessageId: msg.tags.get("reply-parent-msg-id"),
             replyParentMessageText: msg.tags.get("reply-parent-msg-body"),
             replyParentMessageSenderUserId: msg.tags.get("reply-parent-user-id"),
@@ -310,8 +312,10 @@ class FirebotChatHelpers {
             msg._params[1].value = msgText;
         }
 
-        const messageParts = this._parseMessageParts(firebotChatMessage,
-            parseChatMessage(msgText, msg.emoteOffsets, TwitchEventSubChatHelpers.twitchCheermotes?.getPossibleNames()));
+        const messageParts = firebotChatMessage.isGif === true
+            ? [{ type: "gif", text: msgText, url: msg.tags.get("gifs").split("|")[2] } as FirebotParsedMessagePart]
+            : this._parseMessageParts(firebotChatMessage,
+                parseChatMessage(msgText, msg.emoteOffsets, TwitchEventSubChatHelpers.twitchCheermotes?.getPossibleNames()));
 
         firebotChatMessage.parts = messageParts;
 

src/backend/streaming-platforms/twitch/api/eventsub/eventsub-chat-helpers.ts

@@ -16,6 +16,7 @@ import type {
     EventSubChatMessageCheermote,
     EventSubChatMessageCheermotePart,
     EventSubChatMessageEmotePart,
+    EventSubChatMessageGifPart,
     EventSubChatMessageMentionPart,
     EventSubChatMessagePart
 } from "../twurple-private-types";
@@ -25,6 +26,7 @@ import type {
     FirebotChatMessage,
     FirebotChatMessageCheermotePart,
     FirebotChatMessageEmotePart,
+    FirebotChatMessageGifPart,
     FirebotChatMessageMentionPart,
     FirebotChatMessagePart,
     FirebotChatMessageTextPart,
@@ -396,6 +398,14 @@ class TwitchEventSubChatHelpers {
                         (p as EventSubChatMessageMentionPart)
                     );
                     break;
+
+                case "gif":
+                    this.parseEventSubGif(
+                        part,
+                        (p as EventSubChatMessageGifPart),
+                        message.rawText
+                    );
+                    break;
             }
 
             return part;
@@ -478,6 +488,16 @@ class TwitchEventSubChatHelpers {
         part.userDisplayName = mentionPart.mention.user_name;
     }
 
+    private parseEventSubGif(
+        part: FirebotChatMessageGifPart,
+        gifPart: EventSubChatMessageGifPart,
+        text: string
+    ): void {
+        part.url = gifPart.gif.url;
+        part.id = gifPart.gif.gif_id;
+        part.text = text;
+    }
+
     private parseChatBadges(badgeData: Record<string, string>): ChatBadge[] {
         if (this._badgeCache == null) {
             return [];

src/backend/streaming-platforms/twitch/api/resource/chat.ts

@@ -555,6 +555,12 @@ export class TwitchChatApi extends ApiResourceBase {
                                         userLogin: f.mention.user_login,
                                         userName: f.mention.user_name
                                     }
+                                    : null,
+                                gif: f.type === "gif"
+                                    ? {
+                                        gifId: f.gif.gif_id,
+                                        url: f.gif.url
+                                    }
                                     : null
                             };
                         })

src/backend/streaming-platforms/twitch/api/twurple-private-types.d.ts

@@ -44,7 +44,18 @@ export interface EventSubChatMessageMentionPart {
     mention: EventSubChatMessageMention;
 }
 
-export type EventSubChatMessagePart = EventSubChatMessageTextPart | EventSubChatMessageCheermotePart | EventSubChatMessageEmotePart | EventSubChatMessageMentionPart;
+export interface EventSubChatMessageGif {
+    gif_id: string;
+    url: string;
+}
+
+export interface EventSubChatMessageGifPart {
+    type: 'gif';
+    text: string;
+    gif: EventSubChatMessageGif;
+}
+
+export type EventSubChatMessagePart = EventSubChatMessageTextPart | EventSubChatMessageCheermotePart | EventSubChatMessageEmotePart | EventSubChatMessageMentionPart | EventSubChatMessageGifPart;
 
 export type EventSubChannelBitsUseMessagePart = EventSubChatMessageTextPart | EventSubChatMessageCheermotePart | EventSubChatMessageEmotePart;
 

src/gui/app/directives/chat/feed items/chat-message.js

@@ -178,7 +178,7 @@
                                     {{$ctrl.message.timestampDisplay}}
                                 </span>
                             </div>
-                            <div class="chatContent" ng-class="{ gigantify: $ctrl.message.isGigantified }">
+                            <div class="chatContent" ng-class="{ gigantify: $ctrl.message.isGigantified, 'chat-gif': $ctrl.message.isGif }">
                                 <span ng-repeat="part in $ctrl.message.parts" class="chat-content-wrap">
 
                                     <span ng-if="part.type === 'text'" style="{{$ctrl.chatSizeStyle}}{{$ctrl.fontFamilyStyle}}" ng-class="{ highlightText: part.flagged }">{{part.text}}</span>
@@ -235,6 +235,15 @@
                                         <img ng-src="{{part.url}}" style="height: 100%;" alt="{{part.name || part.text || ''}}" />
                                     </span>
                                     <span ng-if="part.origin === '7TV' && !$ctrl.showSevenTvEmotes" style="{{$ctrl.chatSizeStyle}}{{$ctrl.fontFamilyStyle}}">{{part.name}}</span>
+
+                                    <span
+                                        ng-if="part.type === 'gif'"
+                                        class="gif-image"
+                                        uib-tooltip="GIF: {{part.text}}"
+                                        tooltip-append-to-body="true"
+                                    >
+                                        <img ng-src="{{part.url}}" style="height: 100%;" alt="{{part.text}}" />
+                                    </span>
                                 </span>
                             </div>
                             <div ng-show="$ctrl.message.whisper" class="muted">(Whispered to {{ $ctrl.message.whisperTarget }})</div>

src/gui/scss/core/_chat.scss

@@ -255,6 +255,11 @@
     height: 8rem !important;
 }
 
+.chat-gif :last-child > .gif-image {
+    display: block !important;
+    height: 16rem !important;
+}
+
 .chat-username {
     display: flex;
     font-weight: bold;

src/types/chat.ts

@@ -4,7 +4,8 @@ type FirebotChatMessagePartType =
     | "emote"
     | "third-party-emote"
     | "cheermote"
-    | "mention";
+    | "mention"
+    | "gif";
 
 type FirebotChatMessagePartBase = {
     type: FirebotChatMessagePartType;
@@ -46,12 +47,18 @@ export type FirebotChatMessageMentionPart = FirebotChatMessagePartBase & {
     userDisplayName: string;
 };
 
+export type FirebotChatMessageGifPart = FirebotChatMessagePartBase & {
+    type: "gif";
+    url: string;
+};
+
 export type FirebotChatMessagePart =
     | FirebotChatMessageTextPart
     | FirebotChatMessageLinkPart
     | FirebotChatMessageEmotePart
     | FirebotChatMessageCheermotePart
-    | FirebotChatMessageMentionPart;
+    | FirebotChatMessageMentionPart
+    | FirebotChatMessageGifPart;
 
 export type FirebotParsedMessagePart = {
     type: string;
@@ -144,6 +151,7 @@ export type FirebotChatMessage = {
         imageUrl: string;
     };
     isGigantified?: boolean;
+    isGif?: boolean;
 };
 
 export type FirebotEmote = {