yonlu/yellowjacket
1
1
Fork 0
Code Issues 52 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

feat(android): the touch model reaches the other three lists
CI / check (push) Skipped
CI / e2e (push) Skipped
CI / check (pull_request) Successful in 2m33s
Details
CI / e2e (pull_request) Successful in 9m20s
Details

Browse Source 
Plan 019 phases 3 and 4, which finish #63. The queue panel and both
playlist detail views get tap-to-play and hold-to-select; the playlist
views get swipe-to-queue as well.

Phase 3 was not the pure wiring the plan expected, in two places.

A tap on a queue row plays that position. Copying track-list's tap --
which sets the queue to the list the row is in -- would rebuild the
queue from the queue, discarding its source, its shuffle order and
anything inserted by hand. It reads as a no-op and is not one.

And the queue panel has no swipe, deliberately. A right swipe means add
to the queue everywhere else it exists, and a queue row is already in
the queue; the only thing it could mean there is remove, which is the
same gesture with the opposite effect one screen away. Removing a queue
row is on the row, on its sheet since #60, and now on its selection
bar. The assertion is that its rows do not opt in.

The reveal became utils/swipe-to-queue.ts rather than being copied into
three lists, keyed on a data-swipe attribute so one stylesheet carries
the touch-action half of the device fix to rows that are called two
different things.

Phase 4 was already true and is now asserted: a claimed tap has its
click swallowed, so an explore-link inside a row never sees one and
tap-to-play wins with no rule of its own. Its test was vacuous when
written -- the tap helper sent no click, so there was nothing to
swallow -- which also weakened phase 1's. It sends one now.

Escape leaves selection mode, from selection-bar rather than from each
of the four hosts, since that element exists only while the mode does.
The platform's back gesture deliberately does not reach it: the shell
owns the history stack and four lists reaching for history is four
stacks. That is #200.

Verified on the reference phone: a queue row taps to its own index and
refuses a swipe, a playlist row queues on a swipe and plays its
playlist on a tap, and a hold raises the bar without the menu.

