commit 5fb01ce83db4ab3f7cd033f49bda2fd40da40251
parent 9a2e829d961f470eb404e8a7dab18224e294812e
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Wed, 28 Feb 2018 14:15:48 -0800
Volume component sans events
Diffstat:
5 files changed, 73 insertions(+), 5 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -3,6 +3,7 @@ import WaveEditor from '../WaveEditor/';
import WaveManager from '../WaveManager/';
import Synth from '../Synth/';
import CircleButton from '../CircleButton/';
+import WaveTable from '../WaveTable/';
import Param from '../Param/';
import Wheel from '../Wheel/';
import './App.css';
@@ -103,6 +104,7 @@ class App extends Component {
waveforms: [{
active: true,
waveform: initialWave.slice(),
+ volume: 0.7,
mute: false,
solo: false,
beats: boolArray.update(boolArray.create(initBeats), 0, true)
@@ -136,7 +138,7 @@ class App extends Component {
}
if (!this.state.playing || val.beats[this.state.beat]) {
if (!val.mute) {
- accum[group].push(val.waveform);
+ accum[group].push(val);
}
}
return accum;
@@ -151,7 +153,7 @@ class App extends Component {
}
const firstWave = allWaves.shift();
return allWaves.reduce(
- (totalArray, currWaveform, i) => totalArray.map((val, j) => ((val * (i + 1)) + currWaveform[j]) / (i + 2)),
+ (totalArray, currWaveform, i) => totalArray.map((val, j) => ((val * (i + 1)) + (currWaveform[j].waveform * currWaveform[j].volume)) / (i + 2)),
firstWave
)
}
@@ -272,6 +274,12 @@ class App extends Component {
)
});
}}
+ volume={this.state.waveforms[idx].volume}
+ updateVolume={(volume) => {
+ this.updateWaveform(idx, {
+ volume
+ });
+ }}
></WaveManager>
);
})
@@ -280,7 +288,11 @@ class App extends Component {
className="App"
onKeyDown={this.keyHandler}
>
- <h1>synthing</h1>
+ <div>
+ <h1>synthing
+ <WaveTable myStyle="float:right; margin-right: 10px; margin-top: -5px;" height={50} width={100} waveform={this.totalWaveform()} />
+ </h1>
+ </div>
<WaveEditor
mouseData={this.state.mouseData}
waveform={this.editingWaveform()}
diff --git a/src/Volume/index.js b/src/Volume/index.js
@@ -0,0 +1,18 @@
+import { h, Component } from 'preact';
+import './style.css';
+
+export default (props) => {
+ console.log(props);
+ return (
+ <div class="Volume">
+ <span class="icon-volume"></span>
+ <span class="volume-triangle-container">
+ <span
+ class="volume-triangle -foreground"
+ style={`transform: scale(${props.volume});`}
+ ></span>
+ <span class="volume-triangle -background"></span>
+ </span>
+ </div>
+ );
+};
diff --git a/src/Volume/style.css b/src/Volume/style.css
@@ -0,0 +1,26 @@
+.volume-triangle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: inline-block;
+ border: 8px solid transparent;
+ border-right-color: black;
+ border-right-width: 30px;
+ border-left-width: 0px;
+ height: 0px;
+ margin-bottom: -2px;
+ margin-left: 2px;
+}
+
+.volume-triangle.-background {
+ opacity: 0.3;
+}
+
+.volume-triangle.-foreground {
+ transform-origin: left;
+}
+
+.volume-triangle-container {
+ position: relative;
+ width: 20px;
+}
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -1,6 +1,7 @@
import { h, Component } from 'preact';
import CheckBox from '../CheckBox/';
import WaveTable from '../WaveTable/';
+import Volume from '../Volume/';
import helpers from '../helpers';
import './style.css';
@@ -39,11 +40,16 @@ export default class WaveManager extends Component {
>
mute
</button>
+ <Volume
+ volume={this.props.volume}
+ update={this.props.updateVolume}
+ />
</div>
</div>
<div class="beats">
<div onClick={this.props.activate}>
<WaveTable
+ resize={true}
height={40}
width={75}
waveform={this.props.waveformData.waveform.slice()}
diff --git a/src/WaveTable/index.js b/src/WaveTable/index.js
@@ -24,13 +24,19 @@ export default class WaveTable extends Component {
this.drawArea = helpers.throttle(drawArea, 30);
}
componentWillUpdate() {
- return false;
+ return this.props.resize;
}
componentDidMount() {
this.drawArea(this.props.waveform, this.canvasRef);
if (this.props.setCanvasRef) {
this.props.setCanvasRef(this.canvasRef);
}
+ if (this.props.resize) {
+ window.addEventListener('resize', (ev) => {
+ console.log('yo', this.forceUpdate)
+ this.forceUpdate();
+ })
+ }
}
componentWillReceiveProps(newProps) {
this.drawArea(newProps.waveform, this.canvasRef);
@@ -41,7 +47,7 @@ export default class WaveTable extends Component {
return (
<canvas
class="wave-table"
- style={`color: red; height: ${height}px; width: ${width}px`}
+ style={`${this.props.myStyle}; color: red; height: ${height}px; width: ${width}px`}
height={height}
width={width}
ref={(canvas) => {this.canvasRef = canvas}}>
