diff --git a/src/App.tsx b/src/App.tsx index 654a234..d3da71d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,14 +18,7 @@ function App() { const activeDsp = dsps.find((d) => d.id === selected) ?? null; const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length; - const dsp408 = useDSP408( - dsps, - setDsps, - selected, - setSelected, - setPage, - notify - ); + const dsp408 = useDSP408(dsps, setDsps, selected, setSelected, setPage, notify); return (
@@ -60,10 +53,7 @@ function App() { ) : page === 'add-dsp' ? ( setPage('home')} onAdd={dsp408.addDSP} /> ) : activeDsp ? ( - + ) : ( setPage('add-dsp')} diff --git a/src/components/dsp408/GainSection/GainSection.tsx b/src/components/dsp408/GainSection/GainSection.tsx index 143f685..925b7a2 100644 --- a/src/components/dsp408/GainSection/GainSection.tsx +++ b/src/components/dsp408/GainSection/GainSection.tsx @@ -1,8 +1,6 @@ import VerticalSlider from '../Slider/VerticalSlider'; -import { invoke } from '@tauri-apps/api/core'; import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State'; import { DSP } from '../../../types/types'; -import { NotificationType } from '../../../types/types'; import Button from '../../Button/Button'; import ChannelGroup from '../ChannelGroup/ChannelGroup'; import { LinearGraph } from '../LinearGraph/LinearGraph'; @@ -12,109 +10,62 @@ import './GainSection.css'; const PANEL_DESIGN_WIDTH = 90; const PANEL_DESIGN_HEIGHT = 400; -function ChannelGroupScaled({ title, children }: { title: string; children: React.ReactNode }) { - const wrapperRef = useRef(null); - const [scale, setScale] = useState(1); +// function ChannelGroupScaled({ title, children }: { title: string; children: React.ReactNode }) { +// const wrapperRef = useRef(null); +// const [scale, setScale] = useState(1); - useEffect(() => { - const el = wrapperRef.current; - if (!el) return; - const observer = new ResizeObserver((entries) => { - const { height } = entries[0].contentRect; - if (height === 0) return; - setScale(height / PANEL_DESIGN_HEIGHT); // height is the only free axis here - }); - observer.observe(el); - return () => observer.disconnect(); - }, []); +// useEffect(() => { +// const el = wrapperRef.current; +// if (!el) return; +// const observer = new ResizeObserver((entries) => { +// const { height } = entries[0].contentRect; +// if (height === 0) return; +// setScale(height / PANEL_DESIGN_HEIGHT); // height is the only free axis here +// }); +// observer.observe(el); +// return () => observer.disconnect(); +// }, []); - return ( -
- {children} -
- ); -} +// return ( +//
+// {children} +//
+// ); +// } function GainPanel({ dsp, - notify, channel, title, + setGain, + setMute, + setInverse, }: { dsp: DSP; - notify: (message: string, type?: NotificationType, dspName?: string) => void; channel: Channel; title: string; + setGain: (channel: Channel, gain: number) => Promise; + setMute: (channel: Channel, muted: boolean) => Promise; + setInverse: (channel: Channel, inverted: boolean) => Promise; }) { - const setGain = async (value: number) => { - try { - const success = await invoke('set_channel_gain', { - id: dsp.id, - channel, - db: value, - }); + const channelState = + 'Input' in channel + ? dsp.state?.current_config.input_states[channel.Input] + : dsp.state?.current_config.output_states[channel.Output]; - if (success) { - notify(`Input A gain set to ${value} dB`, 'success', dsp.name); - } else { - notify('Failed to set input gain', 'error', dsp.name); - } - } catch (err) { - notify(`Gain update failed: ${String(err)}`, 'error', dsp.name); - } - }; + const muted = channelState?.mute ?? false; + const inverted = channelState?.phase_inverted ?? false; + const gain = channelState?.gain ?? 0; - const setMute = async (muted: boolean) => { - try { - const success = await invoke('set_mute', { - id: dsp.id, - channel, - muted, - }); - - if (success) { - notify(`Input A ${muted ? 'muted' : 'unmuted'}`, 'success', dsp.name); - } else { - notify('Failed to change mute state', 'error', dsp.name); - } - } catch (err) { - notify(`Mute update failed: ${String(err)}`, 'error', dsp.name); - } - }; - - const setInverse = async (inverted: boolean) => { - try { - const success = await invoke('set_channel_inverse_gain', { - id: dsp.id, - channel, - inverted, - }); - - if (success) { - notify(`Input A phase ${inverted ? 'inverted' : 'normal'}`, 'success', dsp.name); - } else { - notify('Failed to change phase', 'error', dsp.name); - } - } catch (err) { - notify(`Phase update failed: ${String(err)}`, 'error', dsp.name); - } - }; - - const [muted, setMuted] = useState(false); - const [inverted, setInverted] = useState(false); const viewportRef = useRef(null); const [scale, setScale] = useState(1); const toggleMute = async () => { - const next = !muted; - setMuted(next); - await setMute(next); + await setMute(channel, !muted); }; const toggleInverse = async () => { - const next = !inverted; - setInverted(next); - await setInverse(next); + await setInverse(channel, !inverted); }; useEffect(() => { @@ -148,7 +99,8 @@ function GainPanel({ switchStepValue={-10} switchStep={0.1} unit=" dB" - onChange={setGain} + value={gain} + onChange={(value) => setGain(channel, value)} style={{ width: 70, height: 260, flex: '0 0 auto' }} // pin to design size, disable its own auto-shrink /> @@ -169,10 +121,14 @@ function GainPanel({ function GainSection({ dsp, - notify, + setGain, + setMute, + setInverse, }: { dsp: DSP; - notify: (message: string, type?: NotificationType, dspName?: string) => void; + setGain: (channel: Channel, gain: number) => Promise; + setMute: (channel: Channel, muted: boolean) => Promise; + setInverse: (channel: Channel, inverted: boolean) => Promise; }) { const inputs: { channel: Channel; title: string }[] = [ { channel: { Input: InputChannel.InA }, title: 'In A' }, @@ -223,13 +179,29 @@ function GainSection({
{inputs.map(({ channel, title }) => ( - + ))} {outputs.map(({ channel, title }) => ( - + ))}
diff --git a/src/components/dsp408/GateSection/GateSection.tsx b/src/components/dsp408/GateSection/GateSection.tsx index 46960f8..cc57a10 100644 --- a/src/components/dsp408/GateSection/GateSection.tsx +++ b/src/components/dsp408/GateSection/GateSection.tsx @@ -1,35 +1,35 @@ -import VerticalSlider from '../Slider/VerticalSlider'; -import { invoke } from '@tauri-apps/api/core'; -import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State'; -import { DSP } from '../../../types/types'; -import { NotificationType } from '../../../types/types'; +// import VerticalSlider from '../Slider/VerticalSlider'; +// import { invoke } from '@tauri-apps/api/core'; +// import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State'; +// import { DSP } from '../../../types/types'; +// import { NotificationType } from '../../../types/types'; -import ChannelGroup from '../ChannelGroup/ChannelGroup'; -import './GateSection.css'; +// import ChannelGroup from '../ChannelGroup/ChannelGroup'; +// import './GateSection.css'; -function GateSection({ - dsp, - notify, -}: { - dsp: DSP; - notify: (message: string, type?: NotificationType, dspName?: string) => void; -}) { - console.log(dsp, notify); - return ( -
- { - return; - }} - /> -
- ); -} +// function GateSection({ +// dsp, +// notify, +// }: { +// dsp: DSP; +// notify: (message: string, type?: NotificationType, dspName?: string) => void; +// }) { +// console.log(dsp, notify); +// return ( +//
+// { +// return; +// }} +// /> +//
+// ); +// } -export default GateSection; +// export default GateSection; diff --git a/src/components/dsp408/Slider/VerticalSlider.tsx b/src/components/dsp408/Slider/VerticalSlider.tsx index 7786227..2ffef46 100644 --- a/src/components/dsp408/Slider/VerticalSlider.tsx +++ b/src/components/dsp408/Slider/VerticalSlider.tsx @@ -13,8 +13,8 @@ type VerticalSliderProps = { switchStepValue?: number; switchStep?: number; - value?: number; - onChange?: (value: number) => void; + value: number; + onChange?: (value: number) => Promise; unit?: string; @@ -34,23 +34,18 @@ export default function VerticalSlider({ step, switchStepValue, switchStep, - value: controlledValue, + value, onChange, unit = '', className, style, }: VerticalSliderProps) { - const [internalValue, setInternalValue] = useState(min); - const value = controlledValue ?? internalValue; - const [editingText, setEditingText] = useState(null); const inputRef = useRef(null); const sliderRef = useRef(null); - const lastValue = useRef(value); const keyboardValue = useRef(null); const [displayValue, setDisplayValue] = useState(value); const dragValue = useRef(value); - const rafRef = useRef(null); const dragging = useRef(false); const thumbRef = useRef(null); const keyboardEditing = useRef(false); @@ -74,16 +69,20 @@ export default function VerticalSlider({ }, []); useEffect(() => { + if (dragging.current) return; if (keyboardEditing.current) return; setDisplayValue(value); dragValue.current = value; }, [value]); - const currentStep = - switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue - ? switchStep - : step; + function getStep(value: number) { + if (switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue) { + return switchStep; + } + + return step; + } const decimals = useMemo( () => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0), @@ -92,30 +91,25 @@ export default function VerticalSlider({ function normalizeValue(input: number) { const clamped = Math.min(max, Math.max(min, input)); - const snapped = Math.round(clamped / currentStep) * currentStep; - return Number(snapped.toFixed(6)); + + const currentStep = getStep(clamped); + + const snapped = min + Math.round((clamped - min) / currentStep) * currentStep; + + return Number(Math.min(max, Math.max(min, snapped)).toFixed(6)); } - function updateValue(v: number) { - const next = normalizeValue(v); + function updateValue(input: number) { + const next = normalizeValue(input); + dragValue.current = next; - lastValue.current = next; - - if (thumbRef.current) { - const percent = (next - min) / (max - min); - thumbRef.current.style.bottom = `${percent * 100}%`; - } - - if (rafRef.current === null) { - rafRef.current = requestAnimationFrame(() => { - setDisplayValue(dragValue.current); - rafRef.current = null; - }); - } + setDisplayValue(next); } function handleKeyDown(e: React.KeyboardEvent) { - if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return; + if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { + return; + } keyboardEditing.current = true; @@ -123,33 +117,39 @@ export default function VerticalSlider({ const base = keyboardValue.current ?? value; + const currentStep = getStep(base); + let next = base; - if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next += currentStep; + if (e.key === 'ArrowUp' || e.key === 'ArrowRight') { + next += currentStep; + } - if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next -= currentStep; + if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') { + next -= currentStep; + } next = normalizeValue(next); keyboardValue.current = next; - updateValue(next); // updates displayValue only + updateValue(next); } - function handleKeyUp() { + async function handleKeyUp() { if (keyboardValue.current == null) return; - keyboardEditing.current = false; - const next = keyboardValue.current; - if (controlledValue === undefined) { - setInternalValue(next); - } - - onChange?.(next); + const success = await onChange?.(next); + keyboardEditing.current = false; keyboardValue.current = null; + + if (success === false) { + setDisplayValue(value); + dragValue.current = value; + } } function valueFromPointer(clientY: number) { @@ -172,28 +172,47 @@ export default function VerticalSlider({ valueFromPointer(e.clientY); } - function endDrag(e: React.PointerEvent) { - dragging.current = false; + async function endDrag(e: React.PointerEvent) { + if (!dragging.current) return; + const finalValue = dragValue.current; - if (controlledValue === undefined) setInternalValue(finalValue); - setDisplayValue(finalValue); - onChange?.(finalValue); + const success = await onChange?.(finalValue); + + dragging.current = false; + + if (success === false) { + setDisplayValue(value); + dragValue.current = value; + } if (e.currentTarget.hasPointerCapture(e.pointerId)) { e.currentTarget.releasePointerCapture(e.pointerId); } } - function commitEditing() { + async function commitEditing() { if (editingText !== null && editingText !== '' && editingText !== '-') { const parsed = Number(editingText); - if (!Number.isNaN(parsed)) updateValue(parsed); + + if (!Number.isNaN(parsed)) { + const next = normalizeValue(parsed); + + setDisplayValue(next); + + const success = await onChange?.(next); + + if (success === false) { + setDisplayValue(value); + dragValue.current = value; + } + } } + setEditingText(null); } - const percent = (value - min) / (max - min); + const percent = (displayValue - min) / (max - min); return (
void; +type NotifyFunction = (message: string, type: 'success' | 'error', dspName?: string) => void; type SetDsps = React.Dispatch>; @@ -28,14 +25,8 @@ type SetDsps = React.Dispatch>; // Helpers // ============================================================ -function updateDSP( - setDsps: SetDsps, - dspId: number, - updater: (dsp: DSP) => DSP -) { - setDsps((prev) => - prev.map((dsp) => (dsp.id === dspId ? updater(dsp) : dsp)) - ); +function updateDSP(setDsps: SetDsps, dspId: number, updater: (dsp: DSP) => DSP) { + setDsps((prev) => prev.map((dsp) => (dsp.id === dspId ? updater(dsp) : dsp))); } export type DSP408Device = { @@ -43,6 +34,9 @@ export type DSP408Device = { disconnect: () => Promise; recallPreset: (index: number) => Promise; setCurrentPresetName: (name: string) => Promise; + setGain: (channel: Channel, gain: number) => Promise; + setMute: (channel: Channel, muted: boolean) => Promise; + setInverse: (channel: Channel, inverted: boolean) => Promise; }; // ============================================================ @@ -173,10 +167,7 @@ export function useDSP408( // Generic operation wrapper // ---------------------------------------------------------- - async function withPollingPaused( - dsp: DSP, - operation: () => Promise - ): Promise { + async function withPollingPaused(dsp: DSP, operation: () => Promise): Promise { setPollingPaused(dsp.id, true); try { @@ -216,11 +207,7 @@ export function useDSP408( status: 'disconnected', })); - notify( - `Connection failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Connection failed: ${String(err)}`, 'error', dsp.name); } finally { setPollingPaused(dsp.id, false); } @@ -242,11 +229,7 @@ export function useDSP408( // If disconnect failed, it is probably still connected. setPollingPaused(dsp.id, false); - notify( - `Disconnect failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Disconnect failed: ${String(err)}`, 'error', dsp.name); } } @@ -254,18 +237,9 @@ export function useDSP408( // Add / Remove // ========================================================== - async function addDSP( - dsp: Omit< - DSP, - 'id' | 'status' | 'state' | 'meters' | 'pollingPaused' - > - ) { + async function addDSP(dsp: Omit) { try { - const id = await createDSP408( - dsp.ip, - dsp.port, - dsp.deviceId - ); + const id = await createDSP408(dsp.ip, dsp.port, dsp.deviceId); const newDsp: DSP = { id, @@ -282,11 +256,7 @@ export function useDSP408( notify('Added successfully', 'success', dsp.name); } catch (err) { - notify( - `Connection failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Connection failed: ${String(err)}`, 'error', dsp.name); } } @@ -297,32 +267,20 @@ export function useDSP408( await removeDSP408(dsp.id); setDsps((prev) => { - const next = prev.filter( - (d) => d.id !== dsp.id - ); + const next = prev.filter((d) => d.id !== dsp.id); if (selected === dsp.id) { - setSelected( - next.length ? next[0].id : null - ); + setSelected(next.length ? next[0].id : null); } return next; }); - notify( - 'Removed successfully', - 'success', - dsp.name - ); + notify('Removed successfully', 'success', dsp.name); } catch (err) { setPollingPaused(dsp.id, false); - notify( - `Remove failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Remove failed: ${String(err)}`, 'error', dsp.name); } } @@ -330,23 +288,13 @@ export function useDSP408( // Presets // ========================================================== - async function recallPreset( - dsp: DSP, - presetIndex: number - ) { + async function recallPreset(dsp: DSP, presetIndex: number) { return withPollingPaused(dsp, async () => { try { - const success = await recallPresetDSP408( - dsp.id, - presetIndex - ); + const success = await recallPresetDSP408(dsp.id, presetIndex); if (!success) { - notify( - 'Failed to recall preset', - 'error', - dsp.name - ); + notify('Failed to recall preset', 'error', dsp.name); return false; } @@ -366,47 +314,26 @@ export function useDSP408( }; }); - notify( - `Preset ${presetIndex} recalled`, - 'success', - dsp.name - ); + notify(`Preset ${presetIndex} recalled`, 'success', dsp.name); return true; } catch (err) { - notify( - `Preset recall failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Preset recall failed: ${String(err)}`, 'error', dsp.name); return false; } }); } - async function setCurrentPresetName( - dsp: DSP, - name: string - ) { + async function setCurrentPresetName(dsp: DSP, name: string) { return withPollingPaused(dsp, async () => { try { - const paddedName = name - .slice(0, 14) - .padEnd(14, ' '); + const paddedName = name.slice(0, 14).padEnd(14, ' '); - const success = - await DSP408SetCurrentPresetName( - dsp.id, - paddedName - ); + const success = await DSP408SetCurrentPresetName(dsp.id, paddedName); if (!success) { - notify( - 'Failed to rename preset', - 'error', - dsp.name - ); + notify('Failed to rename preset', 'error', dsp.name); return false; } @@ -423,36 +350,20 @@ export function useDSP408( ...d.state, presets: { ...presets, - names: presets.names.map( - (presetName, i) => - i === index - ? paddedName - : presetName - ), - modified: presets.modified.map( - (modified, i) => - i === index - ? true - : modified + names: presets.names.map((presetName, i) => + i === index ? paddedName : presetName ), + modified: presets.modified.map((modified, i) => (i === index ? true : modified)), }, }, }; }); - notify( - 'Preset renamed', - 'success', - dsp.name - ); + notify('Preset renamed', 'success', dsp.name); return true; } catch (err) { - notify( - `Preset rename failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Preset rename failed: ${String(err)}`, 'error', dsp.name); return false; } @@ -463,28 +374,54 @@ export function useDSP408( // Gain // ========================================================== - async function setGain( - dsp: DSP, - channel: number, - gain: number - ) { + async function setGain(dsp: DSP, channel: Channel, gain: number): Promise { return withPollingPaused(dsp, async () => { try { - const success = await invoke( - 'set_gain', - { - id: dsp.id, - channel, - gain, - } - ); + const success = await invoke('set_channel_gain', { + id: dsp.id, + channel, + db: gain, + }); if (!success) { - notify( - 'Failed to set gain', - 'error', - dsp.name - ); + notify('Failed to set gain', 'error', dsp.name); + + return false; + } + + const state = await getDSP408State(dsp.id); + + updateDSP(setDsps, dsp.id, (d) => ({ + ...d, + state, + })); + + notify('Gain updated', 'success', dsp.name); + + return true; + } catch (err) { + notify(`Gain update failed: ${String(err)}`, 'error', dsp.name); + + return false; + } + }); + } + + // ========================================================== + // Mute + // ========================================================== + + async function setMute(dsp: DSP, channel: Channel, muted: boolean): Promise { + return withPollingPaused(dsp, async () => { + try { + const success = await invoke('set_mute', { + id: dsp.id, + channel, + muted, + }); + + if (!success) { + notify('Failed to change mute state', 'error', dsp.name); return false; } @@ -492,28 +429,130 @@ export function useDSP408( updateDSP(setDsps, dsp.id, (d) => { if (!d.state) return d; + const currentConfig = d.state.current_config; + + if ('Input' in channel) { + const inputChannel = channel.Input; + + return { + ...d, + state: { + ...d.state, + current_config: { + ...currentConfig, + input_states: { + ...currentConfig.input_states, + [inputChannel]: { + ...currentConfig.input_states[inputChannel], + mute: muted, + }, + }, + }, + }, + }; + } + + const outputChannel = channel.Output; + return { ...d, state: { ...d.state, - // Update gain state here + current_config: { + ...currentConfig, + output_states: { + ...currentConfig.output_states, + [outputChannel]: { + ...currentConfig.output_states[outputChannel], + mute: muted, + }, + }, + }, }, }; }); - notify( - 'Gain updated', - 'success', - dsp.name - ); + notify(muted ? 'Muted' : 'Unmuted', 'success', dsp.name); return true; } catch (err) { - notify( - `Gain update failed: ${String(err)}`, - 'error', - dsp.name - ); + notify(`Mute update failed: ${String(err)}`, 'error', dsp.name); + + return false; + } + }); + } + + // ========================================================== + // Inverse + // ========================================================== + + async function setInverse(dsp: DSP, channel: Channel, inverted: boolean): Promise { + return withPollingPaused(dsp, async () => { + try { + const success = await invoke('set_channel_inverse_gain', { + id: dsp.id, + channel, + inverted, + }); + + if (!success) { + notify('Failed to change phase', 'error', dsp.name); + + return false; + } + + updateDSP(setDsps, dsp.id, (d) => { + if (!d.state) return d; + + const currentConfig = d.state.current_config; + + if ('Input' in channel) { + const inputChannel = channel.Input; + + return { + ...d, + state: { + ...d.state, + current_config: { + ...currentConfig, + input_states: { + ...currentConfig.input_states, + [inputChannel]: { + ...currentConfig.input_states[inputChannel], + phase_inverted: inverted, + }, + }, + }, + }, + }; + } + + const outputChannel = channel.Output; + + return { + ...d, + state: { + ...d.state, + current_config: { + ...currentConfig, + output_states: { + ...currentConfig.output_states, + [outputChannel]: { + ...currentConfig.output_states[outputChannel], + phase_inverted: inverted, + }, + }, + }, + }, + }; + }); + + notify(inverted ? 'Phase inverted' : 'Phase normal', 'success', dsp.name); + + return true; + } catch (err) { + notify(`Phase update failed: ${String(err)}`, 'error', dsp.name); return false; } @@ -526,15 +565,15 @@ export function useDSP408( function forDSP(dsp: DSP): DSP408Device { return { - connect: () => connectDSP(dsp), - disconnect: () => disconnectDSP(dsp), - recallPreset: (index: number) => recallPreset(dsp, index), - setCurrentPresetName: (name: string) => - setCurrentPresetName(dsp, name), - // setGain: (channel, gain) => - // setGain(dsp, channel, gain), - }; - } + connect: () => connectDSP(dsp), + disconnect: () => disconnectDSP(dsp), + recallPreset: (index: number) => recallPreset(dsp, index), + setCurrentPresetName: (name: string) => setCurrentPresetName(dsp, name), + setGain: (channel: Channel, gain: number) => setGain(dsp, channel, gain), + setMute: (channel: Channel, muted: boolean) => setMute(dsp, channel, muted), + setInverse: (channel: Channel, inverted: boolean) => setInverse(dsp, channel, inverted), + }; + } return { forDSP, @@ -550,4 +589,4 @@ export function useDSP408( setGain, }; -} \ No newline at end of file +} diff --git a/src/pages/DspPage/DspPage.tsx b/src/pages/DspPage/DspPage.tsx index b2973b4..27096aa 100644 --- a/src/pages/DspPage/DspPage.tsx +++ b/src/pages/DspPage/DspPage.tsx @@ -6,17 +6,11 @@ import ConnectionPanel from '../../components/dsp408/ConnectionSection/Connectio import GainSection from '../../components/dsp408/GainSection/GainSection'; import { DSP408Device } from '../../hooks/useDSP408'; import './DspPage.css'; -import GateSection from '../../components/dsp408/GateSection/GateSection'; +// import GateSection from '../../components/dsp408/GateSection/GateSection'; import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay'; import { InputChannel, OutputChannel } from '../../types/dsp408State'; -function DSPPage({ - dsp, - dsp408, -}: { - dsp: DSP; - dsp408: DSP408Device; -}) { +function DSPPage({ dsp, dsp408 }: { dsp: DSP; dsp408: DSP408Device }) { const [activeSidebar, setActiveSidebar] = useState('overview'); const [sidebarExpanded, setSidebarExpanded] = useState(false); const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0); @@ -170,10 +164,19 @@ function DSPPage({ const renderTab = () => { switch (activeSidebar) { case 'overview': - return ; + return ( + + ); - // case 'gain': - // return ; + case 'gain': + return ( + + ); // case 'gate': // return ;