fix(twitch): broken chat embeds (#986)

If a channel moderator received a "suspicious user" message, the message would not get highlighted. A message containing a clip also seemed to not get embedded. The issue causing this seemed to have been Twitch changing their pubsub client.

Fixes #973

Co-authored-by: Troy <[email protected]>

CHANGELOG-nightly.md

@@ -3,6 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Reinstated animated avatars
+-   Fixed an issue where suspicious users were not highlighted and clips not being displayed in chat
 -   Fixed an issue which caused timestamps to count beyond 24 hours
 -   Fixed an issue which caused scrolling to not work while scrolling through a category
 -   Fixed an issue where lowercase cheers were displayed as text

src/composable/usePubSub.ts

@@ -1,36 +1,25 @@
 import { reactive, ref } from "vue";
 import { definePropertyHook } from "@/common/Reflection";
 
-declare const __Twitch__pubsubInstances: {
-	production: {
-		_client: PubSubClient;
-		_clientReady: boolean;
-		_clienType: string;
-		_env: string;
-		_hasDisconnected: boolean;
-		_iframeHost: string;
-		_numDisconnects: number;
-		_queuedRequests: unknown[];
-	};
-};
+declare const __twitch_pubsub_client: PubSubClient;
 
 const client = ref<PubSubClient | null>(null);
 const socket = ref<WebSocket | null>(null);
 
 definePropertyHook(
-	window as Window & { __Twitch__pubsubInstances?: typeof __Twitch__pubsubInstances },
-	"__Twitch__pubsubInstances",
+	window as Window & { __twitch_pubsub_client?: typeof __twitch_pubsub_client },
+	"__twitch_pubsub_client",
 	{
 		value(v) {
-			if (!v || !v.production || !v.production._client) return;
+			if (!v || !v.connection || !v.connection.socket) return;
 
-			client.value = v.production._client;
+			client.value = v;
 
-			definePropertyHook(client.value, "_primarySocket", {
+			definePropertyHook(client.value.connection, "socket", {
 				value(v) {
-					if (!v || !v._socket) return;
+					if (!v || !v.socket) return;
 
-					socket.value = v._socket;
+					socket.value = v.socket;
 				},
 			});
 		},
@@ -45,31 +34,25 @@ export function usePubSub() {
 }
 
 export interface PubSubClient {
-	_addr: string;
-	_connectCalled: boolean;
-	_connected: boolean;
-	_env: string;
-	_firstConnectTime: number;
-	_firstListenTime: number;
-	_listens: {
-		_events: Record<string, [(n: unknown) => void, PubSubClient]>;
-	};
-	_opts: {
+	env: string;
+	reconnecting: boolean;
+	connection: {
 		env: string;
-	};
-	_primarySocket: {
-		_addr: string;
-		_connecting: boolean;
-		_connectionAttempts: number;
-		_id: string;
-		_opts: {
-			addr: string;
+		_events: Record<string, [(n: unknown) => void, PubSubClient]>;
+		iframeHost: string | null;
+		currentTopics: Record<string, { auth: string | undefined; topic: string }>;
+		socket: {
+			env: string;
+			address: string;
+			closing: boolean;
+			connecting: boolean;
+			connectionAttempts: number;
+			pingInterval: number;
+			pongTimeout: number;
+			receivedPong: boolean;
+			sentPing: boolean;
+			socket: WebSocket;
 		};
-		_pingInterval: number;
-		_pongTimeout: number;
-		_receivedPong: number;
-		_sentPing: boolean;
-		_socket: WebSocket;
 	};
 }
 

src/site/twitch.tv/index.ts

@@ -76,12 +76,9 @@ export enum MessageType {
 	COMMUNITY_INTRODUCTION = 47,
 	SHOUTOUT = 48,
 	ANNOUNCEMENT_MESSAGE = 49,
-	MIDNIGHT_SQUID = 50,
-	CHARITY_DONATION = 51,
-	MESSAGE_ID_UPDATE = 52,
-	PINNED_CHAT = 53,
-	VIEWER_MILESTONE = 54,
-	PAID_MESSAGE = 55,
+	CHARITY_DONATION = 50,
+	MESSAGE_ID_UPDATE = 51,
+	VIEWER_MILESTONE = 52,
 
 	// 7TV Message Types
 	SEVENTV_EMOTE_SET_UPDATE = 7000,

src/site/twitch.tv/modules/chat/ChatList.vue

@@ -115,7 +115,6 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 		case MessageType.CHANNEL_POINTS_REWARD:
 		case MessageType.ANNOUNCEMENT_MESSAGE:
 		case MessageType.RESTRICTED_LOW_TRUST_USER_MESSAGE:
-		case MessageType.PAID_MESSAGE:
 		case MessageType.CONNECTED:
 			onChatMessage(msg, msgData);
 			break;