From 70ccfe7ee17d641039d00956d98344be8d1fb029 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Fri, 20 Nov 2020 04:02:42 -0500
Subject: [PATCH] add Vocoder Components

---
 src/App.js                                    |   8 +-
 .../helpers/{index.css => rcSelectTheme.css}  |   0
 src/features/timbre/Timbre.js                 |   2 +-
 src/features/timbre/Vocoder.js                | 113 +++++++++++++++++-
 src/features/timbre/parameters/Amp.js         |  64 ++++++++++
 src/features/timbre/parameters/Filter.js      |  95 +++++++++++++++
 src/features/timbre/parameters/VCO.js         |  70 ++++++++++-
 .../timbre/parameters/parameterSlice.js       |  97 +++++++++++++--
 src/features/timbre/timbreSlice.js            |  13 ++
 9 files changed, 447 insertions(+), 15 deletions(-)
 rename src/features/helpers/{index.css => rcSelectTheme.css} (100%)

diff --git a/src/App.js b/src/App.js
index 4269812..f3a334a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,15 @@
 import React from 'react';
-import { Timbre } from './features/timbre/Timbre';
+import Timbre from './features/timbre/Timbre';
+import Vocoder from './features/timbre/Vocoder';
 import './App.css';
 
 function App() {
     return (
         <div className="App">
             <header className="App-header">
-                <Timbre id="timbre1" />
-                {/*<Timbre id="timbre2" />*/}
+                {/*<Timbre id="timbre1" />
+                <Timbre id="timbre2" />*/}
+                <Vocoder id="vocoder" />
             </header>
         </div>
     );
diff --git a/src/features/helpers/index.css b/src/features/helpers/rcSelectTheme.css
similarity index 100%
rename from src/features/helpers/index.css
rename to src/features/helpers/rcSelectTheme.css
diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 438f73a..bc8a2f6 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -20,7 +20,7 @@ const lineBreak = {
     width: '100%',
 };
 
-export function Timbre(props) {
+export default function Timbre(props) {
     const ids = useSelector((state) => selectById(state, props.id));
     return (
         <div style={timbreStyle}>
diff --git a/src/features/timbre/Vocoder.js b/src/features/timbre/Vocoder.js
index e87a71e..ee3f82b 100644
--- a/src/features/timbre/Vocoder.js
+++ b/src/features/timbre/Vocoder.js
@@ -1,8 +1,119 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { selectById } from './timbreSlice';
+import VCO, { AudioIn } from './parameters/VCO';
+import Mixer from './parameters/Mixer';
+import Pitch from './parameters/Pitch';
+import EG from './parameters/EG';
+import LFO from './parameters/LFO';
+import { VocoderFilter, FCMod } from './parameters/Filter';
+import { VocoderAmp } from './parameters/Amp';
+
+const timbreStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'center',
+};
+
+const lineBreak = {
+    width: '100%',
+};
 
 export default function Vocoder(props) {
     const ids = useSelector((state) => selectById(state, props.id));
-    return <div></div>;
+    return (
+        <div style={timbreStyle}>
+            <VCO
+                id={ids.vco}
+                waveforms={[
+                    { value: 'Saw' },
+                    { value: 'Square' },
+                    { value: 'Triangle' },
+                    { value: 'Sine' },
+                    { value: 'Vox Wave' },
+                    { value: 'DWGS' },
+                    { value: 'Noise' },
+                    { value: 'Audio In' },
+                ]}
+                dwgsOrModTypeName="DWGS"
+                dwgsOrModType={[
+                    { value: 'SynSine1' },
+                    { value: 'SynSine2' },
+                    { value: 'SynSine3' },
+                    { value: 'SynSine4' },
+                    { value: 'SynSine5' },
+                    { value: 'SynSine6' },
+                    { value: 'SynSine7' },
+                    { value: 'SynBass1' },
+                    { value: 'SynBass2' },
+                    { value: 'SynBass3' },
+                    { value: 'SynBass4' },
+                    { value: 'SynBass5' },
+                    { value: 'SynBass6' },
+                    { value: 'SynBass7' },
+                    { value: 'SynWave1' },
+                    { value: 'SynWave2' },
+                    { value: 'SynWave3' },
+                    { value: 'SynWave4' },
+                    { value: 'SynWave5' },
+                    { value: 'SynWave6' },
+                    { value: 'SynWave7' },
+                    { value: 'SynWave8' },
+                    { value: 'SynWave9' },
+                    { value: '5thWave1' },
+                    { value: '5thWave2' },
+                    { value: '5thWave3' },
+                    { value: 'Digi1' },
+                    { value: 'Digi2' },
+                    { value: 'Digi3' },
+                    { value: 'Digi4' },
+                    { value: 'Digi5' },
+                    { value: 'Digi6' },
+                    { value: 'Digi7' },
+                    { value: 'Digi8' },
+                    { value: 'Endless' },
+                    { value: 'E.Piano1' },
+                    { value: 'E.Piano2' },
+                    { value: 'E.Piano3' },
+                    { value: 'E.Piano4' },
+                    { value: 'Organ1' },
+                    { value: 'Organ2' },
+                    { value: 'Organ3' },
+                    { value: 'Organ4' },
+                    { value: 'Organ5' },
+                    { value: 'Organ6' },
+                    { value: 'Organ7' },
+                    { value: 'Clav1' },
+                    { value: 'Clav2' },
+                    { value: 'Guitar1' },
+                    { value: 'Guitar2' },
+                    { value: 'Guitar3' },
+                    { value: 'Bass1' },
+                    { value: 'Bass2' },
+                    { value: 'Bass3' },
+                    { value: 'Bass4' },
+                    { value: 'Bass5' },
+                    { value: 'Bell1' },
+                    { value: 'Bell2' },
+                    { value: 'Bell3' },
+                    { value: 'Bell4' },
+                    { value: 'Voice1' },
+                    { value: 'Voice2' },
+                    { value: 'Voice3' },
+                    { value: 'Voice4' },
+                ]}
+            />
+            <AudioIn id={ids.audioIn} />
+            <Mixer id={ids.mixer} />
+            <Pitch id={ids.pitch} />
+            <VocoderFilter id={ids.filter} />
+            <FCMod id={ids.fcMod} />
+            <div className="linebreak" style={lineBreak} />
+            <VocoderAmp id={ids.amp} />
+            <EG id={ids.eg} />
+            <LFO id={ids.lfo1} />
+            <LFO id={ids.lfo2} />
+        </div>
+    );
 }
diff --git a/src/features/timbre/parameters/Amp.js b/src/features/timbre/parameters/Amp.js
index d5cc10f..d51b5dd 100644
--- a/src/features/timbre/parameters/Amp.js
+++ b/src/features/timbre/parameters/Amp.js
@@ -67,3 +67,67 @@ export default function Amp(props) {
         </div>
     );
 }
+
+export const VocoderAmp = (props) => {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div className={styles.container}>
+            Amp Level
+            <Slider
+                parameter={parameters.ampLevel}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { ampLevel: value },
+                        })
+                    )
+                }
+            />
+            Direct Level
+            <Slider
+                parameter={parameters.directLevel}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { directLevel: value },
+                        })
+                    )
+                }
+            />
+            Amp Keyboard Tracking
+            <Slider
+                parameter={parameters.ampTrack}
+                min={-63}
+                max={63}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { ampTrack: value },
+                        })
+                    )
+                }
+            />
+            Distortion
+            <Checkbox
+                parameter={parameters.distortion}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { distortion: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+};
diff --git a/src/features/timbre/parameters/Filter.js b/src/features/timbre/parameters/Filter.js
index 12e7283..993f87e 100644
--- a/src/features/timbre/parameters/Filter.js
+++ b/src/features/timbre/parameters/Filter.js
@@ -87,3 +87,98 @@ export default function Filter(props) {
         </div>
     );
 }
