feat: apply enableSpectrogram and sampleRate settings to editor
Applied performance and audio settings to actual editor behavior: - enableSpectrogram: conditionally show/hide spectrogram analyzer option - sampleRate: sync recording sample rate with global audio settings Changes: - Switch analyzer view away from spectrogram when setting is disabled - Adjust analyzer toggle grid columns based on spectrogram visibility - Sync recording hook's sampleRate with global settings via useEffect 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -76,6 +76,13 @@ export function AudioEditor() {
|
||||
const [exportDialogOpen, setExportDialogOpen] = React.useState(false);
|
||||
const [isExporting, setIsExporting] = React.useState(false);
|
||||
const [analyzerView, setAnalyzerView] = React.useState<'frequency' | 'spectrogram' | 'phase' | 'lufs' | 'stats'>('frequency');
|
||||
|
||||
// Switch away from spectrogram if it gets disabled
|
||||
React.useEffect(() => {
|
||||
if (analyzerView === 'spectrogram' && !settings.performance.enableSpectrogram) {
|
||||
setAnalyzerView('frequency');
|
||||
}
|
||||
}, [analyzerView, settings.performance.enableSpectrogram]);
|
||||
const [projectsDialogOpen, setProjectsDialogOpen] = React.useState(false);
|
||||
const [projects, setProjects] = React.useState<ProjectMetadata[]>([]);
|
||||
const [currentProjectId, setCurrentProjectId] = React.useState<string | null>(null);
|
||||
@@ -100,6 +107,11 @@ export function AudioEditor() {
|
||||
setSampleRate,
|
||||
} = useRecording();
|
||||
|
||||
// Sync recording sample rate with global settings
|
||||
React.useEffect(() => {
|
||||
setSampleRate(settings.audio.sampleRate);
|
||||
}, [settings.audio.sampleRate, setSampleRate]);
|
||||
|
||||
// Multi-track hooks
|
||||
const {
|
||||
tracks,
|
||||
@@ -1606,7 +1618,7 @@ export function AudioEditor() {
|
||||
</div>
|
||||
|
||||
{/* Analyzer Toggle */}
|
||||
<div className="grid grid-cols-5 gap-0.5 bg-muted/20 border border-border/50 rounded-md p-0.5 max-w-[192px] mx-auto">
|
||||
<div className={`grid ${settings.performance.enableSpectrogram ? 'grid-cols-5' : 'grid-cols-4'} gap-0.5 bg-muted/20 border border-border/50 rounded-md p-0.5 max-w-[192px] mx-auto`}>
|
||||
<button
|
||||
onClick={() => setAnalyzerView('frequency')}
|
||||
className={`px-1 py-1 rounded text-[9px] font-bold uppercase tracking-wider transition-all ${
|
||||
@@ -1618,17 +1630,19 @@ export function AudioEditor() {
|
||||
>
|
||||
FFT
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setAnalyzerView('spectrogram')}
|
||||
className={`px-1 py-1 rounded text-[9px] font-bold uppercase tracking-wider transition-all ${
|
||||
analyzerView === 'spectrogram'
|
||||
? 'bg-accent text-accent-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
title="Spectrogram"
|
||||
>
|
||||
SPEC
|
||||
</button>
|
||||
{settings.performance.enableSpectrogram && (
|
||||
<button
|
||||
onClick={() => setAnalyzerView('spectrogram')}
|
||||
className={`px-1 py-1 rounded text-[9px] font-bold uppercase tracking-wider transition-all ${
|
||||
analyzerView === 'spectrogram'
|
||||
? 'bg-accent text-accent-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
title="Spectrogram"
|
||||
>
|
||||
SPEC
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setAnalyzerView('phase')}
|
||||
className={`px-1 py-1 rounded text-[9px] font-bold uppercase tracking-wider transition-all ${
|
||||
@@ -1668,7 +1682,7 @@ export function AudioEditor() {
|
||||
<div className="flex-1 min-h-[360px] flex items-start justify-center">
|
||||
<div className="w-[178px]">
|
||||
{analyzerView === 'frequency' && <FrequencyAnalyzer analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'spectrogram' && <Spectrogram analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'spectrogram' && settings.performance.enableSpectrogram && <Spectrogram analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'phase' && <PhaseCorrelationMeter analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'lufs' && <LUFSMeter analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'stats' && <AudioStatistics tracks={tracks} />}
|
||||
|
||||
Reference in New Issue
Block a user