valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
113 Commits 1 Branch 0 Tags
3cc4cb555a4dca0928cf4f7c7ecfeefd88ea1820
Commit Graph

3 Commits

Author SHA1 Message Date
Sebastian Krüger
3cc4cb555a fix: align automation lane with waveform, improve header layout 
Automation lane improvements:
- Lane now aligns exactly with waveform width using two-column layout
- Added 180px left spacer to match track controls sidebar
- Playhead marker now aligns perfectly with waveform

Automation header improvements:
- Dropdown has fixed width (min-w-[120px] max-w-[200px]) instead of flex-1
- Eye icon (show/hide) is now positioned absolutely on the right
- Cleaner, more compact header layout

Visual consistency:
- Removed redundant border-b from AutomationLane (handled by parent)
- Automation lane and waveform now perfectly aligned vertically

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-18 18:53:08 +01:00
Sebastian Krüger
eb445bfa3a refactor: single automation lane with parameter dropdown and fixed-height effects panel 
Phase 9 Automation Improvements:
- Replaced multiple automation lanes with single lane + parameter selector
- Added dropdown in automation header to switch between parameters:
  - Track parameters: Volume, Pan
  - Effect parameters: Dynamically generated from effect chain
- Lanes are created on-demand when parameter is selected
- Effects panel now has fixed height (280px) with scroll
  - Panel no longer resizes when effects are expanded
  - Maintains consistent UI layout

Technical changes:
- Track.automation.selectedParameterId: Tracks current parameter
- AutomationHeader: Added parameter dropdown props
- AutomationLane: Passes parameter selection to header
- Track.tsx: Single lane rendering with IIFE for parameter list
- Effects panel: h-[280px] with flex layout and overflow-y-auto

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-18 18:49:44 +01:00
Sebastian Krüger
9b1eedc379 feat: Ableton Live-style effects and complete automation system 
Enhanced visual design:
- Improved device rack container with darker background and inner shadow
- Device cards now have rounded corners, shadows, and colored indicators
- Better visual separation between enabled/disabled effects
- Active devices highlighted with accent border

Complete automation infrastructure (Phase 9):
- Created comprehensive type system for automation lanes and points
- Implemented AutomationPoint component with drag-and-drop editing
- Implemented AutomationHeader with mode controls (Read/Write/Touch/Latch)
- Implemented AutomationLane with canvas-based curve rendering
- Integrated automation lanes into Track component below effects
- Created automation playback engine with real-time interpolation
- Added automation data persistence to localStorage

Automation features:
- Add/remove automation points by clicking/double-clicking
- Drag points to change time and value
- Multiple automation modes (Read, Write, Touch, Latch)
- Linear and step curve types (bezier planned)
- Adjustable lane height (60-180px)
- Show/hide automation per lane
- Real-time value display at playhead
- Color-coded lanes by parameter type
- Keyboard delete support (Delete/Backspace)

Track type updates:
- Added automation field to Track interface
- Updated track creation to initialize empty automation
- Updated localStorage save/load to include automation data

Files created:
- components/automation/AutomationPoint.tsx
- components/automation/AutomationHeader.tsx
- components/automation/AutomationLane.tsx
- lib/audio/automation/utils.ts (helper functions)
- lib/audio/automation/playback.ts (playback engine)
- types/automation.ts (complete type system)

Files modified:
- components/effects/EffectDevice.tsx (Ableton-style visual improvements)
- components/tracks/Track.tsx (automation lanes integration)
- types/track.ts (automation field added)
- lib/audio/track-utils.ts (automation initialization)
- lib/hooks/useMultiTrack.ts (automation persistence)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-18 16:30:01 +01:00