From 0e12cc5798020fb620fa9635bd3760dbcb6784c9 Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Thu, 9 Apr 2026 21:54:30 -0400
Subject: [PATCH] chore: adjust default settings

---
 src/css/base.css  | 9 ++++-----
 src/index.html    | 8 ++++----
 src/js/library.js | 5 +++--
 src/js/queue.js   | 2 +-
 src/js/state.js   | 6 +++---
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index ffd0e56..8a8ec0f 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -18,10 +18,9 @@
 	--error-color: hsl(0 80% 50%);
 
 	/* cover art sizing (customize via settings) */
-	--icon: 16px;
-	--art-album: 32px;
-	--art-artist: 0px;
-	--art-song: 0px;
+	--art-album: 48px;
+	--art-artist: 32px;
+	--art-song: 16px;
 	--art-now-playing: 128px;
 }
 
@@ -43,7 +42,7 @@ body {
 	-webkit-user-select: none;
 }
 
-/* interactive elements */
+/* use default cursor */
 a,
 button,
 [role="button"] {
diff --git a/src/index.html b/src/index.html
index 4406605..941b0ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -90,7 +90,7 @@
 				</div>
 				<div class="form-group">
 					<label
-						>artist art size: <span id="artist-size-display">16</span>px</label
+						>artist art size: <span id="artist-size-display">32</span>px</label
 					>
 					<input
 						type="range"
@@ -98,12 +98,12 @@
 						min="0"
 						max="256"
 						step="4"
-						value="16"
+						value="32"
 					/>
 				</div>
 				<div class="form-group">
 					<label
-						>album art size: <span id="album-size-display">32</span>px</label
+						>album art size: <span id="album-size-display">48</span>px</label
 					>
 					<input
 						type="range"
@@ -111,7 +111,7 @@
 						min="0"
 						max="256"
 						step="4"
-						value="32"
+						value="48"
 					/>
 				</div>
 				<div class="form-group">
diff --git a/src/js/library.js b/src/js/library.js
index 6aa2aea..2324ab5 100644
--- a/src/js/library.js
+++ b/src/js/library.js
@@ -223,12 +223,13 @@ function createTreeItem(
 	const linkChildren = [];
 	if (coverArtId) {
 		const imgEl = createElement("img");
-		const size = state.settings[artType];
+		// HACK: upscale artist images 2x, since non-1:1 aspect ratios seems to make images look blurry, which is very common on artist profiles
+		const size = state.settings[artType] * (artType === "artArtist" ? 2 : 1);
 		const url1x = state.api.getCoverArtUrl(coverArtId, size);
 		const url2x = state.api.getCoverArtUrl(coverArtId, size * 2);
 		imgEl.src = url1x;
+		imgEl.srcset = `${url1x}, ${url2x} 2x`;
 		imgEl.loading = "lazy";
-		imgEl.srcset = `${url1x} 1x, ${url2x} 2x`;
 		linkChildren.push(imgEl);
 	}
 	linkChildren.push(createElement("span", { textContent: name }));
diff --git a/src/js/queue.js b/src/js/queue.js
index 2e813a3..5013e95 100644
--- a/src/js/queue.js
+++ b/src/js/queue.js
@@ -412,8 +412,8 @@ function createQueueRow(song, idx) {
 		const url1x = state.api.getCoverArtUrl(artId, size);
 		const url2x = state.api.getCoverArtUrl(artId, size * 2);
 		img.src = url1x;
+		img.srcset = `${url1x}, ${url2x} 2x`;
 		img.loading = "lazy";
-		img.srcset = `${url1x} 1x, ${url2x} 2x`;
 		coverCell.appendChild(img);
 	}
 	cells.appendChild(coverCell);
diff --git a/src/js/state.js b/src/js/state.js
index da9487b..33f5718 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -18,9 +18,9 @@ const state = {
 	settings: {
 		scrobbling: true,
 		dynamicFavicon: true,
-		artArtist: 0,
-		artAlbum: 32,
-		artSong: 0,
+		artArtist: 32,
+		artAlbum: 48,
+		artSong: 16,
 		artNowPlaying: 128,
 	},
 };
-- 
2.51.2