Die Weboberfläche — im Zuschnitt von Plex, vom Server selbst ausgeliefert

Einrichtung, Anmeldung, Mediathek, Detailseite mit Abspielen und
Herunterladen, Zuordnung korrigieren, Verwaltung. Die Oberfläche aus der
Jellyfin-Zeit ist dabei vollständig ersetzt: `types.ts`, `prefs.ts`,
`contrast.ts`, `views/cards.ts`, `views/player.ts` und `views/settings.ts`
sprachen Jellyfins Schnittstelle und hatten hier nichts mehr zu suchen.

Seitenleiste links, waagerechte Reihen auf der Startseite, Plakate im
Verhältnis 2:3, unscharfer Hintergrund hinter dem Kopf der Detailseite —
das ist der Zuschnitt von Plex, weil er gefällt. **Die Farbe bleibt Flaros
Orchidee**, nicht Plex' Orange; der Aufbau ist das Vorbild, nicht das
Aussehen.

Welche Bibliothek gezeigt wird, entscheidet die Seitenleiste. Eine zweite
Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.

---

**Der Zugang liegt jetzt auch in einem Cookie.** Ein `<img>`, ein `<video>`
und ein Download-Link senden keine eigenen Kopfzeilen — eine App kann ihr
Token in jede Anfrage legen, ein Browser nicht. Das Token stattdessen in
die Adresse zu schreiben wäre der naheliegende Ausweg und stünde danach in
jedem Zugriffsprotokoll, in jedem Verlauf und in jedem weitergegebenen
Link.

`HttpOnly`, damit kein eingeschlichenes Skript herankommt. `SameSite=Strict`
gegen Anfragen von fremden Seiten. `Secure` nur über https — sonst liesse
sich die Oberfläche im Heimnetz über http gar nicht benutzen. Die Apps
benutzen weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein
zweites Verfahren.

---

**Der Fehler, den erst der echte Container zeigte:** eine weisse Seite,
ohne Hinweis worauf.

Die Rückfallregel verlangt für jede Anfrage ohne eigenen Endpunkt einen
angemeldeten Benutzer, und `/assets/index.js` hat keinen. Die statischen
Dateien standen unter `UseAuthorization` — ein neuer Besucher bekam 401 auf
genau das Skript, das ihm die Anmeldemaske zeichnen sollte. `/` kam durch,
weil der SPA-Rückfall `AllowAnonymous` trägt; alles mit Dateiendung nicht.
Jetzt liegen sie davor. Mit Prüfung.

Beim Bau desselben Images der zweite: seit der Kontext die Projektwurzel
ist, überschrieb `COPY server/` die `obj/`-Verzeichnisse aus dem Container
mit denen vom Arbeitsrechner — die zeigen auf osx-arm64, gebaut wird
linux-arm64, `dotnet publish` brach mit NETSDK1047 ab. Dafür gibt es jetzt
eine `.dockerignore` in der Wurzel; die unter `server/` sucht Docker seit
dem Umzug nicht mehr.

---

Vier Prüfungen schlugen danach fehl, und zwar zu Recht: sie hiessen „ohne
Anmeldung gibt es nichts", benutzten aber den Client, der nach dem Anmelden
ein Cookie hält. Sie prüften also den Angemeldeten. Jetzt sagen sie
ausdrücklich, dass sie ohne Zugang fragen.

313 Tests grün. Im Container nachgewiesen: Anmelden, Plakate, Abspielen,
Staffeln und Folgen, Verwaltung — und ein Neuladen auf `/verwaltung`, das
nicht in einem 404 endet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/views/home.ts

@@ -1,207 +1,60 @@
-import type { Item, Reihe, Seite } from '../types';
-import { api, sitzung } from '../api';
-import { P, anordnen } from '../prefs';
-import { icon } from '../icons';
-import { esc, bild, laufzeit, hatBild, FELDER } from '../util';
-import { kachel } from './cards';
+import { filme, serien, type Film, type Serie } from '../api';
+import { esc, plakat, leer, fehlerzeile } from '../util';
 
