Files
audio-ui/types/automation.ts
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

106 lines
3.0 KiB
TypeScript

/**
* Automation system type definitions
* Based on Ableton Live's automation model
*/
/**
* Automation curve types
* - linear: Straight line between points
* - bezier: Curved line with control handles
* - step: Horizontal lines with vertical transitions (for discrete values)
*/
export type AutomationCurveType = 'linear' | 'bezier' | 'step';
/**
* Automation recording/playback modes
* - read: Only playback automation
* - write: Record automation (replaces existing)
* - touch: Record while touching control, then return to read mode
* - latch: Record from first touch until stop, then return to read mode
*/
export type AutomationMode = 'read' | 'write' | 'touch' | 'latch';
/**
* Single automation breakpoint
*/
export interface AutomationPoint {
id: string;
time: number; // Position in seconds from track start
value: number; // Parameter value (normalized 0-1)
curve: AutomationCurveType;
// Bezier control handles (only used when curve is 'bezier')
handleIn?: { x: number; y: number }; // Relative to point position
handleOut?: { x: number; y: number }; // Relative to point position
}
/**
* Parameter identifier for automation
* Examples:
* - 'volume' - Track volume
* - 'pan' - Track pan
* - 'mute' - Track mute (step curve)
* - 'effect.compressor-1.threshold' - Effect parameter
* - 'effect.delay-2.time' - Effect parameter
*/
export type AutomationParameterId = string;
/**
* Single automation lane for a specific parameter
*/
export interface AutomationLane {
id: string;
trackId: string;
parameterId: AutomationParameterId;
parameterName: string; // Display name (e.g., "Volume", "Compressor Threshold")
visible: boolean; // Show/hide lane
height: number; // Lane height in pixels (user-adjustable, 60-120px)
points: AutomationPoint[];
mode: AutomationMode;
color?: string; // Optional color override (defaults to parameter type color)
// Value range for display (actual values are normalized 0-1)
valueRange: {
min: number; // Display minimum (e.g., 0 for volume)
max: number; // Display maximum (e.g., 1 for volume)
unit?: string; // Display unit (e.g., 'dB', '%', 'ms', 'Hz')
formatter?: (value: number) => string; // Custom value formatter
};
}
/**
* All automation lanes for a single track
*/
export interface TrackAutomation {
trackId: string;
lanes: AutomationLane[];
showAutomation: boolean; // Master show/hide toggle for all lanes
}
/**
* Complete automation data for entire project
*/
export interface ProjectAutomation {
tracks: Record<string, TrackAutomation>;
}
/**
* Automation parameter value at a specific time
* Used for real-time playback
*/
export interface AutomationValue {
parameterId: AutomationParameterId;
value: number;
time: number;
}
/**
* Helper type for creating new automation points
*/
export type CreateAutomationPointInput = Omit<AutomationPoint, 'id'>;
/**
* Helper type for creating new automation lanes
*/
export type CreateAutomationLaneInput = Omit<AutomationLane, 'id' | 'points'> & {
points?: AutomationPoint[];
};