diff --git a/js/actionCreators.js b/js/actionCreators.js index f4af71e4..ad2cafde 100644 --- a/js/actionCreators.js +++ b/js/actionCreators.js @@ -1,6 +1,8 @@ import MyFile from './myFile'; import skinParser from './skinParser'; +import {clamp} from './utils'; + export function play(mediaPlayer) { return (dispatch, getState) => { if (getState().media.status === 'PLAYING') { @@ -43,6 +45,22 @@ export function close(mediaPlayer) { }; } +export function setVolume(mediaPlayer, volume) { + const realVolume = clamp(volume, 0, 100); + mediaPlayer.setVolume(volume); + return { + type: 'SET_VOLUME', + volume: realVolume + }; +} + +export function adjustVolume(mediaPlayer, volumeDiff) { + return (dispatch, getState) => { + const currentVolume = getState().media.volume; + return dispatch(setVolume(mediaPlayer, currentVolume + volumeDiff)); + }; +} + export function setSkinFromFile(skinFile) { return (dispatch) => { dispatch({type: 'START_LOADING'}); diff --git a/js/components/MainWindow.jsx b/js/components/MainWindow.jsx index 0e194b6d..a0bb1f23 100644 --- a/js/components/MainWindow.jsx +++ b/js/components/MainWindow.jsx @@ -75,7 +75,7 @@ const MainWindow = (props) => { - +
diff --git a/js/components/Volume.jsx b/js/components/Volume.jsx index 0a706cc6..7ba5bacb 100644 --- a/js/components/Volume.jsx +++ b/js/components/Volume.jsx @@ -1,5 +1,6 @@ import React from 'react'; import {connect} from 'react-redux'; +import {setVolume} from '../actionCreators'; class Volume extends React.Component { @@ -11,10 +12,9 @@ class Volume extends React.Component { } setVolume(e) { - this.props.dispatch({ - type: 'SET_VOLUME', - volume: e.target.value - }); + this.props.dispatch( + setVolume(this.props.mediaPlayer, e.target.value) + ); } showMarquee() { diff --git a/js/hotkeys.js b/js/hotkeys.js index c0660ca1..921034ca 100644 --- a/js/hotkeys.js +++ b/js/hotkeys.js @@ -1,4 +1,4 @@ -import {play, pause, stop} from './actionCreators'; +import {play, pause, stop, adjustVolume} from './actionCreators'; module.exports = function(winamp, store) { let keylog = []; @@ -18,14 +18,12 @@ module.exports = function(winamp, store) { case 37: winamp.seekForwardBy(-5); break; // left arrow // up arrow case 38: - const incrementedVolume = Math.min(100, store.getState().media.volume + 1); - store.dispatch({type: 'SET_VOLUME', volume: incrementedVolume}); + store.dispatch(adjustVolume(winamp.media, 1)); break; case 39: winamp.seekForwardBy(5); break; // right arrow // down arrow case 40: - const decrementedVolume = Math.max(0, store.getState().media.volume - 1); - store.dispatch({type: 'SET_VOLUME', volume: decrementedVolume}); + store.dispatch(adjustVolume(winamp.media, -1)); break; case 66: winamp.next(); break; // B // C diff --git a/js/reducers.js b/js/reducers.js index fa92247a..8ba7e1c0 100644 --- a/js/reducers.js +++ b/js/reducers.js @@ -144,9 +144,6 @@ const createReducer = (winamp) => { return (state, action) => { state = reducer(state, action); switch (action.type) { - case 'SET_VOLUME': - winamp.setVolume(action.volume); - return state; case 'SET_BALANCE': winamp.setBalance(action.balance); return state; diff --git a/js/utils.js b/js/utils.js index 6c12635b..92e5429f 100644 --- a/js/utils.js +++ b/js/utils.js @@ -39,8 +39,13 @@ const parseViscolors = (text) => { return colors; }; +const clamp = (value, min, max) => { + return Math.min(Math.max(value, min), max); +}; + module.exports = { getTimeObj, getTimeStr, - parseViscolors + parseViscolors, + clamp }; diff --git a/js/winamp.js b/js/winamp.js index d333c859..5e6eda63 100755 --- a/js/winamp.js +++ b/js/winamp.js @@ -47,15 +47,6 @@ module.exports = { this.media.seekToPercentComplete(percent); }, - // From 0-100 - setVolume: function(volume) { - // Ensure volume does not go out of bounds - volume = Math.max(volume, 0); - volume = Math.min(volume, 100); - - this.media.setVolume(volume); - }, - // From -100 to 100 setBalance: function(balance) { this.media.setBalance(balance);