feat(android): tap to play, hold to select
Phase 1 of #63, and the design the issue asks for as one piece is .planning/plans/active/019-android-touch-model.md. **A finger has no second button and no modifier keys**, so the primary action has to be the primary gesture: tap plays the row, and the hold that opened a context menu now enters selection mode with that row selected. Three decisions in it, and two diverge from the report. **The predicate is the pointer, not the platform or the viewport.** `pointerType === 'touch'`, per event, which is already how long-press.ts decided and is the only such test in the frontend. This is #64's rule -- named after the capability -- and it carries #64's warning: keyed on a width, an Android *tablet* at 600px gets click-selects/double-click-plays on a touchscreen, which is the inversion this issue exists to fix, on the platform it exists for. A touchscreen laptop cannot be described by a width at all. Per event, a mouse keeps desktop semantics on the very same row, and there is no second declaration of what a phone does. **There is no double-tap, and the number is why.** The report asks for single tap to play *and* double tap for the menu. Those cannot both be honoured: the first tap of a double tap is indistinguishable from a single tap until the interval expires, so "tap plays" becomes "tap waits". Measured on the device, the play command to TrackChanged is 155/123/85/56/91 ms -- median ~100 -- and the app's own DOUBLE_CLICK_GRACE_MS is 250. That is 3.5x the primary interaction, 250ms of it spent deliberately doing nothing, on every track anyone plays, to reach a menu the hold already reaches. So the menu and the selection action bar are the same surface, which is also the platform's convention and removes a concept rather than adding one. **Tap-to-play and selection mode ship together**, because splitting them is a regression dressed as an increment: a touch user selects by tapping today and acts through the long-press menu, so moving tap to play on its own would leave a window with no way to select forty tracks at all. **What lets this reassign the hold without touching one of the fourteen context menus**: the layer announces `yj-tap` / `yj-long-press` (composed, cancelable) and acts on nothing. A component claims one with preventDefault. An **unclaimed long press still becomes a `contextmenu`**, so the card grids, Explore, the playlist rows and every other menu behave exactly as they did, and only lists that opt in get selection mode. An unclaimed *tap* does nothing at all and the click follows normally, which is what leaves every button in the app alone -- only a claimed tap has its click swallowed, or playing a track would also select it. **And the device found the one thing no browser tier can see.** Chrome 113's Android WebView fires its own `contextmenu` on a long press. long-press.ts stood down when a trusted one arrived, which was right while both paths ended in a context menu; they no longer do, so standing down means the gesture silently does the *old* thing. Measured, before the fix, holding a track row: {"log":["contextmenu isTrusted=true"], "state":{"bar":null,"menuActive":true,"selected":1}} `yj-long-press` was never announced, the menu opened, and all 26 tests passed -- dispatched pointer events do not make a browser synthesise one. So the native event is a **trigger, not a competitor**: the gesture is announced from it and only a claim suppresses it. Unclaimed it propagates untouched, which is the same "browser wins" outcome reached by asking instead of assuming. The tier could not find that and can hold it, because this module has always told its own events apart by identity rather than isTrusted, so an untrusted one from a test takes exactly the browser's path. Verified on the device by *performing* the gestures rather than describing the page -- `adb shell input tap` and `input swipe x y x y 700` reach the WebView as real pointer events, which is new here and is written down in the plan with the pixel mapping. Tap plays; a hold raises the bar with one selected and no menu; a tap toggles to two, back to one, and the mode ends with the last row; an album card still opens its context menu. 29 new tests. The e2e spec is rewritten to assert **both** halves -- the row selects, and a card elsewhere still opens the real menu -- because a spec that only checked the row would pass on a build that had silently broken the other thirteen. Phases 2-4 (swipe to queue, the other three surfaces, and what #67 inherits) are in the plan and not in this commit.
This commit is contained in:
@@ -0,0 +1,176 @@
|
||||
import { LitElement, html, css, nothing } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { ICON_MORE_ACTIONS } from '@utils/icon-language';
|
||||
|
||||
/**
|
||||
* What a selection can have done to it, while a finger is holding one.
|
||||
*
|
||||
* This is the context menu (plan 019, #63). Not a second surface
|
||||
* beside it — the same actions, contextualised to whatever is
|
||||
* selected, in the shape Android puts them in.
|
||||
*
|
||||
* #63 asked for a double tap to open the menu instead. That mapping
|
||||
* costs the app's primary interaction 250ms on every play, because the
|
||||
* first tap of a double tap is indistinguishable from a single tap
|
||||
* until the interval expires, and playing a track is ~100ms end to end
|
||||
* on the reference device. So there is no double tap: a long press
|
||||
* selects, this says what can be done, and the sheet behind "More" is
|
||||
* the same `menu-surface` every other menu in the app opens.
|
||||
*
|
||||
* Four things about it are load-bearing.
|
||||
*
|
||||
* **It is presentational.** It takes a count and a list of actions and
|
||||
* emits `selection-action` / `selection-exit`; it holds no selection
|
||||
* and calls no store. The host already owns a `SelectionController`
|
||||
* and an action handler, and a bar that reached for either would be a
|
||||
* second definition of what "play the selection" means — the fault
|
||||
* `utils/library-status.ts` exists to have fixed one feature over.
|
||||
*
|
||||
* **The bar is only what fits, and "More" is the rest.** A context
|
||||
* menu can be nine items because it is a sheet; a bar is one row on a
|
||||
* 424px screen. So the host passes the two or three worth a thumb and
|
||||
* the overflow opens the menu it already renders, which is what keeps
|
||||
* every action reachable at every size — plan 018's promise, and the
|
||||
* reason this cannot simply drop the long tail.
|
||||
*
|
||||
* **Its controls are 44px** (#56, #186), and the count is a live
|
||||
* region: the number changes under the user's finger as they tap rows,
|
||||
* and nothing else on screen announces it.
|
||||
*
|
||||
* **It renders nothing at zero.** The mode ends when the last row is
|
||||
* deselected — `SelectionController.toggleInMode` is where that is
|
||||
* decided — so a bar with a count of none is a state this should never
|
||||
* be asked to draw, and drawing it anyway would hide the fact that it
|
||||
* has been.
|
||||
*/
|
||||
export interface SelectionAction {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
danger?: boolean;
|
||||
}
|
||||
|
||||
@customElement('selection-bar')
|
||||
export class SelectionBar extends LitElement {
|
||||
static override styles = [
|
||||
designTokens,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
padding: 0.25em 0.5em;
|
||||
background: var(--yj-bg-elevated, #343a40);
|
||||
border-top: 1px solid var(--yj-border-subtle, #333);
|
||||
}
|
||||
|
||||
.count {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: var(--yj-text-md);
|
||||
font-weight: 600;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 44px, from #56 and #186 -- this is a bar a thumb uses. */
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-inline-size: 44px;
|
||||
min-block-size: 44px;
|
||||
padding: 0 0.5em;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
color: var(--yj-text-primary, #fff);
|
||||
font-family: inherit;
|
||||
font-size: var(--yj-text-md);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--yj-bg-overlay, #495057);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
color: var(--yj-error-text, #ff8787);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
/** How many items are selected. Zero renders nothing. */
|
||||
@property({ type: Number }) count = 0;
|
||||
|
||||
/** The actions worth a thumb. The rest live behind "More". */
|
||||
@property({ attribute: false }) actions: SelectionAction[] = [];
|
||||
|
||||
private emit(name: string, detail?: unknown) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(name, { detail, bubbles: true, composed: true }),
|
||||
);
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (this.count <= 0) return nothing;
|
||||
|
||||
const noun = this.count === 1 ? 'track' : 'tracks';
|
||||
|
||||
return html`
|
||||
<div class="bar" role="toolbar" aria-label="Selection actions">
|
||||
<button
|
||||
aria-label="Leave selection"
|
||||
@click=${() => this.emit('selection-exit')}
|
||||
>
|
||||
<wa-icon name="xmark"></wa-icon>
|
||||
</button>
|
||||
<span class="count" role="status" aria-live="polite">
|
||||
${this.count.toLocaleString()} ${noun} selected
|
||||
</span>
|
||||
${this.actions.map(
|
||||
(action) => html`
|
||||
<button
|
||||
class=${action.danger ? 'danger' : ''}
|
||||
aria-label=${action.label}
|
||||
title=${action.label}
|
||||
@click=${() =>
|
||||
this.emit('selection-action', { id: action.id })}
|
||||
>
|
||||
<wa-icon name=${action.icon}></wa-icon>
|
||||
</button>
|
||||
`,
|
||||
)}
|
||||
<button
|
||||
aria-label="More actions"
|
||||
@click=${(e: MouseEvent) => {
|
||||
const box = (
|
||||
e.currentTarget as HTMLElement
|
||||
).getBoundingClientRect();
|
||||
|
||||
this.emit('selection-more', {
|
||||
x: box.left,
|
||||
y: box.top,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<wa-icon name=${ICON_MORE_ACTIONS}></wa-icon>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'selection-bar': SelectionBar;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user