Add follow alerts to Twitch and Kick

multichat-overlay/script.js

@@ -37,12 +37,14 @@ const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel", 20);
 
 const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
 const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
+const showTwitchFollows = GetBooleanParam("showTwitchFollows", false);
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
 const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true);
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
 const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
 
 const showKickMessages = GetBooleanParam("showKickMessages", true);
+const showKickFollows = GetBooleanParam("showKickFollows", false);
 const showKickSubs = GetBooleanParam("showKickSubs", true);
 const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
 const showKickHosts = GetBooleanParam("showKickHosts", true);
@@ -137,6 +139,11 @@ client.on('Twitch.Announcement', (response) => {
 	TwitchAnnouncement(response.data);
 })
 
+client.on('Twitch.Follow', (response) => {
+	console.debug(response.data);
+	TwitchFollow(response.data);
+})
+
 client.on('Twitch.Sub', (response) => {
 	console.debug(response.data);
 	TwitchSub(response.data);
@@ -648,6 +655,37 @@ async function TwitchAnnouncement(data) {
 	AddMessageItem(instance, data.messageId);
 }
 
+async function TwitchFollow(data) {
+	if (!showTwitchFollows)
+		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("#contentDiv");
+
+	// Set the card background colors
+	cardDiv.classList.add('twitch');
+
+	// Set the text
+	let username = data.user_name;
+	if (data.user_name.toLowerCase() != data.user_login.toLowerCase())
+		username = `${data.user_name} (${data.user_login})`;
+
+	titleDiv.innerText = `${username} followed`;
+
+	AddMessageItem(instance, data.messageId);
+}
+
 async function TwitchSub(data) {
 	if (!showTwitchSubs)
 		return;
@@ -2100,6 +2138,34 @@ async function KickChatMessage(data) {
 	}
 }
 
+async function KickFollow(data) {
+	if (!showKickFollows)
+		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("#contentDiv");
+
+	// Set the card background colors
+	cardDiv.classList.add('kick');
+
+	// Set the text
+	let username = data.user;
+	titleDiv.innerText = `${username} followed`;
+
+	AddMessageItem(instance, data.messageId);
+}
+
 async function KickSub(data) {
 	if (!showKickSubs)
 		return;

multichat-overlay/settings/settings.json

@@ -213,6 +213,14 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchFollows",
+			"label": "New Followers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showTwitchSubs",
 			"label": "New Subscribers",
@@ -267,6 +275,14 @@
 			"defaultValue": true,
 			"group": "Which Kick messages do you want to see?"
 		},
+		{
+			"id": "showKickFollows",
+			"label": "New Followers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Which Kick messages do you want to see?"
+		},
 		{
 			"id": "showKickSubs",
 			"label": "New Subscribers",