Weiterschauen, sichtbar gemacht

Die Oberfläche zeigt jetzt, was der Server seit Stufe 4 weiss.

Auf der Startseite zwei neue Reihen, ganz oben: **Weiterschauen** und
**Nächste Folge**. Sie überschneiden sich nicht — was angefangen ist, steht
links, was ansteht, rechts. Eine leere Reihe wird gar nicht erst gezeigt.

Auf jeder Kachel ein Balken, und zwar **ab der ersten Sekunde**. Bei einem
Zweieinhalbstünder sind zwei Minuten 1,3 % — anderthalb Bildpunkte. Der
Balken hat deshalb eine Mindestbreite, sonst wäre das Versprechen „wir merken
uns jede Sekunde" ausgerechnet dort unsichtbar, wo es zählt. Serien tragen
die Zahl offener Folgen als Plakette in der Ecke.

Auf der Detailseite stehen **beide Knöpfe nebeneinander**: „Weiterschauen ab
0:42" und „Von vorn". Auch bei einem gesehenen Film — der Server wirft die
Stelle nicht weg, wenn das Häkchen kommt, und sie hier zu verschweigen hiesse,
genau den Unterschied wegzuwerfen, um dessentwillen er sie behält. Dazu ein
Schalter für gesehen/ungesehen.

Der Spieler meldet alle zehn Sekunden, beim Pausieren, am Ende und beim
Schliessen. Nicht bei jedem `timeupdate`: das feuert viermal je Sekunde, und
daraus Anfragen zu machen hiesse, den Server mit Meldungen zu bewerfen, die
sich um 250 ms unterscheiden. Eine verlorene Meldung kostet ein paar Sekunden
Fortschritt — dafür mitten im Film einen Fehler einzublenden wäre die
schlechtere Hälfte des Tauschs.

**Nebenbei ein Fehler beseitigt, der nur mit grosser Mediathek aufgefallen
wäre:** die Detailseite holte 200 Titel und suchte darin nach der Kennung.
Bei 201 Filmen hätte sie vom letzten behauptet, es gebe ihn nicht mehr. Jetzt
gibt es den Einzelabruf, und sie benutzt ihn.

Im Container durchgespielt: „Der Untergang" von vorn, die MKV wird umgepackt,
läuft durch — danach steht „Gesehen" unter dem Titel, der Balken ist voll,
und der Knopf bietet beides an.

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

web/app/src/views/library.ts

@@ -1,5 +1,5 @@
 import { filme, serien, type Film, type Serie } from '../api';
-import { esc, plakat, leer, fehlerzeile } from '../util';
+import { esc, plakat, leer, fehlerzeile, anteil } from '../util';
 
 type Art = 'filme' | 'serien';
 
@@ -66,7 +66,17 @@ export function mediathek(art: Art, oeffnen: (art: Art, id: string) => void): HT
   function karte(eintrag: Film | Serie): HTMLElement {
     const k = document.createElement('button');
     k.className = 'card';
-    k.appendChild(plakat(eintrag.posterImage, eintrag.title));
+
+    const bild = plakat(
+      eintrag.posterImage, eintrag.title,
+      'state' in eintrag ? anteil(eintrag.state) : null);
+    if ('unwatchedCount' in eintrag && eintrag.unwatchedCount > 0) {
+      const plakette = document.createElement('span');
+      plakette.className = 'offen';
+      plakette.textContent = String(eintrag.unwatchedCount);
+      bild.appendChild(plakette);
+    }
+    k.appendChild(bild);
 
     const unten = document.createElement('div');
     unten.className = 'rowline';
@@ -75,6 +85,7 @@ export function mediathek(art: Art, oeffnen: (art: Art, id: string) => void): HT
     const teile = [
       eintrag.year ? String(eintrag.year) : null,
       'episodeCount' in eintrag ? `${eintrag.episodeCount} Folgen` : null,
+      'state' in eintrag && eintrag.state?.watched ? 'Gesehen' : null,
     ].filter(Boolean);
     unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
       + `<span class="tiny">${esc(teile.join(' · '))}</span>`;