synthing

commit 5e980e1c2b4b22e82fc3765f20e234126a580340
parent 1733d962c3079bf9c4dc5e3e2c49b895bc0369aa
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Mon,  5 Mar 2018 20:54:55 -0800

Volume interaction

Diffstat:
M
src/Synth/index.js
 | 
4
+++-
M
src/Volume/index.js
 | 
44
++++++++++++++++++++++++++++++--------------
M
src/Volume/style.css
 | 
10
++++------

3 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/src/Synth/index.js b/src/Synth/index.js
@@ -34,9 +34,11 @@ export default class Synth extends Component {
 
 function updateAudio(waveform) {
     FFT.forward(waveform);
+    //TODO: test what disableNormalization does. I'm guessing it allows me to have volume control, otherwise it would scale wave so max displacement is -1/1 instead of smaller val
     const periodicWave = ac.createPeriodicWave(
         new Float32Array(FFT.real),
-        new Float32Array(FFT.imag)
+        new Float32Array(FFT.imag),
+        {disableNormalization: true}
     );
     P.changeWave(periodicWave);
 }
diff --git a/src/Volume/index.js b/src/Volume/index.js
@@ -1,17 +1,33 @@
 import { h, Component } from 'preact';
+import helpers from '../helpers';
 import './style.css';
 
-export default (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>
-    );
-};
+export default class Volume extends Component {
+    handleUpdate = (ev) => {
+        const minVolX = this.sliderRef.offsetLeft;
+        const maxVolX = this.sliderRef.offsetLeft + this.sliderRef.offsetWidth;
+        this.props.update(helpers.bounded((ev.x - minVolX) / (maxVolX - minVolX), 0, 1));
+
+    }
+    componentDidMount() {
+        helpers.clickNDrag(this.sliderRef, this.handleUpdate, this.handleUpdate, null);
+    }
+    render() {
+        return (
+            <div class="Volume" ref={(ref) => {this.volRef = ref}}>
+                <span class="icon-volume"></span>
+                <div
+                    class="volume-triangle-container"
+                    ref={(ref) => {this.sliderRef = ref}}
+                >
+                    <div
+                        class="volume-triangle -foreground"
+                        style={`transform: scale(${this.props.volume});`}
+                    ></div>
+                    <div class="volume-triangle -background"></div>
+                </div>
+            </div>
+        );
+
+    }
+}
diff --git a/src/Volume/style.css b/src/Volume/style.css
@@ -1,15 +1,10 @@
 .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 {
@@ -17,10 +12,13 @@
 }
 
 .volume-triangle.-foreground {
+    position: absolute;
+    top: 0;
+    left: 0;
     transform-origin: left;
 }
 
 .volume-triangle-container {
+    display: inline-block;
     position: relative;
-    width: 20px;
 }