';
audioWrapper.prepend(ph);
}
let coverCircle = ph.querySelector('.audio-cover-circle');
if (!coverCircle) {
coverCircle = document.createElement('div');
coverCircle.className = 'audio-cover-circle';
coverCircle.innerHTML = '';
ph.insertBefore(coverCircle, ph.firstChild);
} else {
if (!coverCircle.querySelector('i')) {
const existingI = ph.querySelector(':scope > i');
if (existingI) coverCircle.appendChild(existingI);
else coverCircle.insertAdjacentHTML('beforeend', '');
}
}
audioWrapper.style.backgroundImage = 'none';
audioWrapper.style.backgroundColor = '#000000';
if (coverUrl) {
coverCircle.style.backgroundImage = `url('${coverUrl}')`;
ph.classList.add('has-cover');
} else {
coverCircle.style.backgroundImage = 'none';
coverCircle.style.backgroundColor = '#000000';
ph.classList.remove('has-cover');
ph.style.backgroundColor = '#000000';
}
ph.style.display = '';
}
if (audioEl) {
audioEl.style.display = 'block';
audioEl.crossOrigin = 'anonymous';
const hasCover = item.has_coverart && item.coverart && !item.coverart.includes('audio.webp');
const coverUrl = hasCover ? (item.coverart || item.thumb) : null;
if (coverUrl) {
audioEl.setAttribute('poster', coverUrl);
} else {
audioEl.removeAttribute('poster');
}
if (audioEl.src !== newSrc && !audioEl.src.endsWith(newSrc)) {
audioEl.src = newSrc;
audioEl.setAttribute('src', newSrc);
audioEl.load();
}
initAlbumAudioV0ck();
video = audioEl;
if (window.initVisualizer) window.initVisualizer(audioEl);
if (window.initBackground) window.initBackground();
if (window.updateAudioTrackBadge) window.updateAudioTrackBadge(audioEl, item.id || item.slug, newSrc);
audioEl.addEventListener('play', () => audioWrapper?.classList.add('is-playing'));
audioEl.addEventListener('pause', () => audioWrapper?.classList.remove('is-playing'));
audioEl.addEventListener('ended', () => audioWrapper?.classList.remove('is-playing'));
if (item.size && audioWrapper) {
const dlBtn = audioWrapper.querySelector('#v0ck_download');
if (dlBtn) dlBtn.textContent = `Download (${item.size})`;
}
const playerWrap = audioWrapper.querySelector('.v0ck') || audioWrapper;
if (isAutoplayAllowed()) {
const playPromise = audioEl.play();
if (playPromise !== undefined) {
playPromise.catch(() => {
playerWrap.classList.add('v0ck_initial');
});
}
} else {
try { audioEl.pause(); } catch {}
playerWrap.classList.add('v0ck_initial');
}
}
} else {
// Image
container.classList.remove('is-video-active', 'is-audio-active');
const badge = container.querySelector('.audio-track-info-badge');
if (badge) badge.classList.remove('is-visible');
if (videoEl) {
try { videoEl.pause(); } catch {}
}
if (audioEl) {
try { audioEl.pause(); } catch {}
}
if (videoWrapper) videoWrapper.style.display = 'none';
if (audioWrapper) audioWrapper.style.display = 'none';
if (linkEl) {
linkEl.style.display = '';
linkEl.href = newSrc;
}
if (imgEl) {
imgEl.style.display = 'block';
imgEl.classList.remove('album-img-fade');
void imgEl.offsetWidth; // trigger reflow
imgEl.src = newSrc;
imgEl.classList.add('album-img-fade');
}
video = null;
}
if (linkEl && !mime.startsWith('video/')) {
linkEl.href = newSrc;
}
if (currentIdxEl) {
currentIdxEl.textContent = currentIndex + 1;
}
thumbItems.forEach((btn, idx) => {
const isActive = idx === currentIndex;
btn.classList.toggle('active', isActive);
if (isActive && stripEl && stripEl.clientWidth > 0) {
const stripRect = stripEl.getBoundingClientRect();
const btnRect = btn.getBoundingClientRect();
const offsetWithinStrip = (btnRect.left - stripRect.left) + stripEl.scrollLeft;
const targetLeft = offsetWithinStrip - (stripEl.clientWidth - btn.clientWidth) / 2;
stripEl.scrollTo({
left: Math.max(0, targetLeft),
behavior: 'smooth'
});
}
});
if (window.scrollX > 0) {
window.scrollTo(0, window.scrollY);
}
showStripPeek(3000);
updateInfoModal();
updateAlbumTags();
preload(currentIndex + 1);
preload(currentIndex - 1);
};
// Helper that returns the parent album's rating as a minimal tag object array.
// The authoritative value is stored in #tags[data-parent-rating] and initialised
// from the server-rendered DOM on first load, then kept in sync by handleTagsUpdate.
const getParentRatingTags = () => {
const tagsContainer = document.querySelector('#tags');
if (!tagsContainer) return [];
const r = tagsContainer.dataset.parentRating || '';
if (!['sfw', 'nsfw', 'nsfl'].includes(r)) return [];
const tagMap = {
sfw: { id: 1, tag: 'sfw', normalized: 'sfw', badge: 'badge badge-success' },
nsfw: { id: 2, tag: 'nsfw', normalized: 'nsfw', badge: 'badge badge-danger' },
nsfl: { id: window.f0ckSession?.nsfl_tag_id || 3, tag: 'nsfl', normalized: 'nsfl', badge: 'badge badge-nsfl' }
};
return tagMap[r] ? [tagMap[r]] : [];
};
// Seed data-parent-rating from the server-rendered rating badge
(() => {
const tagsContainer = document.querySelector('#tags');
if (!tagsContainer) return;
const inner = tagsContainer.querySelector('.tags-inner') || tagsContainer;
const ratingEl = inner.querySelector('.rating-tag[data-rating]');
if (!ratingEl) return;
const r = ratingEl.dataset.rating;
if (['sfw', 'nsfw', 'nsfl'].includes(r)) {
tagsContainer.dataset.parentRating = r;
}
})();
const updateAlbumTags = () => {
const sub = albumData[currentIndex];
if (!sub) return;
const tagsContainer = document.querySelector('#tags');
if (!tagsContainer) return;
const subSlug = sub.slug || sub.subf0ck_id || sub.id;
tagsContainer.dataset.subf0ckId = String(sub.id);
tagsContainer.dataset.subf0ckSlug = String(subSlug);
tagsContainer.dataset.subf0ckIndex = String(currentIndex);
let tagScopeEl = document.querySelector('#subf0ck-tag-scope');
if (!tagScopeEl) {
const sidebarCont = document.querySelector('.sidebar-tags-container');
if (sidebarCont) {
tagScopeEl = document.createElement('div');
tagScopeEl.id = 'subf0ck-tag-scope';
tagScopeEl.className = 'subf0ck-tag-scope';
sidebarCont.insertBefore(tagScopeEl, tagsContainer);
}
}
if (tagScopeEl) {
tagScopeEl.innerHTML = ` Subf0ck
${subSlug} (${currentIndex + 1}/${albumData.length}):`;
}
let subTags = Array.isArray(sub.tags) ? sub.tags : [];
// If this sub-item has no rating tag, inherit the parent album's rating
const RATING_NORMS = ['sfw', 'nsfw', 'nsfl'];
const subHasRating = subTags.some(t => RATING_NORMS.includes(t.normalized));
if (!subHasRating) {
const parentRating = getParentRatingTags();
if (parentRating.length > 0) subTags = [...parentRating, ...subTags];
}
if (typeof window.renderTags === 'function') {
window.renderTags(subTags);
}
};
const updateInfoModal = () => {
const modal = document.getElementById('info-modal');
if (!modal) return;
const sub = albumData[currentIndex];
if (!sub) return;
const subHeading = modal.querySelector('#info-modal-subheading');
if (subHeading) {
const parentId = subHeading.getAttribute('data-item-id') || container.getAttribute('data-album-id') || '';
const parentSlug = subHeading.getAttribute('data-item-slug') || '';
const subSlug = sub.slug || sub.subf0ck_id || sub.id;
const total = albumData.length;
const idx = currentIndex + 1;
subHeading.innerHTML = `Post ID: ${parentId}${parentSlug ? ` (${parentSlug})` : ''} • Subf0ck: ${subSlug} (${idx}/${total})`;
}
const specsTitle = modal.querySelector('#info-specs-header-title');
if (specsTitle) {
specsTitle.textContent = `Technical Specifications (Subf0ck ${currentIndex + 1}/${albumData.length})`;
}
const fileSizeEl = modal.querySelector('#info-file-size');
if (fileSizeEl) {
let displaySize = sub.size || '';
if (displaySize === 'NaN B' || displaySize === 'NaN') displaySize = '';
if (displaySize && !isNaN(displaySize)) {
const num = Number(displaySize);
if (num > 0) {
const i = Math.min(4, Math.max(0, ~~(Math.log(num) / Math.log(1024))));
displaySize = (num / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
}
}
fileSizeEl.textContent = displaySize;
}
const dimsCard = modal.querySelector('#info-card-dimensions');
const dimsEl = modal.querySelector('#info-file-dimensions');
if (dimsCard && dimsEl) {
if (sub.width && sub.height) {
dimsEl.textContent = `${sub.width} × ${sub.height} px`;
dimsCard.style.display = '';
} else {
dimsCard.style.display = 'none';
}
}
const mimeEl = modal.querySelector('#info-file-mime');
if (mimeEl) {
mimeEl.textContent = sub.mime || '';
}
const directLink = modal.querySelector('#info-file-direct-link');
if (directLink) {
directLink.href = sub.dest || sub.src || '#';
}
const sourceCard = modal.querySelector('#info-card-source');
if (sourceCard) {
sourceCard.style.display = 'none';
}
const hashCard = modal.querySelector('#info-card-hash');
const hashEl = modal.querySelector('#info-file-hash');
const copyHashBtn = modal.querySelector('#info-copy-hash-btn');
if (hashCard) {
const cleanHash = sub.checksum ? String(sub.checksum).split('_bypass_')[0] : '';
if (cleanHash) {
if (hashEl) hashEl.textContent = cleanHash;
if (copyHashBtn) copyHashBtn.setAttribute('data-hash', cleanHash);
hashCard.style.display = '';
} else {
hashCard.style.display = 'none';
}
}
};
if (imgEl) {
imgEl.addEventListener('load', () => {
const sub = albumData[currentIndex];
if (sub && (!sub.width || !sub.height) && imgEl.naturalWidth) {
sub.width = imgEl.naturalWidth;
sub.height = imgEl.naturalHeight;
updateInfoModal();
}
});
}
if (videoEl) {
videoEl.addEventListener('loadedmetadata', () => {
const sub = albumData[currentIndex];
if (sub && (!sub.width || !sub.height) && videoEl.videoWidth) {
sub.width = videoEl.videoWidth;
sub.height = videoEl.videoHeight;
updateInfoModal();
}
});
}
// Ensure proper initial media display (especially if initial item is video or subf0ck hash was requested)
showImage(currentIndex, 'none', !!initialHash);
if (prevBtn) {
prevBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
showImage(currentIndex - 1, 'prev');
});
}
if (nextBtn) {
nextBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
showImage(currentIndex + 1, 'next');
});
}
let hasDraggedStrip = false;
if (stripEl && !stripEl._dragInitialized) {
stripEl._dragInitialized = true;
let isDown = false;
let startX = 0;
let startScrollLeft = 0;
let momentumID = null;
let velX = 0;
let lastX = 0;
let lastTime = 0;
stripEl.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
isDown = true;
hasDraggedStrip = false;
startX = e.pageX;
startScrollLeft = stripEl.scrollLeft;
lastX = e.pageX;
lastTime = performance.now();
velX = 0;
cancelAnimationFrame(momentumID);
});
window.addEventListener('mousemove', (e) => {
if (!isDown) return;
const now = performance.now();
const walk = e.pageX - startX;
if (Math.abs(walk) > 6) {
hasDraggedStrip = true;
stripEl.classList.add('is-dragging');
e.preventDefault();
stripEl.scrollLeft = startScrollLeft - walk;
const dt = Math.max(1, now - lastTime);
velX = (e.pageX - lastX) / dt;
lastX = e.pageX;
lastTime = now;
}
});
window.addEventListener('mouseup', () => {
if (!isDown) return;
isDown = false;
stripEl.classList.remove('is-dragging');
showStripPeek(6000);
if (hasDraggedStrip && Math.abs(velX) > 0.15) {
let currentVel = velX * 18;
const glide = () => {
if (Math.abs(currentVel) > 0.5) {
stripEl.scrollLeft -= currentVel;
currentVel *= 0.93;
momentumID = requestAnimationFrame(glide);
}
};
momentumID = requestAnimationFrame(glide);
}
setTimeout(() => {
hasDraggedStrip = false;
}, 100);
});
// Touch drag / swipe support for mobile
let touchStartX = 0;
let touchStartScrollLeft = 0;
let isTouchingStrip = false;
stripEl.addEventListener('touchstart', (e) => {
if (e.touches.length === 1) {
e.stopPropagation();
if (stripTimeout) clearTimeout(stripTimeout);
container.classList.add('strip-peek');
stripEl.classList.add('strip-peek');
isTouchingStrip = true;
hasDraggedStrip = false;
touchStartX = e.touches[0].clientX;
touchStartScrollLeft = stripEl.scrollLeft;
lastX = e.touches[0].clientX;
lastTime = performance.now();
velX = 0;
cancelAnimationFrame(momentumID);
}
}, { passive: true });
stripEl.addEventListener('touchmove', (e) => {
if (!isTouchingStrip || e.touches.length !== 1) return;
e.stopPropagation();
const currentX = e.touches[0].clientX;
const walk = currentX - touchStartX;
if (Math.abs(walk) > 3) {
hasDraggedStrip = true;
stripEl.classList.add('is-dragging');
stripEl.scrollLeft = touchStartScrollLeft - walk;
const now = performance.now();
const dt = Math.max(1, now - lastTime);
velX = (currentX - lastX) / dt;
lastX = currentX;
lastTime = now;
}
}, { passive: true });
stripEl.addEventListener('touchend', (e) => {
if (!isTouchingStrip) return;
e.stopPropagation();
isTouchingStrip = false;
stripEl.classList.remove('is-dragging');
showStripPeek(6000);
if (hasDraggedStrip) {
if (Math.abs(velX) > 0.05) {
let currentVel = velX * 24;
const glide = () => {
if (Math.abs(currentVel) > 0.5) {
stripEl.scrollLeft -= currentVel;
currentVel *= 0.93;
momentumID = requestAnimationFrame(glide);
}
};
momentumID = requestAnimationFrame(glide);
}
setTimeout(() => {
hasDraggedStrip = false;
}, 150);
}
}, { passive: true });
stripEl.addEventListener('touchcancel', (e) => {
e.stopPropagation();
isTouchingStrip = false;
stripEl.classList.remove('is-dragging');
showStripPeek(6000);
setTimeout(() => {
hasDraggedStrip = false;
}, 100);
}, { passive: true });
stripEl.addEventListener('wheel', (e) => {
if (e.deltaY !== 0) {
e.preventDefault();
stripEl.scrollLeft += e.deltaY;
}
}, { passive: false });
}
thumbItems.forEach((btn) => {
btn.addEventListener('click', (e) => {
if (hasDraggedStrip) {
e.preventDefault();
e.stopPropagation();
return;
}
e.preventDefault();
e.stopPropagation();
const targetIdx = parseInt(btn.getAttribute('data-index'), 10);
if (!isNaN(targetIdx)) {
showImage(targetIdx);
}
});
});
// Touch tap on container reveals thumbnail strip briefly on touch devices
container.addEventListener('click', (e) => {
if (!e.target.closest('.v0ck_settings_menu, .v0ck_hud, .album-btn')) {
showStripPeek(3000);
}
});
// Handle touch swipe for mobile gallery navigation
let touchStartX = null;
let touchStartY = null;
let touchIgnored = false;
container.addEventListener('touchstart', (e) => {
if (e.touches.length === 1) {
touchIgnored = !!e.target.closest('.album-thumbnails-strip, .v0ck_player_controls, .v0ck_settings_menu, .v0ck_hud, .album-btn');
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
}, { passive: true });
container.addEventListener('touchend', (e) => {
if (touchStartX === null || touchStartY === null || touchIgnored) {
touchStartX = null;
touchStartY = null;
touchIgnored = false;
return;
}
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const diffX = touchEndX - touchStartX;
const diffY = touchEndY - touchStartY;
// Minimum swipe distance of 50px and predominantly horizontal
if (Math.abs(diffX) > 50 && Math.abs(diffX) > Math.abs(diffY) * 1.5) {
if (diffX < 0) {
showImage(currentIndex + 1, 'next');
} else {
showImage(currentIndex - 1, 'prev');
}
}
touchStartX = null;
touchStartY = null;
touchIgnored = false;
}, { passive: true });
// Handle hash change if user navigates back/forward to another subf0ck
window.addEventListener('hashchange', () => {
const newHash = getHashSubf0ckId();
if (!newHash) return;
const foundIdx = albumData.findIndex((item) =>
String(item.slug || '') === newHash ||
String(item.subf0ck_id || '') === newHash ||
String(item.id) === newHash ||
String(item.order_index + 1) === newHash
);
if (foundIdx !== -1 && foundIdx !== currentIndex) {
showImage(foundIdx, 'none', false);
}
});
window._currentActiveAlbumGallery = {
prev: () => showImage(currentIndex - 1, 'prev'),
next: () => showImage(currentIndex + 1, 'next'),
showBySlug: (subKey) => {
if (!subKey || !Array.isArray(albumData)) return false;
const foundIdx = albumData.findIndex((item) =>
String(item.slug || '') === String(subKey) ||
String(item.subf0ck_id || '') === String(subKey) ||
String(item.id) === String(subKey) ||
String(item.order_index + 1) === String(subKey)
);
if (foundIdx !== -1) {
showImage(foundIdx, 'none', true);
return true;
}
return false;
},
updateInfoModal: updateInfoModal,
updateAlbumTags: updateAlbumTags,
getCurrentSubf0ck: () => albumData[currentIndex],
isHovered: false
};
window.albumGallery = window._currentActiveAlbumGallery;
container.addEventListener('mouseenter', () => {
if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = true;
});
container.addEventListener('mouseleave', () => {
if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = false;
});
};
const syncLocationSubf0ck = () => {
const layout = document.querySelector('.item-layout-container');
const reqSub = layout ? (layout.getAttribute('data-requested-subf0ck') || '') : '';
const hash = (window.location.hash || '').replace(/^#/, '').trim();
const targetSub = hash || reqSub;
if (targetSub) {
if (!hash && reqSub) {
history.replaceState(null, '', window.location.pathname + window.location.search + '#' + reqSub);
}
const locEl = document.querySelector('.location');
if (locEl && !locEl.textContent.includes('#')) {
locEl.textContent = locEl.textContent.replace(/#.*$/, '') + '#' + targetSub;
}
}
};
const setupMedia = () => {
window._currentActiveAlbumGallery = null;
window.albumGallery = null;
const elem = document.querySelector("#my-video") || document.querySelector("audio#my-video");
if (elem) {
video = new v0ck(elem);
} else {
video = null;
}
initAlbumGallery();
syncLocationSubf0ck();
};
document.addEventListener('f0ck:contentLoaded', () => {
initAlbumGallery();
syncLocationSubf0ck();
});
const initOnaraInitialState = () => {
if (!isOnaraActive()) return;
promoteOnaraModals();
if (document.body.classList.contains('onara-modal-open')) {
const modal = openOnaraModal();
if (!window._onaraReturnUrl) {
window._onaraReturnUrl = getOnaraBaseUrl();
window._onaraReturnTitle = window.f0ckDomain || 'f0ck';
}
window._onaraCurrentGridUrl = window._onaraReturnUrl;
const pathSegments = window.location.pathname.split('/');
const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
const activeKey = keySegments.length ? keySegments[keySegments.length - 1] : null;
if (activeKey) {
updateOnaraActiveItem(activeKey, window.location.href);
if (typeof window.trackVisit === 'function') {
window.trackVisit(activeKey);
}
}
} else {
window._onaraCurrentGridUrl = window.location.pathname + window.location.search;
}
};
// Initial Load
document.addEventListener('DOMContentLoaded', () => {
setupMedia();
initOnaraInitialState();
schedulePrefetch(800);
});
initOnaraInitialState();
// Dynamic YouTube ambient color timeline manager
let ytAmbientState = {
rafId: null,
videoId: null,
colors: null,
duration: 0,
currentTime: 0,
isPlaying: false,
lastTimeUpdate: 0,
currentColor: [0, 0, 0],
targetColor: [0, 0, 0],
cleanup: null
};
const stopYoutubeAmbient = () => {
if (ytAmbientState.rafId) {
window.cancelAnimFrame(ytAmbientState.rafId);
ytAmbientState.rafId = null;
}
if (ytAmbientState.cleanup) {
ytAmbientState.cleanup();
ytAmbientState.cleanup = null;
}
ytAmbientState.videoId = null;
ytAmbientState.colors = null;
ytAmbientState.isPlaying = false;
};
const initYoutubeAmbient = (ytEmbed, canvas, backgroundEnabled) => {
stopYoutubeAmbient();
if (!ytEmbed || !canvas || !backgroundEnabled) return;
const videoId = ytEmbed.dataset.ytId || (ytEmbed.src && (ytEmbed.src.match(/embed\/([a-zA-Z0-9_-]+)/) || [])[1]);
if (!videoId) return;
ytAmbientState.videoId = videoId;
const context = canvas.getContext('2d');
const _SCALE = 0.5;
const updateCanvasSize = () => {
const cw = Math.max(1, (canvas.clientWidth * _SCALE) | 0);
const ch = Math.max(1, (canvas.clientHeight * _SCALE) | 0);
if (canvas.width !== cw || canvas.height !== ch) {
canvas.width = cw;
canvas.height = ch;
}
return { cw: canvas.width, ch: canvas.height };
};
const { cw, ch } = updateCanvasSize();
const blurPx = Math.round(80 * _SCALE) || 1;
// 1. Draw static thumbnail immediately for instant background (with robust fallback)
const itemId = window.getCurrentItemId();
const tryDrawThumb = (url, fallbackUrl) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
try {
context.filter = `blur(${blurPx}px) brightness(1.2)`;
const sw = img.naturalWidth || img.width;
const sh = img.naturalHeight || img.height;
if (sw > 0 && sh > 0) {
const scale = Math.max(canvas.width / sw, canvas.height / sh);
const dw = sw * scale;
const dh = sh * scale;
context.drawImage(img, (canvas.width - dw) / 2, (canvas.height - dh) / 2, dw, dh);
} else {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
context.filter = 'none';
} catch (e) {}
canvas.classList.remove('fader-out', 'fast-fade');
canvas.classList.add('fader-in');
};
img.onerror = () => {
if (fallbackUrl && url !== fallbackUrl) {
tryDrawThumb(fallbackUrl, null);
} else {
canvas.classList.remove('fader-out', 'fast-fade');
canvas.classList.add('fader-in');
}
};
img.src = url;
};
const localThumb = itemId ? `/t/${itemId}.webp` : null;
const remoteThumb = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
tryDrawThumb(localThumb || remoteThumb, remoteThumb);
// 2. Fetch storyboard ambient colors
fetch(`/api/v2/ambient/yt/${videoId}`)
.then(res => res.ok ? res.json() : null)
.then(data => {
if (!data || !Array.isArray(data.colors) || !data.colors.length || ytAmbientState.videoId !== videoId) return;
ytAmbientState.colors = data.colors;
ytAmbientState.duration = Number(data.duration) || 0;
if (ytAmbientState.colors.length > 0) {
ytAmbientState.currentColor = [...ytAmbientState.colors[0]];
ytAmbientState.targetColor = [...ytAmbientState.colors[0]];
// Immediately paint the first frame color as ambient glow!
renderAmbientFrame();
canvas.classList.remove('fader-out', 'fast-fade');
canvas.classList.add('fader-in');
}
if (ytAmbientState.isPlaying) {
startAmbientLoop();
}
})
.catch(() => {});
// 3. Render function for ambient lighting
const renderAmbientFrame = () => {
if (!ytAmbientState.colors || !ytAmbientState.colors.length || !ytAmbientState.duration) return;
const { cw: curW, ch: curH } = updateCanvasSize();
let t = ytAmbientState.currentTime;
if (ytAmbientState.isPlaying && ytAmbientState.lastTimeUpdate > 0) {
const dt = (performance.now() - ytAmbientState.lastTimeUpdate) / 1000;
t = Math.min(ytAmbientState.duration, t + dt);
}
const norm = Math.max(0, Math.min(1, t / ytAmbientState.duration));
const pos = norm * (ytAmbientState.colors.length - 1);
const idx = Math.floor(pos);
const next = Math.min(ytAmbientState.colors.length - 1, idx + 1);
const frac = pos - idx;
const c1 = ytAmbientState.colors[idx];
const c2 = ytAmbientState.colors[next];
ytAmbientState.targetColor = [
c1[0] + (c2[0] - c1[0]) * frac,
c1[1] + (c2[1] - c1[1]) * frac,
c1[2] + (c2[2] - c1[2]) * frac
];
// Smooth lerp
ytAmbientState.currentColor[0] += (ytAmbientState.targetColor[0] - ytAmbientState.currentColor[0]) * 0.15;
ytAmbientState.currentColor[1] += (ytAmbientState.targetColor[1] - ytAmbientState.currentColor[1]) * 0.15;
ytAmbientState.currentColor[2] += (ytAmbientState.targetColor[2] - ytAmbientState.currentColor[2]) * 0.15;
const r = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[0])));
const g = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[1])));
const b = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[2])));
const ctx = canvas.getContext('2d');
if (!ctx) return;
// Render radial ambient wash over canvas
ctx.save();
const cx = curW / 2;
const cy = curH / 2;
const maxR = Math.max(curW, curH) * 0.85;
const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxR);
grad.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.95)`);
grad.addColorStop(0.4, `rgba(${Math.round(r * 0.75)}, ${Math.round(g * 0.75)}, ${Math.round(b * 0.75)}, 0.7)`);
grad.addColorStop(0.8, `rgba(${Math.round(r * 0.3)}, ${Math.round(g * 0.3)}, ${Math.round(b * 0.3)}, 0.4)`);
grad.addColorStop(1, 'rgba(5, 5, 10, 0.95)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, curW, curH);
ctx.restore();
};
const startAmbientLoop = () => {
if (ytAmbientState.rafId) return;
const loop = () => {
if (!ytAmbientState.isPlaying || ytAmbientState.videoId !== videoId) {
ytAmbientState.rafId = null;
return;
}
renderAmbientFrame();
ytAmbientState.rafId = window.requestAnimFrame(loop);
};
ytAmbientState.rafId = window.requestAnimFrame(loop);
};
// 4. Connect to YouTube player via official API and postMessage
const sendPostMsg = (msg) => {
if (!ytEmbed.contentWindow) return;
try {
ytEmbed.contentWindow.postMessage(typeof msg === 'string' ? msg : JSON.stringify(msg), '*');
} catch (e) {}
};
const registerListeners = () => {
// YouTube postMessage handshake
sendPostMsg({ event: 'listening', id: ytEmbed.id || 1 });
sendPostMsg({ event: 'command', func: 'addEventListener', args: ['onStateChange'] });
};
ytEmbed.addEventListener('load', registerListeners);
registerListeners();
setTimeout(registerListeners, 500);
setTimeout(registerListeners, 1500);
// Also attach YouTube IFrame API if available
const tryAttachYTPlayer = () => {
if (window.YT && window.YT.Player) {
try {
new window.YT.Player(ytEmbed, {
events: {
onStateChange: (event) => {
if (event.data === 1) { // PLAYING
ytAmbientState.isPlaying = true;
startAmbientLoop();
} else if (event.data === 2 || event.data === 0) {
ytAmbientState.isPlaying = false;
}
}
}
});
} catch (e) {}
}
};
if (window.YT && window.YT.Player) {
tryAttachYTPlayer();
} else if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.onload = () => setTimeout(tryAttachYTPlayer, 200);
document.head.appendChild(tag);
} else {
setTimeout(tryAttachYTPlayer, 1000);
}
const onMessage = (event) => {
if (typeof event.origin !== 'string' || !event.origin.includes('youtube.com')) return;
let data;
try {
data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
} catch (e) {
return;
}
if (!data) return;
let state = undefined;
if (data.event === 'onStateChange') {
state = data.info;
} else if (data.event === 'infoDelivery' && data.info && data.info.playerState !== undefined) {
state = data.info.playerState;
}
if (state === 1) { // PLAYING
ytAmbientState.isPlaying = true;
startAmbientLoop();
} else if (state === 2 || state === 0) { // PAUSED or ENDED
ytAmbientState.isPlaying = false;
}
if (data.event === 'infoDelivery' && data.info && typeof data.info.currentTime === 'number') {
ytAmbientState.currentTime = data.info.currentTime;
ytAmbientState.lastTimeUpdate = performance.now();
if (!ytAmbientState.isPlaying) {
renderAmbientFrame();
}
}
};
window.addEventListener('message', onMessage);
ytAmbientState.cleanup = () => {
window.removeEventListener('message', onMessage);
ytEmbed.removeEventListener('load', registerListeners);
};
};
// Destroy / stop background canvas instance and animation loops
window.destroyBackgroundInstance = () => {
if (bgRafId) {
window.cancelAnimFrame(bgRafId);
bgRafId = null;
}
if (visualizerRafId) {
window.cancelAnimFrame(visualizerRafId);
visualizerRafId = null;
}
stopYoutubeAmbient();
const canvas = document.getElementById('bg');
if (canvas) {
canvas._bgFadingOut = false;
canvas.classList.remove('fader-in');
canvas.classList.add('fader-out');
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
};
// Paint background canvas immediately from thumbnail without network or animation delay
window.paintImmediateBgThumb = (thumbOrElem) => {
if (typeof background !== 'undefined' && !background) return;
const canvas = document.getElementById('bg');
if (!canvas) return;
let img = null;
if (thumbOrElem instanceof HTMLImageElement) {
img = thumbOrElem;
} else if (thumbOrElem && typeof thumbOrElem.querySelector === 'function') {
img = thumbOrElem.querySelector('img');
}
if (!img) {
const activeEl = document.querySelector('.posts > a.thumb.onara-active img, .posts > a.thumb:focus img');
if (activeEl) img = activeEl;
}
if (!img || !img.complete || (img.naturalWidth === 0 && img.width === 0)) return;
const SCALE = 0.5;
const cw = Math.max(1, (canvas.clientWidth * SCALE) | 0);
const ch = Math.max(1, (canvas.clientHeight * SCALE) | 0);
if (canvas.width !== cw || canvas.height !== ch) {
canvas.width = cw;
canvas.height = ch;
}
canvas._bgFadingOut = false;
canvas.classList.remove('fader-out', 'fast-fade');
canvas.classList.add('fader-in');
canvas.style.transition = 'none';
canvas.style.opacity = 'var(--bg-canvas-opacity, 1.0)';
const ctx = canvas.getContext('2d');
if (!ctx) return;
const cfg = (typeof window.audioVisualizerTuning !== 'undefined' && window.audioVisualizerTuning) || (typeof DEFAULT_AUDIO_TUNING !== 'undefined' ? DEFAULT_AUDIO_TUNING : {});
const method = cfg.bgBlurMethod !== undefined ? Number(cfg.bgBlurMethod) : 0;
const bSetting = cfg.bgCanvasBlur !== undefined ? Number(cfg.bgCanvasBlur) : 30;
const bPx = method === 1 ? 0 : Math.round(bSetting * SCALE);
const bVal = cfg.bgCanvasBrightness !== undefined ? Number(cfg.bgCanvasBrightness) : 0.45;
const sat = cfg.bgCanvasSaturate !== undefined ? Number(cfg.bgCanvasSaturate) : 1.8;
const con = cfg.bgCanvasContrast !== undefined ? Number(cfg.bgCanvasContrast) : 1.1;
const parts = [];
if (bPx > 0) parts.push(`blur(${bPx}px)`);
if (bVal !== 1) parts.push(`brightness(${bVal})`);
if (sat !== 1) parts.push(`saturate(${sat})`);
if (con !== 1) parts.push(`contrast(${con})`);
const filterStr = parts.length > 0 ? parts.join(' ') : 'none';
ctx.clearRect(0, 0, cw, ch);
ctx.save();
ctx.filter = filterStr;
let sw = img.naturalWidth || img.width;
let sh = img.naturalHeight || img.height;
if (sw > 0 && sh > 0) {
const scale = Math.max(cw / sw, ch / sh);
const dw = sw * scale;
const dh = sh * scale;
const dx = (cw - dw) / 2;
const dy = (ch - dh) / 2;
ctx.drawImage(img, dx, dy, dw, dh);
} else {
ctx.drawImage(img, 0, 0, cw, ch);
}
ctx.restore();
// Color overlay tint if configured
const colOp = cfg.bgCanvasColorOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.bgCanvasColorOpacity))) : 0;
if (colOp > 0.001) {
const col = cfg.bgCanvasColor || '#000000';
ctx.save();
ctx.fillStyle = colOp >= 0.999 ? col : `color-mix(in srgb, ${col} ${Math.round(colOp * 100)}%, transparent)`;
ctx.fillRect(0, 0, cw, ch);
ctx.restore();
}
};
// Export init function for dynamic calls
window.initBackground = () => {
// Media selection priority
let elem = null;
if (document.body.classList.contains('onara-modal-open')) {
const mount = document.getElementById('onara-item-mount');
if (mount) {
// For albums: prioritize visible video/audio over the always-present ${currentAudioSection}
`;
}
const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
if (s.type === 'color') {
audioRowsHtml += `
${s.label}
${val}
${s.label}
${val}${s.unit || ''}
${currentBgSection}
`;
}
const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
if (s.type === 'color') {
bgRowsHtml += `
${s.label}
${val}
${s.label}
${val}${s.unit || ''}
${currentDanmakuSection}
`;
}
const val = danmakuCfg[s.key] !== undefined ? danmakuCfg[s.key] : (window.DEFAULT_DANMAKU_TUNING ? window.DEFAULT_DANMAKU_TUNING[s.key] : 0);
if (s.type === 'color') {
danmakuRowsHtml += `
${s.label}
${val}
${s.label}
${val}${s.unit || ''}
${audioRowsHtml}