react-knob-headless

package.json

@@ -11,6 +11,7 @@
     "upgrade": "npm i $(npm outdated | cut -d' ' -f 1 | sed '1d' | xargs -I '$' echo '$@latest' | xargs echo) --save-exact"
   },
   "dependencies": {
+    "@dsp-ts/math": "0.1.0",
     "@elemaudio/core": "2.1.0",
     "@elemaudio/web-renderer": "2.1.0",
     "@radix-ui/react-icons": "1.3.0",
@@ -19,6 +20,7 @@
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-knob-headless": "0.1.1",
     "webmidi": "3.1.6"
   },
   "devDependencies": {

src/components/pages/SynthPage/SynthPage.tsx

@@ -2,21 +2,17 @@
 import {useCallback, useEffect, useRef, useState} from 'react';
 import WebAudioRenderer from '@elemaudio/web-renderer';
 import {el} from '@elemaudio/core';
+import {clamp, mapTo01Linear} from '@dsp-ts/math';
 import resolveConfig from 'tailwindcss/resolveConfig';
 import tailwindConfig from '@/../tailwind.config';
-import {
-  LinearSmoothedValueRealtime,
-  clamp,
-  dbMin,
-  gainToDecibels,
-  mapTo01Linear,
-} from '@/utils/math';
+import {LinearSmoothedValueRealtime, dbMin, gainToDecibels} from '@/utils/math';
 import {midiNoteToFreq} from '@/utils/math/midi';
 import {keyCodes} from '@/constants/key-codes';
 import {useElConst} from '@/components/hooks/useElConst';
 import {useElConstBool} from '@/components/hooks/useElConstBool';
 import {Meter} from '@/components/ui/Meter';
 import {KnobPercentage} from '@/components/ui/KnobPercentage';
+import {KnobPercentage as KnobPercentageV2} from '@/components/ui/v2/KnobPercentage';
 import {KnobAdr} from '@/components/ui/KnobAdr';
 import {KnobFrequency} from '@/components/ui/KnobFrequency';
 import {InteractionArea} from '@/components/ui/InteractionArea';
@@ -241,10 +237,9 @@ function SynthPageMain({ctx, core}: SynthPageMainProps) {
               void renderAudio();
             }}
           />
-          <KnobInput
-            title='Sustain'
-            kind='percentage'
-            defaultValue={sustainDefault}
+          <KnobPercentageV2Wrapped
+            label='Sustain'
+            valueDefault={sustainDefault}
             onChange={(newValue) => {
               sustainConst.update(newValue);
               void renderAudio();
@@ -319,6 +314,27 @@ const resolveKnobComponent = (kind: KnobInputKind) => {
   }
 };
 
+type KnobPercentageV2Props = React.ComponentProps<typeof KnobPercentageV2>;
+type KnobPercentageV2WrappedProps = Omit<KnobPercentageV2Props, 'value'>;
+function KnobPercentageV2Wrapped({
+  label,
+  valueDefault,
+  onChange,
+}: KnobPercentageV2WrappedProps) {
+  const [value, setValue] = useState(valueDefault);
+  return (
+    <KnobPercentageV2
+      label={label}
+      value={value}
+      valueDefault={valueDefault}
+      onChange={(newValue) => {
+        setValue(newValue);
+        onChange(newValue);
+      }}
+    />
+  );
+}
+
 const useMeter = ({
   core,
   meterRef,

src/components/ui/Knob.tsx

@@ -1,9 +1,10 @@
 import {keyCodes} from '@/constants/key-codes';
 import {isNumberKey} from '@/utils/keyboard';
-import {clamp, clamp01, mapFrom01Linear, mapTo01Linear} from '@/utils/math';
 import {useDrag} from '@use-gesture/react';
 import clsx from 'clsx';
 import {useEffect, useId, useRef, useState} from 'react';
+import {KnobHeadless} from 'react-knob-headless';
+import {clamp, clamp01, mapFrom01Linear, mapTo01Linear} from '@dsp-ts/math';
 
 export type KnobProps = {
   isLarge?: boolean;