From 1a35418602b3339dca03baf64b94620b5b5c807b Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Mon, 14 Sep 2026 12:50:59 +1000
Subject: [PATCH 01/10] Added support for YouTube Subscriber events

---
 horizontal-chat/script.js                 | 18 ++++++++++++
 horizontal-chat/settings/settings.json    |  8 ++++++
 multichat-overlay/script.js               | 35 +++++++++++++++++++++++
 multichat-overlay/settings/settings.json  |  8 ++++++
 multistream-alerts/script.js              | 30 +++++++++++++++++++
 multistream-alerts/settings/settings.json | 17 +++++++++++
 6 files changed, 116 insertions(+)

diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 34967d1..7cc6f56 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -62,6 +62,7 @@ const showKickGifts = GetBooleanParam("showKickGifts", true);
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
 
 const enableTikTokSupport = GetBooleanParam("enableTikTokSupport", false);
@@ -235,6 +236,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.NewSubscriber', (response) => {
+	console.debug(response.data);
+	YouTubeNewSubscriber(response.data);
+})
+
 client.on('YouTube.NewSponsor', (response) => {
 	console.debug(response.data);
 	YouTubeNewSponsor(response.data);
@@ -1043,6 +1049,18 @@ function YouTubeSuperSticker(data) {
 	ShowAlert(message, 'youtube');
 }
 
+function YouTubeNewSubscriber(data) {
+	if (!showYouTubeSubscribers)
+		return;
+	
+	// Set the text
+	let username = data.user.name;
+	
+	const message = `${username} subscribed`;
+
+	ShowAlert(message, 'youtube');
+}
+
 function YouTubeNewSponsor(data) {
 	if (!showYouTubeMemberships)
 		return;
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index eac218e..ee7fe66 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -250,6 +250,14 @@
 			"defaultValue": true,
 			"group": "Which YouTube messages do you want to see?"
 		},
+		{
+			"id": "showYouTubeSubscribers",
+			"label": "New Subscribers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which YouTube messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMemberships",
 			"label": "Memberships",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 5c989db..aea3f9c 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -68,6 +68,7 @@ const showKickGifts = GetBooleanParam("showKickGifts", true);
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
 
 const enableTikTokSupport = GetBooleanParam("enableTikTokSupport", false);
@@ -271,6 +272,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.NewSubscriber', (response) => {
+	console.debug(response.data);
+	YouTubeNewSubscriber(response.data);
+})
+
 client.on('YouTube.NewSponsor', (response) => {
 	console.debug(response.data);
 	YouTubeNewSponsor(response.data);
@@ -1662,6 +1668,35 @@ function YouTubeSuperSticker(data) {
 	AddMessageItem(instance);
 }
 
+function YouTubeNewSubscriber(data) {
+	if (!showYouTubeSubscribers)
+		return;
+
+	// Get a reference to the template
+	const template = document.getElementById('cardTemplate');
+
+	// Create a new instance of the template
+	const instance = template.content.cloneNode(true);
+
+	// Get divs
+	const cardDiv = instance.querySelector("#card");
+	const headerDiv = instance.querySelector("#header");
+	const avatarDiv = instance.querySelector("#avatar");
+	const iconDiv = instance.querySelector("#icon");
+	const titleDiv = instance.querySelector("#title");
+	const contentDiv = instance.querySelector("#content");
+
+	// Set the card background colors
+	cardDiv.classList.add('youtube');
+
+	// Set the text
+	let username = data.user.name;
+
+	titleDiv.innerText = `${username} subscribed`;
+
+	AddMessageItem(instance, JSON.stringify(data));
+}
+
 function YouTubeNewSponsor(data) {
 	if (!showYouTubeMemberships)
 		return;
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index 8445c9d..aeb1699 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -379,6 +379,14 @@
 			"defaultValue": true,
 			"group": "Which YouTube messages do you want to see?"
 		},
+		{
+			"id": "showYouTubeSubscribers",
+			"label": "New Subscribers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which YouTube messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMemberships",
 			"label": "Memberships",
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js
index b25d9f0..7705497 100644
--- a/multistream-alerts/script.js
+++ b/multistream-alerts/script.js
@@ -89,6 +89,8 @@ const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const youtubeSuperChatAction = urlParams.get("youtubeSuperChatAction") || "";
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
 const youtubeSuperStickerAction = urlParams.get("youtubeSuperStickerAction") || "";
+const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
+const youtubeSubscriberAction = urlParams.get("youtubeSubscriberAction") || "";
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
 const youtubeMembershipAction = urlParams.get("youtubeMembershipAction") || "";
 
@@ -247,6 +249,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.NewSubscriber', (response) => {
+	console.debug(response.data);
+	YouTubeNewSubscriber(response.data);
+})
+
 client.on('YouTube.NewSponsor', (response) => {
 	console.debug(response.data);
 	YouTubeNewSponsor(response.data);
@@ -827,6 +834,29 @@ function YouTubeSuperSticker(data) {
 	);
 }
 
+function YouTubeNewSubscriber(data) {
+	if (!showYouTubeSubscribers)
+		return;
+
+	// Set the text
+	const username = data.user.name;
+
+	// Render avatars
+	const avatarURL = data.user.profileImageUrl;
+
+	UpdateAlertBox(
+		'youtube',
+		avatarURL,
+		`${username}`,
+		`subscribed`,
+		``,
+		username,
+		``,
+		youtubeSubscriberAction,
+		data
+	);
+}
+
 function YouTubeNewSponsor(data) {
 	if (!showYouTubeMemberships)
 		return;
diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json
index ec19143..b5346b2 100644
--- a/multistream-alerts/settings/settings.json
+++ b/multistream-alerts/settings/settings.json
@@ -380,6 +380,23 @@
 			"showIf": "showYouTubeSuperStickers",
 			"group": "Which YouTube alerts do you want to see?"
 		},
+		{
+			"id": "showYouTubeSubscribers",
+			"label": "New Subscribers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which YouTube alerts do you want to see?"
+		},
+		{
+			"id": "youtubeSubscriberAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"showIf": "showYouTubeSubscribers",
+			"group": "Which YouTube alerts do you want to see?"
+		},
 		{
 			"id": "showYouTubeMemberships",
 			"label": "Memberships",

From 4945a28df77c497770d556fb297832ee8c605ff7 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Mon, 14 Sep 2026 12:54:28 +1000
Subject: [PATCH 02/10] Fixed Twitch Watch Streak events

---
 horizontal-chat/script.js    | 4 ++--
 multichat-overlay/script.js  | 2 +-
 multistream-alerts/script.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 7cc6f56..6933aba 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -839,8 +839,8 @@ async function TwitchWatchStreak(data) {
 		return;
 
 	// TODO: Streamer.bot v1.0.5-alpha3 changed the data sent with this event, so for backwards compatibility we need to check for both the old and new properties
-	const displayName = data.displayName ?? data.user.name;
-	const watchStreak = data.watchStreak ?? data.streak_count;
+	const displayName = data.displayName ?? data.user.name;data.streakCount
+	const watchStreak = data.watchStreak ?? data.streak_count ?? data.streakCount;
 
 	let message = `${displayName} is currently on a ${watchStreak} stream streak!`;
 
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index aea3f9c..7537628 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -1313,7 +1313,7 @@ async function TwitchWatchStreak(data) {
 	
 	// TODO: Streamer.bot v1.0.5-alpha3 changed the data sent with this event, so for backwards compatibility we need to check for both the old and new properties
 	const displayName = data.displayName ?? data.user.name;
-	const watchStreak = data.watchStreak ?? data.streak_count;
+	const watchStreak = data.watchStreak ?? data.streak_count ?? data.streakCount;
 	
 	titleDiv.innerText = `${displayName} is currently on a ${watchStreak} stream streak! `;
 	contentDiv.innerHTML = ConstructMessageFromParts(data.parts);
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js
index 7705497..a3c5e8a 100644
--- a/multistream-alerts/script.js
+++ b/multistream-alerts/script.js
@@ -779,7 +779,7 @@ async function TwitchWatchStreak(data) {
 	// Set the text
 	// TODO: Streamer.bot v1.0.5-alpha3 changed the data sent with this event, so for backwards compatibility we need to check for both the old and new properties
 	const displayName = data.displayName ?? data.user.name;
-	const watchStreak = data.watchStreak ?? data.streak_count;
+	const watchStreak = data.watchStreak ?? data.streak_count ?? data.streakCount;
 	
 	UpdateAlertBox(
 		'twitch',

From 7c31fc1b579624a1633b0e44e781e51b1f2ecc7d Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Mon, 14 Sep 2026 12:57:09 +1000
Subject: [PATCH 03/10] Oops

---
 horizontal-chat/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 6933aba..62643ae 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -839,7 +839,7 @@ async function TwitchWatchStreak(data) {
 		return;
 
 	// TODO: Streamer.bot v1.0.5-alpha3 changed the data sent with this event, so for backwards compatibility we need to check for both the old and new properties
-	const displayName = data.displayName ?? data.user.name;data.streakCount
+	const displayName = data.displayName ?? data.user.name;
 	const watchStreak = data.watchStreak ?? data.streak_count ?? data.streakCount;
 
 	let message = `${displayName} is currently on a ${watchStreak} stream streak!`;

From 216e78df301c1678505adafe26756ee976e62f19 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Mon, 14 Sep 2026 13:29:09 +1000
Subject: [PATCH 04/10] Added YouTube Jewels Gifted events

---
 horizontal-chat/script.js                 | 15 ++++++++
 horizontal-chat/settings/settings.json    |  8 +++++
 multichat-overlay/script.js               | 43 ++++++++++++++++++++++-
 multichat-overlay/settings/settings.json  |  8 +++++
 multistream-alerts/script.js              | 24 +++++++++++++
 multistream-alerts/settings/settings.json | 17 +++++++++
 6 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 62643ae..5c71c63 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -62,6 +62,7 @@ const showKickGifts = GetBooleanParam("showKickGifts", true);
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+const showYouTubeJewelsGifted = GetBooleanParam("showYouTubeJewelsGifted", true);
 const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
 
@@ -236,6 +237,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.JewelsGifted', (response) => {
+	console.debug(response.data);
+	YouTubeJewelsGifted(response.data);
+})
+
 client.on('YouTube.NewSubscriber', (response) => {
 	console.debug(response.data);
 	YouTubeNewSubscriber(response.data);
@@ -1049,6 +1055,15 @@ function YouTubeSuperSticker(data) {
 	ShowAlert(message, 'youtube');
 }
 
+function YouTubeJewelsGifted(data) {
+	if (!showYouTubeJewelsGifted)
+		return;
+
+	let message = `${data.user.name} gifted ${data.jewelsAmount} Jewels`;
+
+	ShowAlert(message, 'youtube');
+}
+
 function YouTubeNewSubscriber(data) {
 	if (!showYouTubeSubscribers)
 		return;
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index ee7fe66..fe23d26 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -250,6 +250,14 @@
 			"defaultValue": true,
 			"group": "Which YouTube messages do you want to see?"
 		},
+		{
+			"id": "showYouTubeJewelsGifted",
+			"label": "Jewels Gifted",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which YouTube messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeSubscribers",
 			"label": "New Subscribers",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 7537628..f1c905d 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -68,6 +68,7 @@ const showKickGifts = GetBooleanParam("showKickGifts", true);
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+const showYouTubeJewelsGifted = GetBooleanParam("showYouTubeJewelsGifted", true);
 const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
 
@@ -272,6 +273,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.JewelsGifted', (response) => {
+	console.debug(response.data);
+	YouTubeJewelsGifted(response.data);
+})
+
 client.on('YouTube.NewSubscriber', (response) => {
 	console.debug(response.data);
 	YouTubeNewSubscriber(response.data);
@@ -1668,6 +1674,41 @@ function YouTubeSuperSticker(data) {
 	AddMessageItem(instance);
 }
 
+function YouTubeJewelsGifted(data) {
+	if (!showYouTubeJewelsGifted)
+		return;
+
+	// Get a reference to the template
+	const template = document.getElementById('cardTemplate');
+
+	// Create a new instance of the template
+	const instance = template.content.cloneNode(true);
+
+	// Get divs
+	const cardDiv = instance.querySelector("#card");
+	const headerDiv = instance.querySelector("#header");
+	const avatarDiv = instance.querySelector("#avatar");
+	const iconDiv = instance.querySelector("#icon");
+	const titleDiv = instance.querySelector("#title");
+	const contentDiv = instance.querySelector("#content");
+
+	// Set the card background colors
+	cardDiv.classList.add('youtube');
+
+	avatarDiv.style.width = 'auto';
+
+	// Set the text
+	const user = data.user.name;
+	const amount = data.jewelsAmount;
+	const jewelURL = data.url;
+	const jewelImage = `<img src="${jewelURL}" class="youtube-super-sticker"/>`;
+
+	avatarDiv.innerHTML = jewelImage;
+	titleDiv.innerHTML = `${user} gifted ${amount} Jewels`;
+
+	AddMessageItem(instance);
+}
+
 function YouTubeNewSubscriber(data) {
 	if (!showYouTubeSubscribers)
 		return;
@@ -1694,7 +1735,7 @@ function YouTubeNewSubscriber(data) {
 
 	titleDiv.innerText = `${username} subscribed`;
 
-	AddMessageItem(instance, JSON.stringify(data));
+	AddMessageItem(instance);
 }
 
 function YouTubeNewSponsor(data) {
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index aeb1699..b738e4b 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -379,6 +379,14 @@
 			"defaultValue": true,
 			"group": "Which YouTube messages do you want to see?"
 		},
+		{
+			"id": "showYouTubeJewelsGifted",
+			"label": "Jewels Gifted",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which YouTube messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeSubscribers",
 			"label": "New Subscribers",
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js
index a3c5e8a..02b31ba 100644
--- a/multistream-alerts/script.js
+++ b/multistream-alerts/script.js
@@ -89,6 +89,8 @@ const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
 const youtubeSuperChatAction = urlParams.get("youtubeSuperChatAction") || "";
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
 const youtubeSuperStickerAction = urlParams.get("youtubeSuperStickerAction") || "";
+const showYouTubeJewelsGifted = GetBooleanParam("showYouTubeJewelsGifted", true);
+const youtubeJewelsGiftedAction = urlParams.get("youtubeJewelsGiftedAction") || "";
 const showYouTubeSubscribers = GetBooleanParam("showYouTubeSubscribers", false);
 const youtubeSubscriberAction = urlParams.get("youtubeSubscriberAction") || "";
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
@@ -249,6 +251,11 @@ client.on('YouTube.SuperSticker', (response) => {
 	YouTubeSuperSticker(response.data);
 })
 
+client.on('YouTube.JewelsGifted', (response) => {
+	console.debug(response.data);
+	YouTubeJewelsGifted(response.data);
+})
+
 client.on('YouTube.NewSubscriber', (response) => {
 	console.debug(response.data);
 	YouTubeNewSubscriber(response.data);
@@ -834,6 +841,23 @@ function YouTubeSuperSticker(data) {
 	);
 }
 
+function YouTubeJewelsGifted(data) {
+	if (!showYouTubeJewelsGifted)
+		return;
+
+	UpdateAlertBox(
+		'youtube',
+		data.url,
+		`${data.user.name}`,
+		`gifted ${data.jewelsAmount} Jewels`,
+		'',
+		data.user.name,
+		'',
+		youtubeJewelsGiftedAction,
+		data
+	);
+}
+
 function YouTubeNewSubscriber(data) {
 	if (!showYouTubeSubscribers)
 		return;
diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json
index b5346b2..a4cff71 100644
--- a/multistream-alerts/settings/settings.json
+++ b/multistream-alerts/settings/settings.json
@@ -380,6 +380,23 @@
 			"showIf": "showYouTubeSuperStickers",
 			"group": "Which YouTube alerts do you want to see?"
 		},
+		{
+			"id": "showYouTubeJewelsGifted",
+			"label": "Jewels Gifted",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which YouTube alerts do you want to see?"
+		},
+		{
+			"id": "youtubeJewelsGiftedAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"showIf": "showYouTubeJewelsGifted",
+			"group": "Which YouTube alerts do you want to see?"
+		},
 		{
 			"id": "showYouTubeSubscribers",
 			"label": "New Subscribers",

From fbc2018e12515e889f88d26c7b57e111b7f3ed88 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Fri, 18 Sep 2026 05:18:38 +1000
Subject: [PATCH 05/10] Archaic asked me for drop shadows for the classic
 theme. If you don't like it, it's all his fault. Don't blame.

---
 now-playing/themes/classic/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/now-playing/themes/classic/style.css b/now-playing/themes/classic/style.css
index 8880684..ff8f10a 100644
--- a/now-playing/themes/classic/style.css
+++ b/now-playing/themes/classic/style.css
@@ -9,6 +9,8 @@
     align-items: stretch; 
     gap: 0.5em;
     opacity: 0;
+    filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1));
+    
 }
 
 #album-art-container {

From c37ba5c835f5d6ac5bed52dd68c631204ac6b24e Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Fri, 18 Sep 2026 05:30:03 +1000
Subject: [PATCH 06/10] Fixed GIFs for Horizontal Chat

---
 .common/utils/helpers.js  | 7 +++++--
 horizontal-chat/script.js | 8 ++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/.common/utils/helpers.js b/.common/utils/helpers.js
index a6925f5..3998ca6 100644
--- a/.common/utils/helpers.js
+++ b/.common/utils/helpers.js
@@ -325,7 +325,7 @@ function RandomHex(str) {
 }
 
 // Used to construct a message from "parts" variable commonly found in Streamer.bot chat messages
-function ConstructMessageFromParts(parts) {
+function ConstructMessageFromParts(parts, isHorizontalChat = false) {
     return parts.map(part => {
         if (part.emoji)
             return ` <img src="${EscapeHTML(part.image)}" alt="${EscapeHTML(part.text)}" title="${EscapeHTML(part.text)}" class="emote"> `;
@@ -358,7 +358,10 @@ function ConstructMessageFromParts(parts) {
             case "mention":
                 return part.text;
             case "gif":
-                return `<img src="${EscapeHTML(part.url)}" class="gif">`;
+                if (!isHorizontalChat)
+                    return `<img src="${EscapeHTML(part.url)}" class="gif">`;
+                else
+                    return `<img src="${EscapeHTML(part.url)}" class="emote">`;
             default:
                 return `<img src="${EscapeHTML(part.imageUrl)}" alt="${EscapeHTML(part.text)}" title="${EscapeHTML(part.text)}" class="emote">`;
         }
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 5c71c63..a709951 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -588,7 +588,7 @@ async function TwitchChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
 	const messageColor = data.user.color;
 	const role = data.user.role;
 
@@ -693,7 +693,7 @@ async function TwitchAnnouncement(data) {
 			break;
 	}
 
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
 
 	ShowAlert(message, background);
 }
@@ -949,7 +949,7 @@ function YouTubeMessage(data) {
 
 	// Set the message data
 	//let message = RenderMessageWithEmotesHTML(data.message, data.emotes);
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
 	
 	// Set furry mode
 	if (furryMode)
@@ -1394,7 +1394,7 @@ async function KickChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
 
 	// Set furry mode
 	if (furryMode)

From 7c435314de876901c3ae8e3a20b1be80cf24ec68 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Fri, 18 Sep 2026 05:47:42 +1000
Subject: [PATCH 07/10] Removed "messages" from Kicks Gifted. Idk why I added
 that in the first place, you cannot even leave messages with Kick Gifts. WHAT
 WAS I THINKING DOOD?!?!?!

---
 multichat-overlay/index.html |  2 --
 multichat-overlay/script.js  | 28 +++++++++++++++++++++++++---
 multichat-overlay/style.css  |  2 +-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/multichat-overlay/index.html b/multichat-overlay/index.html
index b8aa6a5..b2b5991 100644
--- a/multichat-overlay/index.html
+++ b/multichat-overlay/index.html
@@ -98,8 +98,6 @@
 					<img src="icons/badges/kick-kicks.svg" style="height: 1em; padding-left: 0.5em; padding-right: 0.25em;">
 					<span id="kick-gift-amount">13</span>
 				</div>
-				<div id="kick-gift-message">
-				</div>
 			</div>
 			<img class="kick-gift-sticker"
 				src="" />
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index f1c905d..9f0cae9 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -2871,7 +2871,6 @@ async function KickKicksGifted(data) {
 	const giftNameSpan = instance.querySelector('#kick-gift-name');
 	const stickerImg = instance.querySelector('.kick-gift-sticker');
 	const amountDiv = instance.querySelector('#kick-gift-amount');
-	const messageDiv = instance.querySelector('#kick-gift-message');
 
 	avatarImg.src = await GetAvatar(data.sender.username, 'kick');			// Set the card header
 	usernameSpan.innerText = data.sender.username;							// Set the username
@@ -2879,7 +2878,6 @@ async function KickKicksGifted(data) {
 	giftNameSpan.innerText = data.gift.name;								// Set the gift name
 	stickerImg.src = `https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp`;		// Set the sticker image URL
 	amountDiv.innerText = data.gift.amount;									// Set the number of gifts sent
-	messageDiv.innerText = data.message										// Set the message
 
 	AddMessageItem(instance, null, 'kick', data.senderId);
 }
@@ -3431,4 +3429,28 @@ async function GetYouTubeVideoData(videoId) {
 		console.error('Error fetching YouTube video data:', error);
 		return null;
 	}
-}
\ No newline at end of file
+}
+
+let data = {
+  "gift_transaction_id": "fa306456-06d9-4e6c-8ea7-e1060f6eaf57",
+  "sender": {
+    "id": 447944,
+    "username": "DarthBlazeLive",
+    "username_color": "#E4D88F",
+    "profile_picture": "https://files.kick.com/images/user/447944/profile_image/conversion/df4eddb9-d9f3-4c50-ae30-8fd3c3dae366-fullsize.webp"
+  },
+  "gift": {
+    "gift_id": "hell_yeah",
+    "name": "Hell Yeah",
+    "amount": 1,
+    "type": "BASIC",
+    "tier": "BASIC",
+    "character_limit": 0,
+    "pinned_time": 0
+  },
+  "created_at": "2026-09-17T17:13:56.921027555Z"
+}
+
+  setTimeout(() => {
+	KickKicksGifted(data);
+  }	, 1000);
\ No newline at end of file
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index 7b3ed0c..1e013c7 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -282,7 +282,7 @@ li {
 }
 
 .kick-gift-sticker {
-	height: 5em;
+	height: 2.5em;
 }
 
 #tiktok-gift-repeat-count {

From dc7a163a5240b08cda25efeaf5fdf6bd74c0bcdb Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Fri, 18 Sep 2026 05:54:38 +1000
Subject: [PATCH 08/10] Oops lol

---
 multichat-overlay/script.js | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 9f0cae9..3d3a891 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -3429,28 +3429,4 @@ async function GetYouTubeVideoData(videoId) {
 		console.error('Error fetching YouTube video data:', error);
 		return null;
 	}
-}
-
-let data = {
-  "gift_transaction_id": "fa306456-06d9-4e6c-8ea7-e1060f6eaf57",
-  "sender": {
-    "id": 447944,
-    "username": "DarthBlazeLive",
-    "username_color": "#E4D88F",
-    "profile_picture": "https://files.kick.com/images/user/447944/profile_image/conversion/df4eddb9-d9f3-4c50-ae30-8fd3c3dae366-fullsize.webp"
-  },
-  "gift": {
-    "gift_id": "hell_yeah",
-    "name": "Hell Yeah",
-    "amount": 1,
-    "type": "BASIC",
-    "tier": "BASIC",
-    "character_limit": 0,
-    "pinned_time": 0
-  },
-  "created_at": "2026-09-17T17:13:56.921027555Z"
-}
-
-  setTimeout(() => {
-	KickKicksGifted(data);
-  }	, 1000);
\ No newline at end of file
+}
\ No newline at end of file

From 66348b14f7871ddc098e4d79005b993c013a0187 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Fri, 18 Sep 2026 07:19:42 +1000
Subject: [PATCH 09/10] Added a setting for Twitch GIPHY support

---
 .common/utils/helpers.js                 | 13 +++++++++----
 horizontal-chat/script.js                |  9 +++++----
 horizontal-chat/settings/settings.json   |  8 ++++++++
 multichat-overlay/script.js              | 11 ++++++-----
 multichat-overlay/settings/settings.json |  8 ++++++++
 5 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/.common/utils/helpers.js b/.common/utils/helpers.js
index 3998ca6..983261e 100644
--- a/.common/utils/helpers.js
+++ b/.common/utils/helpers.js
@@ -325,7 +325,7 @@ function RandomHex(str) {
 }
 
 // Used to construct a message from "parts" variable commonly found in Streamer.bot chat messages
-function ConstructMessageFromParts(parts, isHorizontalChat = false) {
+function ConstructMessageFromParts(parts, isHorizontalChat = false, twitchGIFsEnabled = false) {
     return parts.map(part => {
         if (part.emoji)
             return ` <img src="${EscapeHTML(part.image)}" alt="${EscapeHTML(part.text)}" title="${EscapeHTML(part.text)}" class="emote"> `;
@@ -358,10 +358,15 @@ function ConstructMessageFromParts(parts, isHorizontalChat = false) {
             case "mention":
                 return part.text;
             case "gif":
-                if (!isHorizontalChat)
-                    return `<img src="${EscapeHTML(part.url)}" class="gif">`;
+                if (twitchGIFsEnabled)
+                {
+                    if (!isHorizontalChat)
+                        return `<img src="${EscapeHTML(part.url)}" class="gif">`;
+                    else
+                        return `<img src="${EscapeHTML(part.url)}" class="emote">`;
+                }
                 else
-                    return `<img src="${EscapeHTML(part.url)}" class="emote">`;
+                    return `<b><i>${EscapeHTML(part.text)}</i></b>`;
             default:
                 return `<img src="${EscapeHTML(part.imageUrl)}" alt="${EscapeHTML(part.text)}" title="${EscapeHTML(part.text)}" class="emote">`;
         }
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index a709951..d08138f 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -51,6 +51,7 @@ const showTwitchPowerUpRedemptions = GetBooleanParam("showTwitchPowerUpRedemptio
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const showTwitchWatchStreaks = GetBooleanParam("showTwitchWatchStreaks", true);
 const showTwitchSharedChat = GetBooleanParam("showTwitchSharedChat", true);
+const showTwitchGIFs = GetBooleanParam("showTwitchGIFs", false);
 
 const showKickMessages = GetBooleanParam("showKickMessages", true);
 const showKickFollows = GetBooleanParam("showKickFollows", false);
@@ -588,7 +589,7 @@ async function TwitchChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
+	let message = ConstructMessageFromParts(data.parts, true, showTwitchGIFs);
 	const messageColor = data.user.color;
 	const role = data.user.role;
 
@@ -693,7 +694,7 @@ async function TwitchAnnouncement(data) {
 			break;
 	}
 
-	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
+	let message = ConstructMessageFromParts(data.parts, true, showTwitchGIFs);
 
 	ShowAlert(message, background);
 }
@@ -949,7 +950,7 @@ function YouTubeMessage(data) {
 
 	// Set the message data
 	//let message = RenderMessageWithEmotesHTML(data.message, data.emotes);
-	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
+	let message = ConstructMessageFromParts(data.parts, true, showTwitchGIFs);
 	
 	// Set furry mode
 	if (furryMode)
@@ -1394,7 +1395,7 @@ async function KickChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts, isHorizontalChat = true);
+	let message = ConstructMessageFromParts(data.parts, true, showTwitchGIFs);
 
 	// Set furry mode
 	if (furryMode)
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index fe23d26..25a9c93 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -226,6 +226,14 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchGIFs",
+			"label": "GIFs",
+			"description": "Tier 2/3 subs only",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMessages",
 			"label": "Chat Messages",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 3d3a891..e436fca 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -57,6 +57,7 @@ const showTwitchPowerUpRedemptions = GetBooleanParam("showTwitchPowerUpRedemptio
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const showTwitchWatchStreaks = GetBooleanParam("showTwitchWatchStreaks", true);
 const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
+const showTwitchGIFs = GetBooleanParam("showTwitchGIFs", true);
 
 const showKickMessages = GetBooleanParam("showKickMessages", true);
 const showKickFollows = GetBooleanParam("showKickFollows", false);
@@ -687,7 +688,7 @@ async function TwitchChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, false, showTwitchGIFs);
 	const messageColor = data.user.color;
 	const role = data.user.role;
 	
@@ -939,7 +940,7 @@ async function TwitchAnnouncement(data) {
 	else
 		content.querySelector("#username").innerText = `${data.user.name} (${data.user.login})`;
 	content.querySelector("#username").style.color = data.user.color;
-	content.querySelector("#message").innerHTML = ConstructMessageFromParts(data.parts);
+	content.querySelector("#message").innerHTML = ConstructMessageFromParts(data.parts, false, showTwitchGIFs);
 
 	// Remove the line break
 	content.querySelector("#colon-separator").style.display = `inline`;
@@ -1322,7 +1323,7 @@ async function TwitchWatchStreak(data) {
 	const watchStreak = data.watchStreak ?? data.streak_count ?? data.streakCount;
 	
 	titleDiv.innerText = `${displayName} is currently on a ${watchStreak} stream streak! `;
-	contentDiv.innerHTML = ConstructMessageFromParts(data.parts);
+	contentDiv.innerHTML = ConstructMessageFromParts(data.parts, false, showTwitchGIFs);
 
 	AddMessageItem(instance, data.messageId);
 }
@@ -1439,7 +1440,7 @@ async function YouTubeMessage(data) {
 	
 	// Set the message data
 	//let message = RenderMessageWithEmotesHTML(data.message, data.emotes);
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, false, showTwitchGIFs);
 	
 	// Highlight mentions
 	const mentionRgx = new RegExp(`(^|\\s)@${youtubeUsername}(\\s|$)`, 'i');
@@ -2484,7 +2485,7 @@ async function KickChatMessage(data) {
 	}
 
 	// Set the message data
-	let message = ConstructMessageFromParts(data.parts);
+	let message = ConstructMessageFromParts(data.parts, false, showTwitchGIFs);
 	
 	// Highlight mentions
 	const mentionRgx = new RegExp(`(^|\\s)@${kickUsername}(\\s|$)`, 'i');
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index b738e4b..1ff85d3 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -355,6 +355,14 @@
 			"defaultValue": 2,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchGIFs",
+			"label": "GIFs",
+			"description": "Tier 2/3 subs only",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMessages",
 			"label": "Chat Messages",

From 58495dcc7ea58e0ba4dd4d2c8d36fcabca631401 Mon Sep 17 00:00:00 2001
From: nutty <nuttylmao@gmail.com>
Date: Tue, 20 Oct 2026 09:00:07 +1100
Subject: [PATCH 10/10] Updated Kick Pusher Key to one that actually works

---
 .common/utils/helpers.js     | 3 +++
 horizontal-chat/script.js    | 1 -
 multichat-overlay/index.html | 2 +-
 multichat-overlay/script.js  | 1 -
 multistream-alerts/script.js | 1 -
 5 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.common/utils/helpers.js b/.common/utils/helpers.js
index 983261e..effe42d 100644
--- a/.common/utils/helpers.js
+++ b/.common/utils/helpers.js
@@ -4,6 +4,9 @@
 
 const avatarMap = new Map();
 const pronounMap = new Map();
+// const kickPusherKey = '32cbd69e4b950bf97679';    // Updated Pusher key for Kick
+const kickPusherKey = '34bf7a0ff419a2a775b9';       // Updated Pusher key for Kick
+const kickPusherWsUrl = `wss://ws-us2.pusher.com/app/${kickPusherKey}?protocol=7&client=js&version=8.4.0&flash=false`;
 
 
 
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index d08138f..ed558fc 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -16,7 +16,6 @@ let alertQueue = [];
 // GLOBAL VARS //
 /////////////////
 
-const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];
 
 /////////////
diff --git a/multichat-overlay/index.html b/multichat-overlay/index.html
index b2b5991..a5134d4 100644
--- a/multichat-overlay/index.html
+++ b/multichat-overlay/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-	<div id="statusContainer">Connecting...</div>
+	<div id="statusContainer" style="display: none;"></div>
 	<div id="mainContainer" class="slide-fade">
 		<ul id="messageList">
 		</ul>
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index e436fca..e3f50a2 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -13,7 +13,6 @@ const sbServerPort = urlParams.get("port") || "8080";
 /////////////////
 
 const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[&?#].*)?$/;
-const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];
 
 /////////////
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js
index 02b31ba..6d3afe7 100644
--- a/multistream-alerts/script.js
+++ b/multistream-alerts/script.js
@@ -27,7 +27,6 @@ let alertQueue = [];
 // GLOBAL VARS //
 /////////////////
 
-const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];