From d63105d61eb2c8e5e6fd7b133aa6c7161e363304 Mon Sep 17 00:00:00 2001
From: Nick Oates <nick@nickoates.com>
Date: Sun, 25 Aug 2024 00:37:59 -0700
Subject: [PATCH] CoverTheme: Apply gradient to now playing

---
 plugins/CoverTheme/src/index.ts        | 22 +-------------
 plugins/CoverTheme/src/transparent.css | 41 ++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/plugins/CoverTheme/src/index.ts b/plugins/CoverTheme/src/index.ts
index 48874c2..f775764 100644
--- a/plugins/CoverTheme/src/index.ts
+++ b/plugins/CoverTheme/src/index.ts
@@ -70,27 +70,7 @@ const unloadTransition = intercept(
 	onTransition
 );
 
-const style = setStyle();
-export function updateCSS() {
-	const positions = {
-		"top left": "DarkVibrant",
-		"center left": "Vibrant",
-		"bottom left": "LightMuted",
-		"top right": "LightVibrant",
-		"center right": "Muted",
-		"bottom right": "DarkMuted",
-	};
-	const gradients = Object.entries(positions)
-		.map(
-			([position, variable]) =>
-				`radial-gradient(ellipse at ${position}, rgb(var(--cover-${variable}), 0.5), transparent 70%)`
-		)
-		.join(", ");
-	document.body.style.backgroundImage = gradients;
-	style.css = transparent;
-}
-
-updateCSS();
+const style = setStyle(transparent);
 const { playbackContext } = getPlaybackControl();
 if (playbackContext) updateBackground(playbackContext.actualProductId);
 
diff --git a/plugins/CoverTheme/src/transparent.css b/plugins/CoverTheme/src/transparent.css
index 5b6f57b..7838ae0 100644
--- a/plugins/CoverTheme/src/transparent.css
+++ b/plugins/CoverTheme/src/transparent.css
@@ -1,3 +1,37 @@
+body,
+#nowPlaying {
+	background-image: radial-gradient(
+			ellipse at top left,
+			rgb(var(--cover-DarkVibrant), 0.5),
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse at center left,
+			rgb(var(--cover-Vibrant), 0.5),
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse at bottom left,
+			rgb(var(--cover-LightMuted), 0.5),
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse at top right,
+			rgb(var(--cover-LightVibrant), 0.5),
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse at center right,
+			rgb(var(--cover-Muted), 0.5),
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse at bottom right,
+			rgb(var(--cover-DarkMuted), 0.5),
+			transparent 70%
+		) !important;
+}
+
 #wimp,
 main,
 [class^="sidebarWrapper"],
@@ -16,11 +50,13 @@ nav,
 	) !important;
 }
 
+/* Fix play queue overlapping with player */
 #nowPlaying > [class^="innerContainer"] {
 	height: calc(100vh - 126px);
 	overflow: hidden;
 }
 
+/* Use cover colors in album/artist/playlist overlay instead of black */
 .tidal-ui__z-stack > :not(:has(div)) {
 	background-image: linear-gradient(
 		90deg,
@@ -28,3 +64,8 @@ nav,
 		rgb(var(--cover-LightVibrant), 0.5)
 	) !important;
 }
+
+/* This looks weird when the background isn't dark, better to just remove it. */
+[class^="bottomGradient"] {
+	display: none;
+}