Move eq mediaPlayer access from actionCreators to middleware

js/actionCreators.js

@@ -134,11 +134,10 @@ export function setEqBand(band, value) {
   };
 }
 
-function _setEqTo(mediaPlayer, value) {
+function _setEqTo(value) {
   return (dispatch) => {
     Object.keys(BANDS).forEach((key) => {
       const band = BANDS[key];
-      mediaPlayer.setEqBand(band, value);
       dispatch({
         type: SET_BAND_VALUE,
         value,
@@ -148,23 +147,22 @@ function _setEqTo(mediaPlayer, value) {
   };
 }
 
-export function setEqToMax(mediaPlayer) {
-  return _setEqTo(mediaPlayer, 100);
+export function setEqToMax() {
+  return _setEqTo(100);
 }
 
-export function setEqToMid(mediaPlayer) {
-  return _setEqTo(mediaPlayer, 50);
+export function setEqToMid() {
+  return _setEqTo(50);
 }
 
-export function setEqToMin(mediaPlayer) {
-  return _setEqTo(mediaPlayer, 0);
+export function setEqToMin() {
+  return _setEqTo(0);
 }
 
-export function setPreamp(mediaPlayer, value) {
-  mediaPlayer.setPreamp(value);
-  return (dispatch) => dispatch({
+export function setPreamp(value) {
+  return {
     type: SET_BAND_VALUE,
     band: 'preamp',
     value
-  });
+  };
 }

js/components/EqualizerWindow.jsx

@@ -24,73 +24,59 @@ import '../../css/equalizer-window.css';
 
 const bandClassName = (band) => `band-${band}`;
 
-class EqualizerWindow extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setHertzValue = this.setHertzValue.bind(this);
-  }
+const EqualizerWindow = (props) => {
+  const {doubled} = props.display;
 
-  setHertzValue(hertz) {
-    return (e) => {
-      this.props.dispatch(
-        setEqBand(hertz, e.target.value)
-      );
-    };
-  }
-
-  render() {
-    const {doubled} = this.props.display;
-
-    const className = classnames({
-      window: true,
-      selected: this.props.windows.focused === WINDOWS.EQUALIZER,
-      closed: !this.props.windows.equalizer,
-      draggable: true,
-      doubled
-    });
-    return (
-      <div id='equalizer-window' className={className} onClick={this.props.focusWindow}>
-        <div className='equalizer-top title-bar draggable' />
-        <EqOn />
-        <EqAuto />
-        <EqGraph />
-        <div id='presets' />
+  const className = classnames({
+    window: true,
+    selected: props.windows.focused === WINDOWS.EQUALIZER,
+    closed: !props.windows.equalizer,
+    draggable: true,
+    doubled
+  });
+  return (
+    <div id='equalizer-window' className={className} onClick={props.focusWindow}>
+      <div className='equalizer-top title-bar draggable' />
+      <EqOn />
+      <EqAuto />
+      <EqGraph />
+      <div id='presets' />
+      <Band
+        id='preamp'
+        band='preamp'
+        onChange={props.setPreampValue}
+      />
+      <div
+        id='plus12db'
+        onClick={props.setEqToMax}
+      />
+      <div
+        id='zerodb'
+        onClick={props.setEqToMid}
+      />
+      <div
+        id='minus12db'
+        onClick={props.setEqToMin}
+      />
+      {BANDS.map((hertz) => (
         <Band
-          id='preamp'
-          band='preamp'
-          onChange={this.props.setPreampValue(this.props.mediaPlayer)}
+          key={hertz}
+          id={bandClassName(hertz)}
+          band={hertz}
+          onChange={props.setHertzValue(hertz)}
         />
-        <div
-          id='plus12db'
-          onClick={this.props.setEqToMax(this.props.mediaPlayer)}
-        />
-        <div
-          id='zerodb'
-          onClick={this.props.setEqToMid(this.props.mediaPlayer)}
-        />
-        <div
-          id='minus12db'
-          onClick={this.props.setEqToMin(this.props.mediaPlayer)}
-        />
-        {BANDS.map((hertz) => (
-          <Band
-            key={hertz}
-            id={bandClassName(hertz)}
-            band={hertz}
-            onChange={this.setHertzValue(hertz)}
-          />
-        ))}
-      </div>
-    );
-  }
-}
+      ))}
+    </div>
+  );
+};
 
 const mapDispatchToProps = (dispatch) => ({
   focusWindow: () => dispatch({type: SET_FOCUSED_WINDOW, window: WINDOWS.EQUALIZER}),
-  setPreampValue: (mediaPlayer) => (e) => dispatch(setPreamp(mediaPlayer, e.target.value)),
-  setEqToMin: (mediaPlayer) => () => dispatch(setEqToMin(mediaPlayer)),
-  setEqToMid: (mediaPlayer) => () => dispatch(setEqToMid(mediaPlayer)),
-  setEqToMax: (mediaPlayer) => () => dispatch(setEqToMax(mediaPlayer)),
+  setPreampValue: (e) => dispatch(setPreamp(e.target.value)),
+  setEqToMin: () => dispatch(setEqToMin()),
+  setEqToMid: () => dispatch(setEqToMid()),
+  setEqToMax: () => dispatch(setEqToMax()),
+  setHertzValue: (hertz) => (e) => dispatch(setEqBand(hertz, e.target.value)),
   dispatch
 });
 

js/index.js

@@ -32,7 +32,7 @@ if (new Browser(window).isCompatible) {
         <WindowManager>
           <MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
           { playlist ? <PlaylistWindow /> : '' }
-          { equalizer ? <EqualizerWindow mediaPlayer={winamp.media} /> : '' }
+          { equalizer ? <EqualizerWindow /> : '' }
         </WindowManager>
       </div>
     </Provider>,

js/mediaMiddleware.js

@@ -5,6 +5,7 @@ import {
   PAUSE,
   PLAY,
   SEEK_TO_PERCENT_COMPLETE,
+  SET_BAND_VALUE,
   SET_BALANCE,
   SET_EQ_BAND,
   SET_MEDIA,
@@ -82,6 +83,13 @@ export default (media) => (
         case LOAD_AUDIO_URL:
           media.loadFromUrl(action.url, action.name);
           break;
+        case SET_BAND_VALUE:
+          if (action.band === 'preamp') {
+            media.setPreamp(action.value);
+          } else {
+            media.setEqBand(action.band, action.value);
+          }
+          break;
       }
       return next(action);
     };

js/winamp.js

@@ -24,7 +24,7 @@ module.exports = {
 
     this.dispatch(setVolume(options.volume));
     this.dispatch(setBalance(options.balance));
-    this.dispatch(setPreamp(this.media, 50));
+    this.dispatch(setPreamp(50));
     this.dispatch(loadMediaFromUrl(options.mediaFile.url, options.mediaFile.name));
     this.dispatch(setSkinFromUrl(options.skinUrl));
     return this;