Add minimal db buttons

css/equalizer-window.css

@@ -47,6 +47,30 @@
   top: 38px;
 }
 
+#winamp2-js #plus12db {
+  position: absolute;
+  left: 45px;
+  top: 36px;
+  width: 22px;
+  height: 8px;
+}
+
+#winamp2-js #zerodb {
+  position: absolute;
+  left: 45px;
+  top: 64px;
+  width: 22px;
+  height: 8px;
+}
+
+#winamp2-js #minus12db {
+  position: absolute;
+  left: 45px;
+  top: 95px;
+  width: 22px;
+  height: 8px;
+}
+
 #winamp2-js #band-60 {
   position: absolute;
   left: 79px;

js/components/EqualizerWindow.jsx

@@ -20,15 +20,10 @@ const bandClassName = (band) => {
 class EqualizerWindow extends React.Component {
   constructor(props) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
     this.setHertzValue = this.setHertzValue.bind(this);
     this.setPreampValue = this.setPreampValue.bind(this);
   }
 
-  handleClick() {
-    this.props.dispatch({type: 'SET_FOCUSED_WINDOW', window: WINDOWS.EQUALIZER});
-  }
-
   setHertzValue(hertz) {
     return (e) => {
       this.props.dispatch(
@@ -53,13 +48,16 @@ class EqualizerWindow extends React.Component {
       doubled
     });
     return <DraggableWindow handleClass='title-bar'>
-      <div id='equalizer-window' className={className} onClick={this.handleClick}>
+      <div id='equalizer-window' className={className} onClick={this.props.focusWindow}>
         <div className='equalizer-top title-bar' />
         <EqOn />
         <EqAuto />
         <EqGraph />
         <div id='presets' />
         <Band id='preamp' band='preamp' onChange={this.setPreampValue} />
+        <div id='plus12db' onClick={this.props.setEqToMax} />
+        <div id='zerodb' onClick={this.props.setEqToMid} />
+        <div id='minus12db' onClick={this.props.setEqToMin} />
         {BANDS.map((hertz) => (
           <Band
             key={hertz}
@@ -73,4 +71,11 @@ class EqualizerWindow extends React.Component {
   }
 }
 
-module.exports = connect((state) => state)(EqualizerWindow);
+const mapDispatchToProps = (dispatch) => ({
+  setEqToMax: () => dispatch({type: 'SET_EQ_TO_MAX'}),
+  setEqToMid: () => dispatch({type: 'SET_EQ_TO_MID'}),
+  setEqToMin: () => dispatch({type: 'SET_EQ_TO_MIN'}),
+  focusWindow: () => dispatch({type: 'SET_FOCUSED_WINDOW', window: WINDOWS.EQUALIZER})
+});
+
+module.exports = connect((state) => state, mapDispatchToProps)(EqualizerWindow);

js/reducers.js

@@ -129,6 +129,24 @@ const equalizer = (state, action) => {
       return {...state, on: !state.on};
     case 'TOGGLE_EQ_AUTO':
       return {...state, auto: !state.auto};
+    case 'SET_EQ_TO_MAX':
+      const maxSliders = {};
+      Object.keys(state.sliders).forEach((key) => {
+        maxSliders[key] = 100;
+      });
+      return {...state, sliders: maxSliders};
+    case 'SET_EQ_TO_MID':
+      const midSliders = {};
+      Object.keys(state.sliders).forEach((key) => {
+        midSliders[key] = 50;
+      });
+      return {...state, sliders: midSliders};
+    case 'SET_EQ_TO_MIN':
+      const minSliders = {};
+      Object.keys(state.sliders).forEach((key) => {
+        minSliders[key] = 0;
+      });
+      return {...state, sliders: minSliders};
     default:
       return state;
   }