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/util.ts

@@ -24,7 +24,9 @@ export function groesse(bytes: number): string {
  *
  * Der Platzhalter hält die Fläche frei, bis das Bild da ist — ohne ihn
  * springt das Raster beim Nachladen jedes Mal um. */
-export function plakat(schluessel: string | null, beschriftung: string): HTMLElement {
+export function plakat(
+  schluessel: string | null, beschriftung: string, fortschritt?: number | null,
+): HTMLElement {
   const rahmen = document.createElement('div');
   rahmen.className = 'poster';
   rahmen.setAttribute('role', 'img');
@@ -40,9 +42,34 @@ export function plakat(schluessel: string | null, beschriftung: string): HTMLEle
     img.onload = () => rahmen.classList.add('geladen');
     rahmen.appendChild(img);
   }
+
+  // Der Balken unten, wie bei Plex. Er erscheint, sobald überhaupt etwas
+  // gesehen wurde — es gibt keinen Anteil, der dafür zu klein wäre.
+  if (fortschritt != null && fortschritt > 0) {
+    const balken = document.createElement('div');
+    balken.className = 'fortschritt';
+    const gefuellt = document.createElement('div');
+    gefuellt.style.width = `${Math.min(100, fortschritt * 100)}%`;
+    balken.appendChild(gefuellt);
+    rahmen.appendChild(balken);
+  }
   return rahmen;
 }
 
+/** Wie weit ein Stand gediehen ist, als Anteil — oder nichts. */
+export function anteil(stand: { positionSeconds: number; runtimeSeconds: number | null } | null | undefined)
+  : number | null {
+  if (!stand?.runtimeSeconds || stand.runtimeSeconds <= 0) return null;
+  return stand.positionSeconds / stand.runtimeSeconds;
+}
+
+/** „noch 42 Min." — was auf einer Kachel wirklich interessiert. */
+export function verbleibend(stand: { positionSeconds: number; runtimeSeconds: number | null }): string {
+  if (!stand.runtimeSeconds) return '';
+  const rest = Math.max(0, stand.runtimeSeconds - stand.positionSeconds);
+  return rest < 60 ? 'fast durch' : `noch ${Math.round(rest / 60)} Min.`;
+}
+
 export function knopf(text: string, klasse = 'btn'): HTMLButtonElement {
   const b = document.createElement('button');
   b.className = klasse;