{WEEK_LABELS.map((m, i) => (
{m}
))}
{years.map(yr => (
{tip && {yr}
{WEEKS.map(w => {
const count = grid[yr]?.[w] || 0;
const weekKey = `${yr}-W${String(w).padStart(2,'0')}`;
const sel = selectedWeeks.has(weekKey);
const alpha = count === 0 ? 0 : 0.12 + (count / maxCount) * 0.88;
return (
setTip({ x: e.clientX, y: e.clientY, text: `${yr} wk ${w} · ${count} item${count!==1?'s':''}` })}
onMouseLeave={() => setTip(null)}
onClick={() => onToggleWeek(weekKey)}
/>
);
})}
))}
{tip.text}
}
Loading map…
;
const d3 = window.d3, tj = window.topojson;
const W = 960, H = 500;
const projection = d3.geoNaturalEarth1().scale(153).translate([W/2, H/2]);
const pathGen = d3.geoPath().projection(projection);
const countries = tj.feature(topo, topo.objects.countries);
return (
{tip &&
{tip.text}
}
{countryList.map(([region, count]) => {
const sel = selectedCountries.has(region);
return (
onToggleCountry(region)}>
{REGION_NAMES[region] || regionName(region) || region}
{count}
);
})}
Click a chip — left = AND, right = OR. Mix badges + subtags.
{badges.map(([h, c]) => { const op = selMap.get('badge:' + h); return (
); })}
{tags.length > 0 &&
{tags.map(([t, c]) => { const op = selMap.get('tag:' + t); return (
); })}
}
{sel.length > 0 && (
{ands.length > 0 && all of: {ands.map(c => c.kind === 'badge' ? HIGHLIGHTS[c.value].label : c.value).join(' · ')}}
{ands.length > 0 && ors.length > 0 && and }
{ors.length > 0 && any of: {ors.map(c => c.kind === 'badge' ? HIGHLIGHTS[c.value].label : c.value).join(' · ')}}
{results.length} match{results.length !== 1 ? 'es' : ''}
{results.slice(0, 140).map(it => {
const img = it.poster || it.tmdbPoster || it.igdbCover || it.bookCover;
return (
onOpenItem && onOpenItem(it)} title={`${displayTitle(it)} (${it.year || ''})`}>
{img ? 
: {MG[it.medium] || '•'}}
);
})}
onOpenItem && onOpenItem(r.it)} title={`${displayTitle(r.it)} (${r.it.year})`}>
{displayTitle(r.it)}
★{r.me}
vs {r.them}
0 ? 'pos' : 'neg'}`}>{r.delta > 0 ? '+' : ''}{r.delta}
);
return (
Palette — explore by badge × tag
Where your taste diverges{contrarian.n ? '' : ' — needs rated titles with a community score'}
You rated higher
{contrarian.higher.length ? contrarian.higher.map(r => —
}
Lower than the crowd
{contrarian.lower.length ? contrarian.lower.map(r => —
}
Time spent
≈ {formatSpan(time.total)}
{time.by.map(([m, mins]) => (
{m}{formatSpan(mins)}
))}
{!time.by.length && No duration data yet.
}
Taste fingerprint
{fingerprint.decade &&
Era{fingerprint.decade[0]} · {fingerprint.decade[1]} titles
}
{fingerprint.country && Home{fingerprint.country[0]} · {fingerprint.country[1]}
}
{fingerprint.genre && Genre{fingerprint.genre[0]} · {fingerprint.genre[1]}
}
{fingerprint.director && Most-seen{fingerprint.director[0]} · {fingerprint.director[1]}
}
{fingerprint.badge && HIGHLIGHTS[fingerprint.badge[0]] && Signature badge{HIGHLIGHTS[fingerprint.badge[0]].emoji} {HIGHLIGHTS[fingerprint.badge[0]].label} · {fingerprint.badge[1]}
}
{fingerprint.tag && Signature tag{fingerprint.tag[0]} · {fingerprint.tag[1]}
}
{fingerprint.busiest && Busiest year{fingerprint.busiest[0]} · {fingerprint.busiest[1]} titles
}
{fingerprint.avg && Avg rating★ {fingerprint.avg} · {fingerprint.rated} rated
}
Titles seen per year — {timeline.total} dated · peak {timeline.peak} in {timeline.peakYear}
{ys.map(y => {"’" + y.slice(2)})}
{timeline.mediums.map(m => (
setHiddenMed(p => { const s = new Set(p); s.has(m) ? s.delete(m) : s.add(m); return s; })}>
{m}
{timeline.series[m].reduce((a, b) => a + b, 0)}
))}
{title}{sub}
{list.map(it => { const img = it.poster || it.tmdbPoster || it.igdbCover || it.bookCover; return (
onOpenItem && onOpenItem(it)} title={`${displayTitle(it)} (${it.year || ''})${wlScore(it) ? ' · ⌀ ' + wlScore(it) : ''}`}>
{img ? : {MG[it.medium] || '•'}}
); })}
Pick your next watch — {items.length} on the list
e.stopPropagation()}>
{library === 'wishlist' && onToggleRating(String(n))) : null}
/>
it.director} selected={selectedDirectors} onToggle={onToggleDirector} />}
{leftView === 'actors' && { const m = {}; its.forEach(it => (it.cast||[]).forEach(a => { m[a] = (m[a]||0)+1; })); return m; }}
selected={selectedActors} onToggle={onToggleActor} />}
{leftView === 'writers' && it.writer || null} selected={selectedWriters} onToggle={onToggleWriter} />}
{leftView === 'cinematographers' && it.cinematographer || null} selected={selectedCinematographers} onToggle={onToggleCinematographer} />}
{leftView === 'animationDirectors' && it.animationDirector || null} selected={new Set()} onToggle={() => {}} />}
it.studio} selected={selectedStudios} onToggle={onToggleStudio} />}
{rightView === 'companies' && { const m = {}; its.forEach(it => (it.productionCompanies||[]).forEach(c => { m[c] = (m[c]||0)+1; })); return m; }}
selected={new Set()} onToggle={() => {}} />}
{rightView === 'composers' && it.composer || null} selected={new Set()} onToggle={() => {}} />}
{rightView === 'badges' && { const m = {}; its.forEach(it => (it.highlights||[]).forEach(h => { if (HIGHLIGHTS[h]) m[h] = (m[h]||0)+1; })); return m; }}
labelFn={h => HIGHLIGHTS[h] ? `${HIGHLIGHTS[h].emoji} ${HIGHLIGHTS[h].label}` : h}
selected={selectedHighlights} onToggle={onToggleHighlight} />}
}
Stats.
{allItems.length} entries · {totalWithDate} with date
{['All', ...MEDIA].map(m => (
))}
{tab === 'taste' &&
{'Rating distribution — ' + ({ rating: 'your score · click to filter', fwAvg: 'Filmweb community average', imdb: 'IMDb rating (→10)', rt: 'Rotten Tomatoes (→10)', metacritic: 'Metacritic (→10)' }[ratingSource] || ratingSource)}
{ratingSources.length > 1 && (
{ratingSources.map(([k, label]) => (
))}
)}
{LEFT_VIEW_LABELS[leftView]}
▾
{leftView === 'directors' &&
{RIGHT_VIEW_LABELS[rightView]}
▾
{rightView === 'studios' && Activity heatmap — click weeks to filter library
Country breakdown — click to filter library
handleEnter(i, e.currentTarget)}
onMouseLeave={handleLeave}
onClick={() => handleClick(item)}
onMouseDown={(e) => { if (e.button === 1) e.preventDefault(); }}
onAuxClick={(e) => handleAuxClick(e, item)}
title={item.title}
>
);
}), [ordered, mode, justPickedId, pickedSet, reshuffling, isSpineFor, handleEnter, handleLeave, handleClick, handleAuxClick, spineValue]);
return (
{item.highlights && item.highlights.length > 0 && (
{item.highlights.filter(h => HIGHLIGHTS[h]).slice(0, highlightCap(item)).map(h => (
{HIGHLIGHTS[h].emoji}
))}
)}
{displayTitle(item)}
{(() => {
const isAvg = spineValue !== 'rating';
const raw = isAvg ? item[spineValue] : item.rating;
if (raw == null) return null;
const shown = isAvg ? Math.round(raw) : raw;
return {shown};
})()}
{String(idx + 1).padStart(2, '0')}
{medium}
— {items.length} entries
00%
{spineLayout ? (() => {
const n = spineLayout.offsets.length - 1;
const s = Math.min(vrange.start, n);
const e = Math.min(vrange.end, n);
return (
{renderedItems.slice(s, e)}
);
})() : renderedItems}
{MEDIA_SHORT[item.medium]}
·
{item.year}
{item.rating ? · : null}
{item.rating ? ★ {item.rating}/10 : null}
{regionName(item.region) ? · : null}
{regionName(item.region) ? {regionName(item.region)} : null}
{item.seasons ? · : null}
{item.seasons ? {item.seasons} {item.seasons > 1 ? 'seasons' : 'season'} : null}
{(item.director || item.studio) && (
{item.director && {directorLabel(item.medium)}: {item.director}}
{item.director && item.studio && ·}
{item.studio && {item.studio}}
)}
{displayTitle(item)}
{(item.noteEn || item.note)
? {item.noteEn || item.note}
: No note yet — add one in
}
data.js.Click to open ↗ · middle-click → {service}
{children}
);
}
// The Reader's primary "Open on …" button. When the item has BOTH a stored
// (Filmweb/etc.) link and an IMDb link, it becomes one morphing button: it rests
// on IMDb, and hovering the right half slides it across to Filmweb — the label
// crosses and the href follows. Items with only one link render a plain button.
function ReaderSourceButton({ item }) {
const primary = item.link;
const imdb = item.imdbUrl;
const [side, setSide] = React.useState('imdb');
const arrow = (
);
// Only one (or no) link → plain button, no morph.
if (!imdb || !primary) {
const url = primary || imdb;
if (!url) return null;
return (
Open on {externalServiceName(url)}{arrow}
);
}
const leftName = externalServiceName(primary);
const href = side === 'imdb' ? imdb : primary;
const handleMove = (e) => {
const r = e.currentTarget.getBoundingClientRect();
setSide((e.clientX - r.left) > r.width / 2 ? 'primary' : 'imdb');
};
return (
setSide('imdb')}
title={`Hover left for IMDb, right for ${leftName}`}>
Open on {leftName}
Open on IMDb
{arrow}
);
}
// The Reader description, with a source toggle. Films/TV with OMDb get the
// IMDb plot first and a small IMDb·TMDB switch (the user finds TMDB synopses
// flat); books/games show their single source with no toggle. Mounted with a
// key={item.id} in the Reader so its active-source state resets per title.
function ReaderSummary({ item }) {
const sources = [];
const o = item.omdb;
const imdbText = o && ((o.PlotShort && o.PlotShort !== 'N/A' && o.PlotShort)
|| (o.Plot && o.Plot !== 'N/A' && o.Plot));
if (imdbText) sources.push({ key: 'IMDb', text: imdbText });
if (item.summary)
sources.push({ key: item.medium === 'Books' ? 'Synopsis' : 'TMDB', text: item.summary });
if (item.igdbSummary)
sources.push({ key: 'IGDB', text: item.igdbSummary });
const [idx, setIdx] = React.useState(0);
if (!sources.length) return null;
const i = Math.min(idx, sources.length - 1);
const active = sources[i];
return (
{active.text} {sources.length > 1 && ( setIdx((i + 1) % sources.length)} title="Switch description source">{active.key} ⇄ )}
); } // The personal-note blockquote. When an English redraft exists (item.noteEn), // clicking it toggles PL↔EN with a matrix-style vertical letter cascade. function ReaderQuote({ item }) { const pl = item.note; const en = item.noteEn; const [showEn, setShowEn] = React.useState(!!en); // approved English shows by default const [busy, setBusy] = React.useState(false); if (!pl) { return{item.favorite ? 'A note for this one is on the to-write list.' : 'From the wider library — no personal note yet.'}; } const text = (showEn && en) ? en : pl; const toggle = () => { if (!en || busy) return; setBusy(true); setShowEn(v => !v); setTimeout(() => setBusy(false), 1400); }; return (
{busy ? text.split('').map((ch, i) => ( {ch === ' ' ? ' ' : ch} )) : text} {en && }); } // ─────────── Reader Modal ─────────── function Reader({ item, onClose, onJump, allItems, otherItems, library, onFilter }) { const { ITEMS, MEDIA_SHORT, MEDIA_GLYPH } = window.CULTURE; const [on, setOn] = React.useState(false); React.useEffect(() => { requestAnimationFrame(() => setOn(true)); const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); // Similarity by shared genre / tag / director / cast, with a small year-proximity // nudge. Same medium only. Used both within-pool ("More like this") and across // pools (the seen↔unseen crossover row). const scoreAgainst = React.useCallback((pool, { limit = 12, minScore = 0 } = {}) => { const genreSet = new Set(item.genres || []); const tagSet = new Set(item.tags || []); const castSet = new Set(item.cast || []); return (pool || []) .filter(i => i.medium === item.medium && i.id !== item.id) .map(i => { let score = 0; (i.genres || []).forEach(g => { if (genreSet.has(g)) score += 2; }); (i.tags || []).forEach(t => { if (tagSet.has(t)) score += 1.5; }); if (item.director && i.director === item.director) score += 3; (i.cast || []).forEach(c => { if (castSet.has(c)) score += 1; }); const yr = Math.abs((i.year || 0) - (item.year || 0)); score += yr <= 5 ? 1 : yr <= 10 ? 0.5 : 0; return { i, score, yr }; }) .filter(x => x.score >= minScore) .sort((a, b) => b.score - a.score || a.yr - b.yr) .slice(0, limit) .map(x => x.i); }, [item]); const adjacent = React.useMemo(() => scoreAgainst(allItems || ITEMS), [scoreAgainst, allItems]); // Crossover: items from the OPPOSITE collection that resemble this one. Requires // a real signal (≥1 shared genre / shared director / tags) so it stays empty and // unobtrusive until items are enriched, rather than showing year-only noise. const crossover = React.useMemo( () => scoreAgainst(otherItems, { limit: 12, minScore: 2 }), [scoreAgainst, otherItems] ); // When viewing the seen Library, the crossover surfaces unseen wishlist picks; // when viewing the Wishlist, it surfaces things already seen & liked. const crossoverLabel = library === 'wishlist' ? "You've already seen — similar" : 'On your wishlist — similar'; const crossoverBadge = library === 'wishlist' ? '✓' : '◷'; const inMedium = (allItems || ITEMS).filter(i => i.medium === item.medium); const posInMedium = inMedium.findIndex(i => i.id === item.id) + 1; const close = () => { setOn(false); setTimeout(onClose, 240); }; return (
e.stopPropagation()}>
{adjacent.map(a => (
onJump(a)} title={`${displayTitle(a)} (${a.year})`}>
{(a.poster || a.tmdbPoster || a.igdbCover || a.bookCover)
? 
: {MEDIA_GLYPH[a.medium]}}
))}
{crossover.length > 0 && (
{crossover.map(a => (
onJump(a)} title={`${displayTitle(a)} (${a.year})`}>
{(a.poster || a.tmdbPoster || a.igdbCover || a.bookCover)
?
: {MEDIA_GLYPH[a.medium]}}
{crossoverBadge}
))}
)}
{(item.poster || item.tmdbPoster || item.igdbCover || item.bookCover)
?
:
{displayTitle(item)}
{MEDIA_SHORT[item.medium]} · {item.year}
}
{MEDIA_SHORT[item.medium]}
{item.year}
{regionName(item.region) ? onFilter && onFilter(`region:${item.region === 'su' ? 'ru' : item.region}`)}>{regionName(item.region)} : null}
{item.runtime ? {formatRuntime(item.runtime)} : null}
{item.pages ? {item.pages} pages · ~{formatRuntime(Math.round(item.pages * 1.5))} read : null}
{item.igdbRating ? IGDB {item.igdbRating}/100 : null}
{item.igdbGenres ? {item.igdbGenres.split(', ').map((g, i) => {i > 0 && ' · '} onFilter && onFilter(`genre:${g}`)}>{g} )} : null}
{item.seasons ? {item.seasons} {item.seasons > 1 ? 'seasons' : 'season'} : null}
{item.episodes ? {item.episodes} eps : null}
{item.totalMinutes ? {formatRuntime(item.totalMinutes)} total : null}
{item.rating ? ★ {item.rating}/10 : null}
{item.genres && item.genres.length > 0 ? {item.genres.slice(0, 4).map((g, i) => {i > 0 && ' · '} onFilter && onFilter(`genre:${g}`)}>{g} )} : null}
{item.igdbFranchise ? Series: {item.igdbFranchise} : null}
{item.watchedDate ? Rated {item.watchedDate} : null}
№ {String(posInMedium).padStart(3,'0')} of {String(inMedium.length).padStart(3,'0')}
{(item.director || item.writer || item.cinematographer || item.composer || item.animationDirector) && (
{item.director && {directorLabel(item.medium)} onFilter && onFilter(`director:${item.director}`)}>{item.director}}
{item.writer && Script onFilter && onFilter(`writer:${item.writer}`)}>{item.writer}}
{item.cinematographer && DP onFilter && onFilter(`dp:${item.cinematographer}`)}>{item.cinematographer}}
{item.animationDirector && Anim. {item.animationDirector}}
)}
{item.providers && item.providers.length > 0 && (
Watch {item.providers.map((p, i) => {i > 0 && ' · '} onFilter && onFilter(`on:${p}`)}>{p} )}
)}
{displayTitle(item)}.
{(() => { const main = displayTitle(item); const alts = [item.title, item.polishTitle].filter(a => a && a !== main); const uniq = [...new Set(alts)]; return uniq.length ?{uniq.join(' · ')}
: null;
})()}
Fuad's library / {item.medium}
{imdb && IMDb ⭐ {imdb}}
{rt && RT 🍅 {rt}}
{mc && Metacritic {mc}}
{fw && Filmweb ⌀ {fw}}
{a && {a.chips.map((c, i) => {c})}}
);
})()}
{(item.composer || item.studio || (item.productionCompanies && item.productionCompanies.length > 0)) && (
{item.studio && {studioLabel(item.medium)} onFilter && onFilter(`studio:${item.studio}`)}>{item.studio}}
{item.productionCompanies && item.productionCompanies.length > 0 && Production {item.productionCompanies.join(' · ')}}
{item.composer && Score {item.composer}}
)}
{item.cast && item.cast.length > 0 && (
Cast
{item.cast.map((a, i) => {i > 0 && ' · '} onFilter && onFilter(`actor:${a}`)}>{a} )}
)}
{item.tags && item.tags.length > 0 && (
{item.tags.map(t => onFilter && onFilter(`tag:${t}`)}>{t})}
)}
{item.highlights && item.highlights.filter(h => HIGHLIGHTS[h]).length > 0 && (
{item.highlights.filter(h => HIGHLIGHTS[h]).map(h => (
onFilter && onFilter(`highlight:${h}`)}>
{HIGHLIGHTS[h].emoji}{HIGHLIGHTS[h].label}
))}
)}
More like this
{crossoverLabel}
e.stopPropagation()}>
:titlegenre:director:actor:tag:
highlight:on:@yearr:8+
↵ apply · esc close
Culture.
{library === 'wishlist' ? 'What I want to watch, play & read next' : 'A library of what shaped me'}
{ITEMS.length} entries
{new Set(ITEMS.map(i => i.medium)).size} shelves
{library === 'wishlist' ? 'most-wanted in the middle, outward by priority' : 'best in the middle, outward by rank'}
{/*Things I watched, read and played.*/}
setSearch(e.target.value)}
/>
{search && (
)}
{showSearchHint && (
:alien or title:alien— match the title onlygenre:Thriller— match by genreactor:Name— match by castdirector:Name writer:Name dp:Name— crewtag:Name studio:Name region:Poland— other fieldshighlight:Brutal or badge:gem— standout badgeson:Netflix— where to watch (wishlist)@2023 or y:2023— filter by release yearin:2023— filter by year ratedr:10 r:8+ r:7-9— filter by ratingplain text — title, director, studio, genre wildcard
tokens stack:
genre:Horror dp:Deakins r:8+
Hover any item to fan a cover open and read its note. Click to open the full entry,
drag the row sideways to browse the rest. Each shelf is curated best-in-the-middle
— most-loved at the centre, descending outwards. The Pick one for me button taps
a hand-picked pool; flipped items keep a small red mark.
*/}
{search.trim() && (
{totalSearchResults} result{totalSearchResults !== 1 ? 's' : ''} for “{search.trim()}”
)}
{(selectedRatings.size > 0 || selectedDirectors.size > 0 || selectedStudios.size > 0 || selectedWeeks.size > 0 || selectedCountries.size > 0
|| selectedGenres.size > 0 || selectedActors.size > 0 || selectedWriters.size > 0 || selectedCinematographers.size > 0
|| selectedHighlights.size > 0) && (
{[...selectedRatings].sort().map(r => (
★{r}
))}
{[...selectedHighlights].map(h => (
{HIGHLIGHTS[h] ? `${HIGHLIGHTS[h].emoji} ${HIGHLIGHTS[h].label}` : h}
))}
{[...selectedDirectors].map(d => (
{d}
))}
{[...selectedActors].map(a => (
{a}
))}
{[...selectedWriters].map(w => (
{w}
))}
{[...selectedCinematographers].map(c => (
{c}
))}
{[...selectedStudios].map(s => (
{s}
))}
{[...selectedGenres].map(g => (
{g}
))}
{[...selectedCountries].map(c => (
{REGION_NAMES[c] || c}
))}
{[...selectedWeeks].sort().map(w => (
{w}
))}
)}
{filteredShelves.map((s, i) => (
No results for “{search.trim()}”.
)}
{library === 'wishlist' ? (
Released
{allReleaseBuckets.map(k => {
const sel = selectedReleaseBuckets.has(k);
const avail = availableReleaseBuckets.has(k);
return (
);
})}
Rated in
{allRatedYears.map(yr => {
const sel = selectedRatedYears.has(yr);
const avail = availableRatedYears.has(yr);
return (
);
})}