kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

gfds

Browse Source
This commit is contained in:
kibi
2026-09-18 00:32:53 +02:00
parent c8cfe07c70
commit 74f7884525
19 changed files with 1996 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/s/css/f0ckm.css
+244 -81
View File
@@ -42,13 +42,13 @@
--posts-meta-bg: #000000b8;
--x2154: #215483;
--bg-canvas-opacity: 0.81;
--bg-canvas-blur: 151px;
--bg-canvas-blur: 30px; /* runtime value set by applyBackgroundOpacitySettings() */
--bg-canvas-zoom: 1.38;
--bg-canvas-color: rgba(0, 0, 0, 0.09);
--bg-canvas-color-opacity: 0.09;
--onara-bg-opacity: 0.4;
--onara-bg-opacity: 0.6;
--onara-backdrop-blur: 5px;
--onara-grid-dim-opacity: 0.38;
--onara-grid-dim-opacity: 1.0;
}
html:not([theme]), html[theme=""] {
@@ -1844,7 +1844,7 @@ html[theme="f0ck95"] #next {
html[theme="4d"] {
--accent: #f2ef0b;
--accent-rgb: 31, 178, 176;
--accent-rgb: 242, 239, 11;
--bg: #242424;
--black: #000;
--white: #fff;
@@ -3215,7 +3215,7 @@ body.sidebar-right-hidden #sidebar-drag-zone {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--accent-rgb, 153, 255, 0), 0.12), rgba(0, 0, 0, 0.45)), var(--nav-bg, #1e1e1e);
background: linear-gradient(135deg, rgba(var(--accent-rgb, 128, 128, 128), 0.12), rgba(0, 0, 0, 0.45)), var(--nav-bg, #1e1e1e);
color: var(--accent);
font-size: 2em;
}
@@ -3233,6 +3233,23 @@ body.sidebar-right-hidden #sidebar-drag-zone {
background: #000000;
}
.audio-cover-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: inherit;
transition: opacity 0.25s ease, filter 0.25s ease;
will-change: opacity, transform, filter;
overflow: hidden;
}
.audio-reactive-bg {
position: absolute;
top: 0;
@@ -3242,8 +3259,9 @@ body.sidebar-right-hidden #sidebar-drag-zone {
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
will-change: background, opacity;
transition: opacity 0.35s ease;
will-change: opacity, transform;
overflow: hidden;
}
.audio-cover-circle {
@@ -3256,8 +3274,8 @@ body.sidebar-right-hidden #sidebar-drag-zone {
transform: translate(-50%, -50%);
width: 125px;
height: 125px;
max-width: calc(100% - 40px);
max-height: calc(100% - 40px);
max-width: none;
max-height: none;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-size: cover;
@@ -3270,29 +3288,13 @@ body.sidebar-right-hidden #sidebar-drag-zone {
outline: none !important;
overflow: visible;
pointer-events: none;
z-index: 1;
z-index: 2;
will-change: transform, box-shadow, border-color;
}
/* Motion trail ghost — faint blurred echo of the eye that smears on fast movement */
/* Motion trail ghost — disabled so cover art is not projected around the eye */
.eye-trail-ghost {
position: absolute;
top: 50%;
left: 50%;
width: clamp(300px, 72vmin, 700px);
height: clamp(300px, 72vmin, 700px);
max-width: calc(100% - 60px);
max-height: calc(100% - 80px);
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
pointer-events: none;
z-index: 0;
opacity: 0;
will-change: transform, opacity, filter;
mix-blend-mode: screen;
display: none !important;
}
.audio-eye-inner-canvas {
@@ -3345,6 +3347,21 @@ body.sidebar-right-hidden #sidebar-drag-zone {
display: none !important;
}
.thumb > .sidebar-media-placeholder .audio-cover-backdrop,
.album-thumb-item > .sidebar-media-placeholder .audio-cover-backdrop,
.item-preview .sidebar-media-placeholder .audio-cover-backdrop,
.sidebar-activity-item .sidebar-media-placeholder .audio-cover-backdrop,
.recent-comment-media .sidebar-media-placeholder .audio-cover-backdrop,
.posts .sidebar-media-placeholder .audio-cover-backdrop,
.thumb > .sidebar-media-placeholder .audio-reactive-bg,
.album-thumb-item > .sidebar-media-placeholder .audio-reactive-bg,
.item-preview .sidebar-media-placeholder .audio-reactive-bg,
.sidebar-activity-item .sidebar-media-placeholder .audio-reactive-bg,
.recent-comment-media .sidebar-media-placeholder .audio-reactive-bg,
.posts .sidebar-media-placeholder .audio-reactive-bg {
display: none !important;
}
.thumb > .sidebar-media-placeholder > i,
.album-thumb-item > .sidebar-media-placeholder > i,
.item-preview .sidebar-media-placeholder > i {
@@ -6098,6 +6115,7 @@ html[theme="f0ck95"] .admin-search button {
/* f0ck95dARK */
html[theme='f0ck95d'] {
--accent: #fff;
--accent-rgb: 255, 255, 255;
--bg: #0e0f0f;
--black: #000;
--white: #fff;
@@ -6524,6 +6542,9 @@ div.posts>a:not(.notif-item) {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
div.posts>a:not(.notif-item)::before {
@@ -7119,11 +7140,7 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
.content.fade-in-zoom,
._204863.fade-in-zoom,
.item_title.fade-in-zoom,
.item-title.fade-in-zoom,
#onara-modal .content.fade-in-zoom,
#onara-modal ._204863.fade-in-zoom,
#onara-modal .item_title.fade-in-zoom,
#onara-modal .item-title.fade-in-zoom {
.item-title.fade-in-zoom {
animation: contentFadeInZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
will-change: transform, opacity;
}
@@ -7131,11 +7148,7 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
.content.fade-out-zoom,
._204863.fade-out-zoom,
.item_title.fade-out-zoom,
.item-title.fade-out-zoom,
#onara-modal .content.fade-out-zoom,
#onara-modal ._204863.fade-out-zoom,
#onara-modal .item_title.fade-out-zoom,
#onara-modal .item-title.fade-out-zoom {
.item-title.fade-out-zoom {
animation: contentFadeOutZoom 0.18s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
pointer-events: none;
will-change: transform, opacity;
@@ -10486,10 +10499,11 @@ button#togglebg {
#bg.fader-out,
.fader-out {
opacity: 0 !important;
transition: opacity 0.22s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
.fast-fade {
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
.grid-transition {
@@ -10780,7 +10794,6 @@ input#s_avatar {
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
word-break: break-word;
@@ -20818,19 +20831,22 @@ a.lazy-thumb.filtered-upload-ghost:hover::after {
ONARA ALTERNATIVE FLAVOR: Fullscreen See-Through Modal Wrapper
========================================================================== */
/* Prevent scrolling on background document when Onara modal is active */
body.onara-modal-open {
/* Prevent scrolling on background document when Onara modal is active or closing */
body.onara-modal-open,
body.onara-modal-closing {
overflow: hidden !important;
}
/* Override html's scrollbar-gutter: stable so the page fills full viewport width */
html:has(body.onara-modal-open) {
html:has(body.onara-modal-open),
html:has(body.onara-modal-closing) {
overflow: hidden !important;
scrollbar-gutter: auto !important;
}
/* Background main page elements and containers are transparent so #bg canvas and grid shine through */
body.onara-modal-open .pagewrapper {
body.onara-modal-open .pagewrapper,
body.onara-modal-closing .pagewrapper {
pointer-events: none !important;
user-select: none !important;
margin-top: var(--navbar-h, 50px) !important;
@@ -20838,21 +20854,32 @@ body.onara-modal-open .pagewrapper {
}
body.onara-modal-open .index-container,
body.onara-modal-open div.posts {
body.onara-modal-closing .index-container,
body.onara-modal-open div.posts,
body.onara-modal-closing div.posts {
background: transparent !important;
}
body.onara-modal-open .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-open .index-container > *:not(.posts),
body.onara-modal-open #footbar,
body.onara-modal-open .pagination-container-fluid {
body.onara-modal-open:not(.onara-modal-closing) .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-open:not(.onara-modal-closing) .index-container > *:not(.posts),
body.onara-modal-open:not(.onara-modal-closing) #footbar,
body.onara-modal-open:not(.onara-modal-closing) .pagination-container-fluid {
opacity: var(--onara-grid-dim-opacity, 1) !important;
filter: none !important;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.onara-modal-closing .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-closing .index-container > *:not(.posts),
body.onara-modal-closing #footbar,
body.onara-modal-closing .pagination-container-fluid {
opacity: 1 !important;
filter: none !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
/* All non-active background thumbnails shine through with the configured grid opacity */
body.onara-modal-open .posts > a.thumb:not(.onara-active) {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active) {
opacity: var(--onara-grid-dim-opacity, 1) !important;
filter: none !important;
box-shadow: none !important;
@@ -20860,36 +20887,71 @@ body.onara-modal-open .posts > a.thumb:not(.onara-active) {
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.onara-modal-open .posts > a.thumb:not(.onara-active)::after {
body.onara-modal-closing .posts > a.thumb:not(.onara-active) {
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
outline: none !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active)::after {
visibility: hidden !important;
opacity: 0 !important;
}
body.onara-modal-closing .posts > a.thumb:not(.onara-active)::after {
visibility: hidden !important;
opacity: 0 !important;
}
/* ONLY the single currently active thumbnail in the background shines through with prominent glow */
body.onara-modal-open .posts > a.thumb.onara-active {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active {
opacity: 1 !important;
filter: none !important;
box-shadow: 0 0 0 3px var(--accent, #9f0), 0 0 20px var(--accent, #9f0), 0 0 35px rgba(255, 255, 255, 0.9) !important;
z-index: 50 !important;
z-index: 52 !important;
position: relative !important;
transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}
body.onara-modal-open .posts > a.thumb.onara-active::after {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active::after {
visibility: visible !important;
opacity: 1 !important;
transition: opacity 0.25s ease !important;
}
body.onara-modal-open .posts > a.thumb.loaded {
/* Smooth fade-out of active thumbnail border / glow when Onara modal closes */
body.onara-modal-closing .posts > a.thumb.onara-active,
body.onara-modal-closing .posts > a.thumb.loaded.onara-active {
opacity: 1 !important;
filter: none !important;
box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent !important;
outline-color: transparent !important;
border-color: transparent !important;
z-index: 50 !important;
position: relative !important;
transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0.4, 1),
outline-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
border-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-closing .posts > a.thumb.onara-active::after {
opacity: 0 !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-open .posts > a.thumb.loaded,
body.onara-modal-closing .posts > a.thumb.loaded {
opacity: 1 !important;
filter: none !important;
z-index: 50 !important;
position: relative !important;
}
body.onara-modal-open #bg,
body.onara-modal-open #bg.fader-in,
body.onara-modal-open #bg.fader-out,
body.onara-modal-open #bg.fast-fade {
body.onara-modal-open:not(.onara-modal-closing) #bg,
body.onara-modal-open:not(.onara-modal-closing) #bg.fader-in {
z-index: 51 !important;
cursor: pointer !important;
transition: width 0.3s ease-in-out !important;
@@ -20897,6 +20959,18 @@ body.onara-modal-open #bg.fast-fade {
opacity: var(--bg-canvas-opacity, 1.0) !important;
}
body.onara-modal-closing #bg,
body.onara-modal-closing #bg.fader-in,
body.onara-modal-closing #bg.fader-out,
body.onara-modal-closing #bg.fast-fade,
body.onara-modal-open #bg.fader-out {
z-index: 51 !important;
cursor: default !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
/* Navbar and right sidebar stay fully visible, sharp, and interactive */
body.onara-modal-open nav.navbar {
opacity: 1 !important;
@@ -20962,33 +21036,34 @@ body.onara-modal-open .admin-bar.open {
overscroll-behavior-x: contain !important;
box-sizing: border-box !important;
opacity: 0;
transform: scale(0.99);
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
right 0.3s ease-in-out !important;
cursor: pointer;
will-change: opacity, backdrop-filter;
transition: right 0.3s ease-in-out !important;
}
.onara-modal-wrapper::-webkit-scrollbar {
display: none;
}
body.onara-modal-open .onara-modal-wrapper,
.onara-modal-wrapper.onara-fade-in {
/* Static server-load fallback when page is directly visited on an onara item URL */
body.onara-modal-open .onara-modal-wrapper:not(.onara-fade-out):not(.onara-fade-in) {
display: flex !important;
opacity: 1 !important;
transform: scale(1) !important;
pointer-events: auto !important;
}
/* Silky animated opening */
.onara-modal-wrapper.onara-fade-in {
display: flex !important;
animation: onaraModalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
pointer-events: auto !important;
}
/* Silky animated closing */
.onara-modal-wrapper.onara-fade-out {
display: flex !important;
opacity: 0 !important;
transform: scale(0.99) !important;
animation: onaraModalFadeOut 0.22s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
pointer-events: none !important;
transition: opacity 0.24s cubic-bezier(0.3, 0, 0.8, 1),
transform 0.24s cubic-bezier(0.3, 0, 0.8, 1),
right 0.3s ease-in-out !important;
}
/* Sidebar hidden: modal expands to right edge */
@@ -21013,25 +21088,33 @@ body.sidebar-right-hidden .onara-modal-wrapper {
}
}
@keyframes onaraFadeIn {
from {
@keyframes onaraModalFadeIn {
0% {
opacity: 0;
transform: scale(0.99);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
to {
100% {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
-webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
}
}
@keyframes onaraFadeOut {
from {
@keyframes onaraModalFadeOut {
0% {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
-webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
}
to {
100% {
opacity: 0;
transform: scale(0.99);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
}
@@ -21059,6 +21142,78 @@ body.sidebar-right-hidden .onara-modal-wrapper {
padding: 20px 0 80px 0 !important;
box-sizing: border-box !important;
cursor: pointer;
will-change: transform, opacity;
}
/* Smooth modal content elevation during entrance & exit */
.onara-modal-wrapper.onara-fade-in .onara-modal-content {
animation: onaraContentScaleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.onara-modal-wrapper.onara-fade-out .onara-modal-content {
animation: onaraContentScaleOut 0.2s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
}
@keyframes onaraContentScaleIn {
0% {
opacity: 0;
transform: translateY(16px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes onaraContentScaleOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
}
/* Keep .blahlol completely static on new item load — never fade in or animate */
.blahlol,
.blahlol *,
#onara-item-mount .blahlol,
#onara-item-mount .blahlol * {
animation: none !important;
transition: none !important;
}
.blahlol,
#onara-item-mount .blahlol {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
#onara-item-mount .item-layout-container {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
/* Modern loading shimmer spinner inside mount */
.onara-mount-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
width: 100%;
color: var(--accent, #99ff00);
font-size: 2rem;
opacity: 0;
animation: onaraMountSpinnerFade 0.25s 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes onaraMountSpinnerFade {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 0.75; transform: scale(1); }
}
#onara-item-mount {
@@ -22036,6 +22191,11 @@ div#flash,
bottom: 58px;
}
/* YouTube controls occupy ~56px at the bottom — lift strip above them */
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
bottom: 62px;
}
.album-gallery-container.is-video-active .image-modal-btn,
.album-gallery-container.is-audio-active .image-modal-btn {
display: none !important;
@@ -22046,6 +22206,9 @@ div#flash,
.album-gallery-container.is-audio-active .album-thumbnails-strip {
bottom: 48px;
}
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
bottom: 52px;
}
}
.album-thumb-item {
public/s/js/admin.js
+1 -1
View File
@@ -151,7 +151,7 @@
if (activePostId) untaggedSpan.dataset.itemId = activePostId;
const lbl = document.createElement("span");
lbl.className = "rating-label";
lbl.textContent = "untagged";
lbl.textContent = "unrated";
untaggedSpan.appendChild(lbl);
inner.insertAdjacentElement("afterbegin", untaggedSpan);
}
public/s/js/f0ckm.js
+938 -266
View File
File diff suppressed because it is too large Load Diff
public/s/js/scroller.js
+2 -2
View File
@@ -556,7 +556,7 @@
}
// ── Filter Presets CRUD ───────────────────────────────────────────────────
const PRESETS_LABELS = { mode: { 0: 'SFW', 1: 'NSFW', 2: 'Untagged', 3: 'All', 4: 'NSFL' } };
const PRESETS_LABELS = { mode: { 0: 'SFW', 1: 'NSFW', 2: 'Unrated', 3: 'All', 4: 'NSFL' } };
function getPresets() { try { return JSON.parse(localStorage.getItem(PRESETS_KEY) || '[]'); } catch { return []; } }
function savePresets(arr) { localStorage.setItem(PRESETS_KEY, JSON.stringify(arr)); }
@@ -3060,7 +3060,7 @@
if (addTagSendBtn) addTagSendBtn.addEventListener('click', submitTag);
// ── Filter panel ──────────────────────────────────────────────────────────
const modeLabels = { 0: 'SFW', 1: 'NSFW', 2: 'Untagged', 3: 'All', 4: 'NSFL' };
const modeLabels = { 0: 'SFW', 1: 'NSFW', 2: 'Unrated', 3: 'All', 4: 'NSFL' };
filterOpenBtn.addEventListener('click', () => {
pending = { ...applied, tags: [...applied.tags] }; syncPanelUI();
public/s/js/settings.js
+7 -1
View File
@@ -1498,7 +1498,7 @@
} else {
document.documentElement.classList.remove('blur-untagged-active');
}
showStatus(enabled ? 'Untagged blurring enabled!' : 'Untagged blurring disabled!', 'success');
showStatus(enabled ? 'Unrated blurring enabled!' : 'Unrated blurring disabled!', 'success');
});
}
const blurDetailToggle = document.getElementById('blur_detail_toggle');
@@ -1596,10 +1596,16 @@
onaraEnabledToggle.checked = stored !== null ? stored === 'true' : sessionOnara;
// Reflect current state into window.onara so isOnaraActive() sees it
window.onara = onaraEnabledToggle.checked;
try {
document.cookie = `f0ck_onara=${onaraEnabledToggle.checked ? '1' : '0'}; path=/; max-age=31536000; SameSite=Lax`;
} catch {}
onaraEnabledToggle.addEventListener('change', () => {
const enabled = onaraEnabledToggle.checked;
localStorage.setItem(LS_KEY, String(enabled));
try {
document.cookie = `f0ck_onara=${enabled ? '1' : '0'}; path=/; max-age=31536000; SameSite=Lax`;
} catch {}
window.onara = enabled;
showStatus('Onara viewer ' + (enabled ? 'enabled' : 'disabled') + '.', 'success');
});
public/s/js/sidebar-activity.js
+279 -16
View File
@@ -1272,14 +1272,19 @@
const isTagFeed = options.isTagFeed || false;
const tagContext = options.tag || null;
const isFavsFeed = options.isFavsFeed || false;
const favsUser = options.favsUser || null;
const isStrict = isStrictMode();
const strictSuffix = (isTagFeed && isStrict) ? '?strict=1' : '';
const targetSubHash = video.target_subf0ck_slug ? `#${video.target_subf0ck_slug}` : '';
const targetHref = (isTagFeed && tagContext)
? `/tag/${encodeURIComponent(tagContext).replace(/%2C/g, ',').replace(/%20/g, ' ')}/${videoKey}${strictSuffix}${targetSubHash}`
: `/${videoKey}${targetSubHash}`;
const targetHref = (isFavsFeed && favsUser)
? `/user/${encodeURIComponent(favsUser)}/favs/${videoKey}${targetSubHash}`
: (isTagFeed && tagContext)
? `/tag/${encodeURIComponent(tagContext).replace(/%2C/g, ',').replace(/%20/g, ' ')}/${videoKey}${strictSuffix}${targetSubHash}`
: `/${videoKey}${targetSubHash}`;
const activeClass = options.isActive ? ' active-tag-item' : '';
return `
<div class="sidebar-video-card${activeClass}" data-id="${video.id}" data-slug="${escapeHtml(video.slug || '')}" data-file="${escapeHtml(activeDest)}" data-mime="${escapeHtml(activeMime)}" data-ext="${escapeHtml(ext ? ext.toLowerCase() : '')}" data-mode="${rClass}" data-target-subf0ck="${escapeHtml(video.target_subf0ck_slug || '')}" data-personalized="${video.personalized ? 'true' : 'false'}"${devScoreAttr}>
<a href="${targetHref}" class="sidebar-video-link" data-mode="${rClass}" data-inherit-context="false">
@@ -1554,12 +1559,22 @@
if (txt) ids.add(txt);
}
// 2. From URL pathname (/tag/:tag/:slugOrId or /:slugOrId)
// 2. From URL pathname (/tag/:tag/:slugOrId, /user/:user/favs/:slugOrId, /user/:user/:slugOrId, /: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 >= 4 && segments[0] === 'user' && segments[2] === 'favs') {
// /user/:user/favs/:itemid
if (segments[3] !== 'p') {
ids.add(decodeURIComponent(segments[3]).trim());
}
} else if (segments.length >= 3 && segments[0] === 'user' && segments[2] !== 'favs') {
// /user/:user/:itemid (non-favs)
if (segments[2] !== 'p') {
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])) {
@@ -1567,6 +1582,7 @@
}
}
return Array.from(ids).filter(Boolean);
};
@@ -1840,22 +1856,253 @@
card.classList.add('active-tag-item');
}
});
container.addEventListener('scroll', () => {
if (tagFeedLoading || !tagHasMore || !currentTag) return;
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 250;
if (nearBottom) {
loadMoreTagFeed();
}
}, { passive: true });
};
// ── Dedicated Favs Feed (mirrors Tag Feed for /user/x/favs context) ─────
let currentFavsUser = null;
let favsOffset = 0;
let favsTotal = 0;
let favsFeedLoaded = false;
let favsFeedLoading = false;
let favsFeedNeedsReload = false;
let favsHasMore = false;
let favsSentinel = null;
let favsObserver = null;
const getCurrentFavsUser = () => {
// Match /user/someuser/favs or /user/someuser/favs/itemid
const m = window.location.pathname.match(/^\/user\/([^/?#]+)\/favs/);
if (m) return decodeURIComponent(m[1]);
return null;
};
let isReCenteringFavsFeed = false;
const highlightActiveFavsCard = (scrollIntoView = false) => {
const identifiers = getCurrentItemIdentifiers();
const container = document.getElementById('sidebar-favs-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 isFavsTabActive = document.querySelector('.sidebar-tab.active')?.dataset.tab === 'favs' &&
container.style.display !== 'none';
if (isFavsTabActive) {
try {
const cr = container.getBoundingClientRect();
const mr = matchedCard.getBoundingClientRect();
container.scrollTo({ top: Math.max(0, container.scrollTop + (mr.top - cr.top) - (container.clientHeight / 2) + (mr.height / 2)), behavior: 'smooth' });
} catch (_) {
matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
} else if (scrollIntoView && !matchedCard && identifiers.length > 0 && currentFavsUser && !isReCenteringFavsFeed && !favsFeedLoading) {
isReCenteringFavsFeed = true;
loadFavsFeed(true, identifiers[0]).finally(() => {
isReCenteringFavsFeed = false;
});
}
};
const loadFavsFeed = async (reset = false, focusId = null) => {
const container = document.getElementById('sidebar-favs-container');
const itemsContainer = container?.querySelector('.sidebar-favs-items-container');
if (!container || !itemsContainer || favsFeedLoading) return;
if (!currentFavsUser) return;
favsFeedLoading = true;
favsFeedNeedsReload = false;
if (reset) {
favsOffset = 0;
itemsContainer.innerHTML = `
<div class="sidebar-loading-state">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span>Loading favorites...</span>
</div>
`;
}
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
let url = `/api/v2/favs-feed?user=${encodeURIComponent(currentFavsUser)}&order=desc&offset=${favsOffset}&limit=20&mode=${mode}`;
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 || [];
favsTotal = data.total || 0;
favsOffset = (data.offset ?? favsOffset) + items.length;
favsHasMore = typeof data.hasMore !== 'undefined' ? !!data.hasMore : (favsOffset < favsTotal);
// Update header
const countEl = container.querySelector('.sidebar-favs-count');
if (countEl) countEl.textContent = `(${favsTotal})`;
const nameEl = container.querySelector('.sidebar-favs-name');
if (nameEl) nameEl.textContent = currentFavsUser + "'s favs";
if (data.success && items.length > 0) {
favsFeedLoaded = 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, { isFavsFeed: true, favsUser: currentFavsUser, isActive });
});
if (reset) {
itemsContainer.innerHTML = html;
setTimeout(() => highlightActiveFavsCard(true), 60);
} else {
itemsContainer.insertAdjacentHTML('beforeend', html);
highlightActiveFavsCard(false);
}
initFavsSentinel();
} else if (reset) {
itemsContainer.innerHTML = `
<div class="sidebar-empty-state" style="text-align:center;padding:30px 15px;color:var(--text-muted,#888);font-size:0.88em;">
<i class="fa-regular fa-heart" style="font-size:1.8em;opacity:0.4;margin-bottom:8px;display:block;"></i>
No favorites found
</div>
`;
}
} catch (err) {
console.error('[FAVS-FEED] Failed:', err);
if (reset) {
itemsContainer.innerHTML = `<div class="sidebar-empty-state" style="text-align:center;padding:25px;color:var(--danger,#ff4444);font-size:0.88em;">Failed to load favorites</div>`;
}
} finally {
favsFeedLoading = false;
}
};
const initFavsSentinel = () => {
const container = document.getElementById('sidebar-favs-container');
const itemsContainer = container?.querySelector('.sidebar-favs-items-container');
if (!container || !itemsContainer) return;
if (favsSentinel && favsSentinel.parentNode) favsSentinel.remove();
if (favsObserver) { favsObserver.disconnect(); favsObserver = null; }
if (!favsHasMore) return;
favsSentinel = document.createElement('div');
favsSentinel.className = 'sidebar-tag-sentinel';
favsSentinel.style.cssText = 'height: 20px; margin: 10px 0;';
itemsContainer.appendChild(favsSentinel);
favsObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !favsFeedLoading && favsHasMore) {
loadFavsFeed(false);
}
}, {
root: container,
rootMargin: '200px'
});
favsObserver.observe(favsSentinel);
};
const updateFavsTabVisibility = (forceSwitchToFavs = false) => {
const user = getCurrentFavsUser();
const favsBtn = document.getElementById('sidebar-tab-favs');
if (!favsBtn) return;
if (user) {
favsBtn.style.display = 'inline-flex';
favsBtn.title = `${user}'s favs`;
if (currentFavsUser !== user) {
currentFavsUser = user;
favsOffset = 0;
favsFeedLoaded = false;
favsFeedNeedsReload = true;
switchSidebarTab('favs');
} else {
if (forceSwitchToFavs || document.querySelector('.sidebar-tab.active')?.dataset.tab !== 'favs') {
switchSidebarTab('favs');
} else {
highlightActiveFavsCard(true);
}
}
} else {
favsBtn.style.display = 'none';
currentFavsUser = null;
favsFeedLoaded = false;
const activeTab = document.querySelector('.sidebar-tab.active')?.dataset.tab;
if (activeTab === 'favs') {
// Fall back to tag tab if available, else recommendations
if (getCurrentTag()) {
switchSidebarTab('tag');
} else {
switchSidebarTab('recommendations');
}
}
}
};
const bindFavsContainerEvents = () => {
const container = document.getElementById('sidebar-favs-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');
}
});
container.addEventListener('scroll', () => {
if (favsFeedLoading || !favsHasMore || !currentFavsUser) return;
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 250;
if (nearBottom) {
loadFavsFeed(false);
}
}, { passive: true });
};
const switchSidebarTab = (tabName) => {
if (window.clearHoverPreview) {
window.clearHoverPreview();
}
const normalizedTab = (tabName === 'videos' || tabName === 'recommendations')
? 'recommendations'
: (tabName === 'tag' ? 'tag' : tabName);
const normalizedTab = (tabName === 'videos' || tabName === 'recommendations')
? 'recommendations'
: (tabName === 'tag' ? 'tag' : (tabName === 'favs' ? 'favs' : 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);
const tTab = (t.dataset.tab === 'videos' || t.dataset.tab === 'recommendations')
? 'recommendations'
: (t.dataset.tab === 'tag' ? 'tag' : (t.dataset.tab === 'favs' ? 'favs' : t.dataset.tab));
if (tTab === normalizedTab) {
t.classList.add('active');
} else {
@@ -1864,9 +2111,9 @@
});
contents.forEach(c => {
const cTab = (c.dataset.tabContent === 'videos' || c.dataset.tabContent === 'recommendations')
? 'recommendations'
: (c.dataset.tabContent === 'tag' ? 'tag' : c.dataset.tabContent);
const cTab = (c.dataset.tabContent === 'videos' || c.dataset.tabContent === 'recommendations')
? 'recommendations'
: (c.dataset.tabContent === 'tag' ? 'tag' : (c.dataset.tabContent === 'favs' ? 'favs' : c.dataset.tabContent));
if (cTab === normalizedTab) {
c.classList.add('active');
c.style.display = 'block';
@@ -1890,6 +2137,12 @@
} else {
setTimeout(() => highlightActiveTagCard(true), 60);
}
} else if (normalizedTab === 'favs') {
if (favsFeedNeedsReload || !favsFeedLoaded) {
loadFavsFeed(true);
} else {
setTimeout(() => highlightActiveFavsCard(true), 60);
}
}
};
window.switchSidebarTab = switchSidebarTab;
@@ -1901,7 +2154,7 @@
const btn = e.target.closest('.sidebar-tab');
if (btn && btn.dataset.tab) {
e.preventDefault();
if (btn.dataset.tab !== 'tag') {
if (btn.dataset.tab !== 'tag' && btn.dataset.tab !== 'favs') {
userManuallySelectedNonTagTab = true;
} else {
userManuallySelectedNonTagTab = false;
@@ -1917,7 +2170,9 @@
savedTab = localStorage.getItem('sidebar_active_tab') || 'comments';
} catch (_) {}
if (getCurrentTag()) {
if (getCurrentFavsUser()) {
switchSidebarTab('favs');
} else if (getCurrentTag()) {
switchSidebarTab('tag');
} else if (savedTab === 'videos' || savedTab === 'recommendations') {
switchSidebarTab('recommendations');
@@ -2154,15 +2409,23 @@
initSidebarTabs();
initTagOrderButton();
bindTagContainerEvents();
bindFavsContainerEvents();
updateTagTabVisibility();
updateFavsTabVisibility();
document.addEventListener('f0ck:contentLoaded', () => {
updateTagTabVisibility();
setTimeout(() => highlightActiveTagCard(true), 60);
updateFavsTabVisibility();
setTimeout(() => {
highlightActiveTagCard(true);
highlightActiveFavsCard(true);
}, 60);
});
window.addEventListener('popstate', () => {
setTimeout(() => {
updateTagTabVisibility();
updateFavsTabVisibility();
highlightActiveTagCard(true);
highlightActiveFavsCard(true);
}, 60);
});
bindRecommendationEvents();
public/s/js/upload.js
+96 -52
View File
@@ -1266,40 +1266,70 @@ window.initUploadForm = (selector) => {
badge.innerHTML = index === 0 ? '<i class="fa-solid fa-star"></i> Cover' : `#${index + 1}`;
card.appendChild(badge);
const isVideo = (file.type && file.type.startsWith('video/')) || /\.(mp4|webm|mov|mkv)$/i.test(file.name || '');
const isAudio = (file.type && file.type.startsWith('audio/')) || /\.(mp3|ogg|wav|flac|m4a|aac)$/i.test(file.name || '');
if (isVideo) {
const video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.muted = true;
video.playsInline = true;
video.autoplay = false;
video.preload = 'metadata';
card.appendChild(video);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-solid fa-play"></i>';
card.appendChild(mimeBadge);
} else if (isAudio) {
const audioPreview = document.createElement('div');
audioPreview.className = 'album-stage-audio-preview';
audioPreview.innerHTML = `
<i class="fa-solid fa-music"></i>
<span class="album-stage-audio-name" title="${file.name || 'Audio'}">${file.name || 'Audio'}</span>
`;
card.appendChild(audioPreview);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-solid fa-music"></i>';
card.appendChild(mimeBadge);
// URL items (YouTube links etc.) — no File/Blob available
if (item.type === 'url') {
const urlStr = item.url || '';
const ytMatch = urlStr.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9_-]{11})/);
if (ytMatch) {
const thumb = document.createElement('img');
thumb.src = `https://img.youtube.com/vi/${ytMatch[1]}/mqdefault.jpg`;
thumb.alt = 'YouTube thumbnail';
thumb.style.cssText = 'width:100%;height:100%;object-fit:cover;';
card.appendChild(thumb);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-brands fa-youtube"></i>';
card.appendChild(mimeBadge);
} else {
const urlPreview = document.createElement('div');
urlPreview.className = 'album-stage-audio-preview';
const shortUrl = urlStr.replace(/^https?:\/\//, '').substring(0, 40);
urlPreview.innerHTML = `
<i class="fa-solid fa-link"></i>
<span class="album-stage-audio-name" title="${urlStr}">${shortUrl}</span>
`;
card.appendChild(urlPreview);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-solid fa-link"></i>';
card.appendChild(mimeBadge);
}
} else {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.alt = file.name || `Subf0ck ${index + 1}`;
card.appendChild(img);
const isVideo = (file.type && file.type.startsWith('video/')) || /\.(mp4|webm|mov|mkv)$/i.test(file.name || '');
const isAudio = (file.type && file.type.startsWith('audio/')) || /\.(mp3|ogg|wav|flac|m4a|aac)$/i.test(file.name || '');
if (isVideo) {
const video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.muted = true;
video.playsInline = true;
video.autoplay = false;
video.preload = 'metadata';
card.appendChild(video);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-solid fa-play"></i>';
card.appendChild(mimeBadge);
} else if (isAudio) {
const audioPreview = document.createElement('div');
audioPreview.className = 'album-stage-audio-preview';
audioPreview.innerHTML = `
<i class="fa-solid fa-music"></i>
<span class="album-stage-audio-name" title="${file.name || 'Audio'}">${file.name || 'Audio'}</span>
`;
card.appendChild(audioPreview);
const mimeBadge = document.createElement('span');
mimeBadge.className = 'album-stage-mime-badge';
mimeBadge.innerHTML = '<i class="fa-solid fa-music"></i>';
card.appendChild(mimeBadge);
} else {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.alt = file.name || `Subf0ck ${index + 1}`;
card.appendChild(img);
}
}
const actions = document.createElement('div');
@@ -2972,8 +3002,21 @@ window.initUploadForm = (selector) => {
}
}
// URL uploads: always stay on current page — tracker panel shows progress
// (no redirect here; the file upload path below handles its own redirect)
// URL uploads: redirect or stay based on user preference (pending/async jobs skip redirect)
if (!lastData?.pending && !lastData?.manual_approval) {
const shouldRedirectToItem = redirectCheckbox
? redirectCheckbox.checked
: (localStorage.getItem('upload_redirect_to_item') !== 'false');
if (shouldRedirectToItem && lastData?.itemid) {
const targetUrl = lastData.slug ? `/${lastData.slug}` : `/${lastData.itemid}`;
if (typeof window.loadPageAjax === 'function') {
window.loadPageAjax(targetUrl, true, { bypassCache: true });
} else {
window.location.href = targetUrl;
}
}
// else: stay on current page
}
} else {
restoreBtn();
}
@@ -3006,9 +3049,15 @@ window.initUploadForm = (selector) => {
if (comment) formData.append('comment', comment);
for (let i = 0; i < selectedFiles.length; i++) {
const f = selectedFiles[i].file || selectedFiles[i];
formData.append('files', f);
const subTags = selectedFiles[i].subTags || '';
const item = selectedFiles[i];
if (item.type === 'url') {
// URL items (YouTube links etc.) — send as a URL field, not a binary file
formData.append(`subf0ck_url_${i}`, item.url || '');
} else {
const f = item.file || item;
formData.append('files', f);
}
const subTags = item.subTags || '';
if (subTags) {
formData.append(`subf0ck_tags_${i}`, subTags);
}
@@ -3080,15 +3129,15 @@ window.initUploadForm = (selector) => {
? redirectCheckbox.checked
: (localStorage.getItem('upload_redirect_to_item') !== 'false');
const targetUrl = shouldRedirectToItem
? (res.slug ? `/${res.slug}` : (res.itemid ? `/${res.itemid}` : '/'))
: '/';
if (typeof window.loadPageAjax === 'function') {
window.loadPageAjax(targetUrl, true, { bypassCache: true });
} else {
window.location.href = targetUrl;
if (shouldRedirectToItem) {
const targetUrl = res.slug ? `/${res.slug}` : (res.itemid ? `/${res.itemid}` : '/');
if (typeof window.loadPageAjax === 'function') {
window.loadPageAjax(targetUrl, true, { bypassCache: true });
} else {
window.location.href = targetUrl;
}
}
// else: stay on current page
return;
} else {
const errMsg = res.msg || 'Upload failed';
@@ -3340,13 +3389,8 @@ window.initUploadForm = (selector) => {
} else {
window.location.href = targetUrl;
}
} else {
if (typeof window.loadPageAjax === 'function') {
window.loadPageAjax('/', true, { bypassCache: true });
} else {
window.location.href = '/';
}
}
// else: stay on current page
}
} else {
restoreBtn();
public/s/js/user.js
+1 -1
View File
@@ -149,7 +149,7 @@
if (activePostId) untaggedSpan.dataset.itemId = activePostId;
const lbl = document.createElement("span");
lbl.className = "rating-label";
lbl.textContent = "untagged";
lbl.textContent = "unrated";
untaggedSpan.appendChild(lbl);
inner.insertAdjacentElement("afterbegin", untaggedSpan);
}
public/s/js/v0ck.js
+19 -3
View File
@@ -168,11 +168,27 @@ class v0ck {
player.style.backgroundImage = 'none';
player.style.backgroundColor = 'transparent';
if (!isFallback) {
coverCircle.style.backgroundImage = `url('${poster}')`;
ph.classList.add('has-cover');
coverCircle._origBgImage = `url('${poster}')`;
if (typeof window.updateCoverArtSolidMode === 'function') {
window.updateCoverArtSolidMode();
} else {
const tuning = window.audioVisualizerTuning;
const showInEye = tuning ? (tuning.showCoverInEye !== undefined ? Number(tuning.showCoverInEye) === 1 : (tuning.showCoverArt !== undefined ? Number(tuning.showCoverArt) === 1 : Number(tuning.solidCover) === 0)) : false;
if (showInEye) {
coverCircle.style.backgroundImage = `url('${poster}')`;
ph.classList.add('has-cover');
} else {
coverCircle.style.backgroundImage = 'none';
ph.classList.remove('has-cover');
}
}
} else {
coverCircle.style.backgroundImage = '';
coverCircle._origBgImage = null;
coverCircle.style.backgroundImage = 'none';
ph.classList.remove('has-cover');
if (typeof window.updateCoverArtSolidMode === 'function') {
window.updateCoverArtSolidMode();
}
}
}
}