From e4471f66115efdeb78ec62f0bc0292785de87688 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 28 Jul 2016 18:18:36 -0700
Subject: [PATCH] Move visualizer code out of main-window.js (#171)

---
 js/MainWindow.jsx |  3 ++-
 js/Visualizer.jsx | 23 +++++++++++++++++++++++
 js/main-window.js | 12 ++----------
 js/reducers.js    |  3 +++
 4 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 js/Visualizer.jsx

diff --git a/js/MainWindow.jsx b/js/MainWindow.jsx
index 1265245e..1debe9a4 100644
--- a/js/MainWindow.jsx
+++ b/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 />
diff --git a/js/Visualizer.jsx b/js/Visualizer.jsx
new file mode 100644
index 00000000..72e32acd
--- /dev/null
+++ b/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);
diff --git a/js/main-window.js b/js/main-window.js
index 01ab49cd..17777896 100644
--- a/js/main-window.js
+++ b/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;
   }
 };
diff --git a/js/reducers.js b/js/reducers.js
index edd84f8c..9627caf3 100644
--- a/js/reducers.js
+++ b/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;
     }