From 46d4b491575e3ec893b475f12c19718ac68f8c25 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Wed, 15 Jul 2026 23:04:43 +0200
Subject: [PATCH] tg stickers v2

---
 public/s/css/f0ckm.css          | 17 ++++++++++++++---
 public/s/js/comments.js         |  8 ++++++--
 public/s/js/sidebar-activity.js | 22 +++++++++++++++++++---
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 0d19a24..e139058 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -5624,7 +5624,8 @@ body[type='login'] {
   position: relative;
   width: 100%;
   max-width: 100%;
-  max-height: 135px;
+  min-height: 200px;
+  max-height: 200px;
   background: var(--dropdown-bg);
   border: 1px solid var(--black);
   padding: 5px;
@@ -5640,6 +5641,7 @@ body[type='login'] {
 
 /* Tabbed mode — switched to column layout by JS when packs are present */
 .emoji-picker.has-tabs {
+  min-height: 200px;
   max-height: 200px;
   overflow: hidden;
   flex-direction: column;
@@ -8967,9 +8969,18 @@ span.badge.badge-current {
 }*/
 
 .sidebar-comment-img.emoji {
-  height: auto;
-  max-width: 60px !important;
+  height: 32px;
+  width: auto;
+  max-width: 200px !important;
   vertical-align: middle;
+  object-fit: contain;
+}
+
+video.sidebar-comment-img.emoji {
+  max-width: 200px !important;
+  vertical-align: middle;
+  object-fit: contain;
+  display: inline-block;
 }
 
 .sidebar-activity .video-embed-wrap {
diff --git a/public/s/js/comments.js b/public/s/js/comments.js
index c8e56e1..5c4c3c0 100644
--- a/public/s/js/comments.js
+++ b/public/s/js/comments.js
@@ -4155,7 +4155,9 @@ class CommentSystem {
                         // Rebuild content only if the cache has been updated since last build
                         buildPickerContent();
                         picker.style.display = ''; // Reset to CSS default (flex)
-                        requestAnimationFrame(() => picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' }));
+                        requestAnimationFrame(() => requestAnimationFrame(() =>
+                            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+                        ));
                         closeHandler = (ev) => {
                             if (!picker.contains(ev.target) && ev.target !== trigger) {
                                 picker.style.display = 'none';
@@ -4225,7 +4227,9 @@ class CommentSystem {
                 }
 
                 container.appendChild(picker);
-                requestAnimationFrame(() => picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' }));
+                requestAnimationFrame(() => requestAnimationFrame(() =>
+                    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+                ));
 
                 // Set up close handler
                 // Set up close handler
diff --git a/public/s/js/sidebar-activity.js b/public/s/js/sidebar-activity.js
index ec3a780..3a7ef33 100644
--- a/public/s/js/sidebar-activity.js
+++ b/public/s/js/sidebar-activity.js
@@ -25,7 +25,11 @@
 
     const renderEmoji = (match, name) => {
         if (customEmojis[name]) {
-            return `<img class="sidebar-comment-img emoji" src="${customEmojis[name]}" alt="${name}" title=":${name}:" loading="lazy">`;
+            const url = customEmojis[name];
+            if (url.endsWith('.webm')) {
+                return `<video class="sidebar-comment-img emoji" src="${url}" title=":${name}:" autoplay loop muted playsinline></video>`;
+            }
+            return `<img class="sidebar-comment-img emoji" src="${url}" alt="${name}" title=":${name}:" loading="lazy">`;
         }
         return match;
     };
@@ -37,6 +41,15 @@
         return div.innerHTML;
     };
 
+    const playSidebarEmojiVideos = (container) => {
+        if (!container) return;
+        container.querySelectorAll('video.emoji').forEach(v => {
+            v.play().catch(() => {
+                v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true });
+            });
+        });
+    };
+
     const ytOembedCache = new Map(); // videoId -> meta object
     const ytOembedPending = new Map(); // videoId -> Promise
 
@@ -592,8 +605,9 @@
         attachMediaLoadListeners(container);
         checkOverflow();
         fetchSidebarYoutubeTitles(container);
-        // Auto-play converted GIF videos
+        // Auto-play converted GIF videos and webm emoji stickers
         container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true }); }); });
+        playSidebarEmojiVideos(container);
         return true;
     };
 
@@ -713,8 +727,9 @@
                         attachMediaLoadListeners(node);
                         checkOverflow(node);
                         fetchSidebarYoutubeTitles(node);
+                        playSidebarEmojiVideos(node);
                     });
-                    // Auto-play converted GIF videos
+                    // Auto-play converted GIF videos and webm emoji stickers
                     container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true }); }); });
                 }
 
@@ -780,6 +795,7 @@
                 attachMediaLoadListeners(node);
                 checkOverflow(node);
                 fetchSidebarYoutubeTitles(container);
+                playSidebarEmojiVideos(node);
             }
         }
     };