SpotifyControls: export album cover as CSS variable for themes (#2197)

--vc-spotify-track-image

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -371,6 +371,10 @@ export function Player() {
     if (!track || !device?.is_active || shouldHide)
         return null;
 
+    const exportTrackImageStyle = {
+        "--vc-spotify-track-image": `url(${track?.album?.image?.url || ""})`,
+    } as React.CSSProperties;
+
     return (
         <ErrorBoundary fallback={() => (
             <div className="vc-spotify-fallback">
@@ -378,7 +382,7 @@ export function Player() {
                 <p >Check the console for errors</p>
             </div>
         )}>
-            <div id={cl("player")}>
+            <div id={cl("player")} style={exportTrackImageStyle}>
                 <Info track={track} />
                 <SeekBar />
                 <Controls />

src/plugins/spotifyControls/index.tsx

@@ -31,7 +31,7 @@ function toggleHoverControls(value: boolean) {
 export default definePlugin({
     name: "SpotifyControls",
     description: "Adds a Spotify player above the account panel",
-    authors: [Devs.Ven, Devs.afn, Devs.KraXen72],
+    authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
     options: {
         hoverControls: {
             description: "Show controls on hover",

src/utils/constants.ts

@@ -414,6 +414,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     coolelectronics: {
         name: "coolelectronics",
         id: 696392247205298207n,
+    },
+    Av32000: {
+        name: "Av32000",
+        id: 593436735380127770n,
     }
 } satisfies Record<string, Dev>);