feat(player): centre the transport and show the volume inline
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
This commit is contained in:
@@ -3,7 +3,6 @@ import { customElement } from 'lit/decorators.js';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import './controls/player-controls';
|
||||
import './seekbar/seek-bar';
|
||||
import './volume-control/volume-control';
|
||||
import '../notifications/inline-notice';
|
||||
import { PlayerRegion } from '@store/player-store';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
@@ -30,6 +29,7 @@ export class AudioPlayer extends LitElement {
|
||||
|
||||
.player-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* The phone transport (plan 016 B2): the buttons, and nothing
|
||||
@@ -37,14 +37,17 @@ export class AudioPlayer extends LitElement {
|
||||
viewport, not by the host, so this is the component saying what
|
||||
it drops at phone width rather than the shell reaching in.
|
||||
|
||||
Volume goes because the hardware keys own it on a phone --
|
||||
Android routes them to the media stream, which is also why
|
||||
mediacontrols' Android handler implements no volume callback.
|
||||
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, which is the next phase. */
|
||||
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) {
|
||||
volume-control,
|
||||
seek-bar {
|
||||
display: none;
|
||||
}
|
||||
@@ -65,7 +68,6 @@ export class AudioPlayer extends LitElement {
|
||||
<seek-bar></seek-bar>
|
||||
</div>
|
||||
</div>
|
||||
<volume-control></volume-control>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import '@awesome.me/webawesome/dist/components/slider/slider.js';
|
||||
import type WaSlider from '@awesome.me/webawesome/dist/components/slider/slider.js';
|
||||
import { PlayerController } from '@store/controllers/player-controller';
|
||||
import { volumeStyleStore } from '@store/volume-style-store';
|
||||
import { designTokens } from '../../../styles/tokens.css';
|
||||
import { waSliderLabel } from '../../../styles/wa-slider-label.css';
|
||||
|
||||
@@ -22,6 +23,12 @@ export class VolumeControl extends LitElement {
|
||||
@state()
|
||||
private showSlider = false;
|
||||
|
||||
/** Whether this is the click-to-open popup rather than a slider. */
|
||||
@state()
|
||||
private popup = volumeStyleStore.popup;
|
||||
|
||||
private unsubscribeStyle?: () => void;
|
||||
|
||||
// Locally-tracked volume while the user is actively dragging or scrolling.
|
||||
// The store's volume only updates once the backend echoes VolumeChanged
|
||||
// (which we debounce), so we track intent here for responsive UI and to let
|
||||
@@ -86,11 +93,31 @@ export class VolumeControl extends LitElement {
|
||||
--thumb-height: 16px;
|
||||
}
|
||||
|
||||
wa-slider::part(track) {
|
||||
.volume-popup wa-slider::part(track) {
|
||||
background: var(--yj-text-primary, white);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/* The inline slider (#42). It is the default now, so the width is
|
||||
a real layout decision rather than a detail: 5em is wide enough
|
||||
to aim at and narrow enough that the bottom bar's *outer*
|
||||
columns stay equal without squeezing the transport — which is
|
||||
the arrangement #23 depends on.
|
||||
|
||||
flex-shrink: 0 for the reason the top bar's children have it
|
||||
(#143): a control that quietly gets narrower under pressure
|
||||
hides the fact that the bar has run out of room. This one stands
|
||||
down at phone width instead, in index.css, where the shell can
|
||||
see the viewport. */
|
||||
.inline-slider {
|
||||
width: 5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inline-slider::part(track) {
|
||||
background: var(--yj-text-primary, white);
|
||||
}
|
||||
|
||||
wa-slider::part(indicator) {
|
||||
background: var(--yj-accent, yellow);
|
||||
}
|
||||
@@ -122,8 +149,23 @@ export class VolumeControl extends LitElement {
|
||||
// LIFECYCLE
|
||||
// ===================================================================
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
this.unsubscribeStyle = volumeStyleStore.subscribe(() => {
|
||||
this.popup = volumeStyleStore.popup;
|
||||
|
||||
// Switching to the slider while the popup is open would leave the
|
||||
// document listener installed for a popup that no longer renders.
|
||||
if (!this.popup) this.closeSlider();
|
||||
});
|
||||
|
||||
void volumeStyleStore.init();
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.unsubscribeStyle?.();
|
||||
document.removeEventListener('click', this.boundHandleOutsideClick);
|
||||
clearTimeout(this.volumeDebounceTimer);
|
||||
}
|
||||
@@ -154,10 +196,12 @@ export class VolumeControl extends LitElement {
|
||||
private handleOutsideClick(e: Event) {
|
||||
const path = e.composedPath();
|
||||
|
||||
if (!path.includes(this)) {
|
||||
this.showSlider = false;
|
||||
document.removeEventListener('click', this.boundHandleOutsideClick);
|
||||
}
|
||||
if (!path.includes(this)) this.closeSlider();
|
||||
}
|
||||
|
||||
private closeSlider() {
|
||||
this.showSlider = false;
|
||||
document.removeEventListener('click', this.boundHandleOutsideClick);
|
||||
}
|
||||
|
||||
private handleInput(e: Event) {
|
||||
@@ -192,18 +236,46 @@ export class VolumeControl extends LitElement {
|
||||
override render() {
|
||||
const muted = this.player.muted;
|
||||
|
||||
// Inline, the icon is the mute toggle rather than a disclosure:
|
||||
// there is nothing left to disclose, and a button that opens a
|
||||
// popup containing the slider already beside it would be a control
|
||||
// whose only effect is to duplicate its neighbour.
|
||||
const iconAction = this.popup
|
||||
? this.toggleSlider
|
||||
: () => this.player.toggleMute();
|
||||
const iconLabel = this.popup
|
||||
? muted
|
||||
? 'Muted'
|
||||
: `Volume ${this.currentVolume}%`
|
||||
: muted
|
||||
? 'Unmute'
|
||||
: 'Mute';
|
||||
|
||||
return html`
|
||||
<button
|
||||
class=${muted ? 'muted' : ''}
|
||||
title=${muted ? 'Muted — click for volume' : 'Volume'}
|
||||
aria-label=${muted ? 'Muted' : `Volume ${this.currentVolume}%`}
|
||||
aria-label=${iconLabel}
|
||||
data-muted=${muted ? 'true' : 'false'}
|
||||
@click="${this.toggleSlider}"
|
||||
@click="${iconAction}"
|
||||
@wheel="${this.handleWheel}"
|
||||
>
|
||||
<wa-icon name=${this.volumeIcon}></wa-icon>
|
||||
</button>
|
||||
${this.showSlider
|
||||
${!this.popup
|
||||
? html`
|
||||
<wa-slider
|
||||
class="inline-slider ${muted ? 'muted' : ''}"
|
||||
label="Volume"
|
||||
min="0"
|
||||
max="100"
|
||||
.value="${this.currentVolume}"
|
||||
@input="${this.handleInput}"
|
||||
@wheel="${this.handleWheel}"
|
||||
></wa-slider>
|
||||
`
|
||||
: ''}
|
||||
${this.popup && this.showSlider
|
||||
? html`
|
||||
<div
|
||||
class="volume-popup ${muted ? 'muted' : ''}"
|
||||
|
||||
@@ -25,6 +25,8 @@ import {
|
||||
SetQueueFallback,
|
||||
GetAllowMeteredCatalogDownload,
|
||||
SetAllowMeteredCatalogDownload,
|
||||
GetPopupVolume,
|
||||
SetPopupVolume,
|
||||
} from '@go/config/config.js';
|
||||
import { GetIndexStatus } from '@go/explore/service.js';
|
||||
import { notificationStore } from '@store/notification-store';
|
||||
@@ -125,6 +127,8 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
@state() private concurrencyMode = 'auto';
|
||||
@state() private defaultPage = 'home';
|
||||
@state() private queueFallback = 'favorites';
|
||||
|
||||
@state() private popupVolume = false;
|
||||
@state() private indexStatus: explore.IndexStatus | null = null;
|
||||
/** Three states, not one: the panel used to say "Loading status…"
|
||||
* for the entire session, because the only thing that ever set
|
||||
@@ -938,20 +942,28 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
|
||||
private async loadLibraries(): Promise<void> {
|
||||
try {
|
||||
const [libs, mode, defaultPage, queueFallback, allowMetered] =
|
||||
await Promise.all([
|
||||
GetAllLibrariesWithTrackCounts(),
|
||||
GetScanConcurrency(),
|
||||
GetDefaultPage(),
|
||||
GetQueueFallback(),
|
||||
GetAllowMeteredCatalogDownload(),
|
||||
]);
|
||||
const [
|
||||
libs,
|
||||
mode,
|
||||
defaultPage,
|
||||
queueFallback,
|
||||
allowMetered,
|
||||
popupVolume,
|
||||
] = await Promise.all([
|
||||
GetAllLibrariesWithTrackCounts(),
|
||||
GetScanConcurrency(),
|
||||
GetDefaultPage(),
|
||||
GetQueueFallback(),
|
||||
GetAllowMeteredCatalogDownload(),
|
||||
GetPopupVolume(),
|
||||
]);
|
||||
|
||||
this.libraries = libs ?? [];
|
||||
this.concurrencyMode = mode;
|
||||
this.defaultPage = defaultPage;
|
||||
this.queueFallback = queueFallback;
|
||||
this.allowMeteredCatalogDownload = allowMetered;
|
||||
this.popupVolume = popupVolume;
|
||||
|
||||
} catch (err) {
|
||||
console.error(
|
||||
@@ -1858,10 +1870,51 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
.value=${this.queueFallback}
|
||||
@config-change=${this.handleQueueFallbackChange}
|
||||
></config-field>
|
||||
<config-field
|
||||
.schema=${{
|
||||
key: 'popupVolume',
|
||||
label: 'Volume opens in a popup',
|
||||
description:
|
||||
'Off, the volume slider is always visible in the '
|
||||
+ 'player bar. On, it hides behind the speaker '
|
||||
+ 'icon. The slider stands down on a phone either '
|
||||
+ 'way, where the hardware keys own volume.',
|
||||
type: 'toggle' as const,
|
||||
}}
|
||||
.value=${this.popupVolume}
|
||||
@config-change=${this.handlePopupVolumeChange}
|
||||
></config-field>
|
||||
</config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The volume control's presentation (#42).
|
||||
*
|
||||
* In General rather than beside the theme because it is about the
|
||||
* transport's behaviour rather than its colours, and next to "When
|
||||
* the Queue Ends" because both are answers to "how should the
|
||||
* player behave".
|
||||
*/
|
||||
private handlePopupVolumeChange = (
|
||||
e: CustomEvent<ConfigFieldChangeEvent>,
|
||||
): void => {
|
||||
const popup = Boolean(e.detail.value);
|
||||
const previous = this.popupVolume;
|
||||
|
||||
this.popupVolume = popup;
|
||||
|
||||
void SetPopupVolume(popup).catch((err: unknown) => {
|
||||
console.error('failed to save the volume control setting', err);
|
||||
this.popupVolume = previous;
|
||||
notificationStore.transient({
|
||||
key: 'popup-volume-setting',
|
||||
title: 'Setting not saved',
|
||||
text: describeError(err, 'That setting could not be saved.'),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// --- Navigation section ---
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user