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 @@
artist art size: 32px
album art size: 48px
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,
},
};