synthing

commit 994f9675a8e9309f304af2737a75fbaa5cf757da
parent b85c12af2a5e097c8cd3e53a9407402accf91f8f
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue, 20 Feb 2018 22:25:48 -0800

Implement mute and solo

Diffstat:
M
src/App/index.js
 | 
25
+++++++++++++++++++------
M
src/WaveManager/index.js
 | 
14
++++++++++++--
M
src/WaveManager/style.css
 | 
4
++++

3 files changed, 35 insertions(+), 8 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -101,6 +101,8 @@ class App extends Component {
             waveforms: [{
                 active: true,
                 waveform: initialWave.slice(),
+                mute: false,
+                solo: false,
                 beats: boolArray.update(boolArray.create(initBeats), 0, true)
             }],
             numBeats: initBeats,
@@ -122,12 +124,23 @@ class App extends Component {
 
     editingWaveform = () => this.state.waveforms[this.state.editingWaveformIdx].waveform
 
-    activeWaveforms = () => this.state.waveforms.reduce((accum, val) => {
-        if (val.beats[this.state.beat]) {
-            accum.push(val.waveform);
-        }
-        return accum;
-    }, [])
+    activeWaveforms = () => {
+        let hasSolo = false;
+        const waves = this.state.waveforms.reduce((accum, val) => {
+            if (val.beats[this.state.beat]) {
+                let group = 'rest';
+                if (val.solo) {
+                    hasSolo = true;
+                    group = 'solo';
+                }
+                if (!val.mute) {
+                    accum[group].push(val.waveform);
+                }
+            }
+            return accum;
+        }, {solo: [], rest: []});
+        return hasSolo ? waves.solo : waves.rest;
+    }
 
     totalWaveform = () => {
         const allWaves = this.activeWaveforms();
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -19,8 +19,18 @@ export default class WaveManager extends Component {
                         ) : ''}
                     </div>
                     <div class="right-button-group">
-                        <button class="item">solo</button>
-                        <button class="item">mute</button>
+                        <button
+                            class={`item${this.props.waveformData.solo ? ' active' : ''}`}
+                            onClick={this.props.toggleSolo}
+                        >
+                            solo
+                        </button>
+                        <button
+                            class={`item${this.props.waveformData.mute ? ' active' : ''}`}
+                            onClick={this.props.toggleMute}
+                        >
+                            mute
+                        </button>
                     </div>
                 </div>
                 <div class="beats">
diff --git a/src/WaveManager/style.css b/src/WaveManager/style.css
@@ -39,6 +39,10 @@
     background: #f1ddd8;
 }
 
+.wave-manager .item.active {
+    background: red;
+}
+
 .wave-manager.selected .checkbox:not(.beat),
 .wave-manager.selected .checkbox.beat .checkbox-circle,
 .wave-manager.selected .wave-table {