Er war es immer: 28 Bildpunkte Weichzeichnung über die ganze Detailseite, damit der Text darüber lesbar bleibt. Oben steht aber gar nichts darüber — dort ist das Bild das Beste, was die Seite zu bieten hat, und es lag als Farbschlieren da. Unscharf gehört es erst, wenn wirklich etwas darüber hinwegläuft: die Folgen, die Besetzung, die Medienangaben. Jetzt folgt die Weichzeichnung dem Bildlauf, über etwa siebzig Prozent einer Bildschirmhöhe und quadratisch statt geradlinig — die ersten Bildpunkte sollen nichts tun, sonst wäre „scharf, solange nichts darüberliegt" nach einem Fingerbreit schon dahin. Gerundet auf ganze Bildpunkte, weil jeder neue Wert eine bildschirmfüllende Fläche neu zeichnen lässt; über die ganze Strecke sind das 28 Male. Gemessen über 58 Bilder beim Hinunterrollen: 8,3 ms im Mittel, kein Bild über 9,2 ms. **Und die Deckung geht mit, das ist der unscheinbare Teil.** Eine Weichzeichnung verrührt die hellen Stellen mit den dunklen; ein scharfes Bild hat die weisse Stelle genau dort, wo die Zeile steht. Gemessen an der dunklen Vorlage von „Dark": vorher 4,07∶1, scharf bei derselben Deckung nur noch 2,44∶1. An einer hellen — Hubschrauber vor blauem Himmel — vorher 2,75∶1. Mit 0,28 scharf und 0,45 weich stehen beide wieder bei rund 4,0∶1, die helle sogar besser als zuvor. Der Zuhörer räumt sich selbst ab: die Detailseite wird nicht gemerkt, und für ungemerkte Ansichten ruft `einhaengen` kein Abbruchsignal. 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.