tg stickers v2

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

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);
             }
         }
     };