valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve overlay visibility with header controls and lighter backdrop

Browse Source 
Changes to automation and effects overlays:
- Reduced backdrop opacity from bg-black/60 to bg-black/30 (less dark)
- Added header to automation overlay with parameter name display
- Added close button to automation overlay (ChevronDown icon)
- Wrapped automation lane in rounded card with border and shadow
- Both overlays now have consistent visual styling
- Added ChevronDown import to TrackList

This makes the overlays less obtrusive and adds proper controls for closing
the automation view, matching the effects overlay pattern.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-19 11:56:59 +01:00
parent b57ac5912a
commit 8c779ccd88
1 changed files with 87 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
components/tracks/TrackList.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import { Plus, Upload } from 'lucide-react'; import { Plus, Upload, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/Button'; import { Button } from '@/components/ui/Button';
import { Track } from './Track'; import { Track } from './Track';
import { TrackExtensions } from './TrackExtensions'; import { TrackExtensions } from './TrackExtensions';
@@ -294,73 +294,98 @@ export function TrackList({
{/* Automation Lane Overlay */} {/* Automation Lane Overlay */}
{!track.collapsed && track.automation?.showAutomation && ( {!track.collapsed && track.automation?.showAutomation && (
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10"> <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
<div className="h-full p-4"> <div className="h-full p-4 flex flex-col">
{track.automation.lanes <div className="bg-card/95 rounded-lg border border-border shadow-2xl flex flex-col h-full">
.filter((lane) => lane.parameterId === track.automation.selectedParameterId) {/* Header */}
.map((lane) => ( <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
<AutomationLane <div className="flex items-center gap-2">
key={lane.id} <span className="text-sm font-medium">Automation</span>
lane={lane} <span className="text-xs text-muted-foreground">
trackId={track.id} {track.automation.selectedParameterId || 'Volume'}
zoom={zoom} </span>
currentTime={currentTime} </div>
duration={duration} <Button
isPlaying={isPlaying} variant="ghost"
onAddPoint={(time, value) => { size="icon-sm"
const newPoint = createAutomationPoint(time, value); onClick={() => onUpdateTrack(track.id, {
const updatedLanes = track.automation.lanes.map((l) => automation: { ...track.automation, showAutomation: false }
l.id === lane.id })}
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) } title="Close automation"
: l >
); <ChevronDown className="h-4 w-4" />
onUpdateTrack(track.id, { </Button>
automation: { ...track.automation, lanes: updatedLanes }, </div>
});
}} {/* Automation Lane */}
onUpdatePoint={(pointId, updates) => { <div className="flex-1 overflow-hidden">
const updatedLanes = track.automation.lanes.map((l) => {track.automation.lanes
l.id === lane.id .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
? { .map((lane) => (
...l, <AutomationLane
points: l.points.map((p) => key={lane.id}
p.id === pointId ? { ...p, ...updates } : p lane={lane}
), trackId={track.id}
} zoom={zoom}
: l currentTime={currentTime}
); duration={duration}
onUpdateTrack(track.id, { isPlaying={isPlaying}
automation: { ...track.automation, lanes: updatedLanes }, onAddPoint={(time, value) => {
}); const newPoint = createAutomationPoint(time, value);
}} const updatedLanes = track.automation.lanes.map((l) =>
onRemovePoint={(pointId) => { l.id === lane.id
const updatedLanes = track.automation.lanes.map((l) => ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
l.id === lane.id : l
? { ...l, points: l.points.filter((p) => p.id !== pointId) } );
: l onUpdateTrack(track.id, {
); automation: { ...track.automation, lanes: updatedLanes },
onUpdateTrack(track.id, { });
automation: { ...track.automation, lanes: updatedLanes }, }}
}); onUpdatePoint={(pointId, updates) => {
}} const updatedLanes = track.automation.lanes.map((l) =>
onUpdateLane={(updates) => { l.id === lane.id
const updatedLanes = track.automation.lanes.map((l) => ? {
l.id === lane.id ? { ...l, ...updates } : l ...l,
); points: l.points.map((p) =>
onUpdateTrack(track.id, { p.id === pointId ? { ...p, ...updates } : p
automation: { ...track.automation, lanes: updatedLanes }, ),
}); }
}} : l
onSeek={onSeek} );
/> 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 },
});
}}
onSeek={onSeek}
/>
))}
</div>
</div>
</div> </div>
</div> </div>
)} )}
{/* Effects Overlay */} {/* Effects Overlay */}
{!track.collapsed && track.showEffects && ( {!track.collapsed && track.showEffects && (
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10"> <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
<div className="h-full p-4"> <div className="h-full p-4">
<TrackExtensions <TrackExtensions
track={track} track={track}