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>
This commit is contained in:
@@ -13,6 +13,7 @@ import { CircularKnob } from '@/components/ui/CircularKnob';
|
||||
import { AutomationLane } from '@/components/automation/AutomationLane';
|
||||
import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType } from '@/types/automation';
|
||||
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
||||
import { createAutomationLane } from '@/lib/audio/automation-utils';
|
||||
import { EffectDevice } from '@/components/effects/EffectDevice';
|
||||
import { EffectBrowser } from '@/components/effects/EffectBrowser';
|
||||
|
||||
@@ -709,19 +710,79 @@ export function Track({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Automation Lanes */}
|
||||
{!track.collapsed && track.automation?.showAutomation && (
|
||||
<div className="bg-background/30">
|
||||
{track.automation.lanes.map((lane) => (
|
||||
{/* Automation Lane */}
|
||||
{!track.collapsed && track.automation?.showAutomation && (() => {
|
||||
// Build list of available parameters from track and effects
|
||||
const availableParameters: Array<{ id: string; name: string }> = [
|
||||
{ id: 'volume', name: 'Volume' },
|
||||
{ id: 'pan', name: 'Pan' },
|
||||
];
|
||||
|
||||
// Add effect parameters
|
||||
track.effectChain.effects.forEach((effect) => {
|
||||
if (effect.parameters) {
|
||||
Object.keys(effect.parameters).forEach((paramKey) => {
|
||||
const parameterId = `effect.${effect.id}.${paramKey}`;
|
||||
const paramName = `${effect.name} - ${paramKey.charAt(0).toUpperCase() + paramKey.slice(1)}`;
|
||||
availableParameters.push({ id: parameterId, name: paramName });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Get selected parameter ID (default to volume if not set)
|
||||
const selectedParameterId = track.automation.selectedParameterId || 'volume';
|
||||
|
||||
// Find or create lane for selected parameter
|
||||
let selectedLane = track.automation.lanes.find(lane => lane.parameterId === selectedParameterId);
|
||||
|
||||
// If lane doesn't exist yet, create it
|
||||
if (!selectedLane) {
|
||||
const paramInfo = availableParameters.find(p => p.id === selectedParameterId);
|
||||
if (paramInfo) {
|
||||
selectedLane = createAutomationLane(
|
||||
track.id,
|
||||
selectedParameterId,
|
||||
paramInfo.name,
|
||||
{
|
||||
min: 0,
|
||||
max: 1,
|
||||
unit: selectedParameterId === 'volume' ? 'dB' : '',
|
||||
formatter: selectedParameterId === 'pan' ? (value: number) => {
|
||||
if (value === 0.5) return 'C';
|
||||
if (value < 0.5) return `${Math.abs((0.5 - value) * 200).toFixed(0)}L`;
|
||||
return `${((value - 0.5) * 200).toFixed(0)}R`;
|
||||
} : undefined,
|
||||
}
|
||||
);
|
||||
// Add the new lane to the track
|
||||
onUpdateTrack(track.id, {
|
||||
automation: {
|
||||
...track.automation,
|
||||
lanes: [...track.automation.lanes, selectedLane],
|
||||
selectedParameterId,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return selectedLane ? (
|
||||
<div className="bg-background/30">
|
||||
<AutomationLane
|
||||
key={lane.id}
|
||||
lane={lane}
|
||||
key={selectedLane.id}
|
||||
lane={selectedLane}
|
||||
duration={duration}
|
||||
zoom={zoom}
|
||||
currentTime={currentTime}
|
||||
availableParameters={availableParameters}
|
||||
selectedParameterId={selectedParameterId}
|
||||
onParameterChange={(parameterId) => {
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, selectedParameterId: parameterId },
|
||||
});
|
||||
}}
|
||||
onUpdateLane={(updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id ? { ...l, ...updates } : l
|
||||
l.id === selectedLane.id ? { ...l, ...updates } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
@@ -734,7 +795,7 @@ export function Track({
|
||||
curve: 'linear',
|
||||
});
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
l.id === selectedLane.id
|
||||
? { ...l, points: [...l.points, newPoint] }
|
||||
: l
|
||||
);
|
||||
@@ -744,7 +805,7 @@ export function Track({
|
||||
}}
|
||||
onUpdatePoint={(pointId, updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
l.id === selectedLane.id
|
||||
? {
|
||||
...l,
|
||||
points: l.points.map((p) =>
|
||||
@@ -759,7 +820,7 @@ export function Track({
|
||||
}}
|
||||
onRemovePoint={(pointId) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
l.id === selectedLane.id
|
||||
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
||||
: l
|
||||
);
|
||||
@@ -768,14 +829,14 @@ export function Track({
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
{/* Per-Track Effects Panel */}
|
||||
{!track.collapsed && track.showEffects && (
|
||||
<div className="bg-background/30 border-t border-border/50 p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="bg-background/30 border-t border-border/50 p-3 h-[280px] flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2 flex-shrink-0">
|
||||
<span className="text-xs font-medium text-foreground">
|
||||
{track.name} - Effects
|
||||
</span>
|
||||
@@ -791,11 +852,11 @@ export function Track({
|
||||
</div>
|
||||
|
||||
{track.effectChain.effects.length === 0 ? (
|
||||
<div className="text-center py-8 text-sm text-muted-foreground">
|
||||
<div className="text-center py-8 text-sm text-muted-foreground flex-1 flex items-center justify-center">
|
||||
No effects on this track
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-3 overflow-x-auto custom-scrollbar">
|
||||
<div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
|
||||
{track.effectChain.effects.map((effect) => (
|
||||
<EffectDevice
|
||||
key={effect.id}
|
||||
|
||||
Reference in New Issue
Block a user