From 00f9ed38fb97da85e7e4db4561657b8292c875df Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Tue, 26 Jul 2016 17:37:25 -0700 Subject: [PATCH] Move Shuffle/Repeat to React --- js/Repeat.jsx | 22 ++++++++++++++++++++++ js/Shuffle.jsx | 22 ++++++++++++++++++++++ js/main-window-dom.js | 4 ++-- js/main-window.js | 25 ++++--------------------- js/reducers.js | 14 +++++++++++++- js/winamp.js | 3 --- 6 files changed, 63 insertions(+), 27 deletions(-) create mode 100644 js/Repeat.jsx create mode 100644 js/Shuffle.jsx diff --git a/js/Repeat.jsx b/js/Repeat.jsx new file mode 100644 index 00000000..4141e505 --- /dev/null +++ b/js/Repeat.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {connect} from 'react-redux'; + + +class Repeat extends React.Component { + constructor(props) { + super(props); + this.handleClick = this.handleClick.bind(this); + } + handleClick() { + this.props.dispatch({type: 'TOGGLE_REPEAT'}); + } + render() { + return
; + } +} + +module.exports = connect(state => state.media)(Repeat); diff --git a/js/Shuffle.jsx b/js/Shuffle.jsx new file mode 100644 index 00000000..c6c0b8ba --- /dev/null +++ b/js/Shuffle.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {connect} from 'react-redux'; + + +class Shuffle extends React.Component { + constructor(props) { + super(props); + this.handleClick = this.handleClick.bind(this); + } + handleClick() { + this.props.dispatch({type: 'TOGGLE_SHUFFLE'}); + } + render() { + return
; + } +} + +module.exports = connect(state => state.media)(Shuffle); diff --git a/js/main-window-dom.js b/js/main-window-dom.js index 80e8595e..d640892f 100644 --- a/js/main-window-dom.js +++ b/js/main-window-dom.js @@ -59,8 +59,8 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [ el('div', {id: 'actions-holder'}), el('div', {id: 'eject'}), el('div', {class: 'shuffle-repeat'}, [ - el('div', {id: 'shuffle'}), - el('div', {id: 'repeat'}) + el('div', {id: 'shuffle-holder'}), + el('div', {id: 'repeat-holder'}) ]), el('a', {id: 'about', target: 'blank', href: 'https://github.com/captbaritone/winamp2-js'}) ]); diff --git a/js/main-window.js b/js/main-window.js index 0b9df059..df3b23ed 100644 --- a/js/main-window.js +++ b/js/main-window.js @@ -9,6 +9,8 @@ import Volume from './Volume.jsx'; import Balance from './Balance.jsx'; import Position from './Position.jsx'; import MonoStereo from './MonoStereo.jsx'; +import Repeat from './Repeat.jsx'; +import Shuffle from './Shuffle.jsx'; import '../css/main-window.css'; @@ -21,8 +23,6 @@ module.exports = { buttonD: document.getElementById('button-d'), visualizer: document.getElementById('visualizer'), eject: document.getElementById('eject'), - repeat: document.getElementById('repeat'), - shuffle: document.getElementById('shuffle'), workIndicator: document.getElementById('work-indicator'), titleBar: document.getElementById('title-bar'), window: document.getElementById('main-window') @@ -41,6 +41,8 @@ module.exports = { this.winamp.renderTo(, document.getElementById('balance-holder')); this.winamp.renderTo(, document.getElementById('position-holder')); this.winamp.renderTo(, document.getElementById('mono-stereo-holder')); + this.winamp.renderTo(, document.getElementById('repeat-holder')); + this.winamp.renderTo(, document.getElementById('shuffle-holder')); this._registerListeners(); return this; @@ -70,14 +72,6 @@ module.exports = { self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'}); }; - this.nodes.repeat.onclick = function() { - self.winamp.toggleRepeat(); - }; - - this.nodes.shuffle.onclick = function() { - self.winamp.toggleShuffle(); - }; - this.nodes.visualizer.onclick = function() { self.winamp.toggleVisualizer(); }; @@ -100,9 +94,6 @@ module.exports = { window.addEventListener('doubledModeToggled', function() { self.toggleDoubledMode(); }); - window.addEventListener('repeatToggled', function() { - self.toggleRepeat(); - }); window.addEventListener('llamaToggled', function() { self.toggleLlama(); }); @@ -153,14 +144,6 @@ module.exports = { this.nodes.window.classList.toggle('llama'); }, - toggleRepeat: function() { - this.nodes.repeat.classList.toggle('selected'); - }, - - toggleShuffle: function() { - this.nodes.shuffle.classList.toggle('selected'); - }, - dragenter: function(e) { e.stopPropagation(); e.preventDefault(); diff --git a/js/reducers.js b/js/reducers.js index cd13adda..78ef88b1 100644 --- a/js/reducers.js +++ b/js/reducers.js @@ -65,7 +65,9 @@ const media = (state, action) => { volume: 50, balance: 0, name: '', - channels: null + channels: null, + shuffle: false, + repeat: false }; } switch (action.type) { @@ -88,6 +90,10 @@ const media = (state, action) => { return {...state, name: action.name}; case 'SET_CHANNELS_COUNT': return {...state, channels: action.channels}; + case 'TOGGLE_REPEAT': + return {...state, repeat: !state.repeat}; + case 'TOGGLE_SHUFFLE': + return {...state, shuffle: !state.shuffle}; default: return state; } @@ -140,6 +146,12 @@ const createReducer = (winamp) => { case 'TOGGLE_DOUBLESIZE_MODE': winamp.toggleDoubledMode(); return state; + case 'TOGGLE_REPEAT': + winamp.toggleRepeat(); + return state; + case 'TOGGLE_SHUFFLE': + winamp.toggleShuffle(); + return state; default: return state; } diff --git a/js/winamp.js b/js/winamp.js index cf2606cd..745c6318 100755 --- a/js/winamp.js +++ b/js/winamp.js @@ -28,7 +28,6 @@ module.exports = { stopLoading: new Event('stopLoading'), changeState: new Event('changeState'), doubledModeToggled: new Event('doubledModeToggled'), - repeatToggled: new Event('repeatToggled'), llamaToggled: new Event('llamaToggled'), close: new Event('close') }; @@ -157,12 +156,10 @@ module.exports = { toggleRepeat: function() { this.media.toggleRepeat(); - window.dispatchEvent(this.events.repeatToggled); }, toggleShuffle: function() { this.media.toggleShuffle(); - this.mainWindow.toggleShuffle(); }, toggleLlama: function() {