add support for zero width emotes

related to #242
fgl27 · Dec 18, 2024 · 4be43a7 · 4be43a7
1 parent d7010f7
commit 4be43a7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/app/index.html b/app/index.html
@@ -1388,9 +1388,9 @@
                 transform: translateX(0);
                 transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
                 will-change: transform;
-                /* on chrome do to the focus class side_panel_new_icons_text that uses background: linear-gradient 
-            is needed to add a border here to prevent visual glitches right on the border of the element
-            border-right: 2px solid #000000;*/
+                /* on chrome do to the focus class side_panel_new_icons_text that uses background: linear-gradient
+                is needed to add a border here to prevent visual glitches right on the border of the element
+                border-right: 2px solid #000000;*/
             }
 
             .side_panel_fix {
@@ -2351,6 +2351,18 @@
                 margin-bottom: -0.35em;
             }
 
+            .zero-width-container {
+                display: inline-block;
+                position: relative;
+            }
+
+            .zero-width-emote {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
             .emoji {
                 min-width: 1em;
                 height: 1em;
@@ -2630,16 +2642,16 @@
             }
 
             /* Simple way to see center of screen
-        .center {
-            border: 2px solid blue;
-            margin: auto;
-            background: #F00;
-            position: relative;
-            text-align: center;
-            top: 50%;
-            width: 20%;
-            color: #FFF;
-        }*/
+            .center {
+                border: 2px solid blue;
+                margin: auto;
+                background: #F00;
+                position: relative;
+                text-align: center;
+                top: 50%;
+                width: 20%;
+                color: #FFF;
+            }*/
         </style>
     </head>
 

diff --git a/app/specific/ChatLive.js b/app/specific/ChatLive.js
@@ -842,7 +842,8 @@ function ChatLive_loadEmotesseven_tv(data, chat_number, isGlobal) {
                 id: id,
                 chat_div: chat_div,
                 '4x': url,
-                srcset: srcset
+                srcset: srcset,
+                chat_div_zero: emote.flags === 256 ? chat_div.replace('emoticon', 'emoticon zero-width-emote') : null
             };
 
             //Don't copy to prevent shallow clone

diff --git a/app/thirdparty/kapchat.js b/app/thirdparty/kapchat.js
@@ -58,13 +58,23 @@ function extraMessageTokenize(message, chat_number, bits) {
         } else {
             emote = extraEmotes[chat_number][SplittedMessage[i]];
 
-            SplittedMessage[i] = emote ? emote.chat_div : mescape(SplittedMessage[i]);
+            //some 7tv emotes goes direct on top of the center of the previews emote
+            if (i && emote && emote.chat_div_zero && Main_A_includes_B(SplittedMessage[i - 1], 'emoticon')) {
+                SplittedMessage[i] = '';
+                SplittedMessage[i - 1] = zeroWidth(SplittedMessage[i - 1], emote.chat_div_zero);
+            } else {
+                SplittedMessage[i] = emote ? emote.chat_div : mescape(SplittedMessage[i]);
+            }
         }
     }
 
     return SplittedMessage.join(' ') + (bits ? ' ' + bits + ' bits' : '');
 }
 
+function zeroWidth(parent, zero) {
+    return '<div class="zero-width-container" >' + parent + zero + '</div>';
+}
+
 function findCheerInToken(message, chat_number) {
     var cheerPrefixes = Object.keys(cheers[ChatLive_selectedChannel_id[chat_number]]),
         tokenLower = message.toLowerCase(),