diff --git a/js/Marquee.jsx b/js/Marquee.jsx index 8e136505..58fcd82b 100644 --- a/js/Marquee.jsx +++ b/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
+ return
{chars.map(character => { // TODO: Standarize how we get a characer class name const className = 'character character-' + character.toLowerCase().charCodeAt(0); diff --git a/js/main-window.js b/js/main-window.js index 5b16a2d0..728954c1 100644 --- a/js/main-window.js +++ b/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'}); diff --git a/js/reducers.js b/js/reducers.js index bd43da52..31decf8b 100644 --- a/js/reducers.js +++ b/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; }