Move visualizer code out of main-window.js (#171)

js/MainWindow.jsx

@@ -19,6 +19,7 @@ import Shade from './Shade.jsx';
 import ShadeTime from './ShadeTime.jsx';
 import Shuffle from './Shuffle.jsx';
 import Time from './Time.jsx';
+import Visualizer from './Visualizer.jsx';
 import Volume from './Volume.jsx';
 
 import '../css/main-window.css';
@@ -59,7 +60,7 @@ const MainWindow = (props) => {
         <div id='play-pause'></div>
         <div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
         <Time />
-        <canvas id='visualizer' width='152' height='32'></canvas>
+        <Visualizer />
       </div>
       <div className='media-info'>
         <Marquee />

js/Visualizer.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+class Visualizer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.props.dispatch({type: 'TOGGLE_VISUALIZER'});
+  }
+  render() {
+    return <canvas
+      onClick={this.handleClick}
+      id='visualizer'
+      width='152'
+      height='32'
+    />;
+  }
+}
+
+module.exports = connect(state => state)(Visualizer);

js/main-window.js

@@ -1,15 +1,7 @@
 module.exports = {
-  init: function(winamp) {
-    this.nodes = {
-      window: document.getElementById('main-window')
-    };
-
+  init: function() {
     this.handle = document.getElementById('title-bar');
-    this.body = this.nodes.window;
-
-    document.getElementById('visualizer').onclick = function() {
-      winamp.toggleVisualizer();
-    };
+    this.body = document.getElementById('main-window');
     return this;
   }
 };

js/reducers.js

@@ -154,6 +154,9 @@ const createReducer = (winamp) => {
       case 'TOGGLE_SHUFFLE':
         winamp.toggleShuffle();
         return state;
+      case 'TOGGLE_VISUALIZER':
+        winamp.toggleVisualizer();
+        return state;
       default:
         return state;
     }