Horizontal Message Animation Adjust

css/app.css

@@ -467,20 +467,25 @@ body {
 
 
 
-
-
 .wrapper.horizontal {
     align-items: flex-end;
 }
 
-
 .wrapper.horizontal #chat {
     flex-direction: row-reverse;
     align-items: flex-end;
-    gap: 10px;
+    gap: 15px;
     width: max-content;
 }
 
+.wrapper.horizontal #chat .message {
+    width: 0;
+    white-space: nowrap
+}
+
+.wrapper.horizontal #chat .message > div {
+    width: fit-content;
+}
 
 
 

js/app.js

@@ -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 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 class="animate__animated ${chatHorizontal == true ? 'animate__fadeIn' : 'animate__fadeInUp'} animate__faster">
 
                 ${data.classes.includes("first-message") ? '<span class="first-chatter">✨</span>' : '' }
 
@@ -145,6 +145,10 @@ async function addMessageToChat(userID, messageID, platform, data) {
     
     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();

js/twitch/module.js

@@ -601,15 +601,10 @@ async function getTwitchAvatar(user) {
         }
         else {
             console.debug(`Twitch avatar not found for ${user}! Getting it from DECAPI!`);
-
             var decapi = await fetch('https://decapi.me/twitch/avatar/' + user);
-            var newavatar = await decapi.text();
+            var newavatar = await decapi.text()
-            newavatar = newavatar.trim();
 
-            if (!newavatar || newavatar.startsWith("User not found:")) {
+            if (!newavatar) { newavatar = 'https://static-cdn.jtvnw.net/user-default-pictures-uv/cdd517fe-def4-11e9-948e-784f43822e80-profile_image-300x300.png'; }
-                console.debug(`Avatar not found for ${user}. Using default image.`);
-                newavatar = 'https://static-cdn.jtvnw.net/user-default-pictures-uv/cdd517fe-def4-11e9-948e-784f43822e80-profile_image-300x300.png';
-            }
             
             avatars.set(user, newavatar);
             return newavatar;

js/youtube/module.js

@@ -302,6 +302,7 @@ async function YouTubeGiftReceivedMessage(data) {
         eventId: messageID,
         tier
     } = data;
+
     const [avatar, message] = await Promise.all([
         ``,
         currentLang.youtube.giftedmembers({
@@ -309,6 +310,7 @@ async function YouTubeGiftReceivedMessage(data) {
             tier : tier
         })
     ]);
+    
     const classes = 'giftedtrainmembers';
     const messageData = {
         classes: classes,