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