- Removed waveformColor from UISettings interface - Removed waveform color picker from Interface settings tab - Preserves dynamic per-track waveform coloring system - Cleaner settings UI with one less option 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
155 lines
3.9 KiB
TypeScript
155 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
export interface AudioSettings {
|
|
bufferSize: number; // 256, 512, 1024, 2048, 4096
|
|
sampleRate: number; // 44100, 48000, 96000
|
|
autoNormalizeOnImport: boolean;
|
|
}
|
|
|
|
export interface UISettings {
|
|
theme: 'dark' | 'light' | 'auto';
|
|
fontSize: 'small' | 'medium' | 'large';
|
|
defaultTrackHeight: number; // 120-400px
|
|
}
|
|
|
|
export interface EditorSettings {
|
|
autoSaveInterval: number; // seconds, 0 = disabled
|
|
undoHistoryLimit: number; // 10-200
|
|
snapToGrid: boolean;
|
|
gridResolution: number; // seconds
|
|
defaultZoom: number; // 1-20
|
|
}
|
|
|
|
export interface PerformanceSettings {
|
|
peakCalculationQuality: 'low' | 'medium' | 'high';
|
|
waveformRenderingQuality: 'low' | 'medium' | 'high';
|
|
enableSpectrogram: boolean;
|
|
maxFileSizeMB: number; // 100-1000
|
|
}
|
|
|
|
export interface Settings {
|
|
audio: AudioSettings;
|
|
ui: UISettings;
|
|
editor: EditorSettings;
|
|
performance: PerformanceSettings;
|
|
}
|
|
|
|
const DEFAULT_SETTINGS: Settings = {
|
|
audio: {
|
|
bufferSize: 2048,
|
|
sampleRate: 48000,
|
|
autoNormalizeOnImport: false,
|
|
},
|
|
ui: {
|
|
theme: 'dark',
|
|
fontSize: 'medium',
|
|
defaultTrackHeight: 400,
|
|
},
|
|
editor: {
|
|
autoSaveInterval: 3, // 3 seconds
|
|
undoHistoryLimit: 50,
|
|
snapToGrid: false,
|
|
gridResolution: 1.0, // 1 second
|
|
defaultZoom: 1,
|
|
},
|
|
performance: {
|
|
peakCalculationQuality: 'high',
|
|
waveformRenderingQuality: 'high',
|
|
enableSpectrogram: true,
|
|
maxFileSizeMB: 500,
|
|
},
|
|
};
|
|
|
|
const SETTINGS_STORAGE_KEY = 'audio-editor-settings';
|
|
|
|
function loadSettings(): Settings {
|
|
if (typeof window === 'undefined') return DEFAULT_SETTINGS;
|
|
|
|
try {
|
|
const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
|
|
if (!stored) return DEFAULT_SETTINGS;
|
|
|
|
const parsed = JSON.parse(stored);
|
|
// Merge with defaults to handle new settings added in updates
|
|
return {
|
|
audio: { ...DEFAULT_SETTINGS.audio, ...parsed.audio },
|
|
ui: { ...DEFAULT_SETTINGS.ui, ...parsed.ui },
|
|
editor: { ...DEFAULT_SETTINGS.editor, ...parsed.editor },
|
|
performance: { ...DEFAULT_SETTINGS.performance, ...parsed.performance },
|
|
};
|
|
} catch (error) {
|
|
console.error('Failed to load settings from localStorage:', error);
|
|
return DEFAULT_SETTINGS;
|
|
}
|
|
}
|
|
|
|
function saveSettings(settings: Settings): void {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
try {
|
|
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
|
|
} catch (error) {
|
|
console.error('Failed to save settings to localStorage:', error);
|
|
}
|
|
}
|
|
|
|
export function useSettings() {
|
|
const [settings, setSettings] = useState<Settings>(loadSettings);
|
|
|
|
// Save to localStorage whenever settings change
|
|
useEffect(() => {
|
|
saveSettings(settings);
|
|
}, [settings]);
|
|
|
|
const updateAudioSettings = useCallback((updates: Partial<AudioSettings>) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
audio: { ...prev.audio, ...updates },
|
|
}));
|
|
}, []);
|
|
|
|
const updateUISettings = useCallback((updates: Partial<UISettings>) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
ui: { ...prev.ui, ...updates },
|
|
}));
|
|
}, []);
|
|
|
|
const updateEditorSettings = useCallback((updates: Partial<EditorSettings>) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
editor: { ...prev.editor, ...updates },
|
|
}));
|
|
}, []);
|
|
|
|
const updatePerformanceSettings = useCallback((updates: Partial<PerformanceSettings>) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
performance: { ...prev.performance, ...updates },
|
|
}));
|
|
}, []);
|
|
|
|
const resetSettings = useCallback(() => {
|
|
setSettings(DEFAULT_SETTINGS);
|
|
}, []);
|
|
|
|
const resetCategory = useCallback((category: keyof Settings) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
[category]: DEFAULT_SETTINGS[category],
|
|
}));
|
|
}, []);
|
|
|
|
return {
|
|
settings,
|
|
updateAudioSettings,
|
|
updateUISettings,
|
|
updateEditorSettings,
|
|
updatePerformanceSettings,
|
|
resetSettings,
|
|
resetCategory,
|
|
};
|
|
}
|