Added Pronouns Support + Bug Fixes
This commit is contained in:
@@ -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="">
|
||||
|
16
css/app.css
16
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;
|
||||
}
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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 = {
|
||||
|
@@ -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');
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user