refactor: banner image crossfade

Comfy-Themes · Jul 8, 2024 · 52ef896 · 52ef896
1 parent 14ee7ef
commit 52ef896
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/Comfy/app.scss b/Comfy/app.scss
@@ -25,6 +25,7 @@
 	--tracklist-gradient-height: 232px;
 	--tracklist-gradient-opacity: 0.6;
 	--tracklist-gradient-noise: var(--background-noise);
+	--image-url: none;
 
 	// Custom Radii
 	button,

diff --git a/Comfy/assets/_main.scss b/Comfy/assets/_main.scss
@@ -12,25 +12,26 @@
 		display: block;
 
 		.comfy-banner-image {
-			&:first-of-type {
-				position: absolute; // Positioned absolutely to cover the entire viewport
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				object-fit: cover;
-				object-position: top;
-				filter: blur(var(--image-blur));
-				-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
-				mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
-			}
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			background-size: cover;
+			background-position: top;
+			background-image: var(--image-url);
+			filter: blur(var(--image-blur));
+			-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
+			mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
+			transition: background 0.5s ease;
+		}
 
-			&:last-of-type {
-				display: none;
-			}
+		.comfy-banner-image:last-of-type {
+			display: none;
 		}
 	}
 
+
 	.main-entityHeader-backgroundColor {
 		background: none !important;
 	}

diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss
@@ -504,13 +504,13 @@
 					animation: rotate var(--gradient-speed) linear infinite;
 					border-radius: var(--gradient-radius) !important;
 					mix-blend-mode: var(--gradient-blend-mode);
-					object-fit: cover !important;
+					background-size: cover !important;
 
 					&:first-of-type {
 						height: revert;
 						left: unset;
-						object-fit: unset;
-						object-position: unset;
+						background-size: unset;
+						background-position: unset;
 						filter: none;
 						-webkit-mask-image: none;
 						mask-image: none;

diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js
@@ -126,7 +126,7 @@ todo:
 	};
 
 	const frame = document.createElement("div");
-	const banner = [document.createElement("img"), document.createElement("img")];
+	const banner = [document.createElement("div"), document.createElement("div")];
 
 	frame.className = "comfy-banner-frame";
 	banner.forEach(image => {
@@ -1862,10 +1862,6 @@ todo:
 
 		source = source ?? Spicetify.Player.data.item?.metadata?.image_xlarge_url ?? Spicetify.Player.data.track.metadata.image_xlarge_url;
 
-		if (banner[0].src !== source) {
-			console.debug(`[Comfy-Event]: Banner Source = ${banner[0].src} -> ${source}`);
-		}
-
 		const validChannel = Object.values(channels).some(channel => channel.enabled && channel.regex.test(pathname));
 		frame.style.display = validChannel ? "" : "none";
 		if (getConfig("Banner-Enabled")) {
@@ -1876,8 +1872,21 @@ todo:
 			}
 		}
 
+		if (document.documentElement.style.getPropertyValue("--image-url") !== `url(${source})`) {
+			console.debug(`[Comfy-Event]: Banner Source = ${source}`);
+
+			const preloadImage = new Image();
+			preloadImage.src = source;
+			if (preloadImage.complete) {
+				document.documentElement.style.setProperty("--image-url", `url(${source})`);
+			} else {
+				img.onload = () => {
+					document.documentElement.style.setProperty("--image-url", `url(${source})`);
+				};
+			}
+		}
+
 		banner.forEach(image => {
-			image.src = source;
 			image.style.display = source ? "" : "none";
 		});
 	}