Closes #63
This commit is contained in:
logan
2026-08-22 01:41:21 -04:00
parent 4e667759c4
commit 29feb4b94b
11 changed files with 1402 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/track-list/track-list.ts
+33 -269
View File
@@ -10,7 +10,8 @@ import {
} from 'lit/decorators.js';
import { SelectionController } from '@utils/selection-controller';
import type { SelectionHost } from '@utils/selection-controller';
import type { GestureEvent, SwipeEvent } from '@utils/touch-gestures';
import type { GestureEvent } from '@utils/touch-gestures';
import { SwipeToQueue, swipeRevealStyles } from '@utils/swipe-to-queue';
import '@components/selection-bar/selection-bar';
import type { SelectionAction } from '@components/selection-bar/selection-bar';
import { ViewLifecycleMixin } from '@utils/view-lifecycle';
@@ -282,36 +283,28 @@ export class TrackList
* path into it at all (H-5). */
@state() private focusedIndex = 0;
// --- swipe right to queue (plan 019 phase 2, #63) ----------------
/**
* Swipe a row right to queue it (plan 019 phase 2, #63).
*
* The affordance and the arithmetic are `utils/swipe-to-queue.ts`,
* shared with both playlist detail views; what stays here is what
* only this list knows -- which row an event is on, and what a
* swipe on it means when other rows are selected.
*/
private swipe = new SwipeToQueue(this, {
resolve: (e) => {
const hit = this.resolveTrackFromEvent(e);
/** How far along the row a swipe has to reach to mean it. */
private static readonly SWIPE_COMMIT_FRACTION = 0.3;
if (!hit) return null;
/** … and a floor, for a narrow list embedded in a detail page. */
private static readonly SWIPE_COMMIT_MIN_PX = 72;
/** How long the reveal holds its confirmation before snapping. */
private static readonly SWIPE_CONFIRM_MS = 550;
/** The snap itself, which the stylesheet also states. */
private static readonly SWIPE_SETTLE_MS = 180;
/** Which row is being swiped, and therefore which draws a reveal. */
@state() private swipeIndex: number | null = null;
/** Past the commit threshold: the reveal says so, in words. */
@state() private swipeArmed = false;
/** Committed, and holding the confirmation. */
@state() private swipeDone = false;
/** What the gesture did, for anyone not watching the row. */
@state() private swipeAnnouncement = '';
private swipeRow: HTMLElement | null = null;
private swipeKeys: string[] = [];
private swipeCommitPx = 0;
private swipeSettleTimer = 0;
return {
index: hit.index,
filePaths: this.swipeTargetKeys(hit.track.FilePath),
label: hit.track.TrackName,
};
},
repaint: () => this.virtualizer?.requestUpdate(),
});
private handleSelectAll = (): void => {
this.selection.selectAll();
@@ -1047,7 +1040,7 @@ export class TrackList
this.requestUpdate();
};
static override styles = [designTokens, srOnly, contextMenuStyles, exploreLinkStyles, css`
static override styles = [designTokens, srOnly, contextMenuStyles, exploreLinkStyles, swipeRevealStyles, css`
:host {
display: flex;
flex-direction: column;
@@ -1166,18 +1159,6 @@ export class TrackList
height: 33px;
box-sizing: border-box;
contain: strict;
/* Swipe right to queue (plan 019 phase 2, #63). Half of what
makes the gesture reach us on the device: auto lets Chrome
113's WebView commit to a horizontal pan on the first move
past slop, and the pointer stream is cancelled before any
threshold can be crossed. The other half is the non-passive
preventDefault in utils/touch-gestures.ts, and neither works
alone -- both were measured three ways on the phone.
Never none: that takes the list's own vertical scrolling with
it. The cost is that a finger starting on a row can no longer
pan the shell sideways in the 600-899 band, where the shell
can still overflow; anywhere else on the page still can. */
touch-action: pan-y;
}
/* A phone row is two lines, and this height must equal
@@ -1256,61 +1237,6 @@ export class TrackList
background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
}
/* The reveal behind a swiped row (plan 019 phase 2, #63).
The row itself does not move -- its *cells* do. Moving the row
and counter-translating the pane inside it is the obvious
arrangement and does not work here: .track-row is contain:
strict with overflow: hidden, so a pane held at the row's
original position is a pane at a negative offset inside a
clipping box, and it is simply not painted. Sliding the cells
instead leaves the pane where it was drawn, clips the cells off
the right edge, and needs no wrapper element in a row that is
already a grid.
It is not only a colour (WCAG 1.4.1, the rule the playing-row
marker is here for): the pane carries an icon and words, the
words change at the commit threshold, and the outcome is
announced in the list's live region. */
.swipe-reveal {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--yj-swipe-dx, 0px);
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.4em;
padding-left: 8px;
overflow: hidden;
white-space: nowrap;
pointer-events: none;
font-size: var(--yj-text-xs);
background-color: var(--yj-bg-elevated, #343a40);
color: var(--yj-text-secondary, #b3b3b3);
}
.swipe-reveal.armed {
background-color: var(--yj-success, #2f9e44);
color: var(--yj-success-fg, #fff);
}
.track-row.swiping > :not(.swipe-reveal) {
transform: translateX(var(--yj-swipe-dx, 0px));
}
.track-row.settling > * {
transition:
transform 160ms ease-out,
width 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.track-row.settling > * {
transition: none;
}
}
.cell {
overflow: hidden;
@@ -1410,9 +1336,9 @@ export class TrackList
virt.removeEventListener('contextmenu', this.onDelegatedContextMenu);
virt.removeEventListener('yj-tap', this.onRowTap);
virt.removeEventListener('yj-long-press', this.onRowLongPress);
virt.removeEventListener('yj-swipe-start', this.onRowSwipeStart);
virt.removeEventListener('yj-swipe-move', this.onRowSwipeMove);
virt.removeEventListener('yj-swipe-end', this.onRowSwipeEnd);
virt.removeEventListener('yj-swipe-start', this.swipe.onSwipeStart);
virt.removeEventListener('yj-swipe-move', this.swipe.onSwipeMove);
virt.removeEventListener('yj-swipe-end', this.swipe.onSwipeEnd);
virt.removeEventListener('dragstart', this.onDelegatedDragStart);
virt.removeEventListener('dragend', this.onTrackDragEnd);
}
@@ -1559,9 +1485,9 @@ export class TrackList
// through the same path a real click takes (plan 019).
virt.addEventListener('yj-tap', this.onRowTap);
virt.addEventListener('yj-long-press', this.onRowLongPress);
virt.addEventListener('yj-swipe-start', this.onRowSwipeStart);
virt.addEventListener('yj-swipe-move', this.onRowSwipeMove);
virt.addEventListener('yj-swipe-end', this.onRowSwipeEnd);
virt.addEventListener('yj-swipe-start', this.swipe.onSwipeStart);
virt.addEventListener('yj-swipe-move', this.swipe.onSwipeMove);
virt.addEventListener('yj-swipe-end', this.swipe.onSwipeEnd);
this.delegationAttached = true;
}
@@ -1881,10 +1807,6 @@ export class TrackList
this.virtualizer?.requestUpdate();
};
// =================================================================
// Swipe right to queue (plan 019 phase 2, #63)
// =================================================================
/**
* What a swipe on this row would queue.
*
@@ -1909,165 +1831,6 @@ export class TrackList
return [filePath];
}
private onRowSwipeStart = (e: SwipeEvent) => {
// Rightward only. Nothing is bound to a leftward swipe, and
// claiming one would take a gesture away to do nothing with it.
if (e.detail.dx <= 0) return;
const hit = this.resolveTrackFromEvent(e);
if (!hit) return;
const row = (e.target as HTMLElement).closest(
'.track-row',
) as HTMLElement | null;
if (!row) return;
e.preventDefault();
this.swipeRow = row;
this.swipeKeys = this.swipeTargetKeys(hit.track.FilePath);
// A fraction of the row, with a floor: the row is 424x52 on the
// reference device, so a threshold in bare pixels is a fraction
// of a row height on one screen and a third of the width on
// another.
this.swipeCommitPx = Math.max(
TrackList.SWIPE_COMMIT_MIN_PX,
row.getBoundingClientRect().width *
TrackList.SWIPE_COMMIT_FRACTION,
);
this.swipeArmed = false;
this.swipeDone = false;
this.swipeIndex = hit.index;
this.virtualizer?.requestUpdate();
this.setSwipeOffset(0);
};
private onRowSwipeMove = (e: SwipeEvent) => {
if (this.swipeIndex === null) return;
const dx = Math.min(
Math.max(e.detail.dx, 0),
this.swipeCommitPx * 2,
);
const armed = dx >= this.swipeCommitPx;
// Crossing the threshold is the only thing here that renders.
// The offset itself is written straight to the row's style, or
// a virtualized list would re-render every visible row for
// every frame of one finger's travel.
if (armed !== this.swipeArmed) {
this.swipeArmed = armed;
this.virtualizer?.requestUpdate();
}
this.setSwipeOffset(dx);
};
private onRowSwipeEnd = (e: SwipeEvent) => {
if (this.swipeIndex === null) return;
const commit =
!e.detail.canceled && e.detail.dx >= this.swipeCommitPx;
if (!commit) {
this.settleSwipe(0);
return;
}
queueStore.addTracksToQueue(this.swipeKeys);
const count = this.swipeKeys.length;
const only =
count === 1
? tracksByFilePath(this.tracks).get(this.swipeKeys[0]!)
: undefined;
// The reveal is the only thing on screen that says this
// happened -- the queue panel may well be closed -- so it holds
// its confirmation for a moment rather than snapping back the
// instant the finger lifts. The live region is the same
// sentence for anyone not watching it.
this.swipeDone = true;
this.swipeAnnouncement =
count === 1
? `Added ${only?.TrackName ?? 'the track'} to the queue.`
: `Added ${count} tracks to the queue.`;
this.virtualizer?.requestUpdate();
this.settleSwipe(TrackList.SWIPE_CONFIRM_MS);
};
/** Write the travel to the row itself, with no render. */
private setSwipeOffset(dx: number) {
this.swipeRow?.style.setProperty('--yj-swipe-dx', `${dx}px`);
}
/**
* Put the row back, after `delay`, and forget the swipe.
*
* The row element is held rather than looked up again: a
* virtualizer recycles its rows, and by the time this runs the
* element may be drawing a different track. Clearing the property
* off whatever it holds now is right either way, since
* `swipeIndex` is what decides who draws the reveal.
*/
private settleSwipe(delay: number) {
const row = this.swipeRow;
window.clearTimeout(this.swipeSettleTimer);
this.swipeSettleTimer = window.setTimeout(() => {
row?.classList.add('settling');
this.setSwipeOffset(0);
this.swipeSettleTimer = window.setTimeout(() => {
row?.classList.remove('settling');
row?.style.removeProperty('--yj-swipe-dx');
this.swipeRow = null;
this.swipeIndex = null;
this.swipeArmed = false;
this.swipeDone = false;
this.virtualizer?.requestUpdate();
}, TrackList.SWIPE_SETTLE_MS);
}, delay);
}
/**
* What is revealed behind the row, in three states.
*
* One glyph throughout, and the words carry the state. A tick
* would read better for the last of them and is `ICON_IN_LIBRARY`
* -- it means *you own this* -- and `icon-language.ts` exists
* because `plus` came to mean four things that way.
*/
private renderSwipeReveal() {
const count = this.swipeKeys.length;
const what =
count === 1 ? 'to queue' : `${count} tracks to queue`;
return html`
<div
class=${classMap({
'swipe-reveal': true,
armed: this.swipeArmed,
})}
aria-hidden="true"
data-testid="swipe-reveal"
>
<wa-icon name=${ICON_QUEUE}></wa-icon>
<span
>${this.swipeDone
? 'Added'
: this.swipeArmed
? 'Release to add'
: `Add ${what}`}</span
>
</div>
`;
}
private onDelegatedDragStart = (e: DragEvent) => {
const hit = this.resolveTrackFromEvent(e);
@@ -2489,7 +2252,7 @@ export class TrackList
'track-row': true,
active,
selected,
swiping: this.swipeIndex === index,
swiping: this.swipe.isSwiping(index),
})}
role="row"
aria-rowindex=${index + 1}
@@ -2499,9 +2262,10 @@ export class TrackList
draggable="true"
data-index=${index}
data-testid="track-row"
data-swipe
data-file-path=${track.FilePath}
>
${this.swipeIndex === index ? this.renderSwipeReveal() : nothing}
${this.swipe.renderReveal(index)}
<div
role="gridcell"
class=${classMap({
@@ -2649,7 +2413,7 @@ export class TrackList
${this.liveStatus(visibleTracks.length)}
</div>
<div class="sr-only" role="status" aria-live="polite">
${this.swipeAnnouncement}
${this.swipe.announcement}
</div>
${this.tracks.length === 0
? this.renderPlaceholder()