ScarriffleandClaude Opus 5
11a44f6a90
Die Startseite begann bei einer Reihe aus 150 px breiten Plakaten — das grösste Element über dem Falz war 225 px hoch. Plex und Netflix öffnen mit einem Bild über die ganze Breite, und das ist der grösste Einzelunterschied im Eindruck. Ein Layout-, kein Farbproblem. Bis zu sieben Titel, aus dem, was die Startseite ohnehin holt: erst Angefangenes, dann Neuzugänge, dann Vorschläge. Kein zusätzlicher Abruf. Nur mit Hintergrundbild. Ein Hero ohne Bild ist schlechter als keiner — eine graue Fläche über den halben Bildschirm sagt nichts und nimmt den Reihen den Platz. Gibt es keinen einzigen Titel mit Backdrop, entfällt er ersatzlos. Zwei Verläufe statt einem: der von unten lässt die erste Reihe sich darüberschieben, der von links sorgt dafür, dass der Text trägt, auch wenn das Bild dort hell ist. Pause bei Mauszeiger und bei Tastaturfokus — wer gerade liest, soll nicht nach neun Sekunden woanders landen. Bei "Bewegung reduzieren" wechselt er gar nicht von selbst. Die Punkte sind echte Knöpfe mit Beschriftung; ein div ist für Tastatur und Vorlesesoftware kein Bedienelement. 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.