diff --git a/.common/utils/helpers.js b/.common/utils/helpers.js index 4f4d582..8dde251 100644 --- a/.common/utils/helpers.js +++ b/.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; +} \ No newline at end of file diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js index 9334261..5a58dc3 100644 --- a/horizontal-chat/script.js +++ b/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"); diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css index a7a0419..75ef09e 100644 --- a/horizontal-chat/style.css +++ b/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 { diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index 06e04f9..953243e 100644 --- a/multichat-overlay/script.js +++ b/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"); diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css index c1191ac..3306944 100644 --- a/multichat-overlay/style.css +++ b/multichat-overlay/style.css @@ -3,7 +3,7 @@ padding: 0; --margin: 20px; --border-radius: 0.5em; - /* --line-spacing: 1.7em; */ + --youtube-color: #f70000; } body {