yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

Both: let the user scale album art size and grid spacing #49

New Issue
Open
opened 2026-08-18 05:58:15 +00:00 by logan · 0 comments
logan commented 2026-08-18 05:58:15 +00:00
Collaborator
Copy Link
Copy Source

Report

I want to control the scale of the album art across the views. On desktop I sometimes want lots of small albums at once, and sometimes a high-res wall for a smaller collection. On a small phone I mostly want them small, but I want the option. Same for the spacing between albums: sometimes an edge-to-edge grid, sometimes distinct, well-spaced cards.

Findings

  • frontend/src/components/cover-grid/cover-grid.ts already scales its card font sizes from custom properties (--album-name-font etc., ~lines 711-731), so a size scale is partly parameterised already.
  • Cover art is stored in three tiers (_sm/_md/_lg, largest recorded as cover_art.file_path; the full-resolution original is deliberately not kept — the grid capped at 350px and the largest tier is 400). A larger scale than ~400px has no bytes behind it, which is the real constraint on "high-res wall".
  • The grid is virtualized and cover-grid splits into two virtualizers; card size feeds the row-height measurement, and the same is true of artists-view/genres-view.
  • Pick the tier for the box you are drawing (getCoverUrl() is the model) — a scale control must switch tiers, not upscale the small one.

Direction

A size control (3-4 steps) and a spacing control, persisted per view and per platform, applied as custom properties. Decide what the top step means given the 400px ceiling: either accept 400px as the max, or reconsider keeping a larger tier for people who want the wall (that costs disk — the original used to be 1,134 MB of a 1.4 GB covers directory, which is why it was dropped).

**Report** I want to control the scale of the album art across the views. On desktop I sometimes want lots of small albums at once, and sometimes a high-res wall for a smaller collection. On a small phone I mostly want them small, but I want the option. Same for the spacing between albums: sometimes an edge-to-edge grid, sometimes distinct, well-spaced cards. **Findings** - `frontend/src/components/cover-grid/cover-grid.ts` already scales its card font sizes from custom properties (`--album-name-font` etc., ~lines 711-731), so a size scale is partly parameterised already. - Cover art is stored in three tiers (`_sm`/`_md`/`_lg`, largest recorded as `cover_art.file_path`; the full-resolution original is deliberately not kept — the grid capped at 350px and the largest tier is 400). **A larger scale than ~400px has no bytes behind it**, which is the real constraint on "high-res wall". - The grid is virtualized and `cover-grid` splits into two virtualizers; card size feeds the row-height measurement, and the same is true of `artists-view`/`genres-view`. - Pick the tier for the box you are drawing (`getCoverUrl()` is the model) — a scale control must switch tiers, not upscale the small one. **Direction** A size control (3-4 steps) and a spacing control, persisted per view and per platform, applied as custom properties. Decide what the top step means given the 400px ceiling: either accept 400px as the max, or reconsider keeping a larger tier for people who want the wall (that costs disk — the original used to be 1,134 MB of a 1.4 GB covers directory, which is why it was dropped).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Area/Design
Area/Downloads
Area/Explore
Area/Library-UI
Area/Metadata
Area/Packaging
Area/Player
Area/Queue
Area/Settings
Area/Shell-Nav
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
 Platform/Android
Platform/Desktop
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Medium
3
The priority is medium
Priority
Low
4
The priority is low
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
In Progress
Somebody is actively working on this right now
No labels Area/Library-UI Kind/Feature Platform/Android Platform/Desktop
Priority
Medium
3
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#49