feat: add gain responsive

src/components/dsp408/GainSection/GainSection.tsx

@@ -0,0 +1,155 @@
+import VerticalStack from '../../VerticalStack/VerticalStack';
+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 { useState } from 'react';
+import Button from '../../Button/Button';
+import './GainSection.css';
+
+function GainPanel({
+  dsp,
+  notify,
+  channel,
+  title,
+}: {
+  dsp: DSP;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+  channel: Channel;
+  title: string;
+}) {
+  const setGain = async (value: number) => {
+    try {
+      const success = await invoke<boolean>('set_channel_gain', {
+        id: dsp.id,
+        channel,
+        db: value,
+      });
+
+      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 setMute = async (muted: boolean) => {
+    try {
+      const success = await invoke<boolean>('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<boolean>('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 toggleMute = async () => {
+    const next = !muted;
+    setMuted(next);
+    await setMute(next);
+  };
+
+  const toggleInverse = async () => {
+    const next = !inverted;
+    setInverted(next);
+    await setInverse(next);
+  };
+
+  return (
+    <VerticalStack title={title}>
+      <VerticalSlider
+        min={-60}
+        max={12}
+        step={0.5}
+        switchStepValue={-10}
+        switchStep={0.1}
+        unit=" dB"
+        onChange={setGain}
+      />
+      {/* <Button
+        variant="toggle"
+        className={muted ? "active-danger" : ""}
+        onClick={toggleMute}  
+      >
+        {muted ? "Muted" : "Mute"}
+      </Button>
+
+      <Button
+        variant="toggle"
+        className={inverted ? "active-warning" : ""}
+        onClick={toggleInverse}
+      >
+        {inverted ? "Inverted" : "Invert"}
+      </Button> */}
+    </VerticalStack>
+  );
+}
+
+function GainSection({
+  dsp,
+  notify,
+}: {
+  dsp: DSP;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+}) {
+  const channels: { channel: Channel; title: string }[] = [
+    { channel: { Input: InputChannel.InA }, title: 'In A' },
+    { channel: { Input: InputChannel.InB }, title: 'In B' },
+    { channel: { Input: InputChannel.InC }, title: 'In C' },
+    { channel: { Input: InputChannel.InD }, title: 'In D' },
+
+    { channel: { Output: OutputChannel.Out1 }, title: "Out 1" },
+    { channel: { Output: OutputChannel.Out2 }, title: "Out 2" },
+    { channel: { Output: OutputChannel.Out3 }, title: "Out 3" },
+    { channel: { Output: OutputChannel.Out4 }, title: "Out 4" },
+    { channel: { Output: OutputChannel.Out5 }, title: "Out 5" },
+    { channel: { Output: OutputChannel.Out6 }, title: "Out 6" },
+    { channel: { Output: OutputChannel.Out7 }, title: "Out 7" },
+    { channel: { Output: OutputChannel.Out8 }, title: "Out 8" },
+  ];
+
+  return (
+    <div className="gain-section">
+      <div className="gain-panels">
+        {channels.map(({ channel, title }) => (
+          <GainPanel key={title} dsp={dsp} notify={notify} channel={channel} title={title} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default GainSection;