Skip to content

Waveform-accurate seek bar with visual peak data #56

Description

@MA1002643

Context

Brief §5.5.9: a waveform-accurate seek bar. The ingest pipeline already computes downsampled peak tiers per track — this issue is the rendering and interaction layer that upgrades the standard seek bar in the expanded now-playing view.

Scope

  • Peak data client path: fetch the appropriate downsample tier for the rendered width (cached, tiny — a few KB), including for offline-downloaded tracks (peaks bundled with downloads).
  • Renderer: canvas waveform in brand-gradient fill — played portion vs remaining, buffered-ranges overlay, hover/touch scrub preview with time tooltip; crisp at all DPRs; falls back to the standard slider when peaks are missing (embed-type or legacy tracks).
  • Interaction: pointer + keyboard seek (same slider semantics/ARIA as the standard bar — it is the same component contract, §7.4), long-track zoom (audiobook-length assets), no segment fetches until seek commit (cost rule from player-ui).
  • Integration: swaps into the expanded view slot; mini-player keeps the compact bar.

Acceptance criteria

  • Waveform position matches audio time within one peak-bucket across seek/speed/gapless (assertion test on fixtures).
  • Fallback path renders for a peaks-less fixture with zero layout shift.
  • A11y parity with the standard seek slider (same SR announcements); visual regression at 4 breakpoints/DPRs.
  • Renders < 4 ms/frame during scrub on reference hardware.

Technical notes

Keep the renderer stateless over (peaks, duration, position, buffered) — the same component draws playlist-row micro-waveforms later if wanted.

Dependencies

Depends on #22, #27, #42 (bundled peaks).

Metadata

Metadata

Assignees

No one assigned

    Labels

    component:playbackPlayer engine, queue, audio outputpriority:P2Medium — important, schedulabletype:featureNew user-facing functionality

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions