Skip to content

feat: connect drum sequencer to clip model#15

Merged
britle20 merged 9 commits into
developfrom
feat/3-drum-step-sequencer
Jun 6, 2026
Merged

feat: connect drum sequencer to clip model#15
britle20 merged 9 commits into
developfrom
feat/3-drum-step-sequencer

Conversation

@britle20

@britle20 britle20 commented Jun 4, 2026

Copy link
Copy Markdown
Collaborator

Summary

Closes #3.

Connects the 16-step drum sequencer UI to a serializable hybrid clip model and routes the current drum pattern into the existing sample loop scheduler on transport play.

Changes

  • Added src/model/drum-clip.ts with hybrid clip, drum lane, drum event, and step-toggle model helpers.
  • Converted DrumSequencer from local Set state to props backed by HybridClip.drumEvents and ordered HybridClip.drumLanes.
  • Added lane sample selection from the bundled Fred drum sample list.
  • Rendered the lane sample list as a fixed portal popover so it is not clipped by sequencer or workspace overflow.
  • Added vertical lane drag-and-drop reordering.
  • Added App-level selected clip state and transport playback integration with audioEngine.startSampleLoop().
  • Added live drum pattern updates during playback through audioEngine.updateSampleLoopEvents().
  • Changed the transport play button to a pause button while playback is running.
  • Replaced the original four bundled drum wavs with the Fred drum sample set under public/samples/drums/.
  • Added file-name-based bundled sample IDs and display names.
  • Widened the drum lane label column and narrowed individual step buttons horizontally.
  • Fixed browser Illegal Invocation during scheduler startup by wrapping default timer callbacks through globalThis.
  • Added unit tests for drum step tick mapping, toggle add/remove behavior, deterministic sorting, lane sample IDs, lane sample updates, lane reordering, sample display names, and scheduler event updates.
  • Updated PLANS.md, the drum sequencer feature spec, docs/data-model.md, docs/ui-design.md, and docs/audio-engine.md.

Lane to Sample Mapping

  • kick -> fred-kick-1 / FRED KICK 1
  • snare -> fred-snare-1 / FRED SNARE 1
  • closedHat -> fred-closed-hi-hat / FRED CLOSED HI-HAT
  • openHat -> fred-open-hi-hat / FRED OPEN HI-HAT

Sample Display Rule

Bundled drum sample labels are derived from .wav file names: remove .wav, replace underscores with spaces, and uppercase the result. Example: Fred_Kick_1.wav displays as FRED KICK 1.

Testing

  • npm run typecheck
  • npm run lint
  • npm run test
  • npm run build

Screenshots

No screenshot attached. UI layout is largely unchanged; step active state now reflects clip model state.

Notes / Limitations

  • Dev server smoke check returned HTTP 200 at http://127.0.0.1:5174/ because 5173 was already occupied locally.
  • Browser click/audio listening was not performed in this environment after the latest sample menu popover fix.
  • Step edits and lane sample changes while playing update the scheduler event list for future scheduling windows. Events already submitted to Web Audio inside the current short lookahead window may still play from the previous pattern.
  • Lane drag/drop uses native browser drag and drop. More accessible keyboard reordering can be added later if needed.
  • The two small circles in each drum lane are non-interactive visual knob placeholders from the prototype, currently hidden from assistive tech with aria-hidden.

Follow-up

  • Add a visual playhead or transport snapshot display when the UI needs playback position feedback.
  • Add keyboard-accessible lane reordering if drag/drop becomes part of the committed editing workflow.
  • Replace or remove the lane knob placeholders when actual lane controls such as volume, pan, mute, or solo are designed.

@britle20 britle20 merged commit c685989 into develop Jun 6, 2026
1 check passed
@britle20 britle20 mentioned this pull request Jun 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant