• Added new CSS option: --random-youtube-colors

• Added new CSS option: --youtube-color
• Added new CSS option: --youtube-custom-sub-icon

.common/utils/helpers.js

@@ -220,3 +220,23 @@ function TranslateToFurry(sentence) {
 function EscapeRegExp(string) {
 	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
+
+// Given a string, return a random hex code. The same input always results in the same output
+function StringToHex(str) {
+    // Simple hash function to convert string to a number
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash |= 0; // Convert to 32bit integer
+    }
+
+    // Convert hash to a hex color
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        // Extract each byte and convert to 2-digit hex
+        const value = (hash >> (i * 8)) & 0xFF;
+        color += value.toString(16).padStart(2, '0');
+    }
+
+    return color;
+}

horizontal-chat/script.js

@@ -19,7 +19,16 @@ let alertQueue = [];
 const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];
 
+/////////////////
+// CSS OPTIONS //
+/////////////////
 
+const randomYouTubeColors = getComputedStyle(document.documentElement).getPropertyValue('--random-youtube-colors').trim() === '1';
+const youtubeColor = getComputedStyle(document.documentElement).getPropertyValue('--youtube-color').trim();
+const youtubeCustomSubIcon = getComputedStyle(document.documentElement)
+  .getPropertyValue('--youtube-custom-sub-icon')
+  .trim()
+  .replace(/^["']|["']$/g, ''); // removes surrounding quotes
 
 /////////////
 // OPTIONS //
@@ -854,7 +863,10 @@ function YouTubeMessage(data) {
 	// Set the message data
 	if (showUsername) {
 		usernameDiv.innerText = data.user.name;
-		usernameDiv.style.color = "#f70000";	// YouTube users do not have colors, so just set it to red
+		if (randomYouTubeColors)
+			usernameDiv.style.color = StringToHex(data.user.name);
+		else
+			usernameDiv.style.color = youtubeColor;	// YouTube users do not have colors, so just set it to red
 	}
 
 	if (showMessage) {
@@ -890,9 +902,13 @@ function YouTubeMessage(data) {
 		badgeListDiv.appendChild(badge);
 	}
 
-	if (data.user.isSponsor && showBadges) {
+	// if (data.user.isSponsor && showBadges) {
+	if (!data.user.isSponsor && showBadges) {
 		const badge = new Image();
-		badge.src = `icons/badges/youtube-member.svg`;
+		if (youtubeCustomSubIcon)
+			badge.src = youtubeCustomSubIcon;
+		else
+			badge.src = `icons/badges/youtube-member.svg`;
 		badge.style.filter = `invert(100%)`;
 		badge.style.opacity = 0.8;
 		badge.classList.add("badge");

horizontal-chat/style.css

@@ -2,7 +2,8 @@
 	margin: 0;
 	padding: 0;
 	--margin: 0px;
-	--border-radius: 20px;
+	--border-radius: 0.5em;
+	--youtube-color: #f70000;
 }
 
 body {

multichat-overlay/script.js

@@ -16,6 +16,17 @@ const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|e
 const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
 let kickSubBadges = [];
 
+/////////////////
+// CSS OPTIONS //
+/////////////////
+
+const randomYouTubeColors = getComputedStyle(document.documentElement).getPropertyValue('--random-youtube-colors').trim() === '1';
+const youtubeColor = getComputedStyle(document.documentElement).getPropertyValue('--youtube-color').trim();
+const youtubeCustomSubIcon = getComputedStyle(document.documentElement)
+  .getPropertyValue('--youtube-custom-sub-icon')
+  .trim()
+  .replace(/^["']|["']$/g, ''); // removes surrounding quotes
+
 /////////////
 // OPTIONS //
 /////////////
@@ -117,7 +128,6 @@ document.documentElement.style.setProperty('--animation-speed', `${animationSpee
 
 
 
-
 /////////////////////////
 // STREAMER.BOT CLIENT //
 /////////////////////////
@@ -1240,7 +1250,10 @@ async function YouTubeMessage(data) {
 	// Set the message data
 	if (showUsername) {
 		usernameDiv.innerText = data.user.name;
-		usernameDiv.style.color = "#f70000";	// YouTube users do not have colors, so just set it to red
+		if (randomYouTubeColors)
+			usernameDiv.style.color = StringToHex(data.user.name);
+		else
+			usernameDiv.style.color = youtubeColor;	// YouTube users do not have colors, so just set it to red
 	}
 
 	if (showMessage) {
@@ -1283,9 +1296,13 @@ async function YouTubeMessage(data) {
 		badgeListDiv.appendChild(badge);
 	}
 
-	if (data.user.isSponsor && showBadges) {
+	// if (data.user.isSponsor && showBadges) {
+	if (!data.user.isSponsor && showBadges) {
 		const badge = new Image();
-		badge.src = `icons/badges/youtube-member.svg`;
+		if (youtubeCustomSubIcon)
+			badge.src = youtubeCustomSubIcon;
+		else
+			badge.src = `icons/badges/youtube-member.svg`;
 		badge.style.filter = `invert(100%)`;
 		badge.style.opacity = 0.8;
 		badge.classList.add("badge");

multichat-overlay/style.css

@@ -3,7 +3,7 @@
 	padding: 0;
 	--margin: 20px;
 	--border-radius: 0.5em;
-	/* --line-spacing: 1.7em; */
+	--youtube-color: #f70000;
 }
 
 body {