Smartcraft-Media-Tech/chatrd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Rodrigo Emanuel
2025-04-16 07:26:11 -03:00
committed by GitHub
parent 662a33d06a
commit c1b86f98a1
3 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
css/app.css
View File

@@ -290,6 +290,33 @@ body {
#chat.horizontal {
display: flex;
align-items: center;
width: max-content;
right: 0;
gap: 15px;
}
#chat.horizontal .message {
margin: 0;
}
#chat.horizontal .message.twitch.announcement > div {
display: inline-flex;
}
#chat.horizontal .message.twitch.rewards-redemption > div {
display: inline-flex;
}
#statistics {
position: fixed;
z-index: 11;
@@ -300,7 +327,6 @@ body {
display: flex;
gap: 15px;
justify-content: flex-end;
background: rgba(18, 18, 18, 0.9);
backdrop-filter: blur(5px);
font-weight: bold;
-webkit-mask-image: linear-gradient(to top, transparent, black 40%);

1
index.html
View File

@@ -28,6 +28,7 @@
<option value="ptbr">Brazilian Portuguese</option>
</select>
</div>
<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>
<div class="setting"><label>Avatars</label><label class="switch"><input type="checkbox" name="showAvatar" checked><span class="slider"></span></label></div>
<div class="setting"><label>Timestamps</label><label class="switch"><input type="checkbox" name="showTimestamps" checked><span class="slider"></span></label></div>

12
js/app.js
View File

@@ -7,6 +7,7 @@ const streamerBotServerPort = getURLParam("streamerBotServerPort", "8080
const chatThreshhold = 50;
const chatContainer = document.querySelector('#chat');
const currentLang = lang[getURLParam("language", 'ptbr')];
const chatHorizontal = getURLParam("chatHorizontal", false);
const showPlatform = getURLParam("showPlatform", false);
const showAvatar = getURLParam("showAvatar", false);
const showTimestamps = getURLParam("showTimestamps", false);
@@ -27,6 +28,7 @@ const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLower
/* ----------------------- */
if (showPlatformStatistics == false) { document.querySelector('#statistics').style.display = 'none'; }
if (chatHorizontal == true) { chatContainer.classList.add('horizontal'); }
/* ----------------------- */
/* STREAMER.BOT CONNECTION */
@@ -67,7 +69,7 @@ async function addMessageToChat(userID, messageID, platform, data) {
const html = DOMPurify.sanitize(`
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} message" style="">
<div class="animate__animated animate__fadeInUp animate__faster">
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
${!data.shared ? '' : data.shared}
@@ -110,7 +112,7 @@ async function addEventToChat(userID, messageID, platform, data) {
const html = DOMPurify.sanitize(`
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} message event" style="">
<div class="animate__animated animate__faster animate__fadeInUp">
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
${!data.reply ? '' : data.reply}
${showPlatform == true ? '<i class="platform '+(platform == 'money' ? 'fa-solid' : 'fa-brands')+' fa-'+platform+'"></i>' : '&nbsp;&nbsp;' }
@@ -154,10 +156,8 @@ const whatTimeIsIt = () => {
function removeExtraChatMessages() {
const chatMessages = chatContainer.querySelectorAll('div.message').length;
if (chatMessages > chatThreshhold) {
if (chatMessages >= chatThreshhold) {
for (let i = 0; i < Math.floor(chatThreshhold/2); i++) {
chatContainer.removeChild(chatContainer.firstElementChild);
}
@@ -212,7 +212,7 @@ function createRandomString(length) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let result = "";
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}