Move Clutter Bar to React

js/ClutterBar.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class ClutterBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseDownDouble = this.handleMouseDownDouble.bind(this);
+    this.handleMouseUpDouble = this.handleMouseUpDouble.bind(this);
+  }
+
+  handleMouseDownDouble() {
+    this.props.dispatch({type: 'SET_FOCUS', input: 'double'});
+  }
+
+  handleMouseUpDouble() {
+    this.props.dispatch({type: 'TOGGLE_DOUBLESIZE_MODE'});
+    this.props.dispatch({type: 'UNSET_FOCUS'});
+  }
+
+  render() {
+    return <div id='clutter-bar'>
+      <div id='button-o'></div>
+      <div id='button-a'></div>
+      <div id='button-i'></div>
+      <div
+        id='button-d'
+        className={this.props.doubled ? 'selected' : ''}
+        onMouseUp={this.handleMouseUpDouble}
+        onMouseDown={this.handleMouseDownDouble}
+      />
+      <div id='button-v'></div>
+    </div>;
+  }
+}
+
+module.exports = connect(state => state.display)(ClutterBar);

js/MainWindow.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import Actions from './Actions.jsx';
 import Balance from './Balance.jsx';
 import Close from './Close.jsx';
+import ClutterBar from './ClutterBar.jsx';
 import ContextMenu from './ContextMenu.jsx';
 import DragTarget from './DragTarget.jsx';
 import Eject from './Eject.jsx';
@@ -54,13 +55,7 @@ const MainWindow = (props) => {
         <Close />
       </div>
       <div className='status'>
-        <div id='clutter-bar'>
-          <div id='button-o'></div>
-          <div id='button-a'></div>
-          <div id='button-i'></div>
-          <div id='button-d' className={props.display.doubled ? 'selected' : ''}></div>
-          <div id='button-v'></div>
-        </div>
+        <ClutterBar />
         <div id='play-pause'></div>
         <div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
         <Time />

js/main-window.js

@@ -2,7 +2,6 @@ module.exports = {
   init: function(winamp) {
     this.winamp = winamp;
     this.nodes = {
-      buttonD: document.getElementById('button-d'),
       visualizer: document.getElementById('visualizer'),
       workIndicator: document.getElementById('work-indicator'),
       window: document.getElementById('main-window')
@@ -18,15 +17,6 @@ module.exports = {
   _registerListeners: function() {
     var self = this;
 
-    this.nodes.buttonD.onmousedown = function() {
-      self.winamp.dispatch({type: 'SET_FOCUS', input: 'double'});
-    };
-
-    this.nodes.buttonD.onmouseup = function() {
-      self.winamp.dispatch({type: 'TOGGLE_DOUBLESIZE_MODE'});
-      self.winamp.dispatch({type: 'UNSET_FOCUS'});
-    };
-
     this.nodes.visualizer.onclick = function() {
       self.winamp.toggleVisualizer();
     };