Zen Mode

Idee

Spotify im Vollbild zeigt immer noch Spotify: Sidebars, Listen, Buttons. Zen Mode blendet das aus und zeigt stattdessen ein großes Cover auf Milchglas, Titel und Artist in einer Serif-Sans-Kombination, einen Fortschrittsbalken und einen Hintergrund, der zum laufenden Titel passt.

Farblich passt das zum kpop-theme, lässt sich aber unabhängig davon verwenden.

Die Szenen-Engine

Die Erweiterung liest Titel, Artist und Album des laufenden Stücks und sucht darin nach Hinweisen: Hangul- oder Kana-Zeichen, bekannte K-Pop- und Anime-Interpreten, „OST“ im Albumtitel, Stichworte aus Lo-Fi und Chillhop. Daraus wird eine von fünf Szenen: K-Pop-Neonnacht, K-Drama-Regen, Anime-Sonnenuntergang oder Lo-Fi-Fenster im Regen. Passt nichts davon, bleibt eine weichgezeichnete Variante des Covers.

Über das Badge oben links lässt sich manuell durchschalten: Auto → Anime → K-Pop → Lo-Fi → K-Drama → Album Aura → Auto.

Warum alles SVG ist

Spotifys Content-Security-Policy blockiert externe Bilder und data:-URIs. Ein Overlay, das seine Hintergründe als PNG mitbringt oder nachlädt, funktioniert dort nicht.

Jede Szene ist deshalb von Hand als Inline-SVG gebaut: Verläufe, Regentropfen, Sterne und Fensterrahmen liegen als Markup im DOM. Das ist mehr Arbeit als ein paar Bilddateien, kommt aber an der CSP vorbei, skaliert verlustfrei auf jede Auflösung und lässt sich in CSS animieren.

Kleinigkeiten

F8 schaltet von überall um, außer während man gerade in ein Eingabefeld tippt: Ein Klick ins Suchfeld soll keinen Vollbildmodus auslösen. Die Steuerelemente blenden sich aus, bis die Maus wieder bewegt wird. Und sobald das Betriebssystem prefers-reduced-motion meldet, stehen alle dekorativen Animationen still; die Szenen selbst bleiben sichtbar.