ScarriffleandClaude Opus 5
ac9faacefb
Inhaltsangabe und Knöpfe blenden sich beim Überfahren ein und wieder aus. In Ruhe bleibt oben nur, *was* läuft — Schriftzug oder Name, Jahr, Laufzeit, Freigabe. Was man damit tun kann und worum es geht, kommt auf Zuruf. So ist das Bild in Ruhe ein Bild und nicht eine Wand aus Text darüber. **Langsamer herein als hinaus**, 340 gegen 220 Millisekunden: das Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen. Die Pfeile gehen denselben Takt mit; sie standen auf 150 ms und blitzten dagegen auf. **Der Platz bleibt reserviert.** Mit `display: none` spränge beim ersten Überfahren der ganze Block nach oben; geschaltet wird nur die Deckung. Gemessen an derselben Folie: 349,2 px hoch mit Deckung 0, 349,2 px mit Deckung 1. **Der Terminhinweis bleibt stehen.** „Ab Di., 6. Okt., 18:00 Uhr" ist keine Handlung, sondern die Auskunft, warum hier nichts zu drücken ist — die darf nicht erst auf Zuruf kommen. Darum trifft die Regel `.btn` und nicht die ganze Knopfzeile. **Der Fokus zählt wie der Zeiger.** Ein Knopf, der unsichtbar den Fokus bekommt, ist eine Sackgasse. Gemessen, mit abgeschalteten Übergängen: in Ruhe alles auf 0; Fokus im Aufmacher — Text 1, beide Knöpfe 1, beide Pfeile 0,72; nach dem Verlassen wieder 0. `hover: hover` wie bei den Pfeilen: ohne Zeiger gäbe es kein Überfahren, und „Abspielen" wäre nicht mehr erreichbar. Dort steht alles wie immer. 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.