+
+export const VocoderFilter = (props) => {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+    return (
+        <div className={styles.container}>
+            Cutoff
+            <Slider
+                parameter={parameters.cutoff}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { cutoff: value },
+                        })
+                    )
+                }
+            />
+            Resonance
+            <Slider
+                parameter={parameters.resonance}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { resonance: value },
+                        })
+                    )
+                }
+            />
+            EF Sense
+            <Slider
+                parameter={parameters.efSense}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { efSense: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+};
+
+export const FCMod = (props) => {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+    return (
+        <div className={styles.container}>
+            Source
+            <SelectList
+                value={parameters.source}
+                list={[
+                    { value: 'Amp EG' },
+                    { value: 'LFO 1' },
+                    { value: 'LFO 2' },
+                    { value: 'Velocity' },
+                    { value: 'Keyboard Track' },
+                    { value: 'Pitch Bend' },
+                    { value: 'Mod Wheel' },
+                ]}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { source: value },
+                        })
+                    )
+                }
+            />
+            Intensity
+            <Slider
+                parameter={parameters.intensity}
+                min={0}
+                max={127}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { intensity: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+};
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
index 3f1e67e..8906497 100644
--- a/src/features/timbre/parameters/VCO.js
+++ b/src/features/timbre/parameters/VCO.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList } from '../../helpers/Helpers';
+import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
 import styles from './Parameters.module.css';
 
 export default function VCO(props) {
@@ -39,7 +39,7 @@ export default function VCO(props) {
             Waveform Mod
             <Slider
                 min={0}
-                max={100}
+                max={127}
                 parameter={parameters.waveMod}
                 onChange={(value) =>
                     dispatch(
@@ -53,7 +53,7 @@ export default function VCO(props) {
             LFO Mod
             <Slider
                 min={0}
-                max={100}
+                max={127}
                 parameter={parameters.lfoMod}
                 onChange={(value) =>
                     dispatch(
@@ -67,3 +67,67 @@ export default function VCO(props) {
         </div>
     );
 }
+
+export const AudioIn = (props) => {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div className={styles.container}>
+            Gate
+            <Slider
+                min={0}
+                max={127}
+                parameter={parameters.gate}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { gate: value },
+                        })
+                    )
+                }
+            />
+            Threshold
+            <Slider
+                min={0}
+                max={127}
+                parameter={parameters.threshold}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { threshold: value },
+                        })
+                    )
+                }
+            />
+            HPF Level
+            <Slider
+                min={0}
+                max={127}
+                parameter={parameters.hpfLevel}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { hpfLevel: value },
+                        })
+                    )
+                }
+            />
+            HPF Gate
+            <Checkbox
+                parameter={parameters.hpfGate}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { hpfGate: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+};
diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js
index 8d5ff9b..ee4a69a 100644
--- a/src/features/timbre/parameters/parameterSlice.js
+++ b/src/features/timbre/parameters/parameterSlice.js
@@ -28,6 +28,18 @@ const parametersSlice = createSlice({
             'lfo3',
             'lfo4',
             'patches2',
+            'vco5',
+            'audioIn',
+            'mixer3',
+            'pitch3',
+            'filter3',
+            'fcMod',
+            'eg4',
+            'amp3',
+            'lfo5',
+            'lfo6',
+            'levels',
+            'pans',
         ],
         entities: {
             'vco1': {
@@ -39,24 +51,38 @@ const parametersSlice = createSlice({
             },
             'vco2': {
                 id: 'vco2',
-                waveform: 'Square',
+                waveform: 'Saw',
                 dwgsOrModType: 'Off',
                 waveMod: 0,
                 lfoMod: 0,
             },
             'vco3': {
                 id: 'vco3',
-                waveform: 'Sine',
+                waveform: 'Saw',
                 dwgsOrModType: 'SynWave1',
-                waveMod: 100,
+                waveMod: 0,
                 lfoMod: 0,
             },
             'vco4': {
                 id: 'vco4',
-                waveform: 'Triangle',
+                waveform: 'Saw',
                 dwgsOrModType: 'Off',
                 waveMod: 0,
-                lfoMod: 100,
+                lfoMod: 0,
+            },
+            'vco5': {
+                id: 'vco5',
+                waveform: 'Saw',
+                dwgsOrModType: 'SynWave1',
+                waveMod: 0,
+                lfoMod: 0,
+            },
+            'audioIn': {
+                id: 'audioIn',
+                gate: 0,
+                threshold: 0,
+                hpfLevel: 0,
+                hpfGate: false,
             },
             'mixer1': {
                 id: 'mixer1',
@@ -70,6 +96,12 @@ const parametersSlice = createSlice({
                 vol2: 0,
                 vol3: 0,
             },
+            'mixer3': {
+                id: 'mixer3',
+                vol1: 127,
+                vol2: 0,
+                vol3: 0,
+            },
             'pitch1': {
                 id: 'pitch1',
                 voiceAssign: 'Mono',
@@ -92,6 +124,17 @@ const parametersSlice = createSlice({
                 bendRange: 0,
                 vibratoIntensity: 0,
             },
+            'pitch3': {
+                id: 'pitch3',
+                voiceAssign: 'Mono',
+                triggerMode: 'Single',
+                transpose: 0,
+                tune: 0,
+                unisonDetune: 0,
+                portamento: 0,
+                bendRange: 0,
+                vibratoIntensity: 0,
+            },
             'filter1': {
                 id: 'filter1',
                 filterType: '-24db Low Pass',
@@ -108,6 +151,17 @@ const parametersSlice = createSlice({
                 egIntensity: 0,
                 keyboardTrack: 0,
             },
+            'filter3': {
+                id: 'filter3',
+                cutoff: 0,
+                resonance: 0,
+                efSense: 0,
+            },
+            'fcMod': {
+                id: 'fcMod',
+                source: 'Amp EG',
+                intensity: 0,
+            },
             'eg1': {
                 id: 'eg1',
                 attack: 0,
@@ -129,7 +183,7 @@ const parametersSlice = createSlice({
                 decay: 0,
                 sustain: 127,
                 release: 0,
-                egReset: true,
+                egReset: false,
             },
             'eg3': {
                 id: 'eg3',
@@ -152,7 +206,22 @@ const parametersSlice = createSlice({
                 decay: 0,
                 sustain: 127,
                 release: 0,
-                egReset: true,
+                egReset: false,
+            },
+            'eg5': {
+                id: 'eg5',
+                attack: 0,
+                decay: 0,
+                sustain: 127,
+                release: 0,
+                egReset: false,
+            },
+            'amp3': {
+                id: 'amp3',
+                ampLevel: 127,
+                directLevel: 0,
+                ampTrack: 0,
+                distortion: false,
             },
             'lfo1': {
                 id: 'lfo1',
@@ -182,6 +251,20 @@ const parametersSlice = createSlice({
                 tempoSync: false,
                 frequency: 0,
             },
+            'lfo5': {
+                id: 'lfo5',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
+            },
+            'lfo6': {
+                id: 'lfo6',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
+            },
         },
     }),
     reducers: {
diff --git a/src/features/timbre/timbreSlice.js b/src/features/timbre/timbreSlice.js
index 3e0dd1a..5e33a51 100644
--- a/src/features/timbre/timbreSlice.js
+++ b/src/features/timbre/timbreSlice.js
@@ -35,6 +35,19 @@ const timbreSlice = createSlice({
                 lfo2: 'lfo4',
                 patches: 'patches2',
             },
+            'vocoder': {
+                id: 'vocoder',
+                vco: 'vco5',
+                audioIn: 'audioIn',
+                mixer: 'mixer3',
+                pitch: 'pitch3',
+                filter: 'filter3',
+                fcMod: 'fcMod',
+                eg: 'eg5',
+                amp: 'amp3',
+                lfo1: 'lfo5',
+                lfo2: 'lfo6',
+            },
         },
     }),
     reducers: {