logan
dc8db159f9
Two issues over one bar, because they are one relayout. #42's own findings say so: giving wa-slider a label grows it 6px to 14px and moves the transport, which is #23's subject, so doing them in sequence means measuring the bar twice and throwing the first set away. The bar was `320px 1fr auto`, so the transport sat in the middle of what the metadata and the queue button did not use — its centre was ~140px right of the window's at every width. The outer two tracks are the same expression now, so the middle is centred by construction. The side width is the metadata's, capped at a quarter of the bar, and the cap was measured as a regression before it was a decision: reserving the full `--now-playing-width` on both sides is perfectly centred and takes the seek bar's track from 257px to 61px at 800px, and to 0 at 200% text. The control you drag was paying for the symmetry. With the cap it is 246, which is parity. It is a `min()` rather than a breakpoint because that variable is user state — the metadata has a drag handle — and tying both sides to it is also what keeps dragging meaningful; a plain `1fr … 1fr` centres just as well and silently makes the handle a no-op. The volume moved out of `audio-player` into the bar because the transport column has to hold the transport and nothing else, and it joins the queue button in one cell rather than a second column, since the centring compares columns. It is a slider by default and a popup by setting. The stored flag names the *popup*, which is this config's polarity rule — the zero value has to be the intended answer, so an existing config.toml gets the new default with no migration. Inline, the icon is the mute toggle and is named after that action rather than the state, because with the slider beside it there is nothing to disclose; the component tier now covers both presentations rather than whichever is default. Three nested rules in this block began with a bare element selector, which Chrome 120 relaxed and the phone's Chrome 113 **silently drops** — including the ellipsis on the bar's own title and artist, which has therefore never truncated on the device. They are `&`-prefixed now. Filed as #154 for the class and for a check. `bottom-bar.spec.ts` pins both halves separately on purpose: an uncapped build is perfectly centred and fails only the seek-bar width, so a spec asserting centring alone would have passed the regression above. Both were verified by mutation. Closes #23 Closes #42
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { LitElement, html, css } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
import './controls/player-controls';
|
|
import './seekbar/seek-bar';
|
|
import '../notifications/inline-notice';
|
|
import { PlayerRegion } from '@store/player-store';
|
|
import { designTokens } from '../../styles/tokens.css';
|
|
|
|
/**
|
|
* The bottom bar. The transport lives here, and so does the one place
|
|
* the player admits it could not do what it was told — an
|
|
* `<inline-notice>` for the `player` region, floated above the bar
|
|
* because `.bottom-bar` is a fixed 4em grid row with no room in it.
|
|
*/
|
|
@customElement('audio-player')
|
|
export class AudioPlayer extends LitElement {
|
|
static override styles = [designTokens, css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.audio-player-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.player-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* The phone transport (plan 016 B2): the buttons, and nothing
|
|
else. A media query inside a shadow root is answered by the
|
|
viewport, not by the host, so this is the component saying what
|
|
it drops at phone width rather than the shell reaching in.
|
|
|
|
The seek bar goes because a 4px-tall target dragged with a thumb
|
|
is not a seek control; seeking belongs to the full-screen
|
|
now-playing view.
|
|
|
|
Volume used to go from here too, and now goes from index.css
|
|
instead: #42 moved the control out of this component and into
|
|
the bar, so the shell is what can hide it. The reason is
|
|
unchanged -- the hardware keys own volume on a phone, which is
|
|
also why mediacontrols' Android handler implements no volume
|
|
callback. */
|
|
@media (max-width: 599px) {
|
|
seek-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
`];
|
|
|
|
override render() {
|
|
return html`
|
|
<inline-notice
|
|
region=${PlayerRegion}
|
|
testid="player-message"
|
|
floating
|
|
></inline-notice>
|
|
<div class="audio-player-container">
|
|
<div class="player-main">
|
|
<player-controls></player-controls>
|
|
<div>
|
|
<seek-bar></seek-bar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|