diff --git a/src/facets/themes/blur-pocket/facet/index.css b/src/facets/themes/blur-pocket/facet/index.css
index 5b0c1c77..26ad0992 100644
--- a/src/facets/themes/blur-pocket/facet/index.css
+++ b/src/facets/themes/blur-pocket/facet/index.css
@@ -166,7 +166,7 @@ db-browser {
cursor: grab;
display: flex;
flex-shrink: 0;
- height: var(--space-sm);
+ height: var(--space-lg);
justify-content: center;
touch-action: none;
}
diff --git a/src/facets/themes/blur-pocket/facet/index.inline.js b/src/facets/themes/blur-pocket/facet/index.inline.js
index 94972ed8..5408ce8c 100644
--- a/src/facets/themes/blur-pocket/facet/index.inline.js
+++ b/src/facets/themes/blur-pocket/facet/index.inline.js
@@ -146,7 +146,12 @@ effect(() => {
if (track) {
const art = foundation.signals.orchestrator.artwork();
art?.get(track).then((bytes) => {
- if (!bytes) return;
+ // No cover for this track — fall back to the placeholder icon and hide
+ // any
that was shown for the previous one.
+ if (!bytes) {
+ showNoArtwork();
+ return;
+ }
// Avoid recreating the same blob URL on every reactive run.
const key = `${track.id}:${bytes.byteLength}`;
if (key === miniArtUrl) return;
@@ -168,20 +173,15 @@ effect(() => {
if (miniArt) {
miniArt.innerHTML = "";
const img = document.createElement("img");
- img.src = url;
+ // If the image fails to load, drop it and show the placeholder icon.
+ img.addEventListener("error", showNoArtwork);
img.alt = "";
+ img.src = url;
miniArt.append(img);
}
- }).catch(() => {});
+ }).catch(showNoArtwork);
} else {
- miniArtUrl = "";
- if (miniArtObjectUrl) {
- URL.revokeObjectURL(miniArtObjectUrl);
- miniArtObjectUrl = "";
- }
- if (miniArt) {
- miniArt.innerHTML = ``;
- }
+ showNoArtwork();
}
// Play / pause icon
@@ -244,6 +244,21 @@ foundation.ready();
// 🛠️ HELPERS
////////////////////////////////////////////
+/**
+ * Reset the minimized now-playing artwork back to the placeholder icon,
+ * hiding any
that may be (or failed to be) displayed.
+ */
+function showNoArtwork() {
+ miniArtUrl = "";
+ if (miniArtObjectUrl) {
+ URL.revokeObjectURL(miniArtObjectUrl);
+ miniArtObjectUrl = "";
+ }
+ if (miniArt) {
+ miniArt.innerHTML = ``;
+ }
+}
+
/**
* @param {Uint8Array} bytes
* @returns {string}
diff --git a/src/facets/themes/blur/browser/element.css b/src/facets/themes/blur/browser/element.css
index 69d7ea2d..c5fb41de 100644
--- a/src/facets/themes/blur/browser/element.css
+++ b/src/facets/themes/blur/browser/element.css
@@ -494,8 +494,16 @@
.cover-grid {
display: grid;
gap: var(--space-sm);
- grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
padding: var(--space-2xs) var(--space-sm) var(--space-sm);
+
+ @media (min-width: 42rem) {
+ grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+ }
+
+ @media (min-width: 91rem) {
+ grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+ }
}
.cover-card {