Move Eject to React

js/Eject.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Eject extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.props.dispatch({type: 'OPEN_FILE_DIALOG'});
+  }
+  render() {
+    return <div
+      id='eject'
+      onClick={this.handleClick}
+    />;
+  }
+}
+
+module.exports = connect()(Eject);

js/main-window-dom.js

@@ -57,7 +57,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
   ]),
   el('div', {id: 'position-holder'}),
   el('div', {id: 'actions-holder'}),
-  el('div', {id: 'eject'}),
+  el('div', {id: 'eject-holder'}),
   el('div', {class: 'shuffle-repeat'}, [
     el('div', {id: 'shuffle-holder'}),
     el('div', {id: 'repeat-holder'})

js/main-window.js

@@ -11,6 +11,7 @@ import Position from './Position.jsx';
 import MonoStereo from './MonoStereo.jsx';
 import Repeat from './Repeat.jsx';
 import Shuffle from './Shuffle.jsx';
+import Eject from './Eject.jsx';
 
 import '../css/main-window.css';
 
@@ -22,9 +23,7 @@ module.exports = {
       shade: document.getElementById('shade'),
       buttonD: document.getElementById('button-d'),
       visualizer: document.getElementById('visualizer'),
-      eject: document.getElementById('eject'),
       workIndicator: document.getElementById('work-indicator'),
-      titleBar: document.getElementById('title-bar'),
       window: document.getElementById('main-window')
     };
 
@@ -43,6 +42,7 @@ module.exports = {
     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.winamp.renderTo(<Eject />, document.getElementById('eject-holder'));
 
     this._registerListeners();
     return this;
@@ -68,10 +68,6 @@ module.exports = {
       self.winamp.dispatch({type: 'UNSET_FOCUS'});
     };
 
-    this.nodes.eject.onclick = function() {
-      self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'});
-    };
-
     this.nodes.visualizer.onclick = function() {
       self.winamp.toggleVisualizer();
     };