From 5facee3ccd4ec925935929b7c2f78eb3d50dd88a Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Thu, 16 Jul 2026 02:00:57 +0200 Subject: [PATCH] faaaaa --- public/s/css/f0ckm.css | 32 ++++++++++++++++++-- public/s/js/comments.js | 66 +++++++++++++++++++++++++++-------------- 2 files changed, 72 insertions(+), 26 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 63d7e61..a3f8490 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -5666,6 +5666,7 @@ body[type='login'] { } .sticker-preview-overlay.visible { opacity: 1; + pointer-events: auto; } .sticker-preview-overlay img, .sticker-preview-overlay video { @@ -5676,6 +5677,32 @@ body[type='login'] { object-fit: contain; } +/* Fav button inside sticker preview overlay */ +.sticker-preview-fav-btn { + position: absolute; + bottom: 20px; + right: 20px; + width: 44px; + height: 44px; + border-radius: 50%; + border: 2px solid rgba(255,255,255,0.2); + background: rgba(0,0,0,0.55); + color: rgba(255,255,255,0.55); + font-size: 1.2em; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: color 0.15s, border-color 0.15s, background 0.15s; + backdrop-filter: blur(4px); +} +.sticker-preview-fav-btn:hover, +.sticker-preview-fav-btn.is-fav { + color: var(--emoji-fav-color, #f5c518); + border-color: var(--emoji-fav-color, #f5c518); + background: rgba(0,0,0,0.75); +} + .emoji-picker img { width: 60px; height: 60px; @@ -5734,9 +5761,8 @@ body[type='login'] { } .ep-tab img, -.ep-tab video { - width: 28px; - height: 28px; +.ep-tab video, +.ep-tab i { object-fit: contain; pointer-events: none; } diff --git a/public/s/js/comments.js b/public/s/js/comments.js index bbda2ed..05bd364 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -4022,13 +4022,30 @@ class CommentSystem { let _hideTimer = null; window.stickerPreview = { isShowing: false, - show(src, isVideo) { + show(src, isVideo, name, url) { clearTimeout(_hideTimer); overlay.innerHTML = ''; const el = isVideo ? document.createElement('video') : document.createElement('img'); el.src = src; if (isVideo) { el.autoplay = true; el.loop = true; el.muted = true; el.playsInline = true; } overlay.appendChild(el); + // Fav button — always shown in overlay for easy mobile access + if (name && url && window._emojiPickerFavUtils) { + const isFav = window._emojiPickerFavUtils.has(name); + const favBtn = document.createElement('button'); + favBtn.className = 'sticker-preview-fav-btn' + (isFav ? ' is-fav' : ''); + favBtn.innerHTML = ''; + favBtn.addEventListener('click', (e) => { + e.stopPropagation(); + window._emojiPickerFavUtils.toggle(name, url); + const nowFav = window._emojiPickerFavUtils.has(name); + favBtn.classList.toggle('is-fav', nowFav); + favBtn.innerHTML = ''; + window._emojiPickerRefresh?.(); + }); + favBtn.addEventListener('touchend', (e) => { e.preventDefault(); e.stopPropagation(); favBtn.click(); }); + overlay.appendChild(favBtn); + } overlay.classList.add('visible'); this.isShowing = true; if (isVideo) el.play().catch(() => {}); @@ -4039,9 +4056,9 @@ class CommentSystem { _hideTimer = setTimeout(() => { overlay.innerHTML = ''; }, 200); } }; - // Click anywhere on the overlay to dismiss + // Click/tap overlay background to dismiss overlay.addEventListener('click', () => window.stickerPreview.hide()); - // Global mouseup: dismiss if the mouse is released anywhere outside the picker + // Global mouseup: dismiss if released outside document.addEventListener('mouseup', () => { if (window.stickerPreview.isShowing) window.stickerPreview.hide(); }); @@ -4158,9 +4175,8 @@ class CommentSystem { badge.className = 'fa-solid fa-star ep-fav-badge'; el.appendChild(badge); } - // Hold-to-preview (400ms) + Long-hold-to-favorite (700ms, mobile-friendly) + // Hold-to-preview (400ms) — on mobile, tap the ★ in the overlay to favorite let holdTimer = null; - let favHoldTimer = null; let holdFired = false; let favHoldFired = false; const startHold = () => { @@ -4168,27 +4184,12 @@ class CommentSystem { favHoldFired = false; holdTimer = setTimeout(() => { holdFired = true; - window.stickerPreview?.show(url, isVideo); + window.stickerPreview?.show(url, isVideo, name, url); }, 400); - // 700ms: transition from preview to favorites menu (mobile long-press) - favHoldTimer = setTimeout(() => { - if (holdFired) { - window.stickerPreview?.hide(); - holdFired = false; - favHoldFired = true; - const rect = el.getBoundingClientRect(); - window._favContextMenu?.show( - rect.left + rect.width / 2, rect.top, - name, url, - () => showTab(activeTabId) - ); - } - }, 700); }; - const cancelHold = () => { clearTimeout(holdTimer); clearTimeout(favHoldTimer); }; + const cancelHold = () => { clearTimeout(holdTimer); }; const endHold = () => { clearTimeout(holdTimer); - clearTimeout(favHoldTimer); if (holdFired || favHoldFired) { holdFired = false; favHoldFired = false; @@ -4255,6 +4256,7 @@ class CommentSystem { const showTab = (packId) => { activeTabId = packId; + window._emojiPickerRefresh = () => showTab(activeTabId); tabBar.querySelectorAll('.ep-tab').forEach(t => t.classList.toggle('active', t.dataset.packId === String(packId ?? 'null'))); gridArea.innerHTML = ''; @@ -4314,6 +4316,22 @@ class CommentSystem { }, { passive: true }); }; + // Helper: reliable touch handling for tab buttons on mobile + const addTabTouch = (btn, cb) => { + let ts = null; + btn.addEventListener('touchstart', (e) => { + ts = { x: e.touches[0].clientX, y: e.touches[0].clientY }; + e.stopPropagation(); + }, { passive: true }); + btn.addEventListener('touchend', (e) => { + if (!ts) return; + const dx = Math.abs(e.changedTouches[0].clientX - ts.x); + const dy = Math.abs(e.changedTouches[0].clientY - ts.y); + ts = null; + if (dx < 10 && dy < 10) { e.preventDefault(); cb(); } + }); + }; + // Build tab buttons — Favorites first const favTab = document.createElement('button'); favTab.className = 'ep-tab ep-tab-favs'; @@ -4323,6 +4341,7 @@ class CommentSystem { favTab.innerHTML = ''; favTab.addEventListener('mousedown', e => e.preventDefault()); favTab.addEventListener('click', () => showTab('__favs__')); + addTabTouch(favTab, () => showTab('__favs__')); tabBar.appendChild(favTab); packs.forEach((pack, i) => { @@ -4341,10 +4360,11 @@ class CommentSystem { icon.loading = 'lazy'; tab.appendChild(icon); } else { - tab.textContent = '☺'; + tab.textContent = '\u263A'; } tab.addEventListener('mousedown', e => e.preventDefault()); tab.addEventListener('click', () => showTab(pack.id ?? null)); + addTabTouch(tab, () => showTab(pack.id ?? null)); tabBar.appendChild(tab); });