ScarriffleandClaude Opus 5
94c6604e8b
**Pfeile.** Der Aufmacher hatte nur die Punkte; die Pfeile, die du gedrückt hast, gehörten zur Reihe darunter. Jetzt stehen links und rechts über dem Bild zwei grosse Knöpfe. Am Telefon gibt es sie nicht — dort nähme ein Knopf über dem Bild ein Drittel der Breite —, dafür lässt sich wischen. Nur waagerecht und erst ab 48 Pixeln, sonst käme man am Aufmacher nicht mehr vorbeigescrollt. **Und die Knöpfe springen nicht mehr.** „Abspielen" ist 128 Pixel breit, „Fortsetzen ab 1:23:45" 207, der Terminhinweis 257 — alles in derselben Flexreihe, also wanderte „Mehr" bei jedem Umblättern mit, und das Karussell blättert von allein. Der vordere Platz hat jetzt eine feste Breite. Gemessen: „Mehr" steht auf allen sieben Folien an derselben Stelle. Dabei fielen zwei Dinge auf, die nicht am Umbau lagen: **Der Textblock war so breit wie sein längster Satz.** Als blosses Flexkind richtete er sich nach dem Inhalt — bei einer kurzen Inhaltsangabe schmaler als bei einer langen. Auf dem Telefon rückte „Mehr" dadurch um fünfzig Pixel, und mit dem festen Platz lief die Zeile sogar über den Bildschirm hinaus; `overflow: hidden` schnitt die rechte Hälfte des Textes ab. **Ein fehlender Schriftzug liess den Aufmacher namenlos.** Steht ein Logo in den Metadaten, wurde der Titel daneben versteckt — auch wenn das Bild gar nicht lud. Zu sehen war ein Platzhalter und sonst nichts. Jetzt tritt der Name an seine Stelle. 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.