feat(player): show progress on the phone's bar border
#59 took the seek bar off the phone's transport, so the one thing a mini player is expected to say without being opened -- how far through the song it is -- had nowhere left to be said. It is the shell's element and its own 2px grid row between `bottom-bar` and `bottom-nav`, because those two are separate components and either one drawing the line means reaching into the other's box. The fill is `scaleX()` off the same `PlaybackPositionChanged` the seek bar renders, with the same `trackChangeId`/`seq` guards and an interval that only interpolates *between* reports -- never its own clock, which is the rule that exists because a local counter drifted 30 s away from the backend across four keyboard seeks. It is `aria-hidden` and takes no pointer events at any depth: Now Playing's seek bar is what announces the position, and a 2px strip on the top edge of the tab bar is exactly where a thumb aiming at a tab lands. It renders nothing above 600px, from `matchMedia` rather than a media query, because a stylesheet cannot stop a 1 Hz interval running for the life of every desktop session about a line nobody can see. Its phone rule is at the foot of index.css beside `job-band`'s, not in the phone block above: a media query adds no specificity, so a `display: block` written before the `display: none` that takes it out of the desktop grid loses to it and the line never appears at all. Closes #58
This commit is contained in:
@@ -81,6 +81,16 @@
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- How far through the song we are, on the border between the two
|
||||
bars (#58). The shell's element rather than either bar's:
|
||||
they are separate components stacked in this grid, so a line
|
||||
on the border between them is a row of it, and neither one has
|
||||
to reach into the other's box for two pixels. It renders
|
||||
nothing above 600px and nothing with no track, is `aria-hidden`
|
||||
(Now Playing's seek bar is what announces the position) and
|
||||
takes no pointer events at all -- a thin line that sometimes
|
||||
seeks is worse than one that never does. -->
|
||||
<player-progress-line></player-progress-line>
|
||||
<!-- The phone's primary navigation, hidden above 600px by
|
||||
index.css. Eager rather than a chunk, for the reason
|
||||
notification-host is: it is the only way to move around the
|
||||
|
||||
Reference in New Issue
Block a user