diff --git a/chat.html b/chat.html
index 8c59a47..9c99131 100644
--- a/chat.html
+++ b/chat.html
@@ -61,7 +61,7 @@

diff --git a/css/app.css b/css/app.css
index a063dec..c90e790 100644
--- a/css/app.css
+++ b/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;
}
diff --git a/index.html b/index.html
index 88272dd..9852b55 100644
--- a/index.html
+++ b/index.html
@@ -144,6 +144,7 @@
+
diff --git a/js/app-mockup.js b/js/app-mockup.js
index 49e258e..a83c51c 100644
--- a/js/app-mockup.js
+++ b/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 = {
diff --git a/js/app.js b/js/app.js
index 623fb13..607780d 100644
--- a/js/app.js
+++ b/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(`
@@ -113,7 +113,7 @@ async function addMessageToChat(userID, messageID, platform, data) {
${showBadges == true ? ''+data.badges+'' : ''}
- ${data.userName}:
+ ${data.fullUserName}:
${!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');
}
diff --git a/js/twitch/module.js b/js/twitch/module.js
index bcfdc42..11591e2 100644
--- a/js/twitch/module.js
+++ b/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 ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
+
+ pronouns.set(username, pronoun);
+
+ return pronoun;
+ }
+}
\ No newline at end of file