player bar: track changes morph shape into shape, not up from the dots

The arrival morph honestly started from whatever the lane showed — and on
a track change the lane always showed dots, because the waveform empties
the moment the queue moves. Every switch therefore played the same
grow-from-zero, when the picked motion was one waveform transforming into
another.

A track change now HOLDS the outgoing shape for ARRIVE_HOLD_MS (600ms),
painted in unplayed grey since the new track owns the transport. A quick
arrival — a local file, a cached stream — lands inside the hold and the
morph runs directly from the old bars into the new ones; a slow stream
load falls to the dots-and-swell story when the hold expires, exactly as
before. The rail mirrors the hold with the same shared constant, and
suppresses the loading swell while holding so the keyframes cannot fight
the held heights.

Measured across a cached track switch: the lane's mean height never left
16.9-17.4 (the dots sit at 2, the old dip hit 5.2) while the per-column
fingerprint changed — the shape transformed without ever falling.
This commit is contained in:
KeelrLeek committed 2026-08-03 17:01:59 -05:00
1 parent 1765de65cf
commit 0bbdb1bb0e
3 files changed
+68 -5

No files matched your search

+25 -1
View File
@@ -27,6 +27,7 @@
RISE_MS,
RISE_CADENCE_MS,
ARRIVE_MS,
ARRIVE_HOLD_MS,
PENDING_ALPHA,
} from "../lib/waveshape.js";
import Icon from "./Icon.svelte";
@@ -194,6 +195,10 @@
let lastDrawnHeights = null;
let morphFrom = null;
let morphStart = 0;
// Track-change hold: the outgoing shape stays painted for ARRIVE_HOLD_MS
// so a quick arrival morphs shape→shape instead of dipping through dots.
let hadPeaks = false;
let holdUntil = 0;
let animRaf = null;
function paintBar(ctx, x, mid, h, color) {
@@ -474,15 +479,34 @@
const now = performance.now();
// Nothing to draw yet: resting dots, with the swell crossing them
// while a waveform request is actually working.
// while a waveform request is actually working — but a TRACK CHANGE
// first holds the outgoing shape for ARRIVE_HOLD_MS, so when the next
// waveform lands quickly (local file, cached stream) the arrival
// morph runs one shape into the other instead of up from the dots.
// The hold paints in unplayed grey: the new track owns the transport
// now, and none of it has played.
if (!peaks || peaks.length === 0) {
riseKey = null;
morphFrom = null;
if (hadPeaks) {
holdUntil = now + ARRIVE_HOLD_MS;
hadPeaks = false;
}
if (player.wavePending && lastDrawnHeights?.length === count && now < holdUntil) {
ctx.clearRect(0, 0, W, H);
for (let i = 0; i < count; i++) {
paintBar(ctx, i * BAR_PITCH, mid, lastDrawnHeights[i], UNPLAYED);
}
lastPlayedBars = Number.NEGATIVE_INFINITY;
scheduleAnim(true);
return;
}
const moving = drawUnloaded(ctx, W, H, mid, count, now);
lastPlayedBars = Number.NEGATIVE_INFINITY;
scheduleAnim(moving);
return;
}
hadPeaks = true;
// A stream whose waveform does not yet cover the whole track (or one
// still standing its last bars up): the rise owns the lane. The