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 {