synthing

commit 55a3186095cfa3ed10dd6289745f32cb8402b0fa
parent 4e546d4d1eb8b9a36722ec4fb65884e2666382fd
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Sun, 11 Mar 2018 22:41:50 -0700

Add adsr to redux

Diffstat:
M
src/App/index.js
 | 
42
++++--------------------------------------
M
src/consts.js
 | 
23
++++++++++++++++++++++-
M
src/index.js
 | 
5
+++--
M
src/store.js
 | 
48
+++++++++++++++++++++++++++++++++++++++---------

4 files changed, 68 insertions(+), 50 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -50,32 +50,10 @@ const boolArray = {
     }
 }
 
-const adsrProperties = [
-    {
-        name: 'attack',
-        suffix: 's',
-        maxVal: 10
-    },
-    {
-        name: 'decay',
-        suffix: 's',
-        maxVal: 10
-    },
-    {
-        name: 'sustain',
-        maxVal: 2
-    },
-    {
-        name: 'release',
-        suffix: 's',
-        maxVal: 30,
-    }
-];
-
 
 const Adsr = (props) => (
     <div style="display: inline-block;">
-        {adsrProperties.map((aspect) => (
+        {consts.adsrProperties.map((aspect) => (
             <Param
                 suffix={aspect.suffix || ''}
                 precision={1}
@@ -105,22 +83,10 @@ class App extends Component {
                 solo: false,
                 beats: boolArray.update(boolArray.create(4), 0, true)
             }],
-            editingToneIdx: 0,
-            adsr: {
-                attack: 0.3,
-                decay: 1,
-                sustain: 0.4,
-                release: 1
-            }
+            editingToneIdx: 0
         }
     }
 
-    updateAdsr = (aspect, val) => {
-        this.setState({
-            adsr: Object.assign({}, this.state.adsr, {[aspect]: val})
-        });
-    }
-
     editingWaveform = () => this.state.tones[this.state.editingToneIdx].waveform
 
     activeTones = () => {
@@ -318,7 +284,7 @@ class App extends Component {
                         val={this.props.numBeats}
                         update={this.setBeats}
                     />
-                    <Adsr adsr={this.state.adsr} update={this.updateAdsr} />
+                    <Adsr adsr={this.props.adsr} update={this.props.setAdsrProperty} />
                     <HSlider value={this.props.volume} update={this.props.setVolume} />
                 </div>
                 <div class="wave-manager-container">
@@ -328,7 +294,7 @@ class App extends Component {
                 <Synth
                     waveform={this.totalWaveform()}
                     volume={this.props.volume}
-                    adsr={this.state.adsr}
+                    adsr={this.props.adsr}
                 ></Synth>
             </div>
         );
diff --git a/src/consts.js b/src/consts.js
@@ -1,3 +1,24 @@
 export default {
-    BUF_SIZE: 256
+    BUF_SIZE: 256,
+    adsrProperties: [
+        {
+            name: 'attack',
+            suffix: 's',
+            maxVal: 10
+        },
+        {
+            name: 'decay',
+            suffix: 's',
+            maxVal: 10
+        },
+        {
+            name: 'sustain',
+            maxVal: 2
+        },
+        {
+            name: 'release',
+            suffix: 's',
+            maxVal: 30,
+        }
+    ]
 }
diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,7 @@ import 'preact/devtools';
 import { Provider, connect } from 'preact-redux';
 import { store } from './store.js';
 
-const ConnectedApp = connect(state => state, {
+const ConnectedApp = connect(state => Object.assign({}, state.global, {adsr: state.adsr}), {
     setVolume: (newVal) => ({type: 'SET_GLOBAL_VOLUME', value: newVal}),
     setBpm: (newVal) => ({type: 'SET_GLOBAL_BPM', value: newVal}),
     setBeat: (newVal) => ({type: 'SET_GLOBAL_BEAT', value: newVal}),
@@ -26,7 +26,8 @@ const ConnectedApp = connect(state => state, {
 
         loop();
     },
-    stopMetro: () => ({type: 'STOP_METRO'})
+    stopMetro: () => ({type: 'STOP_METRO'}),
+    setAdsrProperty: (property, value) => ({type: 'SET_ADSR_PROPERTY', property, value})
 })(App);
 
 const InformedApp = <Provider store={store}><ConnectedApp /></Provider>;
diff --git a/src/store.js b/src/store.js
@@ -1,16 +1,41 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
+import consts from './consts.js';
 
 const initialState = {
-    volume: 0.7,
-    bpm: 120,
-    beat: 0,
-    playing: false,
-    numBeats: 4
+    global: {
+        volume: 0.7,
+        bpm: 120,
+        beat: 0,
+        playing: false,
+        numBeats: 4
+    },
+    adsr: {
+        attack: 0.3,
+        decay: 1,
+        sustain: 0.4,
+        release: 1
+    }
 };
 
-const reducer = (state, action) => {
-    let updates = {};
+const adsrReducer = (state, action) => {
+    const updates = {};
+    const propertiesAllowed = consts.adsrProperties.map(val => val.name);
+    switch (action.type) {
+        case 'SET_ADSR_PROPERTY':
+            console.log(action);
+            if (propertiesAllowed.indexOf(action.property) > -1) {
+                updates[action.property] = action.value
+            }
+            break;
+        default:
+            break;
+    }
+    return Object.assign({}, state, updates);
+}
+
+const globalReducer = (state, action) => {
+    const updates = {};
     switch (action.type) {
         case 'SET_GLOBAL_VOLUME':
             updates.volume = action.value;
@@ -40,7 +65,12 @@ const reducer = (state, action) => {
     return Object.assign({}, state, updates);
 }
 
-const store = createStore(reducer, initialState, applyMiddleware(thunk));
+const reducers = {
+    global: globalReducer,
+    adsr: adsrReducer
+};
+
+const store = createStore(combineReducers(reducers), initialState, applyMiddleware(thunk));
 
 export default store;
 export { store };