-/** Welche Reihen es bei diesem Server gibt — für die Einstellungen. */
-export let bekannteReihen: { id: string; title: string }[] = [];
-
-export async function startseite(
-  wurzel: HTMLElement,
-  ansichten: Item[],
-  oeffnen: (item: Item) => void,
-): Promise<void> {
+/** Die Startseite: je eine waagerechte Reihe, wie bei Plex.
+ *
+ * Noch ohne „Weiterschauen" — dafür braucht es den Sehfortschritt, und der
+ * kommt erst in Stufe 4. Eine leere Reihe mit diesem Namen wäre eine Zusage,
+ * die niemand einlöst. */
+export function startseite(oeffnen: (art: 'filme' | 'serien', id: string) => void): HTMLElement {
+  const wurzel = document.createElement('div');
   wurzel.innerHTML = '<div class="spinner"></div>';
 
-  const hole = async (pfad: string, q: Record<string, string> = {}): Promise<Item[]> => {
+  void (async () => {
     try {
-      const r = await api<Seite | Item[]>(
-        pfad + '?' + new URLSearchParams({ Fields: FELDER, Limit: '20', ...q }),
-      );
-      // „Latest" liefert ein blankes Feld, alles andere eine Seite mit Items.
-      return Array.isArray(r) ? r : (r.Items ?? []);
-    } catch {
-      return [];
+      const [f, s] = await Promise.all([filme({ take: 24 }), serien({ take: 24 })]);
+      wurzel.innerHTML = '';
+
+      if (f.total === 0 && s.total === 0) {
+        wurzel.appendChild(leer('Noch nichts da. Lege unter Verwaltung eine Bibliothek an '
+          + 'und starte einen Scan.'));
+        return;
+      }
+      if (f.total > 0) wurzel.appendChild(reihe(`Filme · ${f.total}`, f.items, 'filme'));
+      if (s.total > 0) wurzel.appendChild(reihe(`Serien · ${s.total}`, s.items, 'serien'));
+    } catch (fehler) {
+      wurzel.innerHTML = '';
+      wurzel.appendChild(fehlerzeile((fehler as Error).message));
     }
-  };
+  })();
 
-  const [weiter, naechstes, ...neues] = await Promise.all([
-    hole(`/Users/${sitzung.userId}/Items/Resume`, { MediaTypes: 'Video' }),
-    hole('/Shows/NextUp', { userId: sitzung.userId }),
-    ...ansichten.map((v) => hole(`/Users/${sitzung.userId}/Items/Latest`, { ParentId: v.Id })),
-  ]);
+  function reihe(titel: string, eintraege: (Film | Serie)[], art: 'filme' | 'serien'): HTMLElement {
+    const bereich = document.createElement('section');
+    bereich.className = 'reihe';
 
-  let reihen: Reihe[];
-  if (P.combineContinue) {
-    const gesehen = new Set<string>();
-    const zusammen = [...weiter!, ...naechstes!].filter((i) => !gesehen.has(i.Id) && gesehen.add(i.Id));
-    // Die zusammengelegte Reihe behält die Kennung der ersten — sonst wäre sie
-    // für die gespeicherte Reihenfolge eine neue und stünde wieder unten.
-    reihen = [{ id: 'resume', title: 'Weiterschauen', items: zusammen, wide: true }];
-  } else {
-    reihen = [
-      { id: 'resume', title: 'Weiterschauen', items: weiter!, wide: true },
-      { id: 'nextup', title: 'Als Nächstes', items: naechstes!, wide: true },
-    ];
+    const h = document.createElement('h2');
+    h.textContent = titel;
+
+    const streifen = document.createElement('div');
+    streifen.className = 'strip';
+
+    eintraege.forEach(eintrag => {
+      const k = document.createElement('button');
+      k.className = 'card';
+      k.appendChild(plakat(eintrag.posterImage, eintrag.title));
+
+      const unten = document.createElement('div');
+      unten.className = 'rowline';
+      unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
+        + `<span class="tiny">${esc(eintrag.year ?? '')}</span>`;
+      k.appendChild(unten);
+      k.onclick = () => oeffnen(art, eintrag.id);
+      streifen.appendChild(k);
+    });
+
+    bereich.append(h, streifen);
+    return bereich;
   }
 
-  reihen.push(...ansichten.map((v, i) => ({
-    id: 'latest.' + v.Id,
-    title: `Neu in ${v.Name}`,
-    // Gesehenes ausblenden gilt nur für Neuzugänge: in „Weiterschauen" wäre
-    // es sinnlos, dort ist alles angefangen.
-    items: (neues[i] ?? []).filter((it) => !P.hideWatched || !it.UserData?.Played),
-  })));
-  reihen = reihen.filter((r) => r.items.length);
-
-  // **Vor** dem Ausblenden merken: die Einstellungen müssen auch die Reihen
-  // anbieten, die gerade versteckt sind.
-  bekannteReihen = reihen.map((r) => ({ id: r.id, title: r.title }));
-  reihen = anordnen(reihen);
-
-  const auswahl = P.heroSource === 'latestOnly'
-    ? neues.flat()
-    : [...weiter!, ...naechstes!, ...neues.flat()];
-  const oben = aufmacherWahl(auswahl);
-
-  wurzel.innerHTML = '';
-  wurzel.classList.toggle('pad-top', oben.length === 0);
-  if (oben.length) wurzel.appendChild(aufmacher(oben, oeffnen));
-  for (const r of reihen) wurzel.appendChild(reihe(r, oeffnen));
-
-  if (!reihen.length && !oben.length) {
-    wurzel.innerHTML = '<div class="empty pad-top">Hier ist noch nichts.</div>';
-  }
-}
-
-/* Wählt aus, was oben groß steht — dieselbe Regel wie in der App.
-   ----------------------------------------------------------------------------
-   Die Auswahl wechselt alle sechs Stunden, und ein Titel ohne Hintergrundbild
-   zieht ein schlechteres Los. Bei jedem Laden zu würfeln wäre unruhig — man
-   tippt auf etwas, geht zurück, und es ist weg. Einmal täglich wäre zu träge. */
-function aufmacherWahl(items: Item[]): Item[] {
-  let keim = (Math.floor(Date.now() / (6 * 3600 * 1000)) * 2654435761) % 2147483647;
-  const wuerfeln = (): number => (keim = (keim * 16807) % 2147483647) / 2147483647;
-
-  const gesehen = new Set<string>();
-  return items
-    .filter((it) => !gesehen.has(it.Id) && gesehen.add(it.Id))
-    // Wer ein Hintergrundbild hat, zieht aus [0,1) — wer keines hat, nur aus
-    // [0,0.2). Solange es genug mit Bild gibt, kommt er nicht nach vorn; gibt
-    // es wenige, hat er seine Chance.
-    .map((it) => ({ it, los: wuerfeln() * (hatBild(it, 'Backdrop') ? 1 : 0.2) }))
-    .sort((a, b) => b.los - a.los)
-    .slice(0, P.heroCount)
-    .map((x) => x.it);
-}
-
-function aufmacher(items: Item[], oeffnen: (item: Item) => void): HTMLElement {
-  const aussen = document.createElement('div');
-  const rahmen = document.createElement('section');
-  rahmen.id = 'hero';
-
-  const bilder = items.map((it, i) => {
-    const d = document.createElement('div');
-    d.className = 'shot' + (i === 0 ? ' on' : '');
-    d.style.backgroundImage = `url("${bild(it, 'Backdrop', 1600)}")`;
-    return d;
-  });
-  bilder.forEach((b) => rahmen.appendChild(b));
-  rahmen.insertAdjacentHTML('beforeend', '<div class="veil"></div>');
-
-  const koerper = document.createElement('div');
-  koerper.className = 'body';
-  rahmen.appendChild(koerper);
-
-  const punkte = document.createElement('div');
-  punkte.className = 'dots';
-
-  let bei = 0;
-  let uhr: ReturnType<typeof setInterval> | null = null;
-  const anhalten = (): void => { if (uhr) { clearInterval(uhr); uhr = null; } };
-  const schritt = (um: number): void => {
-    anhalten();
-    bei = (bei + um + items.length) % items.length;
-    malen();
-  };
-
-  items.forEach((_, i) => {
-    const d = document.createElement('button');
-    d.className = i ? '' : 'on';
-    d.setAttribute('aria-label', `Titel ${i + 1}`);
-    d.onclick = () => { anhalten(); bei = i; malen(); };
-    punkte.appendChild(d);
-  });
-
-  function malen(): void {
-    const it = items[bei]!;
-    const teile = [it.ProductionYear, laufzeit(it), it.OfficialRating].filter(Boolean);
-    const zeichen = it.ImageTags?.Logo ? bild(it, 'Primary', 600) : '';
-    koerper.innerHTML = `
-      ${zeichen && it.ImageTags?.Logo ? `<img class="logo" src="${zeichen}" alt="${esc(it.Name)}">`
-        : `<h2>${esc(it.Name)}</h2>`}
-      <div class="meta">${teile.join(' · ')}</div>
-      <div class="summary">${esc(it.Overview ?? '')}</div>
-      <div class="actions">
-        <button class="btn btn-primary">${icon('play', 15)} Abspielen</button>
-        <button class="btn">Details</button>
-      </div>`;
-    const knoepfe = koerper.querySelectorAll('.btn');
-    (knoepfe[0] as HTMLElement).onclick = () => oeffnen(it);
-    (knoepfe[1] as HTMLElement).onclick = () => oeffnen(it);
-    bilder.forEach((b, i) => b.classList.toggle('on', i === bei));
-    [...punkte.children].forEach((d, i) => d.classList.toggle('on', i === bei));
-  }
-  malen();
-
-  if (items.length > 1) {
-    const zurueck = document.createElement('button');
-    zurueck.className = 'hero-nav prev';
-    zurueck.innerHTML = icon('left', 22);
-    zurueck.setAttribute('aria-label', 'Vorheriger Titel');
-    zurueck.onclick = () => schritt(-1);
-
-    const vor = document.createElement('button');
-    vor.className = 'hero-nav next';
-    vor.innerHTML = icon('right', 22);
-    vor.setAttribute('aria-label', 'Nächster Titel');
-    vor.onclick = () => schritt(1);
-    rahmen.append(zurueck, vor);
-
-    // Wischen — erst ab einem ordentlichen Weg und nur, wenn es waagerecht
-    // gemeint ist. Sonst nimmt die Geste dem Scrollen den Vortritt.
-    let x0: number | null = null;
-    let y0 = 0;
-    rahmen.addEventListener('touchstart', (e) => {
-      x0 = e.touches[0]!.clientX; y0 = e.touches[0]!.clientY;
-    }, { passive: true });
-    rahmen.addEventListener('touchend', (e) => {
-      if (x0 == null) return;
-      const dx = e.changedTouches[0]!.clientX - x0;
-      const dy = e.changedTouches[0]!.clientY - y0;
-      if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy)) schritt(dx < 0 ? 1 : -1);
-      x0 = null;
-    }, { passive: true });
-
-    // Sieben Sekunden — lang genug, um den Satz zu Ende zu lesen.
-    uhr = setInterval(() => {
-      if (!document.body.contains(rahmen)) return anhalten();
-      bei = (bei + 1) % items.length;
-      malen();
-    }, 7000);
-  }
-
-  aussen.append(rahmen, punkte);
-  return aussen;
-}
-
-function reihe(r: Reihe, oeffnen: (item: Item) => void): HTMLElement {
-  const abschnitt = document.createElement('section');
-  abschnitt.className = 'row';
-  abschnitt.innerHTML = `<h3>${esc(r.title)}</h3><div class="strip"></div>`;
-  const streifen = abschnitt.querySelector('.strip')!;
-  for (const it of r.items) streifen.appendChild(kachel(it, Boolean(r.wide), oeffnen));
-  return abschnitt;
+  return wurzel;
 }