main mixer finally makes sense

Author: codenickycode

src/App/Sequencer/MainSection/Mixer/MainMixer.js

@@ -1,24 +1,31 @@
-import { mainBus } from 'App/Tone';
 import { Portal } from 'App/shared/Portal';
 import { useTouchAndMouse } from 'hooks/useTouchAndMouse';
 import { Knob } from './Knob';
-import { useRotaryKnob } from 'hooks/useRotaryKnob';
-import { useEffect, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from 'App/shared/Button';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  MAIN_MIXER_PROPERTIES,
+  adjustMainMixer,
+  adjustMainMixerWarp,
+  resetMainMixerProperty,
+  resetMainMixerWarp,
+} from 'App/reducers/sequenceSlice';
 
 export const MainMixer = () => {
+  const mainMixer = useSelector((state) => state.sequence.present.mainMixer);
   return (
     <Portal targetId='overGridPortal'>
       <div id='mixer' className='mixer'>
         <div className='mixItemWrapper main'>
-          {Object.entries(mainBus.mixer).map(([property, node], i) => {
-            const currentVal = node.getVal();
+          {Object.entries(mainMixer).map(([property, value]) => {
+            const properties = MAIN_MIXER_PROPERTIES[property];
             return (
               <RotaryKnob
-                key={`rotaryKnob${i}`}
+                key={`${property}mainMixer`}
                 property={property}
-                node={node}
-                currentVal={currentVal}
+                value={value}
+                properties={properties}
               />
             );
           })}
@@ -28,25 +35,45 @@ export const MainMixer = () => {
   );
 };
 
-const RotaryKnob = ({ property, node, currentVal }) => {
-  const { value, reset, startFunc, moveFunc, endFunc } = useRotaryKnob(currentVal, node);
+const RotaryKnob = ({ property, value, properties }) => {
+  const dispatch = useDispatch();
+
+  const adjustMixer = useCallback(
+    (amount) => {
+      if (property === 'warp') dispatch(adjustMainMixerWarp(amount));
+      else dispatch(adjustMainMixer({ property, amount }));
+    },
+    [dispatch, property]
+  );
+
   const [editing, setEditing] = useState(false);
 
-  const handleStart = (e) => {
+  const prevYRef = useRef(null);
+
+  const startFunc = useCallback((e) => {
     setEditing(true);
-    startFunc(e);
-  };
+    prevYRef.current = getY(e);
+  }, []);
 
-  const handleEnd = (e) => {
-    setEditing(false);
-    endFunc(e);
+  const moveFunc = (e) => {
+    const newY = getY(e);
+    let amount = getKnobAmount(newY, prevYRef.current);
+    adjustMixer(amount);
+    prevYRef.current = newY;
   };
 
-  const touchAndMouse = useTouchAndMouse(handleStart, moveFunc, handleEnd);
+  const reset = useCallback(() => {
+    if (property === 'warp') dispatch(resetMainMixerWarp());
+    else dispatch(resetMainMixerProperty(property));
+  }, [dispatch, property]);
 
-  useEffect(() => {
-    node.setVal(value);
-  }, [node, value]);
+  const endFunc = useCallback(() => {
+    setEditing(false);
+    if (properties.snapback) setTimeout(reset, 0);
+    prevYRef.current = null;
+  }, [properties.snapback, reset]);
+
+  const touchAndMouse = useTouchAndMouse(startFunc, moveFunc, endFunc);
 
   const id = `mainMixItem${property}`;
   const knobId = `${id}Knob`;
@@ -57,10 +84,26 @@ const RotaryKnob = ({ property, node, currentVal }) => {
       <p className='mixItemName'>{property}</p>
       <div className='mixProperties main'>
         <Knob value={value} id={knobId} {...touchAndMouse} onDoubleClick={reset} />
-        <Button disabled={node.snapback} classes='reset' onClick={reset}>
+        <Button
+          disabled={properties.snapback || value === properties.initialValue}
+          classes='reset'
+          onClick={reset}
+        >
           reset
         </Button>
       </div>
     </div>
   );
 };
+
+const getY = (e) => {
+  let y;
+  if (e.touches) y = e.touches[0].clientY;
+  else y = e.clientY;
+  return y;
+};
+
+const getKnobAmount = (newY, prevY) => {
+  let amount = prevY - newY;
+  return amount;
+};

src/App/Sequencer/MainSection/Mixer/MainMixer.js.old

@@ -0,0 +1,66 @@
+import { mainBus } from 'App/Tone';
+import { Portal } from 'App/shared/Portal';
+import { useTouchAndMouse } from 'hooks/useTouchAndMouse';
+import { Knob } from './Knob';
+import { useRotaryKnob } from 'hooks/useRotaryKnob';
+import { useEffect, useState } from 'react';
+import { Button } from 'App/shared/Button';
+
+export const MainMixer = () => {
+  return (
+    <Portal targetId='overGridPortal'>
+      <div id='mixer' className='mixer'>
+        <div className='mixItemWrapper main'>
+          {Object.entries(mainBus.mixer).map(([property, node], i) => {
+            const currentVal = node.getRotaryVal();
+            return (
+              <RotaryKnob
+                key={`rotaryKnob${i}`}
+                property={property}
+                node={node}
+                currentVal={currentVal}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </Portal>
+  );
+};
+
+const RotaryKnob = ({ property, node, currentVal }) => {
+  const { value, reset, startFunc, moveFunc, endFunc } = useRotaryKnob(currentVal, node);
+  const [editing, setEditing] = useState(false);
+
+  const handleStart = (e) => {
+    setEditing(true);
+    startFunc(e);
+  };
+
+  const handleEnd = (e) => {
+    setEditing(false);
+    endFunc(e);
+  };
+
+  const touchAndMouse = useTouchAndMouse(handleStart, moveFunc, handleEnd);
+
+  useEffect(() => {
+    node.setValFromRotary(value);
+  }, [node, value]);
+
+  const id = `mainMixItem${property}`;
+  const knobId = `${id}Knob`;
+  let containerClass = 'mixItem';
+  if (editing) containerClass += ' editing';
+  return (
+    <div id={id} className={containerClass}>
+      <p className='mixItemName'>{property}</p>
+      <div className='mixProperties main'>
+        <Knob value={value} id={knobId} {...touchAndMouse} onDoubleClick={reset} />
+        <Button disabled={node.snapback} classes='reset' onClick={reset}>
+          reset
+        </Button>
+      </div>
+    </div>
+  );
+};

src/App/Sequencer/MainSection/Mixer/SampleMixer.js

@@ -28,8 +28,16 @@ const MixSample = ({ i }) => {
     <div className='mixItem'>
       <p className='mixItemName'>{sample.name}</p>
       <div id={id} className='mixProperties'>
-        <MixItemProperty property='vol' sample={sample} currentVal={sample.vol.getVal()} />
-        <MixItemProperty property='pan' sample={sample} currentVal={sample.pan.getVal()} />
+        <MixItemProperty
+          property='vol'
+          sample={sample}
+          currentVal={sample.vol.getRotaryVal()}
+        />
+        <MixItemProperty
+          property='pan'
+          sample={sample}
+          currentVal={sample.pan.getRotaryVal()}
+        />
         <div className={`mixItemBorder border${i}`} />
       </div>
     </div>
@@ -41,7 +49,7 @@ const MixItemProperty = ({ property, sample, currentVal }) => {
   const touchAndMouse = useTouchAndMouse(startFunc, moveFunc, endFunc);
 
   useEffect(() => {
-    sample[property].setVal(value);
+    sample[property].setValFromRotary(value);
   }, [property, sample, value]);
 
   let formattedValue = property === 'pan' ? formatPan(value) : parseInt(value);

src/App/Subscriptions/Mixer.js

@@ -0,0 +1,37 @@
+import { mainBus } from 'App/Tone';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+export const Mixer = () => {
+  const mainVolume = useSelector((state) => state.sequence.present.mainMixer.volume);
+  useEffect(() => {
+    mainBus.mixer.volume.setValFromRotary(mainVolume);
+  }, [mainVolume]);
+
+  const reverb = useSelector((state) => state.sequence.present.mainMixer.reverb);
+  useEffect(() => {
+    mainBus.mixer.reverb.setValFromRotary(reverb);
+  }, [reverb]);
+
+  const filter = useSelector((state) => state.sequence.present.mainMixer.filter);
+  useEffect(() => {
+    mainBus.mixer.filter.setValFromRotary(filter);
+  }, [filter]);
+
+  const warp = useSelector((state) => state.sequence.present.mainMixer.warp);
+  useEffect(() => {
+    mainBus.mixer.warp.setValFromRotary(warp);
+  }, [warp]);
+
+  const crush = useSelector((state) => state.sequence.present.mainMixer.crush);
+  useEffect(() => {
+    mainBus.mixer.crush.setValFromRotary(crush);
+  }, [crush]);
+
+  const distort = useSelector((state) => state.sequence.present.mainMixer.distort);
+  useEffect(() => {
+    mainBus.mixer.distort.setValFromRotary(distort);
+  }, [distort]);
+
+  return null;
+};

src/App/Subscriptions/Storage.js

@@ -19,28 +19,36 @@ export const Storage = () => {
   const sequence = useSelector((state) => state.sequence.present);
 
   useEffect(() => {
-    setLS('sequenceId', sequence._id);
+    setSS('sequenceId', sequence._id);
   }, [sequence._id]);
 
   useEffect(() => {
-    setLS('sequenceName', sequence.name);
+    setSS('sequenceName', sequence.name);
   }, [sequence.name]);
 
   useEffect(() => {
-    setLS('sequenceBpm', sequence.bpm);
+    setSS('sequenceBpm', sequence.bpm);
   }, [sequence.bpm]);
 
   useEffect(() => {
-    setLS('sequenceLength', sequence.length);
+    setSS('sequenceLength', sequence.length);
   }, [sequence.length]);
 
   useEffect(() => {
-    setLS('sequencePattern', sequence.pattern);
+    setSS('sequencePattern', sequence.pattern);
   }, [sequence.pattern]);
 
   useEffect(() => {
-    setLS('sequenceKitName', sequence.kit);
+    setSS('sequenceKitName', sequence.kit);
   }, [sequence.kit]);
 
+  useEffect(() => {
+    setSS('mainMixer', sequence.mainMixer);
+  }, [sequence.mainMixer]);
+
+  useEffect(() => {
+    setSS('sampleMixer', sequence.sampleMixer);
+  }, [sequence.sampleMixer]);
+
   return null;
 };

src/App/Subscriptions/index.js

@@ -3,6 +3,7 @@ import { GetUser } from './GetUser';
 import { Storage } from './Storage';
 import { Display } from './Display';
 import { Transport } from './Transport';
+import { Mixer } from './Mixer';
 
 export const Subscriptions = () => {
   return (
@@ -12,6 +13,7 @@ export const Subscriptions = () => {
       <Storage />
       <Transport />
       <Display />
+      <Mixer />
     </>
   );
 };