-
Navigation
-
Oben als schwebende Insel oder links als Spalte. Oben blendet sie
- beim Scrollen aus, an der Seite bleibt sie stehen.
-
-
-
+
Aufmacher
+
Woher die Titel oben kommen. Die Auswahl wechselt alle sechs Stunden;
+ Titel ohne Hintergrundbild ziehen dabei ein schlechteres Los.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Reihen
+
Wie die Startseite darunter aufgebaut ist.
+
+
+
+
+
@@ -574,10 +637,32 @@ function renderSettings() {
sw.appendChild(b);
});
- [...el('set-nav').children].forEach((b) => {
- b.classList.toggle('on', b.dataset.v === P.nav);
- b.onclick = () => { setPref('nav', b.dataset.v); renderSettings(); };
- });
+ // Segmentierte Schalter, die alle gleich funktionieren.
+ const segment = (id, key, after) => {
+ [...el(id).children].forEach((b) => {
+ b.classList.toggle('on', b.dataset.v === String(P[key]));
+ b.onclick = () => { setPref(key, b.dataset.v); renderSettings(); after?.(); };
+ });
+ };
+ segment('set-herosource', 'heroSource');
+ segment('set-rowlayout', 'rowLayout');
+
+ // Regler, die alle gleich funktionieren.
+ const slider = (id, key, unit) => {
+ const r = el(id), o = el(id + '-out');
+ r.value = P[key]; o.textContent = P[key] + unit;
+ r.oninput = () => { o.textContent = r.value + unit; setPref(key, +r.value); };
+ };
+ slider('set-herocount', 'heroCount', ' Titel');
+ slider('set-heroheight', 'heroHeight', ' % Höhe');
+
+ const check = (id, key) => {
+ const c = el(id);
+ c.checked = P[key];
+ c.onchange = () => setPref(key, c.checked);
+ };
+ check('set-combine', 'combineContinue');
+ check('set-hidewatched', 'hideWatched');
const z = el('set-zoom'), zo = el('set-zoom-out');
z.value = P.cardW; zo.textContent = P.cardW + ' px';
@@ -604,13 +689,33 @@ async function renderHome() {
...views.map((v) => get(`/Users/${S.userId}/Items/Latest`, { ParentId: v.Id })),
]);
- const rows = [
- { title: 'Weiterschauen', items: resume, wide: true },
- { title: 'Als Nächstes', items: next, wide: true },
- ...views.map((v, i) => ({ title: `Neu in ${v.Name}`, items: latest[i] || [] })),
- ].filter((r) => r.items.length);
+ // „Weiterschauen" und „Als Nächstes" sind zwei Fragen — oder eine, je
+ // nachdem, wie man es eingestellt hat.
+ let rows;
+ if (P.combineContinue) {
+ const seen = new Set();
+ const merged = [...resume, ...next].filter((i) => !seen.has(i.Id) && seen.add(i.Id));
+ rows = [{ title: 'Weiterschauen', items: merged, wide: true }];
+ } else {
+ rows = [
+ { title: 'Weiterschauen', items: resume, wide: true },
+ { title: 'Als Nächstes', items: next, wide: true },
+ ];
+ }
- const featured = pickFeatured([...resume, ...next, ...latest.flat()]);
+ rows.push(...views.map((v, i) => ({
+ title: `Neu in ${v.Name}`,
+ // Gesehenes ausblenden gilt nur für Neuzugänge: in „Weiterschauen" wäre
+ // es sinnlos, dort ist alles angefangen.
+ items: (latest[i] || []).filter((it) => !P.hideWatched || !it.UserData?.Played),
+ wide: P.rowLayout === 'wide',
+ })));
+ rows = rows.filter((r) => r.items.length);
+
+ const heroPool = P.heroSource === 'latestOnly'
+ ? latest.flat()
+ : [...resume, ...next, ...latest.flat()];
+ const featured = pickFeatured(heroPool);
c.innerHTML = '';
if (featured.length) c.appendChild(buildHero(featured));
@@ -642,7 +747,7 @@ function pickFeatured(items) {
// es wenige, hat er seine Chance.
.map((it) => ({ it, key: rnd() * (hasImg(it, 'Backdrop') ? 1 : 0.2) }))
.sort((a, b) => b.key - a.key)
- .slice(0, 5)
+ .slice(0, P.heroCount)
.map((x) => x.it);
}