From d053d083627f1f9f010752f8ad67941e22d49f27 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Mon, 24 Aug 2026 19:11:43 +0200 Subject: feat(hub): draw an actual CD for covers with no art, not a flat icon The monochrome disc icon from the previous commit read as placeholder UI chrome, not as artwork - too plain for something that is, for most tiles in a real library, the default look of the grid. - DiscPlaceholder (music-app.js): a small inline SVG illustration - dark disc base, an iridescent radial-gradient sheen mimicking the rainbow reflection a real CD's data side has, two faint groove rings, a light label ring, a dark spindle hole. Each instance gets its own gradient id (a module-level counter) rather than one literal id repeated - a grid renders many of these at once, and a shared id would leave every disc after the first pointing at whichever the browser happened to resolve. - AlbumCard and MusicDetailModal now branch on coverHash directly: MediaThumb (the real chunk-path image) when there is one, DiscPlaceholder when there isn't - rather than routing "no cover" through MediaThumb's own generic small-icon fallback, which is still right for its other callers (list rows, Videos). - icon.js: the flat monochrome "disc" icon this replaces is removed - nothing else used it. - style.css: .music-disc-empty/.music-disc-svg replace the old .video-thumb-empty overrides; still sized relative to the tile (82%) so it scales with .music-grid's auto-fill columns. Client-side only. npm run sync-ui re-run. Full suite: 1129 passed, no regressions. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy --- .../src/meshbay_hub/static/music-app.js | 56 +++++++++++++++++++--- 1 file changed, 50 insertions(+), 6 deletions(-) (limited to 'packages/meshbay-hub/src/meshbay_hub/static/music-app.js') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js index b8ee657..87e1319 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js @@ -112,6 +112,48 @@ function useMusicMeta(transportRef, path, active) { return meta; } +// A drawn CD standing in for a cover nothing supplied one for -- most tiles +// in a real, older/well-ripped library land here (musicbay.md's own +// measurement: ~11% embedded art, ~26% once sibling image files are counted +// too), so this is the *default* look of the grid, not a rare fallback, and +// needed to read as a deliberate piece of art rather than a broken image. +// A flat single-color icon (the first version of this) looked exactly like +// "missing", not "no cover" -- an actual disc, with the iridescent sheen a +// real CD's data side has, reads as intentional at a glance. Genuinely +// unique gradient ids: a `` id is a plain DOM id, and a grid +// full of these renders many instances at once -- reusing one literal id +// would leave every disc after the first pointing at whichever def the +// browser resolves first. +let _discIdSeq = 0; + +function DiscPlaceholder({ cls }) { + const [gradId] = useState(() => `music-disc-sheen-${_discIdSeq++}`); + return html` +
+ +
+ `; +} + function AlbumCard({ album, transportRef, gekRef, musicbrainzEnabled, onOpen }) { const repTrack = album.tracks.find((tr) => tr.thumb_hash) || album.tracks[0]; // Only when nothing in the library already gives us a cover -- the common @@ -122,9 +164,10 @@ function AlbumCard({ album, transportRef, gekRef, musicbrainzEnabled, onOpen }) return html`
- <${MediaThumb} thumbHash=${coverHash} alt=${album.album} - cls="music-cover" emptyIcon="disc" - transportRef=${transportRef} gekRef=${gekRef} /> + ${coverHash + ? html`<${MediaThumb} thumbHash=${coverHash} alt=${album.album} + cls="music-cover" transportRef=${transportRef} gekRef=${gekRef} />` + : html`<${DiscPlaceholder} cls="music-cover" />`}
${album.album}
${album.artist}
@@ -153,9 +196,10 @@ function MusicDetailModal({ album, transportRef, gekRef, musicbrainzEnabled, onC
- <${MediaThumb} thumbHash=${coverHash} alt=${album.album} - cls="music-detail-cover" emptyIcon="disc" - transportRef=${transportRef} gekRef=${gekRef} /> + ${coverHash + ? html`<${MediaThumb} thumbHash=${coverHash} alt=${album.album} + cls="music-detail-cover" transportRef=${transportRef} gekRef=${gekRef} />` + : html`<${DiscPlaceholder} cls="music-detail-cover" />`}
${album.artist}
${meta && meta.confidence ? html`
${meta.release_date || ''}
` : ''} -- cgit v1.2.3