From 626365668508790dee70ab192a7d6c6f14725bf4 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Mon, 24 Aug 2026 21:51:18 +0200 Subject: fix(hub): give the Music flat list its own look instead of Videos' reskin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two complaints against real use: the artist -> album -> track hierarchy was invisible (every depth sat flush left, distinguishable only by which chevron happened to be open — Videos' own flat list never needed more than one level, so there was nothing to reuse for this), and a filled-in album unfolded into a wall of identical little icon-box squares, one per track, carrying no information a track row can actually use (unlike Videos' per-episode thumbnail). Track rows now reuse Mode A's own numbered tracklist style (.music-track-row: number, title, duration, no icon box) instead of Videos' boxy thumb-slot row. A folder's expanded contents get wrapped in a new .music-flat-children indent + rule line, so nesting reads as visible steps into the tree rather than same-level siblings. Folder rows (artist/album headers) still reuse Videos' flat-row style, which fits them fine — this is not a wholesale rewrite, only what didn't actually work. --- .../src/meshbay_hub/static/music-app.js | 73 +++++++++++++--------- 1 file changed, 43 insertions(+), 30 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 7e16b53..cb14fb4 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js @@ -3,7 +3,6 @@ import { } from './vendor/htm-preact.js'; import { t } from './i18n.js'; import { Icon } from './icon.js'; -import { formatSize } from './file-utils.js'; import { MediaThumb, LazyTile } from './video-app.js'; import { formatTime } from './music-player.js'; @@ -279,17 +278,21 @@ function AlbumGrid({ artists, transportRef, gekRef, musicbrainzEnabled, onPlayQu // -- Mode B: flat, folder-based, no MusicBrainz ------------------------------ -function FlatTrackRow({ track, onPlay }) { +// A track is not a folder — it was rendered with the same boxy thumbnail +// slot as one anyway (borrowed wholesale from Videos' flat list), which +// meant a big album unfolded into a wall of identical little squares, one +// per row, carrying no information (no embedded-art-in-a-list-row concept +// exists here, unlike Videos' per-episode thumbnail). Reuses the plain +// numbered-row style Mode A's own tracklist already uses instead +// (music-track-row) — track number, title, duration, no icon box. +function FlatTrackRow({ track, index, onPlay }) { + const num = track.track_no || (index != null ? index + 1 : null); return html` -
-
<${Icon} name="music" />
-
-
${track.display_title || track.name}
-
- ${formatTime(track.duration || 0)} ${' - '}${formatSize(track.size)} -
-
-
+ `; } @@ -305,9 +308,14 @@ function FlatAlbumFolder({ album, onPlayQueue }) { <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} /> - ${open && album.tracks.map((tr, i) => html` - <${FlatTrackRow} key=${tr.id} track=${tr} onPlay=${() => onPlayQueue(album.tracks, i)} /> - `)} + ${open && html` +
+ ${album.tracks.map((tr, i) => html` + <${FlatTrackRow} key=${tr.id} track=${tr} index=${i} + onPlay=${() => onPlayQueue(album.tracks, i)} /> + `)} +
+ `} `; } @@ -329,22 +337,27 @@ function FlatArtistFolder({ artist, onPlayQueue }) { <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} /> - ${/* A real artist folder with no album layer at all is common here -- a - pile of loose singles, not one release (musicbay.md section 2.1's - "flat per-artist folder" case). Nesting them one more level behind - their own always-empty "Unknown album" row was exactly the - friction reported live: an extra, pointless expand before - reaching a track that's playable (with full previous/next across - the whole pile -- onPlayQueue already gets every track sharing - this bucket) at all. A real, named album still gets its own - foldable row. */ - open && artist.albums.map((album) => (album.isUnknown - ? album.tracks.map((tr, i) => html` - <${FlatTrackRow} key=${tr.id} track=${tr} - onPlay=${() => onPlayQueue(album.tracks, i)} /> - `) - : html`<${FlatAlbumFolder} key=${album.album} album=${album} onPlayQueue=${onPlayQueue} />` - ))} + ${open && html` +
+ ${/* A real artist folder with no album layer at all is common here + -- a pile of loose singles, not one release (musicbay.md + section 2.1's "flat per-artist folder" case). Nesting them + one more level behind their own always-empty "Unknown album" + row was exactly the friction reported live: an extra, + pointless expand before reaching a track that's playable + (with full previous/next across the whole pile -- + onPlayQueue already gets every track sharing this bucket) at + all. A real, named album still gets its own foldable row, + one indent level deeper than its loose siblings would be. */ + artist.albums.map((album) => (album.isUnknown + ? album.tracks.map((tr, i) => html` + <${FlatTrackRow} key=${tr.id} track=${tr} index=${i} + onPlay=${() => onPlayQueue(album.tracks, i)} /> + `) + : html`<${FlatAlbumFolder} key=${album.album} album=${album} onPlayQueue=${onPlayQueue} />` + ))} +
+ `} `; } -- cgit v1.2.3