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

Horizontal Message Animation Adjust

Browse Source
This commit is contained in:
Rodrigo Emanuel
2025-06-02 21:34:43 -03:00
committed by GitHub
parent 6711293fe5
commit 00b8b1d024
5 changed files with 89 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
js/app.js
View File

@@ -98,8 +98,8 @@ async function addMessageToChat(userID, messageID, platform, data) {
if (ttsSpeakerBotChat == true) { ttsSpeakerBotSays(data.userName, currentLang.ttschat, data.message); }
let html = DOMPurify.sanitize(`
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} ${chatBiggerEmotes == true ? 'bigger-emojis' : ''} message" style="">
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} ${chatBiggerEmotes == true ? 'bigger-emojis' : ''} message" style="" >
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeIn' : 'animate__fadeInUp'} animate__faster">
${data.classes.includes("first-message") ? '<span class="first-chatter">✨</span>' : '' }
@@ -142,9 +142,13 @@ async function addMessageToChat(userID, messageID, platform, data) {
html = html.replace('[CHATMODERATIONSNIPPETYOUTUBE]', chatmodyoutube);
chatContainer.insertAdjacentHTML('afterbegin', html);
const messageElement = document.getElementById(messageID);
if (chatHorizontal == true) {
await adjustMessagesHorizontal(messageElement);
}
if (hideAfter > 0) {
setTimeout(function () {
messageElement.style.opacity = 0;
@@ -159,13 +163,14 @@ async function addMessageToChat(userID, messageID, platform, data) {
async function addEventToChat(userID, messageID, platform, data) {
if (ttsSpeakerBotEvents == true) { ttsSpeakerBotSays(data.userName, '', data.message); }
const html = DOMPurify.sanitize(`
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} message event" style="">
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeIn' : 'animate__fadeInUp'} animate__faster">
${!data.reply ? '' : data.reply}
${showPlatform == true ? '<span class="platform"><img src="images/logo-'+platform+'.svg" ></span>' : '' }
@@ -182,6 +187,10 @@ async function addEventToChat(userID, messageID, platform, data) {
const messageElement = document.getElementById(messageID);
if (chatHorizontal == true) {
await adjustMessagesHorizontal(messageElement);
}
if (hideAfter > 0) {
setTimeout(function () {
messageElement.style.opacity = 0;
@@ -196,6 +205,67 @@ async function addEventToChat(userID, messageID, platform, data) {
async function adjustMessagesHorizontal(messageElement) {
const container = messageElement.querySelector('.animate__animated');
if (!container) return;
const images = container.querySelectorAll("img.emote");
function waitImageLoad(img) {
return new Promise((resolve) => {
if (img.complete) {
adjustEmotesWidthInMessage(img);
resolve();
}
else {
img.addEventListener("load", () => {
adjustEmotesWidthInMessage(img);
resolve();
});
img.addEventListener("error", () => resolve());
}
});
}
await Promise.all(Array.from(images).map(img => waitImageLoad(img)));
const messageElementWidth = Math.floor(container.offsetWidth + 10) + 'px';
Object.assign(messageElement.style, {
width: messageElementWidth,
overflow: "visible"
});
}
function adjustEmotesWidthInMessage(img) {
const width = img.offsetWidth;
img.style.width = width + "px";
}
const whatTimeIsIt = () => {
const now = new Date();
const hours24 = now.getHours();