f0ck algos
This commit is contained in:
+442
-12
@@ -2229,7 +2229,7 @@ html[theme='95'] .item-main-content .metadata {
|
||||
width: 320px;
|
||||
background: var(--dropdown-bg);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
z-index: 1000;
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
/* Arrow caret pointing up toward the icon */
|
||||
@@ -2585,6 +2585,7 @@ body.layout-modern .global-sidebar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: var(--navbar-h, 50px) !important;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
@@ -2625,6 +2626,7 @@ body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
top: var(--navbar-h, 50px) !important;
|
||||
padding-left: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
@@ -2918,6 +2920,432 @@ body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Sidebar Tabs */
|
||||
.sidebar-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: var(--nav-bg);
|
||||
border-bottom: 1px solid var(--nav-border-color);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 11px 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-color, #888);
|
||||
opacity: 0.55;
|
||||
font-size: 1.15em;
|
||||
position: relative;
|
||||
transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-tab:hover {
|
||||
color: var(--accent);
|
||||
opacity: 0.9;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.sidebar-tab.active {
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.sidebar-tab.active::after {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* Sidebar Tab Content panels */
|
||||
.sidebar-tab-content {
|
||||
display: none;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.sidebar-tab-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Video Recommendations List */
|
||||
.sidebar-recommendations-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 6px;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.sidebar-recommendations-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Recommendation Video Cards (YouTube-style) */
|
||||
.sidebar-video-card {
|
||||
margin-bottom: 5px;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-video-card:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sidebar-video-card:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.sidebar-video-card.sidebar-card-swapping {
|
||||
opacity: 0.35;
|
||||
filter: grayscale(0.6);
|
||||
transition: opacity 0.5s ease, filter 0.5s ease;
|
||||
}
|
||||
|
||||
.sidebar-video-card.sidebar-card-entering {
|
||||
animation: sidebarCardEnter 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes sidebarCardEnter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.91) translateY(8px);
|
||||
filter: brightness(1.2) contrast(0.95);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.75;
|
||||
transform: scale(0.97) translateY(3px);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.95;
|
||||
transform: scale(0.995) translateY(0.5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
filter: brightness(1) contrast(1);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-video-card .sidebar-video-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-video-thumb-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.sidebar-video-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-video-card:hover .sidebar-video-thumb {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.sidebar-video-play-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-video-play-overlay i {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sidebar-video-card:hover .sidebar-video-play-overlay {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.sidebar-video-badge {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
font-size: 0.65em;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.sidebar-video-badge.rating-sfw {
|
||||
background-color: var(--badge-sfw);
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-video-badge.rating-nsfw {
|
||||
background-color: var(--badge-nsfw);
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-video-badge.rating-nsfl {
|
||||
background-color: var(--badge-nsfl);
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-video-badge.rating-untagged {
|
||||
background-color: var(--badge-tag, #37474f);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.sidebar-media-format-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
font-size: 0.6em;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1e1b4b, #312e81);
|
||||
color: var(--accent);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.audio {
|
||||
background: linear-gradient(135deg, #0f172a, #1e293b);
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-video-details {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sidebar-video-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-video-title {
|
||||
font-size: 0.86em;
|
||||
font-weight: 600;
|
||||
color: var(--text-color, #eee);
|
||||
line-height: 1.35;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar-video-card:hover .sidebar-video-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-video-channel {
|
||||
font-size: 0.76em;
|
||||
color: #999;
|
||||
margin-top: 3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sidebar-video-user {
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-video-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.7em;
|
||||
color: #777;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar-video-time {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.sidebar-video-xd {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-personalized-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
color: var(--accent, #a78bfa);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.sidebar-personalized-pill i {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Light / Paper themes */
|
||||
html[theme='light'] .sidebar-tabs,
|
||||
html[theme='paper'] .sidebar-tabs {
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-tab,
|
||||
html[theme='paper'] .sidebar-tab {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-tab:hover,
|
||||
html[theme='paper'] .sidebar-tab:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-video-card,
|
||||
html[theme='paper'] .sidebar-video-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-video-card:hover,
|
||||
html[theme='paper'] .sidebar-video-card:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-video-title,
|
||||
html[theme='paper'] .sidebar-video-title {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-video-channel,
|
||||
html[theme='paper'] .sidebar-video-channel {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
html[theme='light'] .sidebar-video-play-overlay,
|
||||
html[theme='paper'] .sidebar-video-play-overlay {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Theme 95 */
|
||||
html[theme='95'] .sidebar-tabs {
|
||||
background: #c0c0c0;
|
||||
border-bottom: 2px solid #808080;
|
||||
}
|
||||
|
||||
html[theme='95'] .sidebar-tab {
|
||||
border-right: 1px solid #808080;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[theme='95'] .sidebar-tab.active {
|
||||
background: #dfdfdf;
|
||||
box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
|
||||
}
|
||||
|
||||
html[theme='95'] .sidebar-video-card {
|
||||
background: #c0c0c0;
|
||||
border: 2px solid #808080;
|
||||
border-right-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
html[theme='95'] .sidebar-video-title {
|
||||
color: #000;
|
||||
font-family: 'MS Sans Serif', sans-serif;
|
||||
}
|
||||
|
||||
#sidebar-activity-container.sidebar-comments-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -9735,7 +10163,7 @@ input#s_avatar {
|
||||
background: var(--dropdown-bg);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
border-radius: 0;
|
||||
z-index: 10000;
|
||||
z-index: 10000 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -11010,10 +11438,6 @@ video.sidebar-comment-img.emoji {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.sidebar-video-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment-content img:not(.emoji) {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
@@ -11522,7 +11946,7 @@ div.sbt {
|
||||
body > nav.navbar {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 1005 !important;
|
||||
z-index: 10070 !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
@@ -11648,17 +12072,22 @@ body > nav.navbar {
|
||||
}
|
||||
|
||||
/* Right-anchor all dropdowns inside nav-right-group */
|
||||
.nav-right-group .nav-user-menu {
|
||||
.nav-right-group .nav-user-menu,
|
||||
#nav-user-menu,
|
||||
#nav-visitor-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: none;
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
.nav-right-group .notif-dropdown {
|
||||
.nav-right-group .notif-dropdown,
|
||||
#notif-dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
/* anchor to bell container right edge; JS overrides on mobile */
|
||||
transform: none;
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
/* Shift arrow to sit directly under the bell icon */
|
||||
@@ -19075,7 +19504,7 @@ body.onara-modal-open nav.navbar {
|
||||
opacity: 1 !important;
|
||||
filter: none !important;
|
||||
pointer-events: auto !important;
|
||||
z-index: 10060 !important;
|
||||
z-index: 10070 !important;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
@@ -19084,7 +19513,7 @@ body.onara-modal-open nav.navbar {
|
||||
|
||||
/* Ensure hamburger dropdown is interactive and above the Onara modal */
|
||||
body.onara-modal-open nav.navbar .nav-collapse {
|
||||
z-index: 10065 !important;
|
||||
z-index: 10075 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
@@ -19098,7 +19527,8 @@ body.onara-modal-open .global-sidebar-right {
|
||||
body.onara-modal-open #sidebar-drag-zone {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
z-index: 10061 !important;
|
||||
z-index: 10059 !important;
|
||||
top: var(--navbar-h, 50px) !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open .admin-bar {
|
||||
|
||||
+200
-3
@@ -4739,6 +4739,7 @@ window.cancelAnimFrame = (function () {
|
||||
// Special check for random
|
||||
if (link.id === 'random' || link.id === 'nav-random') {
|
||||
e.preventDefault();
|
||||
document.dispatchEvent(new CustomEvent('f0ck:randomTriggered'));
|
||||
|
||||
const outEls = document.querySelectorAll('.content, ._204863, .item_title');
|
||||
outEls.forEach(el => {
|
||||
@@ -4970,9 +4971,9 @@ window.cancelAnimFrame = (function () {
|
||||
const parts = pathname.split('/').filter(Boolean);
|
||||
const isItemLink = isItemPath(pathname);
|
||||
if (isItemLink) {
|
||||
// Links inside comment bodies or MOTD should not inherit tag/hall/user context
|
||||
const _inComment = anyLink.closest(".comment, .comment-content, .comment-body, .motd-content");
|
||||
loadItemAjax(targetUrl, !_inComment);
|
||||
// Links inside comment bodies, MOTD, or sidebar suggestions/recommendations should not inherit tag/hall/user context
|
||||
const _skipInherit = anyLink.dataset.inheritContext === 'false' || anyLink.closest(".comment, .comment-content, .comment-body, .motd-content, .sidebar-video-card, .sidebar-recommendations-list, #sidebar-recommendations-container");
|
||||
loadItemAjax(targetUrl, !_skipInherit);
|
||||
} else {
|
||||
const isBrand = anyLink.classList.contains('navbar-brand');
|
||||
const fromModal = document.body.classList.contains('onara-modal-open') || !!anyLink.closest('#onara-modal');
|
||||
@@ -13192,3 +13193,199 @@ document.addEventListener('keydown', (e) => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ── User Interest & Behavioral Recommendation Engine (Client Tracking) ──
|
||||
(function() {
|
||||
const STORAGE_TAGS = 'f0ck_guest_tag_affinity';
|
||||
const STORAGE_CREATORS = 'f0ck_guest_creator_affinity';
|
||||
|
||||
let currentTrackingItem = null;
|
||||
|
||||
const loadStoredMap = (key) => {
|
||||
try {
|
||||
const data = localStorage.getItem(key);
|
||||
return data ? JSON.parse(data) : {};
|
||||
} catch (_) {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
const saveStoredMap = (key, map) => {
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify(map));
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
const updateLocalAffinity = (key, name, delta) => {
|
||||
if (!name || typeof name !== 'string') return;
|
||||
const cleanName = name.trim().toLowerCase();
|
||||
if (!cleanName) return;
|
||||
|
||||
const map = loadStoredMap(key);
|
||||
const existing = map[cleanName] || { score: 0, count: 0, ts: Date.now() };
|
||||
existing.score = Math.max(-10, Math.min(500, (existing.score || 0) + delta));
|
||||
existing.count = (existing.count || 0) + 1;
|
||||
existing.ts = Date.now();
|
||||
map[cleanName] = existing;
|
||||
|
||||
// Prune to top 60 to prevent storage bloat
|
||||
const entries = Object.entries(map);
|
||||
if (entries.length > 60) {
|
||||
entries.sort((a, b) => b[1].score - a[1].score);
|
||||
const pruned = Object.fromEntries(entries.slice(0, 50));
|
||||
saveStoredMap(key, pruned);
|
||||
} else {
|
||||
saveStoredMap(key, map);
|
||||
}
|
||||
};
|
||||
|
||||
const f0ckInterestEngine = {
|
||||
getTopAffinities: () => {
|
||||
const tagsMap = loadStoredMap(STORAGE_TAGS);
|
||||
const creatorsMap = loadStoredMap(STORAGE_CREATORS);
|
||||
|
||||
const topTags = Object.entries(tagsMap)
|
||||
.filter(([, v]) => v.score > 0)
|
||||
.sort((a, b) => b[1].score - a[1].score)
|
||||
.slice(0, 15)
|
||||
.map(([k]) => k);
|
||||
|
||||
const topCreators = Object.entries(creatorsMap)
|
||||
.filter(([, v]) => v.score > 0)
|
||||
.sort((a, b) => b[1].score - a[1].score)
|
||||
.slice(0, 10)
|
||||
.map(([k]) => k);
|
||||
|
||||
return { topTags, topCreators };
|
||||
},
|
||||
|
||||
recordInteraction: ({ itemId, tags = [], creator = '', duration = 0, percent = 0, type = 'dwell' }) => {
|
||||
if (!itemId) return;
|
||||
|
||||
// Behavioral weighting: time spent is a primary signal
|
||||
let delta = 1.0;
|
||||
if (type === 'skip' || (duration < 2.5 && percent < 15)) {
|
||||
delta = -1.5;
|
||||
} else if (type === 'click_suggestion') {
|
||||
delta = 2.5;
|
||||
} else if (type === 'finish' || percent >= 75 || duration >= 20) {
|
||||
delta = 3.0;
|
||||
} else if (duration >= 8 || percent >= 35) {
|
||||
delta = 1.5;
|
||||
}
|
||||
|
||||
// Update local storage (for persistent guest learning across browser restarts)
|
||||
if (Array.isArray(tags)) {
|
||||
tags.forEach(t => updateLocalAffinity(STORAGE_TAGS, t, delta));
|
||||
}
|
||||
if (creator) {
|
||||
updateLocalAffinity(STORAGE_CREATORS, creator, delta);
|
||||
}
|
||||
|
||||
// Send beacon to backend
|
||||
const payload = {
|
||||
item_id: itemId,
|
||||
duration: Math.round(duration * 10) / 10,
|
||||
percent: Math.round(percent),
|
||||
type
|
||||
};
|
||||
|
||||
try {
|
||||
if (navigator.sendBeacon) {
|
||||
const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
|
||||
navigator.sendBeacon('/api/v2/track/interaction', blob);
|
||||
} else {
|
||||
fetch('/api/v2/track/interaction', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
keepalive: true
|
||||
}).catch(() => {});
|
||||
}
|
||||
} catch (_) {}
|
||||
},
|
||||
|
||||
recordSuggestionClick: (itemId, tags = [], creator = '') => {
|
||||
if (!itemId) return;
|
||||
f0ckInterestEngine.recordInteraction({ itemId, tags, creator, type: 'click_suggestion' });
|
||||
},
|
||||
|
||||
flushCurrentTracking: () => {
|
||||
if (!currentTrackingItem) return;
|
||||
const { itemId, startTime, maxPercent, tags, creator } = currentTrackingItem;
|
||||
currentTrackingItem = null;
|
||||
|
||||
const duration = (Date.now() - startTime) / 1000;
|
||||
let type = 'dwell';
|
||||
if (duration < 2.5 && maxPercent < 15) {
|
||||
type = 'skip';
|
||||
} else if (maxPercent >= 75 || duration >= 20) {
|
||||
type = 'finish';
|
||||
}
|
||||
|
||||
f0ckInterestEngine.recordInteraction({
|
||||
itemId,
|
||||
tags,
|
||||
creator,
|
||||
duration,
|
||||
percent: maxPercent,
|
||||
type
|
||||
});
|
||||
},
|
||||
|
||||
startTrackingItem: () => {
|
||||
f0ckInterestEngine.flushCurrentTracking();
|
||||
|
||||
// Only track if on an item page
|
||||
const itemIdEl = document.querySelector('[data-item-id]');
|
||||
const itemId = itemIdEl ? parseInt(itemIdEl.dataset.itemId, 10) : null;
|
||||
if (!itemId) return;
|
||||
|
||||
const tags = Array.from(document.querySelectorAll('#tags .tag-text, #tags .tag-badge, .tag-link'))
|
||||
.map(el => el.textContent.trim().replace(/^#/, ''))
|
||||
.filter(Boolean);
|
||||
|
||||
const creatorEl = document.querySelector('#a_username, [data-username]');
|
||||
const creator = creatorEl ? (creatorEl.dataset.username || creatorEl.textContent.trim()) : '';
|
||||
|
||||
currentTrackingItem = {
|
||||
itemId,
|
||||
startTime: Date.now(),
|
||||
maxPercent: 0,
|
||||
tags,
|
||||
creator
|
||||
};
|
||||
|
||||
// Attach media playback listeners
|
||||
const media = document.querySelector('video, audio');
|
||||
if (media) {
|
||||
const updatePercent = () => {
|
||||
if (!currentTrackingItem || !media.duration) return;
|
||||
const p = (media.currentTime / media.duration) * 100;
|
||||
if (p > currentTrackingItem.maxPercent) {
|
||||
currentTrackingItem.maxPercent = p;
|
||||
}
|
||||
};
|
||||
|
||||
media.addEventListener('timeupdate', updatePercent, { passive: true });
|
||||
media.addEventListener('ended', () => {
|
||||
if (currentTrackingItem) currentTrackingItem.maxPercent = 100;
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.f0ckInterestEngine = f0ckInterestEngine;
|
||||
|
||||
// Listen to item content loads and page teardown
|
||||
document.addEventListener('f0ck:contentLoaded', f0ckInterestEngine.startTrackingItem);
|
||||
window.addEventListener('beforeunload', f0ckInterestEngine.flushCurrentTracking);
|
||||
window.addEventListener('pagehide', f0ckInterestEngine.flushCurrentTracking);
|
||||
|
||||
// Initial check on load
|
||||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||
setTimeout(f0ckInterestEngine.startTrackingItem, 200);
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', () => setTimeout(f0ckInterestEngine.startTrackingItem, 200));
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -1044,6 +1044,13 @@
|
||||
currentPage = 1;
|
||||
hasMore = true;
|
||||
loadActivity(false); // Force reload with loading state
|
||||
|
||||
recommendationsLoaded = false;
|
||||
let savedTab = 'comments';
|
||||
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
|
||||
if (savedTab === 'videos') {
|
||||
loadVideoRecommendations(false);
|
||||
}
|
||||
} else {
|
||||
// Immediately render from cache to avoid flicker
|
||||
renderFromCache();
|
||||
@@ -1057,6 +1064,456 @@
|
||||
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) => {
|
||||
const videoKey = (window.f0ckSession?.enable_item_slugs && 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 && video.tags.length > 0) {
|
||||
displayTitle = video.tags.map(t => '#' + t).join(' ');
|
||||
} else {
|
||||
const typeLabel = isAudio ? 'Audio' : (isVideo ? 'Video' : 'Image');
|
||||
displayTitle = `${typeLabel} #${video.id}`;
|
||||
}
|
||||
|
||||
const isAnonGuest = 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)
|
||||
? `<span class="sidebar-video-xd xd-tier-${video.xd_tier || 0}">xD ${video.xd_score}</span>`
|
||||
: '';
|
||||
|
||||
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 ? `<span class="sidebar-media-format-badge">${escapeHtml(ext)}</span>` : '';
|
||||
const overlayIcon = isAudio ? 'fa-solid fa-music' : (isVideo ? 'fa-solid fa-play' : 'fa-solid fa-image');
|
||||
|
||||
let thumbContentHtml = '';
|
||||
if (isAudio && !video.has_coverart) {
|
||||
thumbContentHtml = `
|
||||
<div class="sidebar-media-placeholder audio">
|
||||
<i class="fa-solid fa-music"></i>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
thumbContentHtml = `
|
||||
<img src="${thumbUrl}" class="sidebar-video-thumb" alt="${escapeHtml(displayTitle)}" loading="lazy" onerror="this.style.display='none'; if(this.nextElementSibling) this.nextElementSibling.classList.remove('hidden');" />
|
||||
<div class="sidebar-media-placeholder ${isAudio ? 'audio' : ''} hidden">
|
||||
<i class="${overlayIcon}"></i>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const forYouBadge = video.personalized
|
||||
? `<span class="sidebar-personalized-pill" title="Personalized recommendation based on your interests"><i class="fa-solid fa-wand-magic-sparkles"></i> For You</span>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="sidebar-video-card" data-id="${video.id}" data-slug="${escapeHtml(video.slug || '')}" data-personalized="${video.personalized ? 'true' : 'false'}">
|
||||
<a href="/${videoKey}" class="sidebar-video-link" data-mode="${rClass}" data-inherit-context="false">
|
||||
<div class="sidebar-video-thumb-wrap">
|
||||
${thumbContentHtml}
|
||||
<div class="sidebar-video-play-overlay"><i class="${overlayIcon}"></i></div>
|
||||
${formatBadge}
|
||||
<span class="sidebar-video-badge rating-${rClass}">${rClass.toUpperCase()}</span>
|
||||
</div>
|
||||
<div class="sidebar-video-details">
|
||||
<div class="sidebar-video-info">
|
||||
<div class="sidebar-video-title" title="${escapeHtml(displayTitle)}">${escapeHtml(displayTitle)}</div>
|
||||
<div class="sidebar-video-channel">
|
||||
<span class="sidebar-video-user" ${userColorStyle}>${escapeHtml(authorName)}</span>
|
||||
</div>
|
||||
<div class="sidebar-video-meta">
|
||||
${timeStr ? `<span class="sidebar-video-time" title="${escapeHtml(fullDate)}">${escapeHtml(timeStr)}</span>` : ''}
|
||||
${(timeStr && xdBadge) ? `•` : ''}
|
||||
${xdBadge}
|
||||
${((timeStr || xdBadge) && forYouBadge) ? `•` : ''}
|
||||
${forYouBadge}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const getSessionAffinityParams = () => {
|
||||
try {
|
||||
const aff = window.f0ckInterestEngine ? window.f0ckInterestEngine.getTopAffinities() : null;
|
||||
if (!aff) return '';
|
||||
let q = '';
|
||||
if (aff.topTags && aff.topTags.length > 0) {
|
||||
q += `&session_tags=${encodeURIComponent(aff.topTags.join(','))}`;
|
||||
}
|
||||
if (aff.topCreators && aff.topCreators.length > 0) {
|
||||
q += `&session_creators=${encodeURIComponent(aff.topCreators.join(','))}`;
|
||||
}
|
||||
return q;
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const loadRecommendations = async (silent = false) => {
|
||||
const container = document.getElementById('sidebar-recommendations-container');
|
||||
if (!container || recommendationsLoading) return;
|
||||
|
||||
recommendationsLoading = true;
|
||||
if (!silent && !recommendationsLoaded) {
|
||||
container.innerHTML = `
|
||||
<div class="sidebar-loading-state">
|
||||
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
<span>${window.f0ckI18n?.sidebar_loading_recommendations || 'Loading recommendations...'}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
try {
|
||||
seenRecommendationIds.clear();
|
||||
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
|
||||
const affParams = getSessionAffinityParams();
|
||||
const res = await fetch(`/api/v2/recommendations?limit=${RECOMMENDATIONS_LIMIT}&mode=${mode}${affParams}`, {
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
});
|
||||
const data = await res.json();
|
||||
const items = data.items || data.videos || [];
|
||||
|
||||
if (data.success && items.length > 0) {
|
||||
currentRecommendations = items;
|
||||
recommendationsLoaded = true;
|
||||
|
||||
let html = '';
|
||||
items.forEach(v => {
|
||||
seenRecommendationIds.add(v.id);
|
||||
html += renderVideoCard(v);
|
||||
});
|
||||
container.innerHTML = html;
|
||||
if (silent) {
|
||||
container.scrollTop = 0;
|
||||
}
|
||||
attachRecommendationSentinel();
|
||||
bindRecommendationEvents();
|
||||
} else {
|
||||
container.innerHTML = `
|
||||
<div style="text-align:center;padding:20px;color:#888;">
|
||||
${window.f0ckI18n?.sidebar_no_recommendations || 'No recommendations found.'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Sidebar Recommendations: Failed to load", e);
|
||||
if (!recommendationsLoaded) {
|
||||
container.innerHTML = `<div style="text-align:center;padding:20px;color:#888;">${window.f0ckI18n?.sidebar_failed_to_load || 'Failed to load.'}</div>`;
|
||||
}
|
||||
} 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 = '<i class="fa-solid fa-circle-notch fa-spin"></i>';
|
||||
}
|
||||
container.appendChild(indicator);
|
||||
|
||||
try {
|
||||
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
|
||||
const excludeArr = Array.from(seenRecommendationIds).slice(-100);
|
||||
const affParams = getSessionAffinityParams();
|
||||
const res = await fetch(`/api/v2/recommendations?limit=15&mode=${mode}&exclude_ids=${excludeArr.join(',')}${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;
|
||||
|
||||
const switchSidebarTab = (tabName) => {
|
||||
const normalizedTab = (tabName === 'videos' || tabName === 'recommendations') ? 'recommendations' : 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;
|
||||
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;
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
switchSidebarTab(btn.dataset.tab);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Restore persisted active tab if any
|
||||
let savedTab = 'comments';
|
||||
try {
|
||||
savedTab = localStorage.getItem('sidebar_active_tab') || 'comments';
|
||||
} catch (_) {}
|
||||
|
||||
if (savedTab === 'videos' || savedTab === 'recommendations') {
|
||||
switchSidebarTab('recommendations');
|
||||
}
|
||||
};
|
||||
|
||||
const replaceCardWithNewRandom = async (card) => {
|
||||
if (!card || card.dataset.swapping === 'true') return;
|
||||
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 affParams = getSessionAffinityParams();
|
||||
const res = await fetch(`/api/v2/recommendations?limit=1&mode=${mode}&exclude_ids=${excludeArr.join(',')}${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) {
|
||||
newCard.classList.add('sidebar-card-entering');
|
||||
card.replaceWith(newCard);
|
||||
setTimeout(() => {
|
||||
newCard.classList.remove('sidebar-card-entering');
|
||||
}, 2200);
|
||||
}
|
||||
} 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 when user triggers Random (#random, #nav-random, or 'r' key)
|
||||
const handleRandomAction = () => {
|
||||
recommendationsLoaded = false;
|
||||
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);
|
||||
@@ -1066,6 +1523,13 @@
|
||||
currentPage = 1;
|
||||
hasMore = true;
|
||||
loadActivity(false);
|
||||
|
||||
recommendationsLoaded = false;
|
||||
let savedTab = 'comments';
|
||||
try { savedTab = localStorage.getItem('sidebar_active_tab'); } catch (_) {}
|
||||
if (savedTab === 'videos' || savedTab === 'recommendations') {
|
||||
loadRecommendations(false);
|
||||
}
|
||||
});
|
||||
|
||||
// When the current user posts a comment, silently refresh sidebar to show it
|
||||
@@ -1108,6 +1572,9 @@
|
||||
// Initial load
|
||||
const _origInit = init;
|
||||
const initWithScroll = async () => {
|
||||
initSidebarTabs();
|
||||
bindRecommendationEvents();
|
||||
bindRecommendationScrollListener();
|
||||
await _origInit();
|
||||
bindScrollListener();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user