// Home / Entdecken — browse the accepted catalog and audition tracks.
//
// Three sections, top to bottom:
//
// 1. Hero — sunset-gradient banner featuring the top-streamed
// track. Uses a separate one-shot fetch (limit=1,
// sort=streams) so the hero doesn't depend on which
// page of the library is currently visible.
// 2. Frisch — 4-tile rail of the most-recently-accepted tracks.
// Also a one-shot fetch (limit=4, sort=newest).
// 3. Bibliothek — full sortable + searchable table backed by the
// server's paginated catalog endpoint. 50 rows per
// page, sort + tag filter + search live on the
// server so a 10k-track catalog stays cheap.
//
// All three sections hit the same `/api/submissions/catalog` endpoint
// with different params — server-side filtering means the browser
// never receives the full library at once. The legacy `submissions`
// prop is still accepted for any callers that pre-warm it but is
// otherwise unused now.
const PAGE_SIZE = 50;
// Sort options exposed in the library dropdown. Each maps to a `sort`
// query param the server understands.
const SORT_OPTIONS = [
{ id: 'streams', label: 'Meist gehört' },
{ id: 'streams-asc', label: 'Weniger gehört' },
{ id: 'newest', label: 'Neueste zuerst' },
{ id: 'oldest', label: 'Älteste zuerst' },
{ id: 'title', label: 'Titel A–Z' },
{ id: 'title-desc', label: 'Titel Z–A' },
{ id: 'artist', label: 'Künstler A–Z' },
{ id: 'artist-desc', label: 'Künstler Z–A' },
{ id: 'duration-asc', label: 'Kürzeste zuerst' },
{ id: 'duration-desc', label: 'Längste zuerst' },
];
// Column-header → (asc id, desc id) sort pairs. Clicking a header
// cycles through its pair (or switches column with that pair's ASC
// direction as the default — except streams which defaults to DESC
// because "most popular first" is the natural expectation).
//
// `#` and `Tags` columns are intentionally absent — # is just the
// view position (would loop infinitely if it tried to "sort by
// index"), Tags is a multi-value column with no single sort key.
const COLUMN_SORTS = {
title: { asc: 'title', desc: 'title-desc' },
artist: { asc: 'artist', desc: 'artist-desc' },
streams: { asc: 'streams-asc', desc: 'streams', defaultDir: 'desc' },
duration: { asc: 'duration-asc', desc: 'duration-desc' },
};
// Duration buckets — picked to roughly match how listeners think
// about tracks. "kurz" is single/snippet territory, "mittel" is the
// bulk of regular tracks, "lang" is extended cut / instrumental.
const DURATION_OPTIONS = [
{ id: 'short', label: 'Kurz', hint: '< 2 min' },
{ id: 'medium', label: 'Mittel', hint: '2–4 min' },
{ id: 'long', label: 'Lang', hint: '> 4 min' },
];
// Timeframe filter — matches the server's SINCE_MS table. "Alle Zeit"
// is the absence of any timeframe filter; the chip just resets to ''.
const TIMEFRAME_OPTIONS = [
{ id: 'day', label: 'Heute' },
{ id: 'week', label: '7 Tage' },
{ id: 'month', label: '30 Tage' },
{ id: 'year', label: '1 Jahr' },
];
function HomeScreen({ me, refresh: refreshApp }) {
const audio = useAudioStatus();
const isAdmin = canForceAccept(me);
// Hero + rail are loaded once when the page mounts; they only
// change when the underlying catalog changes (re-mount on refresh).
const [hero, setHero] = React.useState(null);
const [rail, setRail] = React.useState([]);
// Library state — sort/tag/duration/since/search/page all drive
// the same paginated server query below.
const [query, setQuery] = React.useState('');
const [sort, setSort] = React.useState('streams');
// Initial tag state can be pre-set by the global openHomeWithTag()
// helper — clicking a tag chip in the Big Player or anywhere else
// stashes the desired tag, then route-pushes to home. We consume
// the global on mount so a refresh or re-navigation without the
// stash gets the empty default.
const [tag, setTag] = React.useState(() => {
const stash = window.__pendingHomeTag;
if (stash) { delete window.__pendingHomeTag; return stash; }
return '';
});
const [duration, setDuration] = React.useState(''); // '' / 'short' / 'medium' / 'long'
const [since, setSince] = React.useState(''); // '' / 'day' / 'week' / 'month' / 'year'
const [page, setPage] = React.useState(0);
const [library, setLibrary] = React.useState({ items: [], total: 0 });
const [loading, setLoading] = React.useState(true);
const [availableTags, setAvailableTags] = React.useState([]);
// Has ANY filter been applied? Controls whether the "Filter zurücksetzen"
// button is shown — keeps the chrome clean when nothing's filtering.
const hasActiveFilter = !!(query.trim() || tag || duration || since || sort !== 'streams');
const resetFilters = () => {
setQuery('');
setTag('');
setDuration('');
setSince('');
setSort('streams');
setPage(0);
};
// Debounce the search input — React 18's useDeferredValue avoids
// hitting the server on every keystroke. Typing "deutschrap" then
// fires one query, not eleven.
const deferredQuery = React.useDeferredValue(query);
// Boot-time load: hero + rail + available-tag list. Three small
// queries in parallel because they don't depend on each other.
React.useEffect(() => {
let cancelled = false;
(async () => {
try {
const [topRes, recentRes, tagsRes] = await Promise.all([
Api.catalog({ status: 'accepted', sort: 'streams', limit: 1 }),
Api.catalog({ status: 'accepted', sort: 'newest', limit: 4 }),
Api.availableTags(),
]);
if (cancelled) return;
// If nothing has streams yet, fall back to the most-recent
// track for the hero so the page doesn't feel empty.
const featured = topRes.items[0] && topRes.items[0].streams > 0
? topRes.items[0]
: recentRes.items[0] || null;
setHero(featured);
setRail(recentRes.items);
setAvailableTags(tagsRes);
} catch (e) {
toast.error('Katalog konnte nicht geladen werden: ' + e.message);
}
})();
return () => { cancelled = true; };
}, []);
// Library query — re-fires whenever the user changes any filter or
// navigates the page. All filter dimensions go in the same Api.catalog
// call so the server returns a fully-narrowed slice.
const loadLibrary = React.useCallback(async () => {
setLoading(true);
try {
const out = await Api.catalog({
status: 'accepted',
sort, tag, duration, since, q: deferredQuery,
limit: PAGE_SIZE, offset: page * PAGE_SIZE,
});
setLibrary(out);
} catch (e) {
toast.error('Bibliothek laden fehlgeschlagen: ' + e.message);
} finally {
setLoading(false);
}
}, [sort, tag, duration, since, deferredQuery, page]);
React.useEffect(() => { loadLibrary(); }, [loadLibrary]);
// Reset to page 0 whenever any filter changes — otherwise a new
// filter strands the user on "page 5 of 1 result". Page change
// itself is the only state that doesn't trigger a reset.
React.useEffect(() => { setPage(0); }, [sort, tag, duration, since, deferredQuery]);
// Re-pull catalog data after an admin action (cover change, edit,
// delete) so the row reflects the latest state. Wraps the app's
// refresh and also re-pulls the current page.
const refreshAll = async () => {
if (refreshApp) await refreshApp();
await loadLibrary();
};
const play = (track) => audio.play(track);
// Empty-catalog state — show before the first library load if the
// hero query came back with nothing.
if (hero === null && !loading && library.total === 0 && !deferredQuery && !tag) {
return (
{/* Filter rows. All three (Tags / Dauer / Zeitraum) are
always visible — easier than collapsing them behind a "more
filters" toggle, and the three rows fit comfortably above
the table on any reasonable viewport. */}
{/* TAG FILTER chips. Tags sorted by global frequency server-side
so the most common float left. */}
{availableTags.length > 0 && (
setTag('')}>Alle
{availableTags.slice(0, 18).map(({ tag: t, count }) => (
setTag(tag === t ? '' : t)}>
{t} · {count}
))}
)}
{/* DURATION + TIMEFRAME — two parallel filter rows. Either both
chips inactive (no filter applied) OR exactly one active per
row. Clicking an active chip toggles it off again. */}
setDuration('')}>Alle
{DURATION_OPTIONS.map(o => (
setDuration(duration === o.id ? '' : o.id)}>
{o.label} · {o.hint}
))}
setSince('')}>Alle
{TIMEFRAME_OPTIONS.map(o => (
setSince(since === o.id ? '' : o.id)}>
{o.label}
))}
{hasActiveFilter && (
)}
{/* Column headers. Clickable for sortable columns. Different
shape with vs. without admin because the admin column adds
the three-dot menu placeholder. */}
#
Tags
{loading && library.items.length === 0 ? (
Lädt…
) : library.items.length === 0 ? (
{deferredQuery ? `Keine Treffer für „${deferredQuery}"` :
tag ? `Keine Tracks mit dem Tag „${tag}"` :
'Keine Tracks gefunden.'}
);
}
// Clickable column header. Reads the current `sort` to figure out
// whether this column is active + which direction; click cycles
// asc ↔ desc on the active column, or switches to this column on
// any other. Renders a chevron indicator when active.
function SortHeader({ column, label, sort, setSort, align = 'left' }) {
const pair = COLUMN_SORTS[column];
// Defensive — if a caller passes a column we don't have in the
// map, render a static label so we don't crash.
if (!pair) return
{label}
;
const isAsc = sort === pair.asc;
const isDesc = sort === pair.desc;
const active = isAsc || isDesc;
const onClick = () => {
if (isAsc) return setSort(pair.desc);
if (isDesc) return setSort(pair.asc);
// First click on a fresh column — use the column's natural
// direction. Streams defaults to DESC ("popular first"),
// everything else to ASC.
setSort(pair.defaultDir === 'desc' ? pair.desc : pair.asc);
};
return (
);
}
// Sort dropdown — native