`
: `
${authorAvatarHtml}
${authorNameHtml}
${timeStr}
${displayContent}${attachmentsHtml}${pollHtml}
' + (window.f0ckI18n?.sidebar_no_activity || 'No recent activity.') + '
';
hasMore = false;
}
} catch (e) {
console.error("Sidebar Activity: Failed to load activity", e);
if (!hasCache) {
container.innerHTML = '' + (window.f0ckI18n?.sidebar_failed_to_load || 'Failed to load.') + '
';
}
hasMore = false;
} finally {
loading = false;
}
};
const loadMoreActivity = async () => {
const container = document.getElementById('sidebar-activity-container');
if (!container || loading || loadingMore || !hasMore) return;
loadingMore = true;
// Use the current cache length as the exact offset so there's never a gap,
// regardless of the initial fetch limit.
const nextOffset = window._sidebarActivityCache.length;
// Show a subtle loading row at the bottom
const sentinel = document.createElement('div');
sentinel.id = 'sidebar-load-more-sentinel';
sentinel.style.cssText = 'text-align:center;padding:8px 0;font-size:0.78em;color:#666;';
sentinel.textContent = window.f0ckI18n?.sidebar_loading_more || 'Loading…';
container.appendChild(sentinel);
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const res = await fetch(`/activity?json=true&offset=${nextOffset}&limit=${SIDEBAR_PAGE_LIMIT}&mode=${mode}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
// Remove sentinel before inserting real content
const s = document.getElementById('sidebar-load-more-sentinel');
if (s) s.remove();
if (data.success && data.comments && data.comments.length > 0) {
currentPage++;
// Append only comments not already in the cache, up to the global cap
const remaining = SIDEBAR_MAX_COMMENTS - window._sidebarActivityCache.length;
const existingIds = new Set(window._sidebarActivityCache.map(c => String(c.id)));
const newComments = data.comments
.filter(c => !existingIds.has(String(c.id)))
.slice(0, remaining)
.map(c => ({ ...c, body: c.content || c.body }));
window._sidebarActivityCache.push(...newComments);
// Stop loading more if the hard cap is reached
hasMore = data.hasMore === true
&& window._sidebarActivityCache.length < SIDEBAR_MAX_COMMENTS;
// Append new items to DOM
let html = '';
newComments.forEach(c => { html += renderActivityItem(c); });
if (html) {
const temp = document.createElement('div');
temp.innerHTML = html;
const addedNodes = [];
while (temp.firstElementChild) {
const node = temp.firstElementChild;
container.appendChild(node);
addedNodes.push(node);
}
// Keep the IO sentinel at the very end so it triggers on the next scroll
if (ioSentinel) container.appendChild(ioSentinel);
addedNodes.forEach(node => {
attachMediaLoadListeners(node);
fetchSidebarYoutubeTitles(node);
playSidebarEmojiVideos(node);
});
// Defer overflow checks to after layout so measurements are accurate.
addedNodes.forEach(node => checkOverflow(node));
requestAnimationFrame(() => {
// Deferred re-check for image comments — mirrors renderFromCache behaviour.
// Images in newly appended nodes may not be laid out yet at append time.
setTimeout(() => addedNodes.forEach(node => checkOverflow(node)), 1000);
});
// 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 }); }); });
}
if (!hasMore) {
// Show end-of-feed indicator
const end = document.createElement('div');
end.style.cssText = 'text-align:center;padding:8px 0;font-size:0.75em;color:#444;';
end.textContent = window.f0ckI18n?.sidebar_end_of_activity || '─ end of activity ─';
container.appendChild(end);
}
} else {
hasMore = false;
// Show end-of-feed indicator
const end = document.createElement('div');
end.style.cssText = 'text-align:center;padding:8px 0;font-size:0.75em;color:#444;';
end.textContent = window.f0ckI18n?.sidebar_end_of_activity || '─ end of activity ─';
container.appendChild(end);
}
} catch (e) {
console.error("Sidebar Activity: Failed to load more", e);
const s = document.getElementById('sidebar-load-more-sentinel');
if (s) s.remove();
} finally {
loadingMore = false;
}
};
const handleNewActivity = (data) => {
const container = document.getElementById('sidebar-activity-container');
// 1. Deduplicate: check if this comment ID is already in the cache
if (window._sidebarActivityCache.some(c => parseInt(c.id) === parseInt(data.id))) {
window.f0ckDebug("Sidebar Activity: Duplicate comment ignored", data.id);
return;
}
// 2. Update cache (prepend, capped at SIDEBAR_MAX_COMMENTS)
const newItem = {
...data,
body: data.body || data.content,
timeago: (window.f0ckI18n && window.f0ckI18n.timeago_just_now) || 'just now'
};
window._sidebarActivityCache.unshift(newItem);
// Trim cache to the hard cap and remove the evicted DOM node (if any)
if (window._sidebarActivityCache.length > SIDEBAR_MAX_COMMENTS) {
const evicted = window._sidebarActivityCache.pop();
if (container && evicted) {
const evictedEl = document.getElementById('sc' + evicted.id);
if (evictedEl) evictedEl.remove();
}
}
// Update DOM if visible
if (container) {
// is_long may be provided by the server (SSE payload) or absent for legacy events.
// Default to true so the button is always visible; checkOverflow will hide it
// if the rendered content is actually short.
const itemWithLong = { ...newItem, is_long: newItem.is_long !== false };
const html = renderActivityItem(itemWithLong);
const temp = document.createElement('div');
temp.innerHTML = html;
const node = temp.firstElementChild;
if (node) {
node.classList.add('new-item-fade');
container.prepend(node);
attachMediaLoadListeners(node);
checkOverflow(node);
fetchSidebarYoutubeTitles(container);
playSidebarEmojiVideos(node);
}
}
};
const init = async () => {
// Run emoji loading and activity fetching in parallel — avatars appear
// immediately without waiting for the emoji API to respond first.
// After both settle, if emojis finished after the initial render, re-render
// from cache so custom emoji images show on first page load.
const emojiPromise = loadEmojis();
const activityPromise = loadActivity();
await activityPromise;
await emojiPromise;
// If emojis were not yet available when activity first rendered, re-render now.
if (Object.keys(customEmojis).length > 0 && window._sidebarActivityCache.length > 0) {
renderFromCache(true); // force: emojis are now loaded, content changed
}
};
// Listen for live activity from f0ckm.js
document.addEventListener('f0ck:activityReceived', (e) => {
window.f0ckDebug("Sidebar Activity: Live update received", e.detail);
handleNewActivity(e.detail);
});
const handleLiveEdit = (data) => {
const container = document.getElementById('sidebar-activity-container');
// 1. Update cache
if (window._sidebarActivityCache) {
const comment = window._sidebarActivityCache.find(c => String(c.id) === String(data.comment_id));
if (comment) {
comment.content = data.content;
comment.body = data.content;
}
}
// 2. Update DOM if visible
if (container) {
const el = document.getElementById('sc' + data.comment_id);
if (el) {
const inner = el.querySelector('.comment-content-inner');
if (inner) {
const comment = window._sidebarActivityCache.find(c => String(c.id) === String(data.comment_id));
inner.innerHTML = renderCommentContent(data.content, data.comment_id, comment ? comment.item_id : null);
el.classList.remove('new-item-fade');
void el.offsetWidth;
el.classList.add('new-item-fade');
attachMediaLoadListeners(inner);
requestAnimationFrame(() => checkOverflow(inner));
fetchSidebarYoutubeTitles(el);
// Auto-play converted GIF videos
inner.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true }); }); });
}
}
}
};
window.addEventListener('f0ck:comment_edited', (e) => {
window.f0ckDebug("Sidebar Activity: Live edit received", e.detail);
handleLiveEdit(e.detail);
});
// When emojis are refreshed (e.g. after sticker pack import), sync the sidebar
// cache and re-render so newly imported stickers appear in existing entries.
window.addEventListener('f0ck:emojis_ready', () => {
const csCache = (typeof CommentSystem !== 'undefined' && CommentSystem.emojiCache) || null;
if (!csCache || Object.keys(csCache).length === 0) return;
// Merge new emojis into local cache (additive — never removes)
const hadBefore = Object.keys(customEmojis).length;
Object.assign(customEmojis, csCache);
const hasNew = Object.keys(customEmojis).length > hadBefore;
if (hasNew && window._sidebarActivityCache.length > 0) {
renderFromCache(true); // force: new emoji images available, re-render
}
});
let lastBoundMode = typeof window.activeMode !== 'undefined' ? window.activeMode : null;
const getCurrentMimeFilter = () => {
const allowed = window.f0ckSession?.is_anon && Array.isArray(window.f0ckSession?.anon_permissions?.allowed_mimes) ? window.f0ckSession.anon_permissions.allowed_mimes : null;
const urlParams = new URLSearchParams(window.location.search);
let qMime = urlParams.get('mime');
if (qMime !== null) {
qMime = qMime.trim();
if (allowed) {
const parts = qMime.split(',').filter(m => allowed.includes(m));
return parts.length > 0 ? parts.join(',') : (allowed.length < 5 ? allowed.join(',') : '');
}
return qMime;
}
const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
if (cookieMime) {
const val = cookieMime.split('=')[1];
if (typeof val === 'string') {
const cMime = decodeURIComponent(val).trim();
if (allowed) {
const parts = cMime.split(',').filter(m => allowed.includes(m));
return parts.length > 0 ? parts.join(',') : (allowed.length < 5 ? allowed.join(',') : '');
}
return cMime;
}
}
if (allowed && allowed.length < 5) {
return allowed.join(',');
}
return '';
};
let lastBoundMime = getCurrentMimeFilter();
const isStrictMode = () => {
return !!(window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true') || window.location.search.includes('strict=1'));
};
let lastBoundStrict = isStrictMode();
// Handle AJAX item loads
document.addEventListener('f0ck:contentLoaded', () => {
const currentMode = typeof window.activeMode !== 'undefined' ? window.activeMode : null;
const modeChanged = lastBoundMode !== null && lastBoundMode !== currentMode;
lastBoundMode = currentMode;
const currentMime = getCurrentMimeFilter();
const mimeChanged = lastBoundMime !== null && lastBoundMime !== currentMime;
lastBoundMime = currentMime;
const currentStrict = isStrictMode();
const strictChanged = lastBoundStrict !== null && lastBoundStrict !== currentStrict;
lastBoundStrict = currentStrict;
window.f0ckDebug("Sidebar Activity: Page transition detected", modeChanged ? "(Mode changed)" : "", mimeChanged ? "(Mime changed)" : "", strictChanged ? "(Strict changed)" : "");
if (modeChanged || mimeChanged || strictChanged) {
if (modeChanged) {
window._sidebarActivityCache = [];
lastRenderedIds = '';
currentPage = 1;
hasMore = true;
loadActivity(false); // Force reload with loading state
}
recommendationsLoaded = false;
tagFeedLoaded = false;
tagFeedNeedsReload = true;
const activeTabEl = document.querySelector('.sidebar-tab.active')?.dataset.tab;
let savedTab = 'comments';
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
const currentTabName = activeTabEl || savedTab;
if (currentTabName === 'videos' || currentTabName === 'recommendations') {
loadRecommendations(false);
} else if (currentTabName === 'tag' && currentTag) {
loadTagFeed(true);
}
} else {
// Immediately render from cache to avoid flicker
renderFromCache();
// Background sync
loadActivity(true);
}
});
document.addEventListener('f0ck:mimeChanged', (e) => {
const newMime = (e.detail && typeof e.detail.mime !== 'undefined') ? e.detail.mime : getCurrentMimeFilter();
window.f0ckDebug("Sidebar Activity: MIME filter changed", newMime);
lastBoundMime = newMime;
recommendationsLoaded = false;
tagFeedLoaded = false;
tagFeedNeedsReload = true;
const activeTabEl = document.querySelector('.sidebar-tab.active')?.dataset.tab;
let savedTab = 'comments';
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
const currentTabName = activeTabEl || savedTab;
if (currentTabName === 'videos' || currentTabName === 'recommendations') {
loadRecommendations(false);
} else if (currentTabName === 'tag' && currentTag) {
loadTagFeed(true);
}
});
// Sync sidebar and comments-list layout on initial page load (Legacy View Only)
if (typeof syncSidebarAndComments === 'function') {
syncSidebarAndComments();
}
// Video / Media Recommendations Logic
let recommendationsLoading = false;
let recommendationsLoadingMore = false;
let recommendationsLoaded = false;
let currentRecommendations = [];
const seenRecommendationIds = new Set();
const RECOMMENDATIONS_LIMIT = SIDEBAR_MAX_COMMENTS;
let recIoSentinel = null;
let recObserver = null;
const renderVideoCard = (video, options = {}) => {
const videoKey = (window.f0ckSession?.enable_item_slugs !== false && video.slug) ? video.slug : video.id;
const rClass = video.rating_class || 'untagged';
const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
const blurSfw = localStorage.getItem('blurSfw') === 'true';
const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
let isBlurred = false;
if (rClass === 'nsfw' && blurNsfw) isBlurred = true;
else if (rClass === 'nsfl' && blurNsfl) isBlurred = true;
else if (rClass === 'sfw' && blurSfw) isBlurred = true;
else if (rClass === 'untagged' && blurUntagged) isBlurred = true;
const mime = video.mime || '';
const isAudio = mime.startsWith('audio/');
const isVideo = mime.startsWith('video/');
const isImage = mime.startsWith('image/');
let thumbUrl = `/t/${video.id}.webp`;
if (isBlurred) {
thumbUrl = `/t/${video.id}_blur.webp`;
}
if (window.applyThumbCacheBust) thumbUrl = window.applyThumbCacheBust(thumbUrl);
let displayTitle = '';
if (video.title && video.title.trim()) {
displayTitle = video.title.trim();
} else if (video.tags) {
const rawTags = Array.isArray(video.tags)
? video.tags
: (typeof video.tags === 'string' ? video.tags.split(',').map(s => s.trim()).filter(Boolean) : []);
const formattedTags = rawTags
.map(t => (typeof t === 'object' && t !== null ? (t.tag || t.name || '') : String(t)).trim())
.filter(Boolean)
.map(t => (t.startsWith('#') ? t : '#' + t));
if (formattedTags.length > 0) {
displayTitle = formattedTags.join(' ');
}
}
if (!displayTitle) {
displayTitle = `${videoKey}`;
}
const isAnonGuest = window.f0ckSession?.is_anonymized ?? (window.f0ckSession?.guest_anonymize && !window.f0ckSession?.logged_in);
const authorName = isAnonGuest ? 'anonymous' : (video.display_name || video.username);
const userColorStyle = (!isAnonGuest && video.username_color) ? `style="color: ${escapeHtml(video.username_color)}"` : '';
const timeStr = video.stamp
? (window.f0ckTimeAgo ? window.f0ckTimeAgo(new Date(video.stamp * 1000).toISOString()) : '')
: '';
const fullDate = video.stamp ? new Date(video.stamp * 1000).toLocaleString() : '';
const xdBadge = (video.xd_score && video.xd_score > 0)
? ``
: '';
const ext = (video.mime ? video.mime.split('/')[1] : '')
.replace('jpeg', 'jpg')
.replace('x-shockwave-flash', 'flash')
.replace('x-flac', 'flac')
.replace('mpeg', 'mp3')
.toUpperCase();
const formatBadge = ext ? `` : '';
const overlayIcon = isAudio ? 'fa-solid fa-music' : (isVideo ? 'fa-solid fa-play' : 'fa-solid fa-image');
let thumbContentHtml = '';
if (isAudio && !video.has_coverart) {
thumbContentHtml = `
`;
} else {
thumbContentHtml = `
${window.f0ckI18n?.sidebar_no_recommendations || 'No recommendations found.'}
`;
}
} catch (e) {
console.error("Sidebar Recommendations: Failed to load", e);
if (!recommendationsLoaded) {
container.innerHTML = `${window.f0ckI18n?.sidebar_failed_to_load || 'Failed to load.'}
`;
}
} finally {
recommendationsLoading = false;
}
};
const loadMoreRecommendations = async () => {
const container = document.getElementById('sidebar-recommendations-container');
if (!container || recommendationsLoading || recommendationsLoadingMore || !recommendationsLoaded) return;
recommendationsLoadingMore = true;
let indicator = document.getElementById('sidebar-recommendations-load-more');
if (!indicator) {
indicator = document.createElement('div');
indicator.id = 'sidebar-recommendations-load-more';
indicator.style.cssText = 'text-align:center;padding:12px 0;font-size:0.85em;color:#888;';
indicator.innerHTML = '';
}
container.appendChild(indicator);
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const excludeArr = Array.from(seenRecommendationIds).slice(-100);
const affParams = getSessionAffinityParams();
const mime = getCurrentMimeFilter();
const mimeParam = mime ? `&mime=${encodeURIComponent(mime)}` : '';
const res = await fetch(`/api/v2/recommendations?limit=15&mode=${mode}${mimeParam}&exclude_ids=${excludeArr.join(',')}&continuation=1${affParams}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
const items = data.items || data.videos || [];
if (indicator && indicator.parentNode) {
indicator.remove();
}
if (data.success && items.length > 0) {
const freshItems = items.filter(v => !seenRecommendationIds.has(v.id));
if (freshItems.length > 0) {
const temp = document.createElement('div');
let html = '';
freshItems.forEach(v => {
seenRecommendationIds.add(v.id);
html += renderVideoCard(v);
});
temp.innerHTML = html;
while (temp.firstChild) {
container.appendChild(temp.firstChild);
}
attachRecommendationSentinel();
}
}
} catch (e) {
console.error("Sidebar Recommendations: Failed to load more", e);
if (indicator && indicator.parentNode) {
indicator.remove();
}
} finally {
recommendationsLoadingMore = false;
}
};
const attachRecommendationSentinel = () => {
const container = document.getElementById('sidebar-recommendations-container');
if (!container) return;
if (!recIoSentinel) {
recIoSentinel = document.createElement('div');
recIoSentinel.id = 'sidebar-recommendations-io-sentinel';
recIoSentinel.style.height = '1px';
}
container.appendChild(recIoSentinel);
if (typeof IntersectionObserver !== 'undefined') {
if (!recObserver) {
recObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && recommendationsLoaded && !recommendationsLoading && !recommendationsLoadingMore) {
loadMoreRecommendations();
}
}, { root: container, rootMargin: '0px 0px 250px 0px', threshold: 0 });
}
recObserver.disconnect();
recObserver.observe(recIoSentinel);
}
};
const bindRecommendationScrollListener = () => {
const container = document.getElementById('sidebar-recommendations-container');
if (!container) return;
// Fallback for environments without IntersectionObserver
if (typeof IntersectionObserver === 'undefined') {
container.addEventListener('scroll', () => {
if (recommendationsLoading || recommendationsLoadingMore || !recommendationsLoaded) return;
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 150;
if (nearBottom) loadMoreRecommendations();
}, { passive: true });
}
};
const loadVideoRecommendations = loadRecommendations;
// ── Dedicated Tag Feed (Ordered for Tag Views) ───────────────────────
let currentTag = null;
let tagOrder = 'desc'; // 'desc' = newest first (default), 'asc' = oldest first (chronological)
let tagOffset = 0;
let tagTotal = 0;
let tagFeedLoaded = false;
let tagFeedLoading = false;
let tagFeedNeedsReload = false;
let tagHasMore = false;
let tagSentinel = null;
let tagObserver = null;
const getCurrentTag = () => {
const pathMatch = window.location.pathname.match(/^\/tag\/([^/?#]+)/);
if (pathMatch) return decodeURIComponent(pathMatch[1]);
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.get('tag')) return searchParams.get('tag');
if (window.currentTag) return window.currentTag;
return null;
};
const getCurrentItemIdentifiers = () => {
const ids = new Set();
// 1. From active item on the page (never match background grid thumbnails)
if (typeof window.getCurrentItemId === 'function') {
const currentId = window.getCurrentItemId();
if (currentId) ids.add(String(currentId).trim());
} else {
const idElem = document.querySelector('#onara-item-mount [data-item-id], .item-layout-container[data-item-id], #comments-container[data-item-id]');
if (idElem?.dataset?.itemId) {
ids.add(String(idElem.dataset.itemId).trim());
}
}
const idLink = document.querySelector('#onara-item-mount .id-link, .item-layout-container .id-link, #main.item-view .id-link');
if (idLink) {
if (idLink.dataset.itemId) ids.add(String(idLink.dataset.itemId).trim());
const txt = idLink.textContent.trim();
if (txt) ids.add(txt);
}
// 2. From URL pathname (/tag/:tag/:slugOrId or /:slugOrId)
const segments = window.location.pathname.split('/').filter(Boolean);
if (segments.length >= 2 && segments[0] === 'tag') {
if (segments[2]) {
ids.add(decodeURIComponent(segments[2]).trim());
}
} else if (segments.length === 1) {
const forbidden = ['s', 'b', 't', 'ca', 'a', 'login', 'register', 'settings', 'about', 'terms', 'rules', 'api', 'logout', 'auth', 'admin', 'mod', 'comments', 'notifications', 'feed', 'upload', 'tags', 'halls', 'ranking', 'abyss', 'random', 'scroller', 'p'];
if (!forbidden.includes(segments[0])) {
ids.add(decodeURIComponent(segments[0]).trim());
}
}
return Array.from(ids).filter(Boolean);
};
const getCurrentItemKey = () => {
const ids = getCurrentItemIdentifiers();
return ids.length > 0 ? ids[0] : null;
};
let isReCenteringFeed = false;
const highlightActiveTagCard = (scrollIntoView = false) => {
const identifiers = getCurrentItemIdentifiers();
const container = document.getElementById('sidebar-tag-container');
if (!container) return;
let matchedCard = null;
container.querySelectorAll('.sidebar-video-card').forEach(card => {
const cardId = card.dataset.id ? String(card.dataset.id).trim() : '';
const cardSlug = card.dataset.slug ? String(card.dataset.slug).trim() : '';
const isMatch = identifiers.length > 0 && (
(cardId && identifiers.includes(cardId)) ||
(cardSlug && identifiers.includes(cardSlug))
);
if (isMatch) {
card.classList.add('active-tag-item');
if (!matchedCard) matchedCard = card;
} else {
card.classList.remove('active-tag-item');
}
});
if (matchedCard && scrollIntoView) {
const isTagTabActive = document.querySelector('.sidebar-tab.active')?.dataset.tab === 'tag' &&
container.style.display !== 'none';
if (isTagTabActive) {
try {
const containerRect = container.getBoundingClientRect();
const cardRect = matchedCard.getBoundingClientRect();
const targetScrollTop = container.scrollTop + (cardRect.top - containerRect.top) - (container.clientHeight / 2) + (cardRect.height / 2);
container.scrollTo({ top: Math.max(0, targetScrollTop), behavior: 'smooth' });
} catch (_) {
matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
} else if (!matchedCard && identifiers.length > 0 && currentTag && !isReCenteringFeed && !tagFeedLoading) {
// Active item belongs to current tag context but is not in currently rendered slice
// (e.g. after pressing Random in tag). Center feed around this active item!
isReCenteringFeed = true;
loadTagFeed(true, identifiers[0]).finally(() => {
isReCenteringFeed = false;
});
}
};
let userManuallySelectedNonTagTab = false;
const updateTagTabVisibility = (forceSwitchToTag = false) => {
const tag = getCurrentTag();
const tagBtn = document.getElementById('sidebar-tab-tag');
if (!tagBtn) return;
if (tag) {
tagBtn.style.display = 'inline-flex';
tagBtn.title = `#${tag}`;
tagBtn.setAttribute('aria-label', `#${tag}`);
const titleNameEl = document.querySelector('.sidebar-tag-name');
if (titleNameEl) titleNameEl.textContent = `#${tag}`;
if (currentTag !== tag) {
currentTag = tag;
tagOffset = 0;
tagFeedLoaded = false;
tagFeedNeedsReload = true;
userManuallySelectedNonTagTab = false;
// When entering or switching tag view (e.g. /tag/cat), automatically jump to the tag tab
switchSidebarTab('tag');
} else {
if (forceSwitchToTag || (!userManuallySelectedNonTagTab && document.querySelector('.sidebar-tab.active')?.dataset.tab !== 'tag')) {
switchSidebarTab('tag');
} else {
highlightActiveTagCard(true);
}
}
} else {
tagBtn.style.display = 'none';
currentTag = null;
tagFeedLoaded = false;
userManuallySelectedNonTagTab = false;
const activeTab = document.querySelector('.sidebar-tab.active')?.dataset.tab;
if (activeTab === 'tag') {
switchSidebarTab('recommendations');
}
}
};
const loadTagFeed = async (reset = false, focusId = null) => {
const container = document.getElementById('sidebar-tag-container');
const itemsContainer = container?.querySelector('.sidebar-tag-items-container');
if (!container || !itemsContainer || tagFeedLoading) return;
if (!currentTag) return;
tagFeedLoading = true;
tagFeedNeedsReload = false;
if (reset) {
tagOffset = 0;
itemsContainer.innerHTML = `
`;
}
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const mime = getCurrentMimeFilter();
const isStrict = isStrictMode();
let url = `/api/v2/tag-feed?tag=${encodeURIComponent(currentTag)}&order=${tagOrder}&offset=${tagOffset}&limit=20&mode=${mode}`;
if (isStrict) {
url += `&strict=1`;
}
if (mime) {
url += `&mime=${encodeURIComponent(mime)}`;
}
if (focusId) {
url += `&focus_id=${encodeURIComponent(focusId)}`;
}
const res = await fetch(url, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
const items = data.items || [];
tagTotal = data.total || 0;
tagOffset = (data.offset ?? tagOffset) + items.length;
tagHasMore = typeof data.hasMore !== 'undefined' ? !!data.hasMore : (tagOffset < tagTotal);
// Update counter in header
const countEl = container.querySelector('.sidebar-tag-count');
if (countEl) countEl.textContent = `(${tagTotal})`;
// Update order button icon and tooltip
const orderBtn = container.querySelector('.sidebar-tag-order-btn');
if (orderBtn) {
if (tagOrder === 'asc') {
orderBtn.innerHTML = '';
orderBtn.title = 'Chronological (Oldest first) — Click for Newest first';
} else {
orderBtn.innerHTML = '';
orderBtn.title = 'Newest first (default) — Click for Oldest first';
}
}
if (data.success && items.length > 0) {
tagFeedLoaded = true;
const identifiers = getCurrentItemIdentifiers();
let html = '';
items.forEach(v => {
const vId = String(v.id).trim();
const vSlug = String(v.slug || '').trim();
const isActive = identifiers.length > 0 && (
(vId && identifiers.includes(vId)) ||
(vSlug && identifiers.includes(vSlug))
);
html += renderVideoCard(v, { isTagFeed: true, tag: currentTag, isActive });
});
if (reset) {
itemsContainer.innerHTML = html;
setTimeout(() => highlightActiveTagCard(true), 60);
} else {
itemsContainer.insertAdjacentHTML('beforeend', html);
highlightActiveTagCard(false);
}
initTagSentinel();
} else if (reset) {
itemsContainer.innerHTML = `
`;
}
} catch (err) {
console.error('[TAG-FEED] Failed to load tag items:', err);
if (reset) {
itemsContainer.innerHTML = `
`;
}
} finally {
tagFeedLoading = false;
}
};
const loadMoreTagFeed = async () => {
if (tagFeedLoading || !tagHasMore || !currentTag) return;
tagOffset += 20;
await loadTagFeed(false);
};
const initTagSentinel = () => {
const container = document.getElementById('sidebar-tag-container');
const itemsContainer = container?.querySelector('.sidebar-tag-items-container');
if (!container || !itemsContainer) return;
if (tagSentinel && tagSentinel.parentNode) {
tagSentinel.remove();
}
if (!tagHasMore) return;
tagSentinel = document.createElement('div');
tagSentinel.className = 'sidebar-tag-sentinel';
tagSentinel.style.cssText = 'height: 20px; margin: 10px 0;';
itemsContainer.appendChild(tagSentinel);
if (tagObserver) tagObserver.disconnect();
tagObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !tagFeedLoading && tagHasMore) {
loadMoreTagFeed();
}
}, {
root: container,
rootMargin: '200px'
});
tagObserver.observe(tagSentinel);
};
const initTagOrderButton = () => {
const container = document.getElementById('sidebar-tag-container');
if (!container || container.dataset.orderBound === 'true') return;
container.dataset.orderBound = 'true';
const orderBtn = container.querySelector('.sidebar-tag-order-btn');
if (orderBtn) {
orderBtn.addEventListener('click', (e) => {
e.preventDefault();
tagOrder = (tagOrder === 'desc') ? 'asc' : 'desc';
loadTagFeed(true);
});
}
};
const bindTagContainerEvents = () => {
const container = document.getElementById('sidebar-tag-container');
if (!container || container.dataset.eventsBound === 'true') return;
container.dataset.eventsBound = 'true';
container.addEventListener('click', (e) => {
const card = e.target.closest('.sidebar-video-card');
if (card) {
container.querySelectorAll('.sidebar-video-card').forEach(c => c.classList.remove('active-tag-item'));
card.classList.add('active-tag-item');
}
});
};
const switchSidebarTab = (tabName) => {
if (window.clearHoverPreview) {
window.clearHoverPreview();
}
const normalizedTab = (tabName === 'videos' || tabName === 'recommendations')
? 'recommendations'
: (tabName === 'tag' ? 'tag' : tabName);
const tabs = document.querySelectorAll('.sidebar-tab');
const contents = document.querySelectorAll('.sidebar-tab-content');
tabs.forEach(t => {
const tTab = (t.dataset.tab === 'videos' || t.dataset.tab === 'recommendations')
? 'recommendations'
: (t.dataset.tab === 'tag' ? 'tag' : t.dataset.tab);
if (tTab === normalizedTab) {
t.classList.add('active');
} else {
t.classList.remove('active');
}
});
contents.forEach(c => {
const cTab = (c.dataset.tabContent === 'videos' || c.dataset.tabContent === 'recommendations')
? 'recommendations'
: (c.dataset.tabContent === 'tag' ? 'tag' : c.dataset.tabContent);
if (cTab === normalizedTab) {
c.classList.add('active');
c.style.display = 'block';
} else {
c.classList.remove('active');
c.style.display = 'none';
}
});
try {
localStorage.setItem('sidebar_active_tab', normalizedTab);
} catch (_) {}
if (normalizedTab === 'recommendations') {
if (!recommendationsLoaded) {
loadRecommendations();
}
} else if (normalizedTab === 'tag') {
if (tagFeedNeedsReload || !tagFeedLoaded) {
loadTagFeed(true);
} else {
setTimeout(() => highlightActiveTagCard(true), 60);
}
}
};
const initSidebarTabs = () => {
const tabsContainer = document.querySelector('.sidebar-tabs');
if (tabsContainer) {
tabsContainer.addEventListener('click', (e) => {
const btn = e.target.closest('.sidebar-tab');
if (btn && btn.dataset.tab) {
e.preventDefault();
if (btn.dataset.tab !== 'tag') {
userManuallySelectedNonTagTab = true;
} else {
userManuallySelectedNonTagTab = false;
}
switchSidebarTab(btn.dataset.tab);
}
});
}
// Restore persisted active tab if any
let savedTab = 'comments';
try {
savedTab = localStorage.getItem('sidebar_active_tab') || 'comments';
} catch (_) {}
if (getCurrentTag()) {
switchSidebarTab('tag');
} else if (savedTab === 'videos' || savedTab === 'recommendations') {
switchSidebarTab('recommendations');
} else {
switchSidebarTab(savedTab);
}
};
const replaceCardWithNewRandom = async (card) => {
if (!card || card.dataset.swapping === 'true') return;
if (window.clearHoverPreview) {
window.clearHoverPreview();
}
card.dataset.swapping = 'true';
card.classList.add('sidebar-card-swapping');
const clickedId = parseInt(card.dataset.id, 10);
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const container = document.getElementById('sidebar-recommendations-container');
const visibleIds = [];
if (container) {
container.querySelectorAll('.sidebar-video-card').forEach(c => {
const cid = parseInt(c.dataset.id, 10);
if (cid) visibleIds.push(cid);
});
}
const excludeSet = new Set([...seenRecommendationIds, ...visibleIds]);
if (clickedId) {
excludeSet.add(clickedId);
if (window.f0ckInterestEngine) {
window.f0ckInterestEngine.recordSuggestionClick(clickedId);
}
}
const excludeArr = Array.from(excludeSet).slice(-120);
const cards = Array.from(container ? container.querySelectorAll('.sidebar-video-card') : []);
const cardIndex = cards.indexOf(card);
let preferParam = '';
if (cardIndex >= 0 && cardIndex < 3) {
// Keep exactly 1 recommendation in the first 3 cards
const isPersonalized = card.dataset.personalized === 'true';
preferParam = `&prefer_personalized=${isPersonalized ? 'true' : 'false'}`;
} else if (cardIndex >= 3) {
// Ensure recommendations remain sporadic (never consecutive)
const prevCard = cards[cardIndex - 1];
const nextCard = cards[cardIndex + 1];
const prevIsRec = prevCard && prevCard.dataset.personalized === 'true';
const nextIsRec = nextCard && nextCard.dataset.personalized === 'true';
if (prevIsRec || nextIsRec) {
preferParam = '&prefer_personalized=false';
}
}
const affParams = getSessionAffinityParams();
const mime = getCurrentMimeFilter();
const mimeParam = mime ? `&mime=${encodeURIComponent(mime)}` : '';
const res = await fetch(`/api/v2/recommendations?limit=1&mode=${mode}${mimeParam}&exclude_ids=${excludeArr.join(',')}${preferParam}${affParams}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
const items = data.items || data.videos || [];
if (data.success && items.length > 0) {
const newItem = items[0];
seenRecommendationIds.add(newItem.id);
const idx = currentRecommendations.findIndex(v => v.id === clickedId);
if (idx !== -1) {
currentRecommendations[idx] = newItem;
} else {
currentRecommendations.push(newItem);
}
const temp = document.createElement('div');
temp.innerHTML = renderVideoCard(newItem).trim();
const newCard = temp.firstElementChild;
if (newCard && card.parentNode) {
card.replaceWith(newCard);
}
} else {
card.classList.remove('sidebar-card-swapping');
delete card.dataset.swapping;
}
} catch (e) {
console.error("Sidebar Recommendations: Failed to swap clicked card", e);
if (card) {
card.classList.remove('sidebar-card-swapping');
delete card.dataset.swapping;
}
}
};
const bindRecommendationEvents = () => {
const container = document.getElementById('sidebar-recommendations-container');
if (!container || container.dataset.eventsBound === 'true') return;
container.dataset.eventsBound = 'true';
const handleCardAction = (e) => {
// Only respond to primary click (0) or middle-click (1). Ignore right click (2).
if (e.button !== 0 && e.button !== 1) return;
const card = e.target.closest('.sidebar-video-card');
if (card) {
replaceCardWithNewRandom(card);
}
};
container.addEventListener('click', handleCardAction);
container.addEventListener('auxclick', handleCardAction);
};
// Reload recommendations or sync tag feed when user triggers Random (#random, #nav-random, or 'r' key)
const handleRandomAction = () => {
recommendationsLoaded = false;
const tag = getCurrentTag();
if (tag) {
userManuallySelectedNonTagTab = false;
switchSidebarTab('tag');
} else {
let savedTab = 'comments';
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
if (savedTab === 'videos' || savedTab === 'recommendations') {
loadRecommendations(false);
}
}
};
document.addEventListener('f0ck:randomTriggered', handleRandomAction);
document.addEventListener('click', (e) => {
const btn = e.target.closest('#random, #nav-random, a[href="/random"], a[href$="/random"]');
if (btn) {
handleRandomAction();
}
}, true);
// Handle explicit mode changes (e.g. from item page where full transition doesn't occur)
document.addEventListener('f0ck:modeChanged', (e) => {
window.f0ckDebug("Sidebar Activity: Mode change detected", e.detail.mode);
lastBoundMode = e.detail.mode;
window._sidebarActivityCache = [];
lastRenderedIds = '';
currentPage = 1;
hasMore = true;
loadActivity(false);
recommendationsLoaded = false;
tagFeedLoaded = false;
tagFeedNeedsReload = true;
const activeTabEl = document.querySelector('.sidebar-tab.active')?.dataset.tab;
let savedTab = 'comments';
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
const currentTabName = activeTabEl || savedTab;
if (currentTabName === 'videos' || currentTabName === 'recommendations') {
loadRecommendations(false);
} else if (currentTabName === 'tag' && currentTag) {
loadTagFeed(true);
}
});
// Handle strict mode toggle
document.addEventListener('f0ck:strictChanged', (e) => {
const currentStrict = (e.detail && typeof e.detail.strict !== 'undefined') ? !!e.detail.strict : isStrictMode();
window.f0ckDebug("Sidebar Activity: Strict mode change detected", currentStrict);
lastBoundStrict = currentStrict;
tagFeedLoaded = false;
tagFeedNeedsReload = true;
const activeTabEl = document.querySelector('.sidebar-tab.active')?.dataset.tab;
let savedTab = 'comments';
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
const currentTabName = activeTabEl || savedTab;
if (currentTabName === 'tag' && currentTag) {
loadTagFeed(true);
}
});
// When the current user posts a comment, silently refresh sidebar to show it
document.addEventListener('f0ck:commentPosted', () => {
window.f0ckDebug("Sidebar Activity: Own comment posted, refreshing...");
loadActivity(true);
});
// Infinite scroll: load older comments when scrolling near the bottom
const bindScrollListener = () => {
const container = document.getElementById('sidebar-activity-container');
if (!container) return;
// Use IntersectionObserver if available (performant), fallback to scroll event
if (typeof IntersectionObserver !== 'undefined') {
// Create the sentinel once at module level so re-renders can re-append the same node
if (!ioSentinel) {
ioSentinel = document.createElement('div');
ioSentinel.id = 'sidebar-io-sentinel';
ioSentinel.style.height = '1px';
container.appendChild(ioSentinel);
}
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
loadMoreActivity();
}
}, { root: container, rootMargin: '0px 0px 80px 0px', threshold: 0 });
observer.observe(ioSentinel);
} else {
container.addEventListener('scroll', () => {
if (loading || loadingMore || !hasMore) return;
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 100;
if (nearBottom) loadMoreActivity();
}, { passive: true });
}
};
// Initial load
const _origInit = init;
const initWithScroll = async () => {
initSidebarTabs();
initTagOrderButton();
bindTagContainerEvents();
updateTagTabVisibility();
document.addEventListener('f0ck:contentLoaded', () => {
updateTagTabVisibility();
setTimeout(() => highlightActiveTagCard(true), 60);
});
window.addEventListener('popstate', () => {
setTimeout(() => {
updateTagTabVisibility();
highlightActiveTagCard(true);
}, 60);
});
bindRecommendationEvents();
bindRecommendationScrollListener();
await _origInit();
bindScrollListener();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initWithScroll);
} else {
initWithScroll();
}
// Live updates are handled via SSE (f0ck:activityReceived event)
})();