Added support for Twitch Shared Chat

horizontal-chat/script.js

@@ -29,7 +29,7 @@ const fontSize = urlParams.get("fontSize") || "18";
 const background = urlParams.get("background") || "#000000";
 const opacity = urlParams.get("opacity") || "0.5";
 
-const hideAfter = GetIntParam("hideAfter") || 0;
+const hideAfter = GetIntParam("hideAfter", 0);
 const excludeCommands = GetBooleanParam("excludeCommands", true);
 const ignoreChatters = urlParams.get("ignoreChatters") || "";
 
@@ -38,6 +38,7 @@ const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true)
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
 const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true);
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
+const showTwitchSharedChat = GetBooleanParam("showTwitchSharedChat", true);
 
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -285,6 +286,15 @@ async function TwitchChatMessage(data) {
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
 
+	// Set Shared Chat
+	// If the message is from Shared Chat AND the user indicated that they do NOT
+	// want shared chat messages, don't show it on screen
+	const isSharedChat = data.isSharedChat;
+	if (isSharedChat && !showTwitchSharedChat) {
+		if (!data.sharedChat.primarySource)
+			return;
+	}
+
 	// Set timestamp
 	if (showTimestamps) {
 		timestampDiv.classList.add("timestamp");
@@ -993,12 +1003,12 @@ function GetBooleanParam(paramName, defaultValue) {
 	}
 }
 
-function GetIntParam(paramName) {
+function GetIntParam(paramName, defaultValue) {
 	const urlParams = new URLSearchParams(window.location.search);
 	const paramValue = urlParams.get(paramName);
 
 	if (paramValue === null) {
-		return null; // or undefined, or a default value, depending on your needs
+		return defaultValue; // or undefined, or a default value, depending on your needs
 	}
 
 	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer

horizontal-chat/settings/settings.json

@@ -159,6 +159,14 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchSharedChat",
+			"label": "Shared Chat Messages",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMessages",
 			"label": "Chat Messages",

horizontal-chat/style.css

@@ -176,7 +176,7 @@ li {
 	font-size: 0.7em;
 } */
 
-/* .firstMessageHighlight {
+/* .highlightMessage {
 	background: #adadad46;
 	padding: 20px 40px;
 	border-radius: var(--border-radius);

multichat-overlay/index.html

@@ -25,6 +25,9 @@
 					<span>✨ First Time Chat</span>
 					<span> from viewer</span>
 				</div>
+				<div id="sharedChat">
+					<span id="sharedChatChannel"></span>
+				</div>
 				<label id="userInfo">
 					<span id="avatar"></span>
 					<span id="timestamp"></span>

multichat-overlay/script.js

@@ -26,17 +26,18 @@ const lineSpacing = urlParams.get("lineSpacing") || "1.7";
 const background = urlParams.get("background") || "#000000";
 const opacity = urlParams.get("opacity") || "0.85";
 
-const hideAfter = GetIntParam("hideAfter") || 0;
+const hideAfter = GetIntParam("hideAfter", 0);
 const excludeCommands = GetBooleanParam("excludeCommands", true);
 const ignoreChatters = urlParams.get("ignoreChatters") || "";
-const scrollDirection = GetIntParam("scrollDirection") || 1;
+const scrollDirection = GetIntParam("scrollDirection", 1);
-const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel") || 20;
+const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel", 20);
 
 const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
 const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
 const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true);
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
+const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
 
 const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -290,6 +291,8 @@ async function TwitchChatMessage(data) {
 	// Get divs
 	const messageContainerDiv = instance.querySelector("#messageContainer");
 	const firstMessageDiv = instance.querySelector("#firstMessage");
+	const sharedChatDiv = instance.querySelector("#sharedChat");
+	const sharedChatChannelDiv = instance.querySelector("#sharedChatChannel");
 	const replyDiv = instance.querySelector("#reply");
 	const replyUserDiv = instance.querySelector("#replyUser");
 	const replyMsgDiv = instance.querySelector("#replyMsg");
@@ -306,7 +309,24 @@ async function TwitchChatMessage(data) {
 	const firstMessage = data.message.firstMessage;
 	if (firstMessage && showMessage) {
 		firstMessageDiv.style.display = 'block';
-		messageContainerDiv.classList.add("firstMessageHighlight");
+		messageContainerDiv.classList.add("highlightMessage");
+	}
+
+	// Set Shared Chat
+	console.log(showTwitchSharedChat);
+	const isSharedChat = data.isSharedChat;
+	if (isSharedChat) {
+		if (showTwitchSharedChat > 1) {
+			if (!data.sharedChat.primarySource)
+			{
+				const sharedChatChannel = data.sharedChat.sourceRoom.name;
+				sharedChatDiv.style.display = 'block';
+				sharedChatChannelDiv.innerHTML = `💬 ${sharedChatChannel}`;
+				messageContainerDiv.classList.add("highlightMessage");
+			}
+		}
+		else if (!data.sharedChat.primarySource && showTwitchSharedChat == 0)
+			return;
 	}
 
 	// Set Reply Message
@@ -1691,14 +1711,16 @@ function GetBooleanParam(paramName, defaultValue) {
 	}
 }
 
-function GetIntParam(paramName) {
+function GetIntParam(paramName, defaultValue) {
 	const urlParams = new URLSearchParams(window.location.search);
 	const paramValue = urlParams.get(paramName);
 
 	if (paramValue === null) {
-		return null; // or undefined, or a default value, depending on your needs
+		return defaultValue; // or undefined, or a default value, depending on your needs
 	}
 
+	console.log(paramValue);
+
 	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
 
 	if (isNaN(intValue)) {

multichat-overlay/settings/settings.json

@@ -221,6 +221,28 @@
 			"defaultValue": true,
 			"group": "Which Twitch messages do you want to see?"
 		},
+		{
+			"id": "showTwitchSharedChat",
+			"label": "Shared Chat Messages",
+			"description": "",
+			"type": "select",
+			"options": [
+				{
+					"value":  2,
+					"label": "Show & Highlight"
+				},
+				{
+					"value": 1,
+					"label": "Show but do not highlight"
+				},
+				{
+					"value": 0,
+					"label": "Do not show"
+				}
+			],
+			"defaultValue": 2,
+			"group": "Which Twitch messages do you want to see?"
+		},
 		{
 			"id": "showYouTubeMessages",
 			"label": "Chat Messages",

multichat-overlay/style.css

@@ -81,13 +81,14 @@ li {
 	opacity: 0;
 }
 
-#firstMessage {
+#firstMessage,
+#sharedChat {
 	display: none;
 	font-weight: 500;
 	font-size: 0.7em;
 }
 
-.firstMessageHighlight {
+.highlightMessage {
 	background: #adadad46;
 	padding: 20px 40px;
 	border-radius: var(--border-radius);