fix(twitch): support gif messages

CHANGELOG-nightly.md

@@ -1,3 +1,7 @@
+### 3.1.24.1000
+
+-   Added full support for Twitch GIF messages
+
 ### 3.1.23.1000
 
 -   Added setting to hide Twitch "Chat" send button under the chat input box

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 3.1.24
+
+-   Added full support for Twitch GIF messages
+
 ### 3.1.23
 
 -   Added setting to hide Twitch "Chat" send button under the chat input box

package.json

@@ -3,7 +3,7 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & Kick with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.23",
+	"version": "3.1.24",
 	"dev_version": "1.0",
 	"scripts": {
 		"start": "cross-env NODE_ENV=dev yarn build:dev && cross-env NODE_ENV=dev vite --mode dev",

src/app/chat/MessageTokenGif.vue

@@ -0,0 +1,96 @@
+<template>
+	<span class="seventv-chat-gif-container" @mouseenter="checkReport" @focusin="checkReport">
+		<img
+			class="seventv-chat-gif"
+			:src="token.content.url"
+			:alt="token.content.title || 'GIF'"
+			decoding="async"
+			draggable="false"
+		/>
+		<button
+			v-if="showReport"
+			class="seventv-chat-gif-report"
+			type="button"
+			aria-label="Report GIF"
+			@click.stop="openReport"
+		>
+			<ReportIcon aria-hidden="true" />
+		</button>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { GifToken } from "@/common/chat/ChatMessage";
+import ReportIcon from "@/assets/svg/icons/ReportIcon.vue";
+
+const props = defineProps<{
+	token: GifToken;
+}>();
+
+const showReport = ref(!!props.token.content.report);
+
+function checkReport() {
+	showReport.value = props.token.content.canReport?.() ?? false;
+}
+
+function openReport() {
+	showReport.value = props.token.content.report?.() ?? false;
+}
+</script>
+
+<style scoped lang="scss">
+.seventv-chat-gif-report {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: grid;
+	width: 3.2rem;
+	height: 3.2rem;
+	place-items: center;
+	padding: 0;
+	border: 0;
+	border-radius: 0.4rem;
+	opacity: 0;
+	color: white;
+	font-size: 1.8rem;
+	background-color: rgba(0, 0, 0, 70%);
+	cursor: pointer;
+	pointer-events: none;
+	transition: opacity 100ms ease-out;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: -0.4rem;
+	}
+
+	&:focus-visible {
+		outline: 0.2rem solid currentcolor;
+		outline-offset: 0.2rem;
+	}
+}
+
+.seventv-chat-gif-container {
+	position: relative;
+	display: block;
+	width: fit-content;
+	max-width: 100%;
+	margin-top: 0.4rem;
+
+	&:hover,
+	&:focus-within {
+		.seventv-chat-gif-report {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+}
+
+.seventv-chat-gif {
+	display: block;
+	max-width: 100%;
+	max-height: 24rem;
+	border-radius: 0.4rem;
+}
+</style>

src/app/chat/UserMessage.vue

@@ -66,6 +66,7 @@
 						{{ token.content.cheerAmount }}
 					</span>
 				</span>
+				<MessageTokenGif v-else-if="IsGifToken(token)" :token="token" />
 				<template v-else>
 					<component :is="getToken(token)" v-bind="{ token, msg }" />
 				</template>
@@ -96,7 +97,7 @@ import { useTimeoutFn } from "@vueuse/shared";
 import { SetHexAlpha } from "@/common/Color";
 import { log } from "@/common/Logger";
 import type { AnyToken, ChatMessage, ChatUser } from "@/common/chat/ChatMessage";
-import { IsEmoteToken, IsLinkToken, IsMentionToken } from "@/common/type-predicates/MessageTokens";
+import { IsEmoteToken, IsGifToken, IsLinkToken, IsMentionToken } from "@/common/type-predicates/MessageTokens";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatModeration } from "@/composable/chat/useChatModeration";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -107,6 +108,7 @@ import type { TimestampFormatKey } from "@/site/twitch.tv/modules/chat/ChatModul
 import ModIcons from "@/site/twitch.tv/modules/chat/components/mod/ModIcons.vue";
 import Emote from "./Emote.vue";
 import EmoteLinkEmbed from "./EmoteLinkEmbed.vue";
+import MessageTokenGif from "./MessageTokenGif.vue";
 import MessageTokenLink from "./MessageTokenLink.vue";
 import MessageTokenMention from "./MessageTokenMention.vue";
 import RichEmbed from "./RichEmbed.vue";

src/assets/svg/icons/ReportIcon.vue

@@ -0,0 +1,7 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor">
+		<path
+			d="M120,136V96a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,48a12,12,0,1,0-12-12A12,12,0,0,0,128,184ZM224,56v56c0,52.72-25.52,84.67-46.93,102.19-23.06,18.86-46,25.27-47,25.53a8,8,0,0,1-4.2,0c-1-.26-23.91-6.67-47-25.53C57.52,196.67,32,164.72,32,112V56A16,16,0,0,1,48,40H208A16,16,0,0,1,224,56Zm-16,0L48,56l0,56c0,37.3,13.82,67.51,41.07,89.81A128.25,128.25,0,0,0,128,223.62a129.3,129.3,0,0,0,39.41-22.2C194.34,179.16,208,149.07,208,112Z"
+		/>
+	</svg>
+</template>

src/common/chat/ChatMessage.ts

@@ -55,6 +55,7 @@ export class ChatMessage<C extends ComponentFactory = ComponentFactory> {
 	public parent: ChatMessageParent | null = null;
 	public wrappedNode: Element | null = null;
 	public nativeEmotes = {} as Record<string, SevenTV.ActiveEmote>;
+	public nativeGif: GifToken | null = null;
 
 	public tokens = new Array<AnyToken>();
 	private tokenizer?: Tokenizer;
@@ -189,10 +190,20 @@ export type EmoteToken = ChatMessageToken<
 		cheerColor?: string;
 	}
 >;
+export type GifToken = ChatMessageToken<
+	"GIF",
+	{
+		id: string;
+		title: string;
+		url: string;
+		report?: () => boolean;
+		canReport?: () => boolean;
+	}
+>;
 
 export type VoidToken = ChatMessageToken<"VOID", void>;
 
-export type MessageTokenKind = "TEXT" | "LINK" | "FLAGGED_SEGMENT" | "MENTION" | "EMOTE" | "VOID";
+export type MessageTokenKind = "TEXT" | "LINK" | "FLAGGED_SEGMENT" | "MENTION" | "EMOTE" | "GIF" | "VOID";
 
 export type MessageDeliveryState = "IDLE" | "IN_FLIGHT" | "SENT" | "BOUNCED";
 

src/common/chat/Tokenizer.ts

@@ -125,6 +125,18 @@ export class Tokenizer {
 			if (!maybeEmote && !!part) lastEmoteToken = undefined;
 		}
 
+		const gif = this.msg.nativeGif;
+		if (gif) {
+			for (let i = tokens.length - 1; i >= 0; i--) {
+				const token = tokens[i];
+				if (token.range[0] <= gif.range[1] && token.range[1] >= gif.range[0]) {
+					tokens.splice(i, 1);
+				}
+			}
+
+			tokens.push(gif);
+		}
+
 		tokens.sort((a, b) => a.range[0] - b.range[0]);
 
 		return (this.msg.tokens = tokens);

src/common/type-predicates/MessageTokens.ts

@@ -1,4 +1,4 @@
-import { AnyToken, EmoteToken, LinkToken, MentionToken, TextToken } from "../chat/ChatMessage";
+import { AnyToken, EmoteToken, GifToken, LinkToken, MentionToken, TextToken } from "../chat/ChatMessage";
 
 export function IsTextToken(part: AnyToken): part is TextToken {
 	return part.kind === "TEXT";
@@ -12,6 +12,10 @@ export function IsEmoteToken(part: AnyToken): part is EmoteToken {
 	return part.kind === "EMOTE";
 }
 
+export function IsGifToken(part: AnyToken): part is GifToken {
+	return part.kind === "GIF";
+}
+
 export function IsMentionToken(part: AnyToken): part is MentionToken {
 	return part.kind === "MENTION";
 }

src/composable/useFrankerFaceZ.ts

@@ -137,6 +137,40 @@ function setConfig<T>(profileName: keyof typeof data.profile, key: string, value
 	profile.set(key, value);
 }
 
+function resolveTwitchReport(): ResolvedTwitchReport | null {
+	if (!data.ffz) return null;
+
+	try {
+		const site = data.ffz.resolve<FFZSite>("site");
+		const reportModal = data.ffz
+			.resolve<FFZWebMunch>("site.web_munch")
+			.getModule<React.ComponentType>("user-report");
+
+		if (!site.store?.dispatch || !reportModal) return null;
+
+		return { store: site.store, reportModal };
+	} catch {
+		return null;
+	}
+}
+
+function canOpenTwitchReport(): boolean {
+	return !!resolveTwitchReport();
+}
+
+function openTwitchReport(reportContext: TwitchReportContext): boolean {
+	const resolved = resolveTwitchReport();
+	if (!resolved) return false;
+
+	resolved.store.dispatch({
+		type: "core.modal.MODAL_SHOWN",
+		modalComponent: resolved.reportModal,
+		modalProps: { reportContext },
+	});
+
+	return true;
+}
+
 function createDummyAddon() {
 	if (!("FrankerFaceZ" in window)) return;
 
@@ -166,6 +200,8 @@ export function useFrankerFaceZ() {
 		getConfigChanges,
 		setConfig,
 		disableChatProcessing,
+		canOpenTwitchReport,
+		openTwitchReport,
 	});
 }
 
@@ -241,4 +277,29 @@ export interface FFZAddonsManager extends FFZModule {
 	enabled_addons: string[];
 }
 
+interface FFZSite {
+	store?: {
+		dispatch: (action: unknown) => unknown;
+	};
+}
+
+interface FFZWebMunch {
+	getModule<T>(key: string): T | null;
+}
+
+interface ResolvedTwitchReport {
+	store: NonNullable<FFZSite["store"]>;
+	reportModal: React.ComponentType;
+}
+
+interface TwitchReportContext {
+	contentType: "GIF_MESSAGE_REPORT";
+	contentID: string;
+	targetUserID: string;
+	contentMetadata: {
+		channelID: string;
+	};
+	trackingContext: "channel_page";
+}
+
 declare const FrankerFaceZ: any;

src/site/twitch.tv/index.ts

@@ -108,6 +108,7 @@ export const enum MessagePartType {
 	EMOTE,
 	CLIPLINK,
 	VIDEOLINK,
+	GIF,
 	SEVENTVEMOTE = 700,
 	SEVENTVLINK,
 }

src/site/twitch.tv/modules/chat-vod/ChatVod.vue

@@ -254,6 +254,19 @@ function createMessageComponentRef(data: CommentData) {
 				msg.body += e.alt;
 				break;
 			}
+			case MessagePartType.GIF: {
+				const gif = tok.content as Twitch.ChatMessage.GifPart["content"];
+				if (!gif.url) continue;
+
+				const start = msg.body.length;
+				msg.body += gif.title;
+				msg.nativeGif = {
+					kind: "GIF",
+					content: gif,
+					range: [start, start + gif.title.length - 1],
+				};
+				break;
+			}
 			case MessagePartType.MENTION:
 				msg.body += `@${tok.content.recipient}`;
 				break;