Zwei Dinge in derselben Ecke, und ein Modus, den niemand bestellt hat

Der Gesehen-Haken und die drei Punkte sassen beide oben rechts — auf dem
Plakat sah das aus wie ein Fehler. Jetzt hat jede Ecke eine Aufgabe: oben
links die Auswahl, oben rechts der Stand, unten links Abspielen, unten rechts
das Menü.

Der Knopf „Auswählen" ist weg. Gemessen, warum er stören musste: der längere
Text „Auswahl beenden" brach die Filterzeile um und schob das Raster um
zwanzig Bildpunkte nach unten. Und grundsätzlicher ist ein Modus ein Zustand,
den man kennen muss, bevor man etwas tun kann. Jetzt trägt jede Kachel oben
links ein Kästchen, das beim Überfahren erscheint — wie die drei Punkte auch.
Der erste Haken fängt die Auswahl an, der letzte beendet sie.

Der Spieler lässt sich verkleinern. Er rutscht in eine Leiste am unteren Rand
und läuft weiter, während man die Mediathek aufräumt; ein Klick darauf holt
ihn zurück. Dasselbe Videoelement, nur anders eingerahmt — ein zweiter
Spieler unten hiesse, das Video auszuhängen, und dabei hört es auf zu
spielen.

Das Zahnrad mit acht Strahlen sah aus wie eine Sonne. Jetzt: Wellenform für
den Ton, CC-Kasten für die Untertitel, Schieberegler für die Qualität. Alle
drei Menüs stehen immer da — vorher verschwanden sie bei nur einer Tonspur
oder ohne Untertitel, und wer sie suchte, fand nichts und wusste nicht warum.

Dabei gefunden und behoben: die Wiedergabe blieb nach zwanzig Sekunden
stehen, obwohl längst der ganze Rest auf der Platte lag. Results.File setzte
Last-Modified, der Browser legte die Playlist mit zwei Einträgen ab, und
hls.js bekam bei jedem Nachfragen dieselben zwei zurück. Eine wachsende Liste
ist das Gegenteil von zwischenspeicherbar.

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

web/app/src/icons.ts

@@ -61,10 +61,21 @@ export const icons = {
   vollbild: rahmen('<path d="M4 9V5h4"/><path d="M20 9V5h-4"/>'
     + '<path d="M4 15v4h4"/><path d="M20 15v4h-4"/>'),
   untertitel: rahmen('<rect x="3" y="5" width="18" height="14" rx="2"/>'
-    + '<path d="M7 14.5h4"/><path d="M13 14.5h4"/>'),
-  zahnrad: rahmen('<circle cx="12" cy="12" r="3.2"/>'
-    + '<path d="M12 2.8v2.4M12 18.8v2.4M4.5 7.5l2.1 1.2M17.4 15.3l2.1 1.2'
-    + 'M4.5 16.5l2.1-1.2M17.4 8.7l2.1-1.2"/>'),
+    + '<path d="M6.5 14.5h4"/><path d="M13.5 14.5h4"/><path d="M6.5 10h11"/>'),
+
+  /** Eine Wellenform — Tonspur, und nicht zu verwechseln mit der Lautstärke. */
+  tonspur: rahmen('<path d="M4 10.5v3M8 7v10M12 4.5v15M16 8.5v7M20 11v2"/>'),
+
+  /** Schieberegler. **Vorher stand hier ein Zahnrad mit acht Strahlen** — das
+   *  sah aus wie eine Sonne, und niemand vermutete die Bildqualität dahinter. */
+  regler: rahmen('<path d="M4 7h7M15 7h5M4 17h3M11 17h9"/>'
+    + '<circle cx="13" cy="7" r="2.1"/><circle cx="9" cy="17" r="2.1"/>'),
+
+  /** Den Spieler auf die Leiste unten schrumpfen. */
+  verkleinern: rahmen('<path d="M5 9.5 12 16l7-6.5"/>'),
+
+  /** Und wieder aufs ganze Bild. */
+  vergroessern: rahmen('<path d="m5 14.5 7-6.5 7 6.5"/>'),
 } as const;
 
 export type IconName = keyof typeof icons;