fix: restore automation lanes and effects sections in two-column layout
Restored the automation lane and effects sections that were removed during the Track component refactoring. These sections now render as full-width rows below each track, spanning across both the controls and waveforms columns. Changes: - Created TrackExtensions component for effects section rendering - Added automation lane rendering in TrackList after each track waveform - Added placeholder spacers in left controls column to maintain alignment - Effects section shows collapsible device rack with mini preview when collapsed - Automation lanes render when track.automation.showAutomation is true - Import dialog moved to waveform-only rendering mode The automation and effects sections are now properly unfoldable again. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -816,90 +816,101 @@ export function Track({
|
||||
// Render only waveform
|
||||
if (renderWaveformOnly) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative bg-waveform-bg border-b transition-all duration-200",
|
||||
isSelected && "bg-primary/5",
|
||||
)}
|
||||
style={{ height: trackHeight }}
|
||||
>
|
||||
{/* Inner container with dynamic width */}
|
||||
<>
|
||||
<div
|
||||
className="relative h-full"
|
||||
style={{
|
||||
minWidth:
|
||||
track.audioBuffer && zoom > 1
|
||||
? `${duration * zoom * 100}px`
|
||||
: "100%",
|
||||
}}
|
||||
className={cn(
|
||||
"relative bg-waveform-bg border-b transition-all duration-200",
|
||||
isSelected && "bg-primary/5",
|
||||
)}
|
||||
style={{ height: trackHeight }}
|
||||
>
|
||||
{/* Delete Button - Top Right Overlay */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
{/* Inner container with dynamic width */}
|
||||
<div
|
||||
className="relative h-full"
|
||||
style={{
|
||||
minWidth:
|
||||
track.audioBuffer && zoom > 1
|
||||
? `${duration * zoom * 100}px`
|
||||
: "100%",
|
||||
}}
|
||||
className={cn(
|
||||
"absolute top-2 right-2 z-20 h-6 w-6 rounded flex items-center justify-center transition-all",
|
||||
"bg-card/80 hover:bg-destructive/90 text-muted-foreground hover:text-white",
|
||||
"border border-border/50 hover:border-destructive",
|
||||
"backdrop-blur-sm shadow-sm hover:shadow-md",
|
||||
)}
|
||||
title="Remove track"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
{/* Delete Button - Top Right Overlay */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
className={cn(
|
||||
"absolute top-2 right-2 z-20 h-6 w-6 rounded flex items-center justify-center transition-all",
|
||||
"bg-card/80 hover:bg-destructive/90 text-muted-foreground hover:text-white",
|
||||
"border border-border/50 hover:border-destructive",
|
||||
"backdrop-blur-sm shadow-sm hover:shadow-md",
|
||||
)}
|
||||
title="Remove track"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
{track.audioBuffer ? (
|
||||
<>
|
||||
{/* Waveform Canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 w-full h-full cursor-pointer"
|
||||
onMouseDown={handleCanvasMouseDown}
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseUp={handleCanvasMouseUp}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
!track.collapsed && (
|
||||
{track.audioBuffer ? (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer group",
|
||||
isDragging
|
||||
? "bg-primary/20 text-primary border-2 border-primary border-dashed"
|
||||
: "hover:bg-accent/50",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLoadAudioClick();
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<Upload className="h-6 w-6 mb-2 opacity-50 group-hover:opacity-100" />
|
||||
<p>
|
||||
{isDragging
|
||||
? "Drop audio file here"
|
||||
: "Click to load audio file"}
|
||||
</p>
|
||||
<p className="text-xs opacity-75 mt-1">or drag & drop</p>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="audio/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
{/* Waveform Canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 w-full h-full cursor-pointer"
|
||||
onMouseDown={handleCanvasMouseDown}
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseUp={handleCanvasMouseUp}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>{" "}
|
||||
{/* Close inner container with minWidth */}
|
||||
</div>
|
||||
) : (
|
||||
!track.collapsed && (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer group",
|
||||
isDragging
|
||||
? "bg-primary/20 text-primary border-2 border-primary border-dashed"
|
||||
: "hover:bg-accent/50",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLoadAudioClick();
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<Upload className="h-6 w-6 mb-2 opacity-50 group-hover:opacity-100" />
|
||||
<p>
|
||||
{isDragging
|
||||
? "Drop audio file here"
|
||||
: "Click to load audio file"}
|
||||
</p>
|
||||
<p className="text-xs opacity-75 mt-1">or drag & drop</p>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="audio/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Import Dialog */}
|
||||
<ImportDialog
|
||||
open={showImportDialog}
|
||||
onClose={handleImportCancel}
|
||||
onImport={handleImport}
|
||||
fileName={pendingFile?.name}
|
||||
sampleRate={fileMetadata.sampleRate}
|
||||
channels={fileMetadata.channels}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user