From a86d81a9b78b699af091568942ff71bfe87b1a1a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Tue, 26 Jul 2016 17:22:52 -0700 Subject: [PATCH 1/2] Move MonoStereo to React --- js/MonoStereo.jsx | 12 ++++++++++++ js/main-window-dom.js | 5 +---- js/main-window.js | 18 ++---------------- js/reducers.js | 5 ++++- js/winamp.js | 7 +------ 5 files changed, 20 insertions(+), 27 deletions(-) create mode 100644 js/MonoStereo.jsx diff --git a/js/MonoStereo.jsx b/js/MonoStereo.jsx new file mode 100644 index 00000000..a2eb0f88 --- /dev/null +++ b/js/MonoStereo.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import {connect} from 'react-redux'; + + +const MonoStereo = (props) => { + return
+
+
+
; +}; + +module.exports = connect(state => state.media)(MonoStereo); diff --git a/js/main-window-dom.js b/js/main-window-dom.js index cafad569..80e8595e 100644 --- a/js/main-window-dom.js +++ b/js/main-window-dom.js @@ -47,10 +47,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [ el('div', {id: 'song-title', class: 'text'}), el('div', {id: 'kbps-holder'}), el('div', {id: 'khz-holder'}), - el('div', {class: 'mono-stereo'}, [ - el('div', {id: 'mono'}), - el('div', {id: 'stereo'}) - ]) + el('div', {id: 'mono-stereo-holder'}) ]), el('div', {id: 'volume-holder'}), el('div', {id: 'balance-holder'}), diff --git a/js/main-window.js b/js/main-window.js index 79f1b788..0b9df059 100644 --- a/js/main-window.js +++ b/js/main-window.js @@ -8,6 +8,7 @@ import Khz from './Khz.jsx'; import Volume from './Volume.jsx'; import Balance from './Balance.jsx'; import Position from './Position.jsx'; +import MonoStereo from './MonoStereo.jsx'; import '../css/main-window.css'; @@ -22,8 +23,6 @@ module.exports = { eject: document.getElementById('eject'), repeat: document.getElementById('repeat'), shuffle: document.getElementById('shuffle'), - mono: document.getElementById('mono'), - stereo: document.getElementById('stereo'), workIndicator: document.getElementById('work-indicator'), titleBar: document.getElementById('title-bar'), window: document.getElementById('main-window') @@ -41,6 +40,7 @@ module.exports = { this.winamp.renderTo(, document.getElementById('volume-holder')); this.winamp.renderTo(, document.getElementById('balance-holder')); this.winamp.renderTo(, document.getElementById('position-holder')); + this.winamp.renderTo(, document.getElementById('mono-stereo-holder')); this._registerListeners(); return this; @@ -97,9 +97,6 @@ module.exports = { window.addEventListener('changeState', function() { self.changeState(); }); - window.addEventListener('channelCountUpdated', function() { - self.updateChannelCount(); - }); window.addEventListener('doubledModeToggled', function() { self.toggleDoubledMode(); }); @@ -156,17 +153,6 @@ module.exports = { this.nodes.window.classList.toggle('llama'); }, - updateChannelCount: function() { - var channels = this.winamp.getChannelCount(); - this.nodes.mono.classList.remove('selected'); - this.nodes.stereo.classList.remove('selected'); - if (channels === 1) { - this.nodes.mono.classList.add('selected'); - } else if (channels === 2) { - this.nodes.stereo.classList.add('selected'); - } - }, - toggleRepeat: function() { this.nodes.repeat.classList.toggle('selected'); }, diff --git a/js/reducers.js b/js/reducers.js index 64dd96b4..cd13adda 100644 --- a/js/reducers.js +++ b/js/reducers.js @@ -64,7 +64,8 @@ const media = (state, action) => { khz: null, volume: 50, balance: 0, - name: '' + name: '', + channels: null }; } switch (action.type) { @@ -85,6 +86,8 @@ const media = (state, action) => { return {...state, balance: action.balance}; case 'SET_MEDIA_NAME': return {...state, name: action.name}; + case 'SET_CHANNELS_COUNT': + return {...state, channels: action.channels}; default: return state; } diff --git a/js/winamp.js b/js/winamp.js index ee60a0b3..cf2606cd 100755 --- a/js/winamp.js +++ b/js/winamp.js @@ -27,7 +27,6 @@ module.exports = { startLoading: new Event('startLoading'), stopLoading: new Event('stopLoading'), changeState: new Event('changeState'), - channelCountUpdated: new Event('channelCountUpdated'), doubledModeToggled: new Event('doubledModeToggled'), repeatToggled: new Event('repeatToggled'), llamaToggled: new Event('llamaToggled'), @@ -108,10 +107,6 @@ module.exports = { return this.media.percentComplete(); }, - getChannelCount: function() { - return this.media.channels(); - }, - seekToPercentComplete: function(percent) { this.media.seekToPercentComplete(percent); }, @@ -239,7 +234,7 @@ module.exports = { var khz = Math.round(this.media.sampleRate() / 1000).toString(); this.dispatch({type: 'SET_MEDIA_KBPS', kbps: kbps}); this.dispatch({type: 'SET_MEDIA_KHZ', khz: khz}); - window.dispatchEvent(this.events.channelCountUpdated); + this.dispatch({type: 'SET_CHANNELS_COUNT', channels: this.media.channels()}); this.dispatch({type: 'SET_MEDIA_NAME', name: this.fileName}); window.dispatchEvent(this.events.timeUpdated); this.dispatch({type: 'SET_MEDIA_LENGTH', length: this.media.duration()}); From 00f9ed38fb97da85e7e4db4561657b8292c875df Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Tue, 26 Jul 2016 17:37:25 -0700 Subject: [PATCH 2/2] 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() {