Sebastian Krüger
0d8952ca2f
Changed waveforms container from overflow-y-auto to overflow-y-scroll to ensure the vertical scrollbar is always visible. This maintains consistent width alignment between the timeline and waveform areas, preventing playhead marker misalignment that occurred when scrollbar appeared/disappeared based on track count. Fixes the issue where timeline was slightly wider than waveforms when vertical scrollbar was present, causing ~15px offset in playhead position. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1335 lines
63 KiB
TypeScript
1335 lines
63 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Plus, Upload, ChevronDown, ChevronRight, ChevronUp, X, Eye, EyeOff } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { cn } from '@/lib/utils/cn';
|
|
import { Track } from './Track';
|
|
import { TrackExtensions } from './TrackExtensions';
|
|
import { ImportTrackDialog } from './ImportTrackDialog';
|
|
import type { Track as TrackType } from '@/types/track';
|
|
import { DEFAULT_TRACK_HEIGHT, COLLAPSED_TRACK_HEIGHT, MIN_TRACK_HEIGHT } from '@/types/track';
|
|
import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
|
|
import { AutomationLane } from '@/components/automation/AutomationLane';
|
|
import { AutomationHeader } from '@/components/automation/AutomationHeader';
|
|
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
|
|
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
|
import { EffectDevice } from '@/components/effects/EffectDevice';
|
|
import { EffectBrowser } from '@/components/effects/EffectBrowser';
|
|
|
|
export interface TrackListProps {
|
|
tracks: TrackType[];
|
|
zoom: number;
|
|
currentTime: number;
|
|
duration: number;
|
|
selectedTrackId?: string | null;
|
|
onSelectTrack?: (trackId: string | null) => void;
|
|
onAddTrack: () => void;
|
|
onImportTrack?: (buffer: AudioBuffer, name: string) => void;
|
|
onRemoveTrack: (trackId: string) => void;
|
|
onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
|
|
onSeek?: (time: number) => void;
|
|
onSelectionChange?: (trackId: string, selection: { start: number; end: number } | null) => void;
|
|
onToggleRecordEnable?: (trackId: string) => void;
|
|
recordingTrackId?: string | null;
|
|
recordingLevel?: number;
|
|
trackLevels?: Record<string, number>;
|
|
onParameterTouched?: (trackId: string, laneId: string, touched: boolean) => void;
|
|
isPlaying?: boolean;
|
|
timeScaleScrollRef?: React.MutableRefObject<HTMLDivElement | null>;
|
|
onTimeScaleScroll?: () => void;
|
|
timeScaleScrollHandlerRef?: React.MutableRefObject<(() => void) | null>;
|
|
}
|
|
|
|
export function TrackList({
|
|
tracks,
|
|
zoom,
|
|
currentTime,
|
|
duration,
|
|
selectedTrackId,
|
|
onSelectTrack,
|
|
onAddTrack,
|
|
onImportTrack,
|
|
onRemoveTrack,
|
|
onUpdateTrack,
|
|
onSeek,
|
|
onSelectionChange,
|
|
onToggleRecordEnable,
|
|
recordingTrackId,
|
|
recordingLevel = 0,
|
|
trackLevels = {},
|
|
onParameterTouched,
|
|
isPlaying = false,
|
|
timeScaleScrollRef: externalTimeScaleScrollRef,
|
|
onTimeScaleScroll,
|
|
timeScaleScrollHandlerRef,
|
|
}: TrackListProps) {
|
|
const [importDialogOpen, setImportDialogOpen] = React.useState(false);
|
|
const [effectBrowserTrackId, setEffectBrowserTrackId] = React.useState<string | null>(null);
|
|
const waveformScrollRef = React.useRef<HTMLDivElement>(null);
|
|
const controlsScrollRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
// Refs for horizontal scroll synchronization (per track)
|
|
const waveformHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
|
|
const automationHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
|
|
const localTimeScaleScrollRef = React.useRef<HTMLDivElement | null>(null);
|
|
const timeScaleScrollRef = externalTimeScaleScrollRef || localTimeScaleScrollRef;
|
|
const [syncingScroll, setSyncingScroll] = React.useState(false);
|
|
|
|
// Synchronize vertical scroll between controls and waveforms
|
|
const handleWaveformScroll = React.useCallback(() => {
|
|
if (waveformScrollRef.current && controlsScrollRef.current) {
|
|
controlsScrollRef.current.scrollTop = waveformScrollRef.current.scrollTop;
|
|
}
|
|
}, []);
|
|
|
|
// Synchronize horizontal scroll across all tracks (waveforms and automation lanes)
|
|
const handleWaveformHScroll = React.useCallback((trackId: string) => {
|
|
if (syncingScroll) return;
|
|
setSyncingScroll(true);
|
|
|
|
const sourceEl = waveformHScrollRefs.current.get(trackId);
|
|
if (!sourceEl) {
|
|
setSyncingScroll(false);
|
|
return;
|
|
}
|
|
|
|
const scrollLeft = sourceEl.scrollLeft;
|
|
|
|
// Sync all waveforms
|
|
waveformHScrollRefs.current.forEach((el, id) => {
|
|
if (id !== trackId) {
|
|
el.scrollLeft = scrollLeft;
|
|
}
|
|
});
|
|
|
|
// Sync all automation lanes
|
|
automationHScrollRefs.current.forEach((el) => {
|
|
el.scrollLeft = scrollLeft;
|
|
});
|
|
|
|
// Sync time scale
|
|
if (timeScaleScrollRef.current) {
|
|
timeScaleScrollRef.current.scrollLeft = scrollLeft;
|
|
}
|
|
|
|
setSyncingScroll(false);
|
|
}, [syncingScroll]);
|
|
|
|
const handleAutomationHScroll = React.useCallback((trackId: string) => {
|
|
if (syncingScroll) return;
|
|
setSyncingScroll(true);
|
|
|
|
const sourceEl = automationHScrollRefs.current.get(trackId);
|
|
if (!sourceEl) {
|
|
setSyncingScroll(false);
|
|
return;
|
|
}
|
|
|
|
const scrollLeft = sourceEl.scrollLeft;
|
|
|
|
// Sync all waveforms
|
|
waveformHScrollRefs.current.forEach((el) => {
|
|
el.scrollLeft = scrollLeft;
|
|
});
|
|
|
|
// Sync all automation lanes
|
|
automationHScrollRefs.current.forEach((el, id) => {
|
|
if (id !== trackId) {
|
|
el.scrollLeft = scrollLeft;
|
|
}
|
|
});
|
|
|
|
// Sync time scale
|
|
if (timeScaleScrollRef.current) {
|
|
timeScaleScrollRef.current.scrollLeft = scrollLeft;
|
|
}
|
|
|
|
setSyncingScroll(false);
|
|
}, [syncingScroll]);
|
|
|
|
const handleTimeScaleScrollInternal = React.useCallback(() => {
|
|
if (syncingScroll) return;
|
|
setSyncingScroll(true);
|
|
|
|
if (!timeScaleScrollRef.current) {
|
|
setSyncingScroll(false);
|
|
return;
|
|
}
|
|
|
|
const scrollLeft = timeScaleScrollRef.current.scrollLeft;
|
|
|
|
// Sync all waveforms
|
|
waveformHScrollRefs.current.forEach((el) => {
|
|
el.scrollLeft = scrollLeft;
|
|
});
|
|
|
|
// Sync all automation lanes
|
|
automationHScrollRefs.current.forEach((el) => {
|
|
el.scrollLeft = scrollLeft;
|
|
});
|
|
|
|
setSyncingScroll(false);
|
|
}, [syncingScroll]);
|
|
|
|
// Expose the scroll handler via ref so AudioEditor can call it
|
|
React.useEffect(() => {
|
|
if (timeScaleScrollHandlerRef) {
|
|
timeScaleScrollHandlerRef.current = handleTimeScaleScrollInternal;
|
|
}
|
|
}, [handleTimeScaleScrollInternal, timeScaleScrollHandlerRef]);
|
|
|
|
const handleImportTrack = (buffer: AudioBuffer, name: string) => {
|
|
if (onImportTrack) {
|
|
onImportTrack(buffer, name);
|
|
}
|
|
};
|
|
|
|
if (tracks.length === 0) {
|
|
return (
|
|
<>
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
|
|
<p className="text-sm">No tracks yet. Add a track to get started.</p>
|
|
<div className="flex gap-2">
|
|
<Button onClick={onAddTrack} variant="secondary">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Empty Track
|
|
</Button>
|
|
{onImportTrack && (
|
|
<Button onClick={() => setImportDialogOpen(true)} variant="secondary">
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Import Audio Files
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{onImportTrack && (
|
|
<ImportTrackDialog
|
|
open={importDialogOpen}
|
|
onClose={() => setImportDialogOpen(false)}
|
|
onImportTrack={handleImportTrack}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* Mobile Layout - Single Column (Stacked: Controls → Waveform per track) */}
|
|
<div className="flex-1 flex flex-col overflow-y-auto overflow-x-hidden custom-scrollbar lg:hidden">
|
|
{tracks.map((track) => (
|
|
<div key={track.id} className="flex flex-col border-b border-border">
|
|
{/* Track Controls - Top */}
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() => onUpdateTrack(track.id, { mute: !track.mute })}
|
|
onToggleSolo={() => onUpdateTrack(track.id, { solo: !track.solo })}
|
|
onToggleCollapse={() => onUpdateTrack(track.id, { collapsed: !track.collapsed })}
|
|
onVolumeChange={(volume) => onUpdateTrack(track.id, { volume })}
|
|
onPanChange={(pan) => onUpdateTrack(track.id, { pan })}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) => onUpdateTrack(track.id, { name })}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) => onUpdateTrack(track.id, { audioBuffer: buffer })}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderControlsOnly={true}
|
|
/>
|
|
|
|
{/* Track Waveform with Automation and Effects - Bottom */}
|
|
{!track.collapsed && (
|
|
<div className="flex flex-col">
|
|
{/* Waveform */}
|
|
<div className="min-h-[200px] overflow-x-auto custom-scrollbar">
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() => onUpdateTrack(track.id, { mute: !track.mute })}
|
|
onToggleSolo={() => onUpdateTrack(track.id, { solo: !track.solo })}
|
|
onToggleCollapse={() => onUpdateTrack(track.id, { collapsed: !track.collapsed })}
|
|
onVolumeChange={(volume) => onUpdateTrack(track.id, { volume })}
|
|
onPanChange={(pan) => onUpdateTrack(track.id, { pan })}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) => onUpdateTrack(track.id, { name })}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) => onUpdateTrack(track.id, { audioBuffer: buffer })}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderWaveformOnly={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Automation Bar */}
|
|
{(() => {
|
|
const selectedParam = track.automation.selectedParameterId || 'volume';
|
|
const currentLane = track.automation.lanes.find(
|
|
l => l.parameterId === selectedParam
|
|
);
|
|
|
|
// Build available parameters list
|
|
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 parameters that have automation lanes with points
|
|
const automatedParams = track.automation.lanes
|
|
.filter(lane => lane.points.length > 0)
|
|
.map(lane => {
|
|
const param = availableParameters.find(p => p.id === lane.parameterId);
|
|
return param ? param.name : lane.parameterName;
|
|
});
|
|
|
|
const modes = ['read', 'write', 'touch', 'latch'] as const;
|
|
const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
|
|
const MODE_COLORS = {
|
|
read: 'text-muted-foreground',
|
|
write: 'text-red-500',
|
|
touch: 'text-yellow-500',
|
|
latch: 'text-orange-500',
|
|
};
|
|
const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');
|
|
|
|
return (
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
|
|
{/* Automation Header */}
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
|
|
<span className="text-xs font-medium flex-shrink-0">Automation</span>
|
|
|
|
{/* Color indicator */}
|
|
{currentLane?.color && (
|
|
<div
|
|
className="w-1 h-4 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: currentLane.color }}
|
|
/>
|
|
)}
|
|
|
|
{/* Parameter labels - always visible */}
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
|
|
{automatedParams.map((paramName, index) => (
|
|
<span
|
|
key={index}
|
|
className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
|
|
>
|
|
{paramName}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Controls - only visible when expanded */}
|
|
{track.automationExpanded && (
|
|
<>
|
|
{/* Parameter selector */}
|
|
{availableParameters && availableParameters.length > 1 && (
|
|
<select
|
|
value={selectedParam}
|
|
onChange={(e) => onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, selectedParameterId: e.target.value },
|
|
})}
|
|
className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
|
|
>
|
|
{availableParameters.map((param) => (
|
|
<option key={param.id} value={param.id}>
|
|
{param.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
|
|
{/* Automation mode button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const nextIndex = (currentModeIndex + 1) % modes.length;
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
|
|
className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
|
|
>
|
|
{MODE_LABELS[currentLane?.mode || 'read']}
|
|
</Button>
|
|
|
|
{/* Height controls */}
|
|
<div className="flex flex-col gap-0 flex-shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title="Increase lane height"
|
|
className="h-3 w-4 p-0"
|
|
>
|
|
<ChevronUp className="h-2.5 w-2.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title="Decrease lane height"
|
|
className="h-3 w-4 p-0"
|
|
>
|
|
<ChevronDown className="h-2.5 w-2.5" />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Show/hide toggle */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
|
|
}}
|
|
title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
{track.automationExpanded ? (
|
|
<Eye className="h-3 w-3" />
|
|
) : (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Automation Lane Content - Shown when expanded */}
|
|
{track.automationExpanded && (
|
|
<div className="overflow-x-auto custom-scrollbar">
|
|
<div
|
|
style={{
|
|
minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
|
|
}}
|
|
>
|
|
{track.automation.lanes
|
|
.filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
|
|
.map((lane) => (
|
|
<AutomationLane
|
|
key={lane.id}
|
|
lane={lane}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
onAddPoint={(time, value) => {
|
|
const newPoint = createAutomationPoint({ time, value, curve: 'linear' });
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdatePoint={(pointId, updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? {
|
|
...l,
|
|
points: l.points.map((p) =>
|
|
p.id === pointId ? { ...p, ...updates } : p
|
|
),
|
|
}
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onRemovePoint={(pointId) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdateLane={(updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id ? { ...l, ...updates } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* Effects Bar */}
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
|
|
{/* Effects Header */}
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
|
|
<span className="text-xs font-medium flex-shrink-0">Effects</span>
|
|
|
|
{/* Effect name labels */}
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
|
|
{track.effectChain.effects.map((effect) => (
|
|
<span
|
|
key={effect.id}
|
|
className={cn(
|
|
"text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0",
|
|
effect.enabled
|
|
? "bg-primary/10 text-primary border border-primary/20"
|
|
: "bg-muted/30 text-muted-foreground border border-border/30 opacity-60"
|
|
)}
|
|
>
|
|
{effect.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add effect button - only visible when expanded */}
|
|
{track.effectsExpanded && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => setEffectBrowserTrackId(track.id)}
|
|
title="Add effect"
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* Show/hide toggle */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
|
|
}}
|
|
title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
{track.effectsExpanded ? (
|
|
<Eye className="h-3 w-3" />
|
|
) : (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Effects Content - Collapsible, horizontally scrollable */}
|
|
{track.effectsExpanded && (
|
|
<div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
|
|
<div className="flex h-full gap-3 p-3">
|
|
{track.effectChain.effects.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-8 w-full">
|
|
No effects. Click + to add an effect.
|
|
</div>
|
|
) : (
|
|
track.effectChain.effects.map((effect) => (
|
|
<EffectDevice
|
|
key={effect.id}
|
|
effect={effect}
|
|
onToggleEnabled={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemove={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateParameters={(params) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, parameters: params } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onToggleExpanded={() => {
|
|
const updatedEffects = track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, expanded: !e.expanded } : e
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
effectChain: { ...track.effectChain, effects: updatedEffects },
|
|
});
|
|
}}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Desktop Layout - Two Column Layout */}
|
|
<div className="flex-1 flex overflow-hidden hidden lg:flex">
|
|
{/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
|
|
<div ref={controlsScrollRef} className="w-60 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
|
|
{tracks.map((track) => (
|
|
<React.Fragment key={track.id}>
|
|
{/* Track Controls */}
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() =>
|
|
onUpdateTrack(track.id, { mute: !track.mute })
|
|
}
|
|
onToggleSolo={() =>
|
|
onUpdateTrack(track.id, { solo: !track.solo })
|
|
}
|
|
onToggleCollapse={() =>
|
|
onUpdateTrack(track.id, { collapsed: !track.collapsed })
|
|
}
|
|
onVolumeChange={(volume) =>
|
|
onUpdateTrack(track.id, { volume })
|
|
}
|
|
onPanChange={(pan) =>
|
|
onUpdateTrack(track.id, { pan })
|
|
}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) =>
|
|
onUpdateTrack(track.id, { name })
|
|
}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) =>
|
|
onUpdateTrack(track.id, { audioBuffer: buffer })
|
|
}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(
|
|
effectType,
|
|
EFFECT_NAMES[effectType]
|
|
);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderControlsOnly={true}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Column: Waveforms (Flexible Width, Vertical Scroll Only) */}
|
|
<div
|
|
ref={waveformScrollRef}
|
|
onScroll={handleWaveformScroll}
|
|
className="flex-1 overflow-y-scroll overflow-x-hidden custom-scrollbar"
|
|
>
|
|
<div className="flex flex-col">
|
|
{tracks.map((track) => (
|
|
<React.Fragment key={track.id}>
|
|
{/* Track Waveform Row with bars stacked below - Total height matches track controls */}
|
|
<div
|
|
className="flex flex-col"
|
|
style={{
|
|
height: track.collapsed ? `${COLLAPSED_TRACK_HEIGHT}px` : `${Math.max(track.height || DEFAULT_TRACK_HEIGHT, MIN_TRACK_HEIGHT)}px`
|
|
}}
|
|
>
|
|
{/* Waveform - Takes remaining space after bars */}
|
|
<div className="flex-1 min-h-0 relative">
|
|
{/* Upload hint for empty tracks - stays fixed as overlay */}
|
|
{!track.audioBuffer && !track.collapsed && (
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground pointer-events-none z-10">
|
|
<Upload className="h-6 w-6 mb-2 opacity-50" />
|
|
<p>Click waveform area to load audio</p>
|
|
<p className="text-xs opacity-75 mt-1">or drag & drop</p>
|
|
</div>
|
|
)}
|
|
<div
|
|
ref={(el) => {
|
|
if (el) waveformHScrollRefs.current.set(track.id, el);
|
|
}}
|
|
onScroll={() => handleWaveformHScroll(track.id)}
|
|
className="w-full h-full overflow-x-auto custom-scrollbar"
|
|
>
|
|
<div
|
|
className="h-full"
|
|
style={{
|
|
minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
|
|
}}
|
|
>
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() =>
|
|
onUpdateTrack(track.id, { mute: !track.mute })
|
|
}
|
|
onToggleSolo={() =>
|
|
onUpdateTrack(track.id, { solo: !track.solo })
|
|
}
|
|
onToggleCollapse={() =>
|
|
onUpdateTrack(track.id, { collapsed: !track.collapsed })
|
|
}
|
|
onVolumeChange={(volume) =>
|
|
onUpdateTrack(track.id, { volume })
|
|
}
|
|
onPanChange={(pan) =>
|
|
onUpdateTrack(track.id, { pan })
|
|
}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) =>
|
|
onUpdateTrack(track.id, { name })
|
|
}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) =>
|
|
onUpdateTrack(track.id, { audioBuffer: buffer })
|
|
}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(
|
|
effectType,
|
|
EFFECT_NAMES[effectType]
|
|
);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderWaveformOnly={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Automation Bar - Collapsible - Fixed height when expanded */}
|
|
{!track.collapsed && (() => {
|
|
const selectedParam = track.automation.selectedParameterId || 'volume';
|
|
const currentLane = track.automation.lanes.find(
|
|
l => l.parameterId === selectedParam
|
|
);
|
|
|
|
// Build available parameters list
|
|
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 parameters that have automation lanes with points
|
|
const automatedParams = track.automation.lanes
|
|
.filter(lane => lane.points.length > 0)
|
|
.map(lane => {
|
|
const param = availableParameters.find(p => p.id === lane.parameterId);
|
|
return param ? param.name : lane.parameterName;
|
|
});
|
|
|
|
const modes = ['read', 'write', 'touch', 'latch'] as const;
|
|
const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
|
|
const MODE_COLORS = {
|
|
read: 'text-muted-foreground',
|
|
write: 'text-red-500',
|
|
touch: 'text-yellow-500',
|
|
latch: 'text-orange-500',
|
|
};
|
|
const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');
|
|
|
|
return (
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
|
|
{/* Automation Header - Single Bar */}
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
|
|
<span className="text-xs font-medium flex-shrink-0">Automation</span>
|
|
|
|
{/* Color indicator */}
|
|
{currentLane?.color && (
|
|
<div
|
|
className="w-1 h-4 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: currentLane.color }}
|
|
/>
|
|
)}
|
|
|
|
{/* Parameter labels - always visible */}
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
|
|
{automatedParams.map((paramName, index) => (
|
|
<span
|
|
key={index}
|
|
className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
|
|
>
|
|
{paramName}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Controls - only visible when expanded */}
|
|
{track.automationExpanded && (
|
|
<>
|
|
{/* Parameter selector */}
|
|
{availableParameters && availableParameters.length > 1 && (
|
|
<select
|
|
value={selectedParam}
|
|
onChange={(e) => onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, selectedParameterId: e.target.value },
|
|
})}
|
|
className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
|
|
>
|
|
{availableParameters.map((param) => (
|
|
<option key={param.id} value={param.id}>
|
|
{param.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
|
|
{/* Automation mode button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const nextIndex = (currentModeIndex + 1) % modes.length;
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
|
|
className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
|
|
>
|
|
{MODE_LABELS[currentLane?.mode || 'read']}
|
|
</Button>
|
|
|
|
{/* Height controls */}
|
|
<div className="flex flex-col gap-0 flex-shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title="Increase lane height"
|
|
className="h-3 w-4 p-0"
|
|
>
|
|
<ChevronUp className="h-2.5 w-2.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
if (currentLane) {
|
|
const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
title="Decrease lane height"
|
|
className="h-3 w-4 p-0"
|
|
>
|
|
<ChevronDown className="h-2.5 w-2.5" />
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Show/hide toggle - Part of normal flow */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
|
|
}}
|
|
title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
{track.automationExpanded ? (
|
|
<Eye className="h-3 w-3" />
|
|
) : (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Automation Lane Content - Shown when expanded */}
|
|
{track.automationExpanded && (
|
|
<div
|
|
ref={(el) => {
|
|
if (el) automationHScrollRefs.current.set(track.id, el);
|
|
}}
|
|
onScroll={() => handleAutomationHScroll(track.id)}
|
|
className="overflow-x-auto custom-scrollbar"
|
|
>
|
|
<div
|
|
style={{
|
|
minWidth: duration && zoom >= 1 ? `${duration * zoom * 5}px` : '100%',
|
|
}}
|
|
>
|
|
{track.automation.lanes
|
|
.filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
|
|
.map((lane) => (
|
|
<AutomationLane
|
|
key={lane.id}
|
|
lane={lane}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
onAddPoint={(time, value) => {
|
|
const newPoint = createAutomationPoint({ time, value, curve: 'linear' });
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdatePoint={(pointId, updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? {
|
|
...l,
|
|
points: l.points.map((p) =>
|
|
p.id === pointId ? { ...p, ...updates } : p
|
|
),
|
|
}
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onRemovePoint={(pointId) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdateLane={(updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id ? { ...l, ...updates } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* Effects Bar - Collapsible - Fixed height when expanded */}
|
|
{!track.collapsed && (
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
|
|
{/* Effects Header - Collapsible */}
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
|
|
<span className="text-xs font-medium flex-shrink-0">Effects</span>
|
|
|
|
{/* Effect name labels */}
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
|
|
{track.effectChain.effects.map((effect) => (
|
|
<span
|
|
key={effect.id}
|
|
className={cn(
|
|
"text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0",
|
|
effect.enabled
|
|
? "bg-primary/10 text-primary border border-primary/20"
|
|
: "bg-muted/30 text-muted-foreground border border-border/30 opacity-60"
|
|
)}
|
|
>
|
|
{effect.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add effect button - only visible when expanded */}
|
|
{track.effectsExpanded && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => setEffectBrowserTrackId(track.id)}
|
|
title="Add effect"
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* Show/hide toggle */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
|
|
}}
|
|
title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
|
|
className="h-5 w-5 flex-shrink-0"
|
|
>
|
|
{track.effectsExpanded ? (
|
|
<Eye className="h-3 w-3" />
|
|
) : (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Effects Content - Collapsible, horizontally scrollable */}
|
|
{track.effectsExpanded && (
|
|
<div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
|
|
<div className="flex h-full gap-3 p-3">
|
|
{track.effectChain.effects.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-8 w-full">
|
|
No effects. Click + to add an effect.
|
|
</div>
|
|
) : (
|
|
track.effectChain.effects.map((effect) => (
|
|
<EffectDevice
|
|
key={effect.id}
|
|
effect={effect}
|
|
onToggleEnabled={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemove={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateParameters={(params) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, parameters: params } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onToggleExpanded={() => {
|
|
const updatedEffects = track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, expanded: !e.expanded } : e
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
effectChain: { ...track.effectChain, effects: updatedEffects },
|
|
});
|
|
}}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Import Dialog */}
|
|
{onImportTrack && (
|
|
<ImportTrackDialog
|
|
open={importDialogOpen}
|
|
onClose={() => setImportDialogOpen(false)}
|
|
onImportTrack={handleImportTrack}
|
|
/>
|
|
)}
|
|
|
|
{/* Effect Browser Dialog */}
|
|
<EffectBrowser
|
|
open={effectBrowserTrackId !== null}
|
|
onClose={() => setEffectBrowserTrackId(null)}
|
|
onSelectEffect={(effectType) => {
|
|
if (effectBrowserTrackId) {
|
|
const track = tracks.find((t) => t.id === effectBrowserTrackId);
|
|
if (track) {
|
|
const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(effectBrowserTrackId, { effectChain: updatedChain });
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|