Added Pronouns Support + Bug Fixes

chat.html

@@ -61,7 +61,7 @@
                     </div>
                     <div class="chat-enabler" id="youtube">
                         <img src="images/logo-youtube.svg" alt="">
-                        <label class="switch"><input type="checkbox" name="chatOnYoutube" checked><span class="slider"></span></label>
+                        <label class="switch"><input type="checkbox" name="chatOnYouTube" checked><span class="slider"></span></label>
                     </div>
                     <div class="chat-enabler" id="tiktok">
                         <img src="images/logo-tiktok.svg" alt="">

css/app.css

@@ -91,6 +91,20 @@ body {
 
 #chat .message .user { font-weight: bold; }
 
+#chat .message .user .pronouns {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: #FFF;
+    background: rgba(0,0,0,0.5);
+
+    
+    margin: 0 5px;
+    padding: 5px 7px;
+
+    border-radius: 5px;
+}
+
 #chat .message .time {
     display: inline-block;
     background: rgba(0,0,0,0.5);
@@ -474,7 +488,7 @@ body {
 .wrapper.horizontal #chat {
     flex-direction: row-reverse;
     align-items: flex-end;
-    gap: 10px;
+    gap: 15px;
     width: max-content;
 }
 

index.html

@@ -144,6 +144,7 @@
 					<div class="setting"><label>Channel Point Rewards</label><label class="switch"><input type="checkbox" name="showTwitchRewardRedemptions" checked><span class="slider"></span></label></div>
 					<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showTwitchRaids" checked><span class="slider"></span></label></div>
 					<div class="setting"><label>Shared Chat</label><label class="switch"><input type="checkbox" name="showTwitchSharedChat" checked><span class="slider"></span></label></div>
+					<div class="setting"><label>Pronouns<br><small>Shows Pronouns to those whom enabled them on Twitch chat.</small></label><label class="switch"><input type="checkbox" name="showTwitchPronouns"><span class="slider"></span></label></div>
 					<div class="setting"><label>Statistics<br><small>Shows Twitch Viewers.</small></label><label class="switch"><input type="checkbox" name="showTwitchViewers" checked><span class="slider"></span></label></div>
 				</div>
 			</div>

js/app-mockup.js

@@ -287,7 +287,7 @@ function generateMockEvent() {
 
             const ifHasShared = Math.random() < 0.05;
             if (ifHasShared) {
-                data.message.isSharedChat = true;
+                data.isSharedChat = true;
                 var sharedParentUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
 
                 data.sharedChat = {

js/app.js

@@ -95,7 +95,7 @@ const streamerBotClient = new StreamerbotClient({
 
 async function addMessageToChat(userID, messageID, platform, data) {
     
-    if (ttsSpeakerBotChat == true) { ttsSpeakerBotSays(data.userName, currentLang.ttschat, data.message); }
+    if (ttsSpeakerBotChat == true) { ttsSpeakerBotSays(data.fullUserName, currentLang.ttschat, data.message); }
 
     let html = DOMPurify.sanitize(`
         <div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} ${chatBiggerEmotes == true ? 'bigger-emojis' : ''} message" style="" >
@@ -113,7 +113,7 @@ async function addMessageToChat(userID, messageID, platform, data) {
 
                 ${showBadges == true ? '<span class="badges">'+data.badges+'</span>' : ''}
                 
-                <span style="color: ${data.color}"  class="user">${data.userName}:</span>
+                <span style="color: ${data.color}"  class="user">${data.fullUserName}:</span>
                 
                 ${!data.reply ? '' : data.reply}
                 
@@ -491,8 +491,6 @@ chatInputForm.addEventListener("submit", function(event) {
     const chatOnTiktok = document.querySelector('#chat-input #tiktok input[type=checkbox]').checked;
     const chatOnKick = document.querySelector('#chat-input #kick input[type=checkbox]').checked;
 
-    console.log(chatOnTwitch,chatOnYoutube,chatOnTiktok,chatOnKick);
-
     if (chatOnTwitch == true) {
         chatSendPlatforms.push('twitch');
     }

js/twitch/module.js

@@ -9,9 +9,11 @@ const showTwitchMassGiftedSubs      = getURLParam("showTwitchMassGiftedSubs", tr
 const showTwitchRewardRedemptions   = getURLParam("showTwitchRewardRedemptions", true);
 const showTwitchRaids               = getURLParam("showTwitchRaids", true);
 const showTwitchSharedChat          = getURLParam("showTwitchSharedChat", true);
+const showTwitchPronouns            = getURLParam("showTwitchPronouns", false);
 const showTwitchViewers             = getURLParam("showTwitchViewers", true);
 
 const avatars = new Map();
+const pronouns = new Map();
 
 if (showTwitchViewers == false) { document.querySelector('#statistics #twitch').style.display = 'none'; }
 
@@ -102,9 +104,9 @@ async function twitchChatMessage(data) {
             message : text,
             firstMessage,
             isReply,
-            isSharedChat,
             reply: replyData,
         },
+        isSharedChat,
         messageId,
     } = data;
 
@@ -140,11 +142,18 @@ async function twitchChatMessage(data) {
         }
     }
 
+    let fullUserName = userName;
+    let userPronouns = await getUserPronouns('twitch', data.message.username);
+
+    if (showTwitchPronouns == true) {
+        fullUserName = userName + userPronouns;
+    }
+
     const messageData = {
         classes: classes.join(' '),
         avatar,
         badges,
-        userName,
+        fullUserName,
         color,
         message,
         shared: sharedChat,
@@ -611,3 +620,21 @@ async function getTwitchAvatar(user) {
         }
     }
 }
+
+
+async function getUserPronouns(platform, username) {
+    if (pronouns.has(username)) {
+		console.debug(`Pronouns found for ${username}. Getting it from Map...`)
+		return pronouns.get(username);
+	}
+    else {
+        console.debug(`Pronouns not found for ${username}. Retrieving...`)
+        
+        const response = await streamerBotClient.getUserPronouns(platform, username);
+		const pronoun  = response.pronoun.userFound ? `<em class="pronouns">${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}</em>` : '';
+
+		pronouns.set(username, pronoun);
+
+		return pronoun;
+    }
+}