Move MonoStereo to React

js/MonoStereo.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+const MonoStereo = (props) => {
+  return <div className='mono-stereo'>
+    <div id='stereo' className={props.channels === 2 ? 'selected' : ''}></div>
+    <div id='mono' className={props.channels === 1 ? 'selected' : ''}></div>
+  </div>;
+};
+
+module.exports = connect(state => state.media)(MonoStereo);

js/main-window-dom.js

@@ -47,10 +47,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     el('div', {id: 'song-title', class: 'text'}),
     el('div', {id: 'kbps-holder'}),
     el('div', {id: 'khz-holder'}),
-    el('div', {class: 'mono-stereo'}, [
-      el('div', {id: 'mono'}),
-      el('div', {id: 'stereo'})
-    ])
+    el('div', {id: 'mono-stereo-holder'})
   ]),
   el('div', {id: 'volume-holder'}),
   el('div', {id: 'balance-holder'}),

js/main-window.js

@@ -8,6 +8,7 @@ import Khz from './Khz.jsx';
 import Volume from './Volume.jsx';
 import Balance from './Balance.jsx';
 import Position from './Position.jsx';
+import MonoStereo from './MonoStereo.jsx';
 
 import '../css/main-window.css';
 
@@ -22,8 +23,6 @@ module.exports = {
       eject: document.getElementById('eject'),
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
-      mono: document.getElementById('mono'),
-      stereo: document.getElementById('stereo'),
       workIndicator: document.getElementById('work-indicator'),
       titleBar: document.getElementById('title-bar'),
       window: document.getElementById('main-window')
@@ -41,6 +40,7 @@ module.exports = {
     this.winamp.renderTo(<Volume />, document.getElementById('volume-holder'));
     this.winamp.renderTo(<Balance />, document.getElementById('balance-holder'));
     this.winamp.renderTo(<Position />, document.getElementById('position-holder'));
+    this.winamp.renderTo(<MonoStereo />, document.getElementById('mono-stereo-holder'));
 
     this._registerListeners();
     return this;
@@ -97,9 +97,6 @@ module.exports = {
     window.addEventListener('changeState', function() {
       self.changeState();
     });
-    window.addEventListener('channelCountUpdated', function() {
-      self.updateChannelCount();
-    });
     window.addEventListener('doubledModeToggled', function() {
       self.toggleDoubledMode();
     });
@@ -156,17 +153,6 @@ module.exports = {
     this.nodes.window.classList.toggle('llama');
   },
 
-  updateChannelCount: function() {
-    var channels = this.winamp.getChannelCount();
-    this.nodes.mono.classList.remove('selected');
-    this.nodes.stereo.classList.remove('selected');
-    if (channels === 1) {
-      this.nodes.mono.classList.add('selected');
-    } else if (channels === 2) {
-      this.nodes.stereo.classList.add('selected');
-    }
-  },
-
   toggleRepeat: function() {
     this.nodes.repeat.classList.toggle('selected');
   },

js/reducers.js

@@ -64,7 +64,8 @@ const media = (state, action) => {
       khz: null,
       volume: 50,
       balance: 0,
-      name: ''
+      name: '',
+      channels: null
     };
   }
   switch (action.type) {
@@ -85,6 +86,8 @@ const media = (state, action) => {
       return {...state, balance: action.balance};
     case 'SET_MEDIA_NAME':
       return {...state, name: action.name};
+    case 'SET_CHANNELS_COUNT':
+      return {...state, channels: action.channels};
     default:
       return state;
   }

js/winamp.js

@@ -27,7 +27,6 @@ module.exports = {
       startLoading: new Event('startLoading'),
       stopLoading: new Event('stopLoading'),
       changeState: new Event('changeState'),
-      channelCountUpdated: new Event('channelCountUpdated'),
       doubledModeToggled: new Event('doubledModeToggled'),
       repeatToggled: new Event('repeatToggled'),
       llamaToggled: new Event('llamaToggled'),
@@ -108,10 +107,6 @@ module.exports = {
     return this.media.percentComplete();
   },
 
-  getChannelCount: function() {
-    return this.media.channels();
-  },
-
   seekToPercentComplete: function(percent) {
     this.media.seekToPercentComplete(percent);
   },
@@ -239,7 +234,7 @@ module.exports = {
       var khz = Math.round(this.media.sampleRate() / 1000).toString();
       this.dispatch({type: 'SET_MEDIA_KBPS', kbps: kbps});
       this.dispatch({type: 'SET_MEDIA_KHZ', khz: khz});
-      window.dispatchEvent(this.events.channelCountUpdated);
+      this.dispatch({type: 'SET_CHANNELS_COUNT', channels: this.media.channels()});
       this.dispatch({type: 'SET_MEDIA_NAME', name: this.fileName});
       window.dispatchEvent(this.events.timeUpdated);
       this.dispatch({type: 'SET_MEDIA_LENGTH', length: this.media.duration()});