From a2b5a3f34994156c2d6f86422769b0cb4eab01d9 Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Wed, 15 Jul 2026 23:20:43 +0200 Subject: [PATCH] tg stickers v5 --- public/s/css/f0ckm.css | 10 +++++----- public/s/js/comments.js | 19 +++++++++++++++++++ public/s/js/messages.js | 16 ++++++++++++++++ 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index a3871e4..64ba929 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -248,7 +248,7 @@ html[theme='amoled'] { } html[theme="amoled"] .comment-input textarea { - border: 1px solid #ffffff1c; + border: 1px solid var(--nav-border-color); } html[theme="amoled"] #settings-quicknav a:hover, #settings-quicknav a.active { @@ -5626,8 +5626,8 @@ body[type='login'] { max-width: 100%; min-height: 200px; max-height: 200px; - background: var(--dropdown-bg); - border: 1px solid var(--black); + background: var(--bg); + border: 1px solid var(--nav-border-color); padding: 5px; z-index: 1000; overflow-y: auto; @@ -5699,10 +5699,10 @@ body[type='login'] { overflow-x: auto; overflow-y: hidden; flex-shrink: 0; - background: rgba(0,0,0,0.25); + background: var(--bg); border-bottom: 1px solid rgba(255,255,255,0.07); scrollbar-width: none; - padding: 0 2px; + padding: 0; } .emoji-picker-tabs::-webkit-scrollbar { display: none; } diff --git a/public/s/js/comments.js b/public/s/js/comments.js index dd64d85..413a5a6 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -4021,6 +4021,7 @@ class CommentSystem { document.body.appendChild(overlay); let _hideTimer = null; window.stickerPreview = { + isShowing: false, show(src, isVideo) { clearTimeout(_hideTimer); overlay.innerHTML = ''; @@ -4029,9 +4030,11 @@ class CommentSystem { if (isVideo) { el.autoplay = true; el.loop = true; el.muted = true; el.playsInline = true; } overlay.appendChild(el); overlay.classList.add('visible'); + this.isShowing = true; if (isVideo) el.play().catch(() => {}); }, hide() { + this.isShowing = false; overlay.classList.remove('visible'); _hideTimer = setTimeout(() => { overlay.innerHTML = ''; }, 200); } @@ -4068,6 +4071,8 @@ class CommentSystem { } el.title = `:${name}:`; el.onerror = () => { el.style.display = 'none'; }; + el._stickerSrc = url; + el._stickerIsVideo = isVideo; // Hold-to-preview let holdTimer = null; const startHold = () => { holdTimer = setTimeout(() => window.stickerPreview?.show(url, isVideo), 400); }; @@ -4076,6 +4081,10 @@ class CommentSystem { el.addEventListener('mousedown', startHold); el.addEventListener('mouseup', endHold); el.addEventListener('mouseleave', cancelHold); + // Instant switch: if already previewing and mouse enters a new emoji, show it immediately + el.addEventListener('mouseenter', () => { + if (window.stickerPreview?.isShowing) window.stickerPreview.show(url, isVideo); + }); el.addEventListener('touchstart', startHold, { passive: true }); el.addEventListener('touchend', endHold); el.addEventListener('touchcancel', endHold); @@ -4136,6 +4145,16 @@ class CommentSystem { }; gridArea.appendChild(el); }); + + // Touch slide: switch preview immediately as finger moves over a new sticker + gridArea.addEventListener('touchmove', (e) => { + if (!window.stickerPreview?.isShowing) return; + const touch = e.touches[0]; + const target = document.elementFromPoint(touch.clientX, touch.clientY); + if (target && target !== gridArea && (target.tagName === 'IMG' || target.tagName === 'VIDEO') && target._stickerSrc) { + window.stickerPreview.show(target._stickerSrc, target._stickerIsVideo); + } + }, { passive: true }); }; // Build tab buttons diff --git a/public/s/js/messages.js b/public/s/js/messages.js index 15ea2bf..a01f5a2 100644 --- a/public/s/js/messages.js +++ b/public/s/js/messages.js @@ -1784,6 +1784,8 @@ if (window.__dmLoaded) { } el.title = `:${name}:`; el.onerror = () => { el.style.display = 'none'; }; + el._stickerSrc = url; + el._stickerIsVideo = isVideo; // Hold-to-preview (uses shared window.stickerPreview from comments.js) let holdTimer = null; const startHold = () => { holdTimer = setTimeout(() => window.stickerPreview?.show(url, isVideo), 400); }; @@ -1792,6 +1794,10 @@ if (window.__dmLoaded) { el.addEventListener('mousedown', startHold); el.addEventListener('mouseup', endHold); el.addEventListener('mouseleave', cancelHold); + // Instant switch when already previewing + el.addEventListener('mouseenter', () => { + if (window.stickerPreview?.isShowing) window.stickerPreview.show(url, isVideo); + }); el.addEventListener('touchstart', startHold, { passive: true }); el.addEventListener('touchend', endHold); el.addEventListener('touchcancel', endHold); @@ -1857,6 +1863,16 @@ if (window.__dmLoaded) { gridArea.querySelectorAll('video').forEach(v => v.play().catch(() => v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true })) ); + // Touch slide: switch preview immediately as finger moves over a new sticker + gridArea.onTouchMoveBound = null; // reset before re-adding + gridArea.addEventListener('touchmove', (e) => { + if (!window.stickerPreview?.isShowing) return; + const touch = e.touches[0]; + const target = document.elementFromPoint(touch.clientX, touch.clientY); + if (target && target !== gridArea && (target.tagName === 'IMG' || target.tagName === 'VIDEO') && target._stickerSrc) { + window.stickerPreview.show(target._stickerSrc, target._stickerIsVideo); + } + }, { passive: true }); }; packs.forEach((pack) => {