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
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { EventsOn } from '@runtime/runtime';
|
|
import { GetPopupVolume } from '@go/config/config.js';
|
|
import { Events } from '../events';
|
|
|
|
type Subscriber = () => void;
|
|
|
|
/**
|
|
* Whether the volume control is a click-to-open popup (#42).
|
|
*
|
|
* The popup was the only option, and "click open, drag, click closed"
|
|
* is three gestures for a control a bottom bar has room to just show.
|
|
* So an inline slider is the default and the popup is a setting.
|
|
*
|
|
* **The stored flag names the popup, not the slider**, which is the
|
|
* polarity rule `backend/config` states for every option it has: the
|
|
* zero value has to be the intended answer. An `InlineVolume bool`
|
|
* would default to false, hand the popup to every existing install, and
|
|
* need a migration to say what the default already says.
|
|
*
|
|
* It is a store rather than a field on the component because two
|
|
* components render `<volume-control>` — the bottom bar and the phone's
|
|
* full-screen now-playing view — and a setting that only reached
|
|
* whichever one happened to mount after it changed is the fault
|
|
* `active-view-store` exists to prevent, one surface over.
|
|
*
|
|
* The initial value is the *default* rather than a pending answer, so
|
|
* the first paint is the inline slider and not an empty gap that
|
|
* becomes one. An install that has chosen the popup sees it swap once
|
|
* on load, which is the cheaper of the two wrong first frames: the
|
|
* inline slider occupies the space the popup's button would have.
|
|
*/
|
|
class VolumeStyleStore {
|
|
private value = false;
|
|
|
|
private loaded = false;
|
|
|
|
private subscribers = new Set<Subscriber>();
|
|
|
|
constructor() {
|
|
EventsOn(Events.GeneralConfigChanged, () => {
|
|
void this.refresh();
|
|
});
|
|
}
|
|
|
|
/** Whether to draw the popup. Safe to read before `init()`. */
|
|
get popup(): boolean {
|
|
return this.value;
|
|
}
|
|
|
|
/** Reads the setting once. Safe to call from every mount. */
|
|
async init(): Promise<void> {
|
|
if (this.loaded) return;
|
|
|
|
this.loaded = true;
|
|
|
|
await this.refresh();
|
|
}
|
|
|
|
subscribe(fn: Subscriber): () => void {
|
|
this.subscribers.add(fn);
|
|
|
|
return () => this.subscribers.delete(fn);
|
|
}
|
|
|
|
private async refresh(): Promise<void> {
|
|
try {
|
|
const popup = await GetPopupVolume();
|
|
|
|
if (popup === this.value) return;
|
|
|
|
this.value = popup;
|
|
this.notify();
|
|
} catch (err) {
|
|
// Nothing to tell the user: the control renders in its
|
|
// default presentation, which is a working volume control.
|
|
console.error('failed to read the volume control setting', err);
|
|
}
|
|
}
|
|
|
|
private notify(): void {
|
|
for (const fn of this.subscribers) fn();
|
|
}
|
|
}
|
|
|
|
export const volumeStyleStore = new VolumeStyleStore();
|