ScarriffleandClaude Opus 5
963e5a74ae
Die Voreinstellung des Browsers ist weisse Schrift auf schwarzem Kasten, in einer Grösse, die er aus der Höhe des Videos rechnet. Auf einem grossen Bildschirm aus drei Metern Abstand ist das zu klein, und wer schlecht sieht, braucht es anders. Einstellbar sind Grösse (60 bis 300 Prozent in Zehnerschritten), Schriftfarbe (Weiss, Hellgelb, Hellblau, Schwarz) und Hintergrund (Halbdunkel, Schwarz, Grau, Ohne). Gestaltet wird mit `::cue`, nicht mit eigenen Kästen. Der Browser zeichnet die Einblendungen selbst — Position, Umbruch, Zeilenabstand und die Platzangaben aus der Datei. Das nachzubauen hiesse, all das noch einmal zu schreiben und dabei schlechter zu werden. Gemessen an einem Video mit echter Spur, Bild für Bild: 200 Prozent in Hellgelb ohne Kasten und 140 Prozent in Hellblau auf Grau kommen beide so heraus, wie sie gemeint sind. Ohne Kasten setzt es von selbst einen Schatten. Weisse Schrift in einer hellen Szene ist sonst weg, und das wäre eine Einstellung, die sich selbst unbrauchbar macht. Mit Kasten wäre derselbe Schatten nur Unschärfe. Die Einstellung sitzt im Untertitelmenü, abgetrennt unter den Spuren — wie der Tonversatz im Tonmenü. Ob die Schrift gross genug ist, sieht man nur an einem laufenden Film, in diesem Licht, aus diesem Abstand; wer dafür die Wiedergabe verlassen muss, stellt zweimal falsch ein, bevor er einmal richtig liegt. Gemerkt wird im Browser, nicht am Konto: wie gross Schrift sein muss, hängt am Bildschirm und am Abstand davor. Dasselbe Konto am Telefon und am Fernseher will zwei verschiedene Grössen. Farbfelder statt einer Liste mit Farbnamen — „Hellblau" muss man lesen und sich vorstellen, ein Feld sieht man. Das gewählte trägt einen Ring aussen herum und keinen Haken darin: ein Haken wäre auf Weiss unsichtbar und auf Schwarz erst recht. „Ohne Hintergrund" zeigt ein Karomuster, weil ein leeres Feld nach Weiss aussähe. Gelesen wird nur, was bekannt ist. Ein fremder Eintrag im Speicher darf nicht zu beliebigem CSS in der Seite werden. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Flaro Web
Die Weboberfläche für Rechner, auf denen es keine App gibt — Windows vor allem.
Aufbau
| Ordner | Was |
|---|---|
app/ |
Das Frontend (Vite, TypeScript) |
server/ |
Ein Server ohne Abhängigkeiten, der die Anfragen weiterreicht und die gebauten Dateien ausliefert |
frontend/ |
Die erste Fassung als einzelne Datei. Läuft, wird abgelöst. |
jellyfin-theme/ |
Ein Kleid für Jellyfins eigene Oberfläche — die kleine Lösung von vorher |
Warum ein eigener Server?
Er löst zwei Dinge, an denen die einzelne Datei scheitert, und zwar unabhängig davon, wie gut das Frontend geschrieben ist:
- Herkunft. Anfragen laufen über
/apiund damit über dieselbe Adresse wie die Seite. Kein CORS, auch nicht beim Streamen. - Klartext und Verschlüsselung. Läuft der Medienserver über
httpund die Seite überhttps, blockiert der Browser den Stream. Dagegen kann keine Zeile im Frontend etwas tun — ein Server davor schon.
Nebenbei bleibt der Zugangsschlüssel beim Server, statt im Browser zu liegen.
Betreiben
cd app && npm install && npm run build
cd ../server && FLARO_SERVER=http://jellyfin:8096 node index.js
Dann auf http://localhost:8080. Der Port lässt sich über PORT ändern.
Entwickeln
cd app && FLARO_SERVER=http://jellyfin:8096 npm run dev
Vite übernimmt dabei das Weiterreichen, der eigene Server wird nicht gebraucht.