From 484e3261c5182025be5748659cad38749f061181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 19 Nov 2025 18:23:41 +0100 Subject: [PATCH] feat: apply defaultTrackHeight and defaultZoom settings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Modified createTrack and createTrackFromBuffer to accept height parameter - Updated useMultiTrack to pass height when creating tracks - Applied settings.ui.defaultTrackHeight when adding new tracks - Applied settings.editor.defaultZoom for initial zoom state - Removed duplicate useSettings hook declaration in AudioEditor - New tracks now use configured default height from settings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- components/editor/AudioEditor.tsx | 30 +++++++++++++++--------------- lib/audio/track-utils.ts | 9 +++++---- lib/hooks/useMultiTrack.ts | 8 ++++---- 3 files changed, 24 insertions(+), 23 deletions(-) diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx index 1025bd1..963c1f1 100644 --- a/components/editor/AudioEditor.tsx +++ b/components/editor/AudioEditor.tsx @@ -50,9 +50,19 @@ import { import { getAudioContext } from '@/lib/audio/context'; export function AudioEditor() { + // Settings hook + const { + settings, + updateAudioSettings, + updateUISettings, + updateEditorSettings, + updatePerformanceSettings, + resetCategory, + } = useSettings(); + const [importDialogOpen, setImportDialogOpen] = React.useState(false); const [selectedTrackId, setSelectedTrackId] = React.useState(null); - const [zoom, setZoom] = React.useState(1); + const [zoom, setZoom] = React.useState(settings.editor.defaultZoom); const [masterVolume, setMasterVolume] = React.useState(0.8); const [masterPan, setMasterPan] = React.useState(0); const [isMasterMuted, setIsMasterMuted] = React.useState(false); @@ -90,16 +100,6 @@ export function AudioEditor() { setSampleRate, } = useRecording(); - // Settings hook - const { - settings, - updateAudioSettings, - updateUISettings, - updateEditorSettings, - updatePerformanceSettings, - resetCategory, - } = useSettings(); - // Multi-track hooks const { tracks, @@ -122,19 +122,19 @@ export function AudioEditor() { // Wrap addTrack to auto-select first track when adding to empty project const addTrack = React.useCallback((name?: string) => { const shouldAutoSelect = shouldAutoSelectRef.current; - const track = addTrackOriginal(name); + const track = addTrackOriginal(name, settings.ui.defaultTrackHeight); if (shouldAutoSelect) { setSelectedTrackId(track.id); shouldAutoSelectRef.current = false; // Only auto-select once } return track; - }, [addTrackOriginal]); + }, [addTrackOriginal, settings.ui.defaultTrackHeight]); // Wrap addTrackFromBuffer to auto-select first track when adding to empty project const addTrackFromBuffer = React.useCallback((buffer: AudioBuffer, name?: string) => { console.log(`[AudioEditor] addTrackFromBuffer wrapper called: ${name}, shouldAutoSelect: ${shouldAutoSelectRef.current}`); const shouldAutoSelect = shouldAutoSelectRef.current; - const track = addTrackFromBufferOriginal(buffer, name); + const track = addTrackFromBufferOriginal(buffer, name, settings.ui.defaultTrackHeight); console.log(`[AudioEditor] Track created: ${track.name} (${track.id})`); if (shouldAutoSelect) { console.log(`[AudioEditor] Auto-selecting track: ${track.id}`); @@ -142,7 +142,7 @@ export function AudioEditor() { shouldAutoSelectRef.current = false; // Only auto-select once } return track; - }, [addTrackFromBufferOriginal]); + }, [addTrackFromBufferOriginal, settings.ui.defaultTrackHeight]); // Track which parameters are being touched (for touch/latch modes) const [touchedParameters, setTouchedParameters] = React.useState>(new Set()); diff --git a/lib/audio/track-utils.ts b/lib/audio/track-utils.ts index 9088717..56feca1 100644 --- a/lib/audio/track-utils.ts +++ b/lib/audio/track-utils.ts @@ -17,7 +17,7 @@ export function generateTrackId(): string { /** * Create a new empty track */ -export function createTrack(name?: string, color?: TrackColor): Track { +export function createTrack(name?: string, color?: TrackColor, height?: number): Track { const colors: TrackColor[] = ['blue', 'green', 'purple', 'orange', 'pink', 'indigo', 'yellow', 'red']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; @@ -30,7 +30,7 @@ export function createTrack(name?: string, color?: TrackColor): Track { id: trackId, name: trackName, color: TRACK_COLORS[color || randomColor], - height: DEFAULT_TRACK_HEIGHT, + height: height ?? DEFAULT_TRACK_HEIGHT, audioBuffer: null, volume: 0.8, pan: 0, @@ -70,11 +70,12 @@ export function createTrack(name?: string, color?: TrackColor): Track { export function createTrackFromBuffer( buffer: AudioBuffer, name?: string, - color?: TrackColor + color?: TrackColor, + height?: number ): Track { // Ensure name is a string before passing to createTrack const trackName = typeof name === 'string' && name.trim() ? name.trim() : undefined; - const track = createTrack(trackName, color); + const track = createTrack(trackName, color, height); track.audioBuffer = buffer; return track; } diff --git a/lib/hooks/useMultiTrack.ts b/lib/hooks/useMultiTrack.ts index 15feb73..0d01b21 100644 --- a/lib/hooks/useMultiTrack.ts +++ b/lib/hooks/useMultiTrack.ts @@ -6,14 +6,14 @@ export function useMultiTrack() { // Note: localStorage persistence disabled in favor of IndexedDB project management const [tracks, setTracks] = useState([]); - const addTrack = useCallback((name?: string) => { - const track = createTrack(name); + const addTrack = useCallback((name?: string, height?: number) => { + const track = createTrack(name, undefined, height); setTracks((prev) => [...prev, track]); return track; }, []); - const addTrackFromBuffer = useCallback((buffer: AudioBuffer, name?: string) => { - const track = createTrackFromBuffer(buffer, name); + const addTrackFromBuffer = useCallback((buffer: AudioBuffer, name?: string, height?: number) => { + const track = createTrackFromBuffer(buffer, name, undefined, height); setTracks((prev) => [...prev, track]); return track; }, []);