visibility${formatCount(meme.viewCount)}
download${formatCount(meme.downloadCount)}
`;
if (options.append && index === 0) article.tabIndex = -1;
return article;
});
if (options.append) {
grid.append(...cards);
} else {
unobserveViewedImages();
grid.replaceChildren(...cards);
}
observeViewedImages(cards);
}
async function validateClientFile(file) {
if (!file) return 'SELECT A FILE.';
if (!SAFE_TYPES.has(file.type)) return 'ONLY PNG AND JPEG ARE ACCEPTED.';
if (file.size > MAX_FILE_BYTES) return 'IMAGE EXCEEDS 5MB.';
try {
const dimensions = await readImageDimensions(file);
if (dimensions.width !== dimensions.height) return 'IMAGE MUST BE SQUARE.';
if (dimensions.width > 6000 || dimensions.height > 6000) return 'IMAGE EXCEEDS 6000x6000.';
} catch {
return 'IMAGE COULD NOT BE INSPECTED.';
}
return '';
}
function readImageDimensions(file) {
return new Promise((resolve, reject) => {
const image = new Image();
const url = URL.createObjectURL(file);
image.onload = () => {
URL.revokeObjectURL(url);
resolve({ width: image.naturalWidth, height: image.naturalHeight });
};
image.onerror = () => {
URL.revokeObjectURL(url);
reject(new Error('invalid image'));
};
image.src = url;
});
}
function closeUpload() {
uploadForm.reset();
fileLabel.textContent = 'SELECT PNG / JPEG';
formStatus.textContent = '';
uploadModal.close();
}
function handleViewIntersections(entries) {
for (const entry of entries) {
const id = entry.target.dataset.viewObserveId;
if (!id || wasRecentlyViewed(id)) {
stopViewTimer(id);
if (wasRecentlyViewed(id)) viewObserver.unobserve(entry.target);
continue;
}
if (entry.isIntersecting && entry.intersectionRatio >= VIEW_THRESHOLD) {
startViewTimer(id, entry.target);
} else {
stopViewTimer(id);
}
}
}
function observeViewedImages(cards) {
if (!viewObserver) return;
for (const card of cards) {
const image = card.querySelector('[data-view-observe-id]');
if (image && !wasRecentlyViewed(image.dataset.viewObserveId)) viewObserver.observe(image);
}
}
function unobserveViewedImages() {
for (const timer of pendingViewTimers.values()) window.clearTimeout(timer);
pendingViewTimers.clear();
if (!viewObserver) return;
for (const image of grid.querySelectorAll('[data-view-observe-id]')) {
viewObserver.unobserve(image);
}
}
function startViewTimer(id, target) {
if (pendingViewTimers.has(id)) return;
const timer = window.setTimeout(async () => {
pendingViewTimers.delete(id);
if (wasRecentlyViewed(id)) {
viewObserver.unobserve(target);
return;
}
await recordViewOnce(id);
viewObserver.unobserve(target);
}, VIEW_DWELL_MS);
pendingViewTimers.set(id, timer);
}
function stopViewTimer(id) {
const timer = pendingViewTimers.get(id);
if (!timer) return;
window.clearTimeout(timer);
pendingViewTimers.delete(id);
}
async function recordViewOnce(id) {
if (!isMemeId(id)) return;
if (wasRecentlyViewed(id)) return;
rememberViewed(id);
try {
const response = await fetch(`/api/memes/${id}/view`, { method: 'POST' });
const payload = await response.json();
if (!response.ok) throw new Error(payload.error || 'View update failed.');
updateCounters(payload.meme);
} catch {
forgetViewed(id);
// Live counter updates are best-effort; the stream and lightbox should still work.
}
}
function isMemeId(id) {
return typeof id === 'string' && /^[a-f0-9]{64}$/.test(id);
}
function wasRecentlyViewed(id) {
if (viewedThisSession.has(id)) return true;
try {
const viewedAt = Number.parseInt(localStorage.getItem(`${VIEW_DEDUPE_PREFIX}${id}`) || '0', 10);
if (Number.isFinite(viewedAt) && Date.now() - viewedAt < VIEW_DEDUPE_MS) return true;
} catch {
// Storage can be unavailable in hardened browser modes; session memory still dedupes.
}
return false;
}
function rememberViewed(id) {
viewedThisSession.add(id);
try {
localStorage.setItem(`${VIEW_DEDUPE_PREFIX}${id}`, String(Date.now()));
} catch {
// localStorage is optional; no upload or view flow depends on it.
}
}
function forgetViewed(id) {
viewedThisSession.delete(id);
try {
localStorage.removeItem(`${VIEW_DEDUPE_PREFIX}${id}`);
} catch {
// Optional storage cleanup.
}
}
function connectLiveCounters() {
if (!('EventSource' in window)) return;
const source = new EventSource('/api/events');
source.addEventListener('metric', (event) => {
updateCounters(JSON.parse(event.data));
});
}
function updateCounters(meme) {
for (const element of document.querySelectorAll(`[data-counter-id="${meme.id}"]`)) {
if (element.dataset.counterKind === 'view') {
element.lastChild.textContent = formatCount(meme.viewCount);
}
if (element.dataset.counterKind === 'download') {
element.lastChild.textContent = formatCount(meme.downloadCount);
}
}
}
function setLoader(label, spinning) {
feedLoaderLabel.textContent = label;
feedLoader.classList.toggle('is-spinning', spinning);
}
function shortId(id) {
return `0x${id.slice(0, 4).toUpperCase()}...${id.slice(-4).toUpperCase()}`;
}
function relativeAge(value) {
const elapsed = Math.max(1, Date.now() - new Date(value).getTime());
const minutes = Math.floor(elapsed / 60000);
if (minutes < 60) return `${minutes}M AGO`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}H AGO`;
return `${Math.floor(hours / 24)}D AGO`;
}
function formatCount(value) {
const count = Number.isFinite(value) ? value : 0;
if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`;
return String(count);
}
function scoreBucket(value) {
const score = Number.isFinite(value) ? value : 50;
if (score >= 90) return 5;
if (score >= 75) return 4;
if (score >= 60) return 3;
if (score >= 40) return 2;
if (score >= 20) return 1;
return 0;
}
async function refreshStatus() {
const started = performance.now();
try {
const response = await fetch('/api/status', { cache: 'no-store' });
const status = await response.json();
if (!response.ok) throw new Error('status failed');
setStat('status', status.ok ? 'ONLINE' : 'DEGRADED');
setStat('latency', `${Math.max(1, Math.round(performance.now() - started))}MS`);
setStat('nodes', formatCount(status.liveClients));
setStat('memes', formatCount(status.memeCount));
} catch {
setStat('status', 'OFFLINE');
setStat('latency', '--MS');
setStat('nodes', '--');
setStat('memes', '--');
}
}
function setStat(name, value) {
for (const element of document.querySelectorAll(`[data-stat="${name}"]`)) {
element.textContent = value;
}
}
function updateScrollIndicator() {
const segments = [...scrollIndicator.querySelectorAll('span')];
const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
const progress = Math.min(1, Math.max(0, window.scrollY / maxScroll));
const activeIndex = Math.min(segments.length - 1, Math.round(progress * (segments.length - 1)));
segments.forEach((segment, index) => {
segment.classList.toggle('active', index === activeIndex);
});
}