548 lines
20 KiB
JavaScript
548 lines
20 KiB
JavaScript
import React, {
|
||
useState, useEffect, useRef, useCallback, memo,
|
||
} from 'react';
|
||
import ArtworkGallery from '../artwork/ArtworkGallery';
|
||
import './MasonryGallery.css';
|
||
|
||
function getCsrfToken() {
|
||
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
||
}
|
||
|
||
async function sendDiscoveryEvent(endpoint, payload) {
|
||
if (!endpoint) return;
|
||
|
||
try {
|
||
await fetch(endpoint, {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
keepalive: true,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': getCsrfToken(),
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
body: JSON.stringify(payload),
|
||
});
|
||
} catch {
|
||
// Discovery telemetry should never block the gallery UX.
|
||
}
|
||
}
|
||
|
||
// ── Masonry helpers ────────────────────────────────────────────────────────
|
||
const ROW_SIZE = 8;
|
||
const ROW_GAP = 16;
|
||
|
||
function applyMasonry(grid) {
|
||
if (!grid) return;
|
||
Array.from(grid.querySelectorAll('.nova-card')).forEach((card) => {
|
||
const media = card.querySelector('.nova-card-media') || card;
|
||
let height = media.getBoundingClientRect().height || 200;
|
||
|
||
// Clamp to the computed max-height so the span never over-reserves rows
|
||
// when CSS max-height kicks in (e.g. portrait images capped to 2×16:9).
|
||
const cssMaxH = parseFloat(getComputedStyle(media).maxHeight);
|
||
if (!isNaN(cssMaxH) && cssMaxH > 0 && cssMaxH < height) {
|
||
height = cssMaxH;
|
||
}
|
||
|
||
const span = Math.max(1, Math.ceil((height + ROW_GAP) / (ROW_SIZE + ROW_GAP)));
|
||
card.style.gridRowEnd = `span ${span}`;
|
||
});
|
||
}
|
||
|
||
function waitForImages(el) {
|
||
return Promise.all(
|
||
Array.from(el.querySelectorAll('img')).map((img) =>
|
||
img.decode ? img.decode().catch(() => null) : Promise.resolve(),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Page fetch helpers ─────────────────────────────────────────────────────
|
||
/**
|
||
* Fetch the next page of data.
|
||
*
|
||
* The response is either:
|
||
* - JSON { artworks: [...], next_cursor: '...' } when X-Requested-With is
|
||
* sent and the controller returns JSON (future enhancement)
|
||
* - HTML page – we parse [data-react-masonry-gallery] from it and read its
|
||
* data-artworks / data-next-cursor / data-next-page-url attributes.
|
||
*/
|
||
async function fetchPageData(url) {
|
||
const res = await fetch(url, {
|
||
credentials: 'same-origin',
|
||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||
});
|
||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||
|
||
const ct = res.headers.get('content-type') || '';
|
||
|
||
// JSON fast-path (if controller ever returns JSON)
|
||
if (ct.includes('application/json')) {
|
||
const json = await res.json();
|
||
|
||
// Support multiple API payload shapes across endpoints.
|
||
const artworks = Array.isArray(json.artworks)
|
||
? json.artworks
|
||
: Array.isArray(json.data)
|
||
? json.data
|
||
: Array.isArray(json.items)
|
||
? json.items
|
||
: Array.isArray(json.results)
|
||
? json.results
|
||
: [];
|
||
|
||
const nextCursor = json.next_cursor
|
||
?? json.nextCursor
|
||
?? json.meta?.next_cursor
|
||
?? null;
|
||
|
||
const nextPageUrl = json.next_page_url
|
||
?? json.nextPageUrl
|
||
?? json.meta?.next_page_url
|
||
?? null;
|
||
|
||
const hasMore = typeof json.has_more === 'boolean'
|
||
? json.has_more
|
||
: typeof json.hasMore === 'boolean'
|
||
? json.hasMore
|
||
: null;
|
||
|
||
return {
|
||
artworks,
|
||
nextCursor,
|
||
nextPageUrl,
|
||
hasMore,
|
||
meta: json.meta ?? null,
|
||
};
|
||
}
|
||
|
||
// HTML: parse and extract mount-container data attributes
|
||
const html = await res.text();
|
||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||
const el = doc.querySelector('[data-react-masonry-gallery]');
|
||
if (!el) return { artworks: [], nextCursor: null, nextPageUrl: null };
|
||
|
||
let artworks = [];
|
||
try { artworks = JSON.parse(el.dataset.artworks || '[]'); } catch { /* empty */ }
|
||
|
||
return {
|
||
artworks,
|
||
nextCursor: el.dataset.nextCursor || null,
|
||
nextPageUrl: el.dataset.nextPageUrl || null,
|
||
hasMore: null,
|
||
meta: null,
|
||
};
|
||
}
|
||
|
||
// ── Skeleton row ──────────────────────────────────────────────────────────
|
||
function SkeletonCard() {
|
||
return <div className="nova-skeleton-card" aria-hidden="true" />;
|
||
}
|
||
|
||
// ── Ranking API helpers ───────────────────────────────────────────────────
|
||
/**
|
||
* Map a single ArtworkListResource item (from /api/rank/*) to the internal
|
||
* artwork object shape used by ArtworkCard.
|
||
*/
|
||
function mapRankApiArtwork(item) {
|
||
const w = item.dimensions?.width ?? null;
|
||
const h = item.dimensions?.height ?? null;
|
||
const thumb = item.thumbnail_url ?? null;
|
||
const webUrl = item.urls?.web ?? item.category?.url ?? null;
|
||
return {
|
||
id: item.id ?? null,
|
||
name: item.title ?? item.name ?? null,
|
||
thumb: thumb,
|
||
thumb_url: thumb,
|
||
uname: item.author?.name ?? '',
|
||
username: item.author?.username ?? item.author?.name ?? '',
|
||
avatar_url: item.author?.avatar_url ?? null,
|
||
content_type_name: item.category?.content_type_name ?? item.category?.content_type_slug ?? item.category?.content_type ?? '',
|
||
content_type_slug: item.category?.content_type_slug ?? item.category?.content_type ?? '',
|
||
category_name: item.category?.name ?? '',
|
||
category_slug: item.category?.slug ?? '',
|
||
slug: item.slug ?? '',
|
||
url: webUrl,
|
||
width: w,
|
||
height: h,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* Fetch ranked artworks from the ranking API.
|
||
* Returns { artworks: [...] } in internal shape, or { artworks: [] } on failure.
|
||
*/
|
||
async function fetchRankApiArtworks(endpoint, rankType) {
|
||
try {
|
||
const url = new URL(endpoint, window.location.href);
|
||
if (rankType) url.searchParams.set('type', rankType);
|
||
const res = await fetch(url.toString(), {
|
||
credentials: 'same-origin',
|
||
headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
|
||
});
|
||
if (!res.ok) return { artworks: [] };
|
||
const json = await res.json();
|
||
const items = Array.isArray(json.data) ? json.data : [];
|
||
return { artworks: items.map(mapRankApiArtwork) };
|
||
} catch {
|
||
return { artworks: [] };
|
||
}
|
||
}
|
||
|
||
const SKELETON_COUNT = 10;
|
||
|
||
function getMasonryCardProps(art, idx) {
|
||
const title = (art.name || art.title || 'Untitled artwork').trim();
|
||
const hasDimensions = Number(art.width) > 0 && Number(art.height) > 0;
|
||
const aspectRatio = hasDimensions ? Number(art.width) / Number(art.height) : null;
|
||
const categorySlug = (art.category_slug || '').toLowerCase();
|
||
const categoryName = (art.category_name || art.category || '').toLowerCase();
|
||
const wideCategories = ['photography', 'wallpapers', 'photography-digital', 'wallpaper'];
|
||
const wideCategoryNames = ['photography', 'wallpapers'];
|
||
const isWideEligible =
|
||
aspectRatio !== null &&
|
||
aspectRatio > 2.0 &&
|
||
(wideCategories.includes(categorySlug) || wideCategoryNames.includes(categoryName));
|
||
|
||
return {
|
||
articleClassName: `nova-card gallery-item artwork relative${isWideEligible ? ' nova-card--wide' : ''}`,
|
||
articleStyle: isWideEligible ? { gridColumn: 'span 2' } : undefined,
|
||
frameClassName: 'rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 hover:ring-white/15 hover:shadow-[0_8px_30px_rgba(0,0,0,0.6),0_0_0_1px_rgba(255,255,255,0.08)]',
|
||
mediaClassName: 'nova-card-media relative w-full overflow-hidden bg-neutral-900',
|
||
mediaStyle: hasDimensions ? { aspectRatio: `${art.width} / ${art.height}` } : undefined,
|
||
imageSrcSet: art.thumb_srcset || undefined,
|
||
imageSizes: '(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 20vw',
|
||
imageWidth: hasDimensions ? art.width : undefined,
|
||
imageHeight: hasDimensions ? art.height : undefined,
|
||
loading: idx < 8 ? 'eager' : 'lazy',
|
||
decoding: idx < 8 ? 'sync' : 'async',
|
||
fetchPriority: idx === 0 ? 'high' : undefined,
|
||
imageClassName: 'nova-card-main-image absolute inset-0 h-full w-full object-cover group-hover:scale-[1.03]',
|
||
metricBadge: art.recommendation_reason
|
||
? {
|
||
label: art.recommendation_reason,
|
||
className: 'bg-sky-500/14 text-sky-100 ring-sky-300/30 max-w-[15rem] truncate',
|
||
}
|
||
: null,
|
||
};
|
||
}
|
||
|
||
// ── Main component ────────────────────────────────────────────────────────
|
||
/**
|
||
* MasonryGallery
|
||
*
|
||
* Props (all optional – set via data attributes in entry-masonry-gallery.jsx):
|
||
* artworks [] Initial artwork objects
|
||
* galleryType string Maps to data-gallery-type (e.g. 'trending')
|
||
* cursorEndpoint string|null Route for cursor-based feeds (e.g. For You)
|
||
* initialNextCursor string|null First cursor token
|
||
* initialNextPageUrl string|null First "next page" URL (page-based feeds)
|
||
* limit number Items per page (default 40)
|
||
* rankApiEndpoint string|null /api/rank/* endpoint; used as fallback data
|
||
* source when no SSR artworks are available
|
||
* rankType string|null Ranking API ?type= param (trending|new_hot|best)
|
||
* gridClassName string|null Optional CSS class override for grid columns/gaps
|
||
*/
|
||
function MasonryGallery({
|
||
artworks: initialArtworks = [],
|
||
galleryType = 'discover',
|
||
cursorEndpoint = null,
|
||
initialNextCursor = null,
|
||
initialNextPageUrl = null,
|
||
limit = 40,
|
||
rankApiEndpoint = null,
|
||
rankType = null,
|
||
gridClassName = null,
|
||
discoveryEndpoint = null,
|
||
algoVersion: initialAlgoVersion = null,
|
||
}) {
|
||
const [artworks, setArtworks] = useState(initialArtworks);
|
||
const [nextCursor, setNextCursor] = useState(initialNextCursor);
|
||
const [nextPageUrl, setNextPageUrl] = useState(initialNextPageUrl);
|
||
const [loading, setLoading] = useState(false);
|
||
const [done, setDone] = useState(!initialNextCursor && !initialNextPageUrl);
|
||
const [algoVersion, setAlgoVersion] = useState(initialAlgoVersion);
|
||
|
||
const gridRef = useRef(null);
|
||
const triggerRef = useRef(null);
|
||
const viewedArtworkIdsRef = useRef(new Set());
|
||
const clickedArtworkIdsRef = useRef(new Set());
|
||
|
||
// ── Ranking API fallback ───────────────────────────────────────────────
|
||
// When the server-side render provides no initial artworks (e.g. cache miss
|
||
// or empty page result) and a ranking API endpoint is configured, perform a
|
||
// client-side fetch from the ranking API to hydrate the grid.
|
||
// Satisfies spec: "Fallback: Latest if ranking missing".
|
||
useEffect(() => {
|
||
if (initialArtworks.length > 0) return; // SSR artworks already present
|
||
if (!rankApiEndpoint) return; // no API endpoint configured
|
||
|
||
let cancelled = false;
|
||
setLoading(true);
|
||
fetchRankApiArtworks(rankApiEndpoint, rankType).then(({ artworks: ranked }) => {
|
||
if (cancelled) return;
|
||
if (ranked.length > 0) {
|
||
setArtworks(ranked);
|
||
setDone(true); // ranking API returns a full list; no further pagination
|
||
}
|
||
setLoading(false);
|
||
});
|
||
return () => { cancelled = true; };
|
||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
// ── Masonry re-layout ──────────────────────────────────────────────────
|
||
const relayout = useCallback(() => {
|
||
const g = gridRef.current;
|
||
if (!g) return;
|
||
applyMasonry(g);
|
||
waitForImages(g).then(() => applyMasonry(g));
|
||
}, []);
|
||
|
||
// Re-layout whenever artworks list changes.
|
||
// Defer by one requestAnimationFrame so the browser has resolved
|
||
// aspect-ratio heights before we measure with getBoundingClientRect().
|
||
useEffect(() => {
|
||
const raf = requestAnimationFrame(() => relayout());
|
||
return () => cancelAnimationFrame(raf);
|
||
}, [artworks, relayout]);
|
||
|
||
// Re-layout on container resize (column width changes)
|
||
useEffect(() => {
|
||
const g = gridRef.current;
|
||
if (!g || !('ResizeObserver' in window)) return;
|
||
const ro = new ResizeObserver(relayout);
|
||
ro.observe(g);
|
||
return () => ro.disconnect();
|
||
}, [relayout]);
|
||
|
||
// ── Load more ──────────────────────────────────────────────────────────
|
||
const fetchNext = useCallback(async () => {
|
||
if (loading || done) return;
|
||
|
||
// Build the URL to fetch
|
||
let fetchUrl = null;
|
||
if (cursorEndpoint && nextCursor) {
|
||
const u = new URL(cursorEndpoint, window.location.href);
|
||
u.searchParams.set('cursor', nextCursor);
|
||
u.searchParams.set('limit', String(limit));
|
||
fetchUrl = u.toString();
|
||
} else if (nextPageUrl) {
|
||
fetchUrl = nextPageUrl;
|
||
}
|
||
|
||
if (!fetchUrl) { setDone(true); return; }
|
||
|
||
setLoading(true);
|
||
try {
|
||
const { artworks: newItems, nextCursor: nc, nextPageUrl: np, hasMore, meta } =
|
||
await fetchPageData(fetchUrl);
|
||
|
||
if (meta?.algo_version) {
|
||
setAlgoVersion(meta.algo_version);
|
||
}
|
||
|
||
if (!newItems.length) {
|
||
setDone(true);
|
||
} else {
|
||
setArtworks((prev) => [...prev, ...newItems]);
|
||
if (cursorEndpoint) {
|
||
setNextCursor(nc);
|
||
if (hasMore === false || !nc) setDone(true);
|
||
} else {
|
||
setNextPageUrl(np);
|
||
if (!np) setDone(true);
|
||
}
|
||
}
|
||
} catch {
|
||
setDone(true);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [loading, done, cursorEndpoint, nextCursor, nextPageUrl, limit]);
|
||
|
||
// ── Intersection observer for infinite scroll ──────────────────────────
|
||
useEffect(() => {
|
||
if (done) return;
|
||
const trigger = triggerRef.current;
|
||
if (!trigger || !('IntersectionObserver' in window)) return;
|
||
|
||
const io = new IntersectionObserver(
|
||
(entries) => { if (entries[0].isIntersecting) fetchNext(); },
|
||
{ rootMargin: '900px', threshold: 0 },
|
||
);
|
||
io.observe(trigger);
|
||
return () => io.disconnect();
|
||
}, [done, fetchNext]);
|
||
|
||
useEffect(() => {
|
||
if (galleryType !== 'for-you' || !discoveryEndpoint) return undefined;
|
||
|
||
const grid = gridRef.current;
|
||
if (!grid || !(window.IntersectionObserver)) return undefined;
|
||
|
||
const artworkIndex = new Map(artworks.map((art, index) => [String(art.id), { art, index }]));
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (!entry.isIntersecting || entry.intersectionRatio < 0.65) {
|
||
return;
|
||
}
|
||
|
||
const card = entry.target.closest('[data-art-id]');
|
||
const artworkId = card?.getAttribute('data-art-id');
|
||
if (!artworkId || viewedArtworkIdsRef.current.has(artworkId)) {
|
||
return;
|
||
}
|
||
|
||
const candidate = artworkIndex.get(artworkId);
|
||
if (!candidate?.art?.id) {
|
||
return;
|
||
}
|
||
|
||
viewedArtworkIdsRef.current.add(artworkId);
|
||
observer.unobserve(entry.target);
|
||
sendDiscoveryEvent(discoveryEndpoint, {
|
||
event_type: 'view',
|
||
artwork_id: Number(candidate.art.id),
|
||
algo_version: candidate.art.recommendation_algo_version || algoVersion || undefined,
|
||
meta: {
|
||
gallery_type: galleryType,
|
||
position: candidate.index + 1,
|
||
source: candidate.art.recommendation_source || null,
|
||
reason: candidate.art.recommendation_reason || null,
|
||
score: candidate.art.recommendation_score ?? null,
|
||
},
|
||
});
|
||
});
|
||
},
|
||
{ threshold: [0.65] },
|
||
);
|
||
|
||
const cards = grid.querySelectorAll('[data-art-id]');
|
||
cards.forEach((card) => observer.observe(card));
|
||
|
||
return () => observer.disconnect();
|
||
}, [algoVersion, artworks, discoveryEndpoint, galleryType]);
|
||
|
||
useEffect(() => {
|
||
if (galleryType !== 'for-you' || !discoveryEndpoint) return undefined;
|
||
|
||
const grid = gridRef.current;
|
||
if (!grid) return undefined;
|
||
|
||
const handleClick = (event) => {
|
||
const card = event.target.closest('[data-art-id]');
|
||
if (!card) return;
|
||
|
||
const artworkId = card.getAttribute('data-art-id');
|
||
if (!artworkId || clickedArtworkIdsRef.current.has(artworkId)) {
|
||
return;
|
||
}
|
||
|
||
const artwork = artworks.find((item) => String(item.id) === artworkId);
|
||
if (!artwork?.id) {
|
||
return;
|
||
}
|
||
|
||
clickedArtworkIdsRef.current.add(artworkId);
|
||
sendDiscoveryEvent(discoveryEndpoint, {
|
||
event_type: 'click',
|
||
artwork_id: Number(artwork.id),
|
||
algo_version: artwork.recommendation_algo_version || algoVersion || undefined,
|
||
meta: {
|
||
gallery_type: galleryType,
|
||
source: artwork.recommendation_source || null,
|
||
reason: artwork.recommendation_reason || null,
|
||
score: artwork.recommendation_score ?? null,
|
||
target_url: artwork.url || null,
|
||
},
|
||
});
|
||
};
|
||
|
||
grid.addEventListener('click', handleClick, true);
|
||
return () => grid.removeEventListener('click', handleClick, true);
|
||
}, [algoVersion, artworks, discoveryEndpoint, galleryType]);
|
||
|
||
// Gallery V2 spec §7: 5 col desktop / 3 tablet / 2 mobile for all gallery pages.
|
||
// Discover feeds (home/discover page) retain the same 5-col layout.
|
||
const gridClass = gridClassName || 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6';
|
||
|
||
// ── Render ─────────────────────────────────────────────────────────────
|
||
return (
|
||
<section
|
||
className="pb-10 pt-2 is-enhanced"
|
||
data-nova-gallery
|
||
data-gallery-type={galleryType}
|
||
data-react-masonry-gallery
|
||
data-artworks={JSON.stringify(artworks)}
|
||
data-next-cursor={nextCursor ?? undefined}
|
||
data-next-page-url={nextPageUrl ?? undefined}
|
||
>
|
||
{artworks.length > 0 ? (
|
||
<>
|
||
<div
|
||
ref={gridRef}
|
||
>
|
||
<ArtworkGallery
|
||
items={artworks}
|
||
layout="masonry"
|
||
className={gridClass}
|
||
containerProps={{ 'data-gallery-grid': true }}
|
||
resolveCardProps={getMasonryCardProps}
|
||
/>
|
||
</div>
|
||
|
||
{/* Infinite scroll sentinel – placed after the grid */}
|
||
{!done && (
|
||
<div
|
||
ref={triggerRef}
|
||
className="h-px w-full"
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
|
||
{/* Loading indicator */}
|
||
{loading && (
|
||
<div className="flex justify-center items-center gap-2 mt-8 py-4 text-white/30 text-sm">
|
||
<svg
|
||
className="animate-spin h-4 w-4 shrink-0"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
>
|
||
<circle
|
||
className="opacity-25"
|
||
cx="12" cy="12" r="10"
|
||
stroke="currentColor"
|
||
strokeWidth="4"
|
||
/>
|
||
<path
|
||
className="opacity-75"
|
||
fill="currentColor"
|
||
d="M4 12a8 8 0 018-8v8H4z"
|
||
/>
|
||
</svg>
|
||
Loading more…
|
||
</div>
|
||
)}
|
||
|
||
{done && artworks.length > 0 && (
|
||
<p className="text-center text-xs text-white/20 mt-8 py-2">
|
||
All caught up
|
||
</p>
|
||
)}
|
||
</>
|
||
) : (
|
||
/* Empty state – gallery-type-specific messaging handled by caller */
|
||
<div className="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
|
||
<p className="text-white/40 text-sm">No artworks found for this section yet.</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default memo(MasonryGallery);
|