Merge pull request #158 from captbaritone/mono

Move Shuffle/Repeat and Mono/Stereo 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/Repeat.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Repeat extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.props.dispatch({type: 'TOGGLE_REPEAT'});
+  }
+  render() {
+    return <div
+      id='repeat'
+      className={this.props.repeat ? 'selected' : ''}
+      onClick={this.handleClick}
+    />;
+  }
+}
+
+module.exports = connect(state => state.media)(Repeat);

js/Shuffle.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Shuffle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.props.dispatch({type: 'TOGGLE_SHUFFLE'});
+  }
+  render() {
+    return <div
+      id='shuffle'
+      className={this.props.shuffle ? 'selected' : ''}
+      onClick={this.handleClick}
+    />;
+  }
+}
+
+module.exports = connect(state => state.media)(Shuffle);

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'}),
@@ -62,8 +59,8 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
   el('div', {id: 'actions-holder'}),
   el('div', {id: 'eject'}),
   el('div', {class: 'shuffle-repeat'}, [
-    el('div', {id: 'shuffle'}),
-    el('div', {id: 'repeat'})
+    el('div', {id: 'shuffle-holder'}),
+    el('div', {id: 'repeat-holder'})
   ]),
   el('a', {id: 'about', target: 'blank', href: 'https://github.com/captbaritone/winamp2-js'})
 ]);

js/main-window.js

@@ -8,6 +8,9 @@ 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 Repeat from './Repeat.jsx';
+import Shuffle from './Shuffle.jsx';
 
 import '../css/main-window.css';
 
@@ -20,10 +23,6 @@ module.exports = {
       buttonD: document.getElementById('button-d'),
       visualizer: document.getElementById('visualizer'),
       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,9 @@ 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.winamp.renderTo(<Repeat />, document.getElementById('repeat-holder'));
+    this.winamp.renderTo(<Shuffle />, document.getElementById('shuffle-holder'));
 
     this._registerListeners();
     return this;
@@ -70,14 +72,6 @@ module.exports = {
       self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'});
     };
 
-    this.nodes.repeat.onclick = function() {
-      self.winamp.toggleRepeat();
-    };
-
-    this.nodes.shuffle.onclick = function() {
-      self.winamp.toggleShuffle();
-    };
-
     this.nodes.visualizer.onclick = function() {
       self.winamp.toggleVisualizer();
     };
@@ -97,15 +91,9 @@ module.exports = {
     window.addEventListener('changeState', function() {
       self.changeState();
     });
-    window.addEventListener('channelCountUpdated', function() {
-      self.updateChannelCount();
-    });
     window.addEventListener('doubledModeToggled', function() {
       self.toggleDoubledMode();
     });
-    window.addEventListener('repeatToggled', function() {
-      self.toggleRepeat();
-    });
     window.addEventListener('llamaToggled', function() {
       self.toggleLlama();
     });
@@ -156,25 +144,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');
-  },
-
-  toggleShuffle: function() {
-    this.nodes.shuffle.classList.toggle('selected');
-  },
-
   dragenter: function(e) {
     e.stopPropagation();
     e.preventDefault();

js/reducers.js

@@ -64,7 +64,10 @@ const media = (state, action) => {
       khz: null,
       volume: 50,
       balance: 0,
-      name: ''
+      name: '',
+      channels: null,
+      shuffle: false,
+      repeat: false
     };
   }
   switch (action.type) {
@@ -85,6 +88,12 @@ 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};
+    case 'TOGGLE_REPEAT':
+      return {...state, repeat: !state.repeat};
+    case 'TOGGLE_SHUFFLE':
+      return {...state, shuffle: !state.shuffle};
     default:
       return state;
   }
@@ -137,6 +146,12 @@ const createReducer = (winamp) => {
       case 'TOGGLE_DOUBLESIZE_MODE':
         winamp.toggleDoubledMode();
         return state;
+      case 'TOGGLE_REPEAT':
+        winamp.toggleRepeat();
+        return state;
+      case 'TOGGLE_SHUFFLE':
+        winamp.toggleShuffle();
+        return state;
       default:
         return state;
     }

js/winamp.js

@@ -27,9 +27,7 @@ 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'),
       close: new Event('close')
     };
@@ -108,10 +106,6 @@ module.exports = {
     return this.media.percentComplete();
   },
 
-  getChannelCount: function() {
-    return this.media.channels();
-  },
-
   seekToPercentComplete: function(percent) {
     this.media.seekToPercentComplete(percent);
   },
@@ -162,12 +156,10 @@ module.exports = {
 
   toggleRepeat: function() {
     this.media.toggleRepeat();
-    window.dispatchEvent(this.events.repeatToggled);
   },
 
   toggleShuffle: function() {
     this.media.toggleShuffle();
-    this.mainWindow.toggleShuffle();
   },
 
   toggleLlama: function() {
@@ -239,7 +231,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()});