Move SET_VOLUME to actionCreators

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'});

js/components/MainWindow.jsx

@@ -75,7 +75,7 @@ const MainWindow = (props) => {
           <Khz />
           <MonoStereo />
         </div>
-        <Volume />
+        <Volume mediaPlayer={props.mediaPlayer} />
         <Balance />
         <div className='windows'>
           <div id='equalizer-button' />

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() {

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

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;

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
 };

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);