Move Actons to React

js/main-window-dom.js

@@ -71,13 +71,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     el('div', {id: 'playlist-button'})
   ]),
   el('input', {id: 'position', type: 'range', min: '0', max: '100', step: '1', value: '0'}),
-  el('div', {class: 'actions'}, [
-    el('div', {id: 'previous'}),
-    el('div', {id: 'play'}),
-    el('div', {id: 'pause'}),
-    el('div', {id: 'stop'}),
-    el('div', {id: 'next'})
-  ]),
+  el('div', {id: 'actions-holder'}),
   el('div', {id: 'eject'}),
   el('div', {class: 'shuffle-repeat'}, [
     el('div', {id: 'shuffle'}),

js/main-window.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Marquee from './Marquee.jsx';
+import Actions from './Actions.jsx';
 
 import '../css/main-window.css';
 
@@ -14,16 +15,10 @@ module.exports = {
       volumeMessage: document.getElementById('volume-message'),
       balanceMessage: document.getElementById('balance-message'),
       positionMessage: document.getElementById('position-message'),
-      songTitle: document.getElementById('song-title'),
       time: document.getElementById('time'),
       shadeTime: document.getElementById('shade-time'),
       shadeMinusSign: document.getElementById('shade-minus-sign'),
       visualizer: document.getElementById('visualizer'),
-      previous: document.getElementById('previous'),
-      play: document.getElementById('play'),
-      pause: document.getElementById('pause'),
-      stop: document.getElementById('stop'),
-      next: document.getElementById('next'),
       eject: document.getElementById('eject'),
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
@@ -41,7 +36,8 @@ module.exports = {
     this.handle = document.getElementById('title-bar');
     this.body = this.nodes.window;
 
-    this.winamp.renderTo(<Marquee />, this.nodes.songTitle);
+    this.winamp.renderTo(<Marquee />, document.getElementById('song-title'));
+    this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
 
     this._registerListeners();
     return this;
@@ -75,10 +71,6 @@ module.exports = {
       self.winamp.toggleDoubledMode();
     };
 
-    this.nodes.play.onclick = function() {
-      self.winamp.play();
-    };
-
     this.nodes.songTitle.onmousedown = function() {
       //self.textDisplay.pauseRegisterMarquee('songTitle');
     };
@@ -116,22 +108,6 @@ module.exports = {
       }
     };
 
-    this.nodes.previous.onclick = function() {
-      self.winamp.previous();
-    };
-
-    this.nodes.next.onclick = function() {
-      self.winamp.next();
-    };
-
-    this.nodes.pause.onclick = function() {
-      self.winamp.pause();
-    };
-
-    this.nodes.stop.onclick = function() {
-      self.winamp.stop();
-    };
-
     this.nodes.eject.onclick = function() {
       self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'});
     };

js/reducers.js

@@ -81,6 +81,15 @@ const createReducer = (winamp) => {
   return (state, action) => {
     state = reducer(state, action);
     switch (action.type) {
+      case 'PLAY':
+        winamp.play();
+        return state;
+      case 'PAUSE':
+        winamp.pause();
+        return state;
+      case 'STOP':
+        winamp.stop();
+        return state;
       case 'CLOSE_WINAMP':
         winamp.close();
         return state;