Move blance to react/redux

js/Balance.jsx

@@ -0,0 +1,55 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Balance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setBalance = this.setBalance.bind(this);
+    this.showMarquee = this.showMarquee.bind(this);
+    this.hideMarquee = this.hideMarquee.bind(this);
+  }
+
+  setBalance(e) {
+    let balance = e.target.value;
+    // The balance clips to the center
+    if (Math.abs(balance) < 25) {
+      balance = 0;
+    }
+    this.props.dispatch({type: 'SET_BALANCE', balance: balance});
+  }
+
+  showMarquee() {
+    this.props.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'balance'});
+  }
+
+  hideMarquee() {
+    this.props.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
+  }
+
+  render() {
+    const balance = Math.abs(this.props.balance) / 100;
+    const sprite = Math.round(balance * 28);
+    const offset = (sprite - 1) * 15;
+
+    const style = {
+      backgroundPosition: '0 -' + offset + 'px'
+    };
+
+    return <input
+      id='balance'
+      type='range'
+      min='-100'
+      max='100'
+      step='1'
+      value={this.props.balance}
+      style={style}
+      onInput={this.setBalance}
+      onMouseDown={this.showMarquee}
+      onMouseUp={this.hideMarquee}
+    />;
+  }
+}
+
+module.exports = connect(state => state.media)(Balance);

js/main-window-dom.js

@@ -53,7 +53,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     ])
   ]),
   el('div', {id: 'volume-holder'}),
-  el('input', {id: 'balance', type: 'range', min: '-100', max: '100', step: '2', value: '0'}),
+  el('div', {id: 'balance-holder'}),
   el('div', {class: 'windows'}, [
     el('div', {id: 'equalizer-button'}),
     el('div', {id: 'playlist-button'})

js/main-window.js

@@ -6,6 +6,7 @@ import ShadeTime from './ShadeTime.jsx';
 import Kbps from './Kbps.jsx';
 import Khz from './Khz.jsx';
 import Volume from './Volume.jsx';
+import Balance from './Balance.jsx';
 
 import '../css/main-window.css';
 
@@ -23,7 +24,6 @@ module.exports = {
       shuffle: document.getElementById('shuffle'),
       mono: document.getElementById('mono'),
       stereo: document.getElementById('stereo'),
-      balance: document.getElementById('balance'),
       workIndicator: document.getElementById('work-indicator'),
       titleBar: document.getElementById('title-bar'),
       window: document.getElementById('main-window')
@@ -39,6 +39,7 @@ module.exports = {
     this.winamp.renderTo(<Kbps />, document.getElementById('kbps-holder'));
     this.winamp.renderTo(<Khz />, document.getElementById('khz-holder'));
     this.winamp.renderTo(<Volume />, document.getElementById('volume-holder'));
+    this.winamp.renderTo(<Balance />, document.getElementById('balance-holder'));
 
     this._registerListeners();
     return this;
@@ -111,21 +112,6 @@ module.exports = {
       self.winamp.toggleShuffle();
     };
 
-    this.nodes.balance.onmousedown = function() {
-      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'balance'});
-    };
-
-    this.nodes.balance.onmouseup = function() {
-      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
-    };
-
-    this.nodes.balance.oninput = function() {
-      if (Math.abs(this.value) < 25) {
-        this.value = 0;
-      }
-      self.winamp.setBalance(this.value);
-    };
-
     this.nodes.visualizer.onclick = function() {
       self.winamp.toggleVisualizer();
     };
@@ -154,9 +140,6 @@ module.exports = {
     window.addEventListener('channelCountUpdated', function() {
       self.updateChannelCount();
     });
-    window.addEventListener('balanceChanged', function() {
-      self.setBalance();
-    });
     window.addEventListener('doubledModeToggled', function() {
       self.toggleDoubledMode();
     });
@@ -224,23 +207,6 @@ module.exports = {
     this.nodes.window.classList.remove('loading');
   },
 
-  setBalance: function() {
-    var balance = this.winamp.getBalance();
-    var string = '';
-    if (balance === 0) {
-      string = 'Balance: Center';
-    } else if (balance > 0) {
-      string = 'Balance: ' + balance + '% Right';
-    } else {
-      string = 'Balance: ' + Math.abs(balance) + '% Left';
-    }
-    this.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'balance', text: string});
-    balance = Math.abs(balance) / 100;
-    var sprite = Math.round(balance * 28);
-    var offset = (sprite - 1) * 15;
-    this.nodes.balance.style.backgroundPosition = '0px -' + offset + 'px';
-  },
-
   changeState: function() {
     var state = this.winamp.getState();
     var stateOptions = ['play', 'stop', 'pause'];

js/reducers.js

@@ -21,6 +21,18 @@ const register = (state, action) => {
         return Object.assign({}, state, {step: 0, text: text});
       }
       return state;
+    case 'SET_BALANCE':
+      if (state.id === 'balance') {
+        let text = '';
+        if (action.balance === 0) {
+          text = 'Balance: Center';
+        } else {
+          const direction = action.balance > 0 ? 'Right' : 'Left';
+          text = 'Balance: ' + Math.abs(action.balance) + '% ' + direction;
+        }
+        return Object.assign({}, state, {step: 0, text: text});
+      }
+      return state;
     case 'STEP_MARQUEE':
       return Object.assign({}, state, {step: (state.step + 1) % state.text.length});
     default:
@@ -82,7 +94,8 @@ const media = (state, action) => {
       length: null,
       kbps: null,
       khz: null,
-      volume: 50
+      volume: 50,
+      balance: 0
     };
   }
   switch (action.type) {
@@ -99,6 +112,8 @@ const media = (state, action) => {
       return Object.assign({}, state, {khz: action.khz});
     case 'SET_VOLUME':
       return Object.assign({}, state, {volume: action.volume});
+    case 'SET_BALANCE':
+      return Object.assign({}, state, {balance: action.balance});
     default:
       return state;
   }
@@ -128,6 +143,9 @@ const createReducer = (winamp) => {
       case 'SET_VOLUME':
         winamp.setVolume(action.volume);
         return state;
+      case 'SET_BALANCE':
+        winamp.setBalance(action.balance);
+        return state;
       case 'CLOSE_WINAMP':
         winamp.close();
         return state;

js/winamp.js

@@ -29,7 +29,6 @@ module.exports = {
       changeState: new Event('changeState'),
       titleUpdated: new Event('titleUpdated'),
       channelCountUpdated: new Event('channelCountUpdated'),
-      balanceChanged: new Event('balanceChanged'),
       doubledModeToggled: new Event('doubledModeToggled'),
       repeatToggled: new Event('repeatToggled'),
       llamaToggled: new Event('llamaToggled'),
@@ -37,7 +36,7 @@ module.exports = {
     };
 
     this.dispatch({type: 'SET_VOLUME', volume: options.volume});
-    this.setBalance(options.balance);
+    this.dispatch({type: 'SET_BALANCE', balance: options.balance});
     this.loadFromUrl(options.mediaFile.url, options.mediaFile.name);
     var skinFile = new MyFile();
     skinFile.setUrl(options.skinUrl);
@@ -155,11 +154,6 @@ module.exports = {
   // From -100 to 100
   setBalance: function(balance) {
     this.media.setBalance(balance);
-    window.dispatchEvent(this.events.balanceChanged);
-  },
-
-  getBalance: function() {
-    return this.media.getBalance();
   },
 
   seekForwardBy: function(seconds) {