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

Desktop: explore centering the seek bar and transport controls in the bottom bar #23

New Issue
Closed
opened 2026-08-18 05:55:00 +00:00 by logan · 1 comment
logan commented 2026-08-18 05:55:00 +00:00
Collaborator
Copy Link
Copy Source

Report

Centering the seek bar and player controls in the window would look better. The difficulty is fitting the now-playing metadata in the bottom-left when the transport is centred. Worth exploring.

Findings

  • The bottom bar is a 4em-tall grid row; audio-player's seek bar and volume already declare what they drop at phone width, and now-playing's marquee measures its own geometry (a change to the metadata box's width changes the scroll distance — see the will-scroll padding note, a guard on the text alone leaves the first hover scrolling short).
  • Three-column layouts (metadata | transport | volume+queue) are the standard answer; the risk is the middle column drifting off-centre as the side columns change width.

Direction

Prototype a fixed three-column grid where the outer columns are equal-width and min-width: 0, so the centre is truly centred and the metadata truncates rather than pushing. Check it at 800px, at 200% text, and against now-playing's geometry key (it must re-measure when the panel resizes — the ResizeObserver is already in the dependency list).

**Report** Centering the seek bar and player controls in the window would look better. The difficulty is fitting the now-playing metadata in the bottom-left when the transport is centred. Worth exploring. **Findings** - The bottom bar is a 4em-tall grid row; `audio-player`'s seek bar and volume already declare what they drop at phone width, and `now-playing`'s marquee measures its own geometry (a change to the metadata box's width changes the scroll distance — see the `will-scroll` padding note, a guard on the text alone leaves the first hover scrolling short). - Three-column layouts (metadata | transport | volume+queue) are the standard answer; the risk is the middle column drifting off-centre as the side columns change width. **Direction** Prototype a fixed three-column grid where the outer columns are equal-width and `min-width: 0`, so the centre is truly centred and the metadata truncates rather than pushing. Check it at 800px, at 200% text, and against `now-playing`'s geometry key (it must re-measure when the panel resizes — the ResizeObserver is already in the dependency list).
logan added the Area/PlayerKind/EnhancementPlatform/Desktop
Priority
Low
4
 labels 2026-08-18 14:36:07 +00:00
logan self-assigned this 2026-08-20 03:38:44 +00:00
logan added the
Status
In Progress
 label 2026-08-20 03:38:45 +00:00
logan commented 2026-08-20 03:38:45 +00:00
Author
Collaborator
Copy Link
Copy Source

Claiming this with #42, as one pass — see the note there. Branch:
feat/42-inline-volume-and-centred-transport.

In short: #42 inlines the volume slider, and its own findings record
that doing so grows the bar 6px to 14px and moves the transport,
which is this issue's subject. Two passes over the same bar would mean
measuring it twice and discarding the first set of numbers.

This issue's Direction is the mechanism for both: a fixed three-column
grid, equal-width outer columns, min-width: 0, so the centre does not
drift as the metadata and the volume column change width. Checked at
800px, at 900 (the narrowest content area a desktop width produces),
and at 200% text, and against now-playing's geometry key — the
marquee re-measures on a panel resize and the will-scroll padding
changes the scroll distance, so a guard on the text alone leaves the
first hover scrolling short.

Claiming this with #42, as one pass — see the note there. Branch: `feat/42-inline-volume-and-centred-transport`. In short: #42 inlines the volume slider, and its own findings record that doing so grows the bar 6px to 14px and **moves the transport**, which is this issue's subject. Two passes over the same bar would mean measuring it twice and discarding the first set of numbers. This issue's Direction is the mechanism for both: a fixed three-column grid, equal-width outer columns, `min-width: 0`, so the centre does not drift as the metadata and the volume column change width. Checked at 800px, at 900 (the narrowest content area a desktop width produces), and at 200% text, and against `now-playing`'s geometry key — the marquee re-measures on a panel resize and the `will-scroll` padding changes the scroll distance, so a guard on the text alone leaves the first hover scrolling short.
logan closed this issue 2026-08-20 05:22:04 +00:00
gitea-actions bot removed the
Status
In Progress
 label 2026-08-20 05:23:40 +00:00
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/Player Kind/Enhancement Platform/Desktop
Priority
Low
4
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees logan
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#23