Zen Mode

Idee

Spotify im Vollbild zeigt weiterhin Spotify: Sidebars, Listen, Buttons. Zen Mode ersetzt das durch ein einziges großes Cover auf Milchglas, Titel und Artist in einer Serif-Sans-Kombination, einen Fortschrittsbalken — und einen Hintergrund, der zu dem passt, was gerade läuft.

Passt farblich 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 leitet daraus eine Stimmung ab: Hangul- oder Kana-Schriftzeichen, bekannte K-Pop- und Anime-Interpreten, „OST“ im Albumtitel, Lo-Fi- und Chillhop-Stichworte. Daraus wird eine von fünf Szenen — K-Pop-Neonnacht, K-Drama-Regen, Anime-Sonnenuntergang, Lo-Fi-Fenster im Regen — oder, wenn nichts greift, eine weichgezeichnete Variante des Covers selbst.

Ü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 ebenso wie data:-URIs. Ein Overlay, das seine Hintergründe als PNG mitbringt oder nachlädt, funktioniert dort schlicht nicht.

Jede Szene ist deshalb von Hand als Inline-SVG gebaut — Verläufe, Regentropfen, Sterne, Fensterrahmen, alles als Markup im DOM. Das ist mehr Arbeit als vier Bilddateien, hat aber zwei Vorteile: Es überlebt die CSP, und die Szenen skalieren verlustfrei auf jede Auflösung und lassen sich per CSS animieren statt per Video.

Details, die den Unterschied machen

F8 schaltet von überall um — außer während man in ein Eingabefeld tippt, denn ein Suchfeld-Fokus darf keinen Vollbildmodus auslösen. Die Steuerelemente blenden sich aus, bis die Maus bewegt wird. Und sämtliche dekorative Animation schaltet sich ab, sobald das Betriebssystem prefers-reduced-motion meldet: Regen, der nicht mehr fällt, ist immer noch eine Szene.