made emoji-only messages pretty

dimdenGD · Sep 24, 2023 · 9d204ed · 9d204ed
1 parent c64beb4
commit 9d204ed
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/layouts/header/script.js b/layouts/header/script.js
@@ -809,6 +809,8 @@ let userDataFunction = async user => {
             let m = lastConvo.entries[i].message;
             if(!m) continue;
             let sender = lastConvo.users[m.message_data.sender_id];
+            let clearText = m.message_data.text.replace(/(\s|\n)/g, '');
+            let isOnlyEmojis = isEmojiOnly(clearText) && clearText.length > 0 && clearText.length <= 48;
 
             let messageElement = document.createElement('div');
             messageElement.classList.add('message-element');
@@ -817,6 +819,9 @@ let userDataFunction = async user => {
             } else {
                 messageElement.classList.add('message-element-self');
             }
+            if(isOnlyEmojis) {
+                messageElement.classList.add('message-element-emojis');
+            }
             messageElement.dataset.messageId = m.id;
             messageElement.innerHTML = /*html*/`
                 ${sender.id_str !== user.id_str ? /*html*/`

diff --git a/layouts/header/style.css b/layouts/header/style.css
@@ -872,7 +872,14 @@ input, textarea {
     margin-top: -4px;
     margin-left: -4px;
 }
-
+.message-element-emojis .message-body {
+    background-color: transparent;
+    font-size: 32px;
+}
+.message-element-emojis .emoji {
+    width: 32px;
+    height: 32px;
+}
 
 .message-element-self.message-element-continue .message-body:after,
 .message-element-other.message-element-continue .message-body:after {

diff --git a/scripts/helpers.js b/scripts/helpers.js
@@ -889,6 +889,11 @@ function createEmojiPicker(container, input, style = {}) {
 
     return picker;
 }
+function isEmojiOnly(str) {
+    const stringToTest = str.replace(/ /g,'');
+    const emojiRegex = /^(?:(?:\p{RI}\p{RI}|\p{Emoji}(?:\p{Emoji_Modifier}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?(?:\u{200D}\p{Emoji}(?:\p{Emoji_Modifier}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?)*)|[\u{1f900}-\u{1f9ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}])+$/u;
+    return emojiRegex.test(stringToTest) && Number.isNaN(Number(stringToTest));
+}
 
 const RED = 0.2126;
 const GREEN = 0.7152;