Move Shuffle/Repeat to React

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

@@ -59,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

@@ -9,6 +9,8 @@ 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';
 
@@ -21,8 +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'),
       workIndicator: document.getElementById('work-indicator'),
       titleBar: document.getElementById('title-bar'),
       window: document.getElementById('main-window')
@@ -41,6 +41,8 @@ module.exports = {
     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();
     };
@@ -100,9 +94,6 @@ module.exports = {
     window.addEventListener('doubledModeToggled', function() {
       self.toggleDoubledMode();
     });
-    window.addEventListener('repeatToggled', function() {
-      self.toggleRepeat();
-    });
     window.addEventListener('llamaToggled', function() {
       self.toggleLlama();
     });
@@ -153,14 +144,6 @@ module.exports = {
     this.nodes.window.classList.toggle('llama');
   },
 
-  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

@@ -65,7 +65,9 @@ const media = (state, action) => {
       volume: 50,
       balance: 0,
       name: '',
-      channels: null
+      channels: null,
+      shuffle: false,
+      repeat: false
     };
   }
   switch (action.type) {
@@ -88,6 +90,10 @@ const media = (state, action) => {
       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;
   }
@@ -140,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

@@ -28,7 +28,6 @@ module.exports = {
       stopLoading: new Event('stopLoading'),
       changeState: new Event('changeState'),
       doubledModeToggled: new Event('doubledModeToggled'),
-      repeatToggled: new Event('repeatToggled'),
       llamaToggled: new Event('llamaToggled'),
       close: new Event('close')
     };
@@ -157,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() {