Reinstate pausing marquee

Also fix a bug where releasing the mouse button after moving the cursor outside
of the marquee would fail to restart the marquee.

js/Marquee.jsx

@@ -4,6 +4,11 @@ import {connect} from 'react-redux';
 
 
 class Marquee extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
   componentDidMount() {
     const step = () => {
       setTimeout(() => {
@@ -19,6 +24,15 @@ class Marquee extends React.Component {
     });
     return selected ? selected[0] : selected;
   }
+  handleMouseDown() {
+    this.props.dispatch({type: 'PAUSE_MARQUEE'});
+    document.addEventListener('mouseup', () => {
+      // TODO: Remove this listener
+      setTimeout(() => {
+        this.props.dispatch({type: 'START_MARQUEE'});
+      }, 1000);
+    });
+  }
 
   render() {
     const register = this.selectedRegister();
@@ -29,7 +43,7 @@ class Marquee extends React.Component {
       // TODO: Use the spread operator
       chars = start.concat(end).slice(0, 30);
     }
-    return <div>
+    return <div onMouseDown={this.handleMouseDown}>
     {chars.map(character => {
       // TODO: Standarize how we get a characer class name
       const className = 'character character-' + character.toLowerCase().charCodeAt(0);

js/main-window.js

@@ -71,16 +71,6 @@ module.exports = {
       self.winamp.toggleDoubledMode();
     };
 
-    this.nodes.songTitle.onmousedown = function() {
-      //self.textDisplay.pauseRegisterMarquee('songTitle');
-    };
-
-    this.nodes.songTitle.onmouseup = function() {
-      setTimeout(function() {
-        //self.textDisplay.startRegisterMarquee('songTitle');
-      }, 1000);
-    };
-
     this.nodes.position.onmousedown = function() {
       if (!self.nodes.window.classList.contains('stop')){
         self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'position'});

js/reducers.js

@@ -49,6 +49,10 @@ const marquee = (state, action) => {
         return Object.assign({}, state, {selectedRegister: action.register});
       }
       return state;
+    case 'PAUSE_MARQUEE':
+      return Object.assign({}, state, {stepping: false});
+    case 'START_MARQUEE':
+      return Object.assign({}, state, {stepping: true});
     default:
       return state;
   }