ScarriffleandClaude Opus 5
3a0afa918d
Sie liegen über dem Bild und damit über allem, was dort steht. Bei einem einzeiligen Titel geht das gut. „Pirates of the Caribbean — Salazars Rache" bricht um, die erste Zeile rückt nach oben — und der linke Pfeil sitzt auf dem ersten Buchstaben. Ständig sichtbar ist er dort ein Fleck, auf Zuruf ein Knopf. Also erscheinen beide erst beim Überfahren des Aufmachers, in 150 ms, und verschwinden wieder. `hover: hover` ist dabei die ganze Vorsicht: auf einem Tablett gibt es kein Überfahren, und ein Knopf, der nur dabei erscheint, wäre dort schlicht nicht erreichbar. Dort bleibt alles, wie es war — unter 860 Bildpunkten gibt es die Pfeile ohnehin nicht, da wird gewischt. Gemessen: in Ruhe Deckung 0, kein Zeigerziel. Zeiger über dem Aufmacher: 0,72 und anklickbar. Zeiger auf dem Pfeil: 1, dunklerer Grund, und der Klick blättert tatsächlich weiter (Tastatur-Tabulator vom Knopf „Mehr" aus: Deckung 1, `:focus-visible` greift, Umriss 2 px) — `pointer-events: none` hält nur den Zeiger ab, nicht den Fokus. 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.