More media middleware cleanup

js/actionCreators.js

@@ -70,8 +70,7 @@ export function toggleRepeat() {
   return {type: TOGGLE_REPEAT};
 }
 
-export function toggleShuffle(mediaPlayer) {
-  mediaPlayer.toggleShuffle();
+export function toggleShuffle() {
   return {type: TOGGLE_SHUFFLE};
 }
 

js/actionTypes.js

@@ -4,6 +4,7 @@ export const IS_PLAYING = 'IS_PLAYING';
 export const IS_STOPPED = 'IS_STOPPED';
 export const PAUSE = 'PAUSE';
 export const PLAY = 'PLAY';
+export const SEEK_TO_PERCENT_COMPLETE = 'SEEK_TO_PERCENT_COMPLETE';
 export const SET_BALANCE = 'SET_BALANCE';
 export const SET_BAND_VALUE = 'SET_BAND_VALUE';
 export const SET_FOCUS = 'SET_FOCUS';

js/components/MainWindow.jsx

@@ -110,8 +110,8 @@ export class MainWindow extends React.Component {
         <ActionButtons mediaPlayer={this.props.mediaPlayer} />
         <Eject winamp={this.props.winamp} />
         <div className='shuffle-repeat'>
-          <Shuffle mediaPlayer={this.props.mediaPlayer} />
-          <Repeat mediaPlayer={this.props.mediaPlayer} />
+          <Shuffle />
+          <Repeat />
         </div>
         <a id='about' target='blank' href='https://github.com/captbaritone/winamp2-js' />
       </div>

js/components/Position.jsx

@@ -19,7 +19,7 @@ const Position = ({position, seekToPercentComplete, displayedPosition, setPositi
     max='100'
     step='1'
     value={displayedPosition}
-    onChange={seekToPercentComplete}
+    onChange={setPosition}
     onInput={setPosition}
     onMouseUp={seekToPercentComplete}
     onMouseDown={setPosition}
@@ -30,7 +30,7 @@ const mapStateToProps = ({media, userInput}) => {
   const position = media.length ? (media.timeElapsed / media.length) * 100 : 0;
 
   const displayedPosition = (userInput.focus === 'position') ?
-    userInput.scrubbingPosition :
+    userInput.scrubPosition :
     position;
 
   return {
@@ -39,9 +39,9 @@ const mapStateToProps = ({media, userInput}) => {
   };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
+const mapDispatchToProps = (dispatch) => ({
   seekToPercentComplete: (e) => {
-    ownProps.mediaPlayer.seekToPercentComplete(e.target.value);
+    dispatch({type: 'SEEK_TO_PERCENT_COMPLETE', percent: e.target.value});
     dispatch({type: 'UNSET_FOCUS'});
   },
   setPosition: (e) => {

js/components/Shuffle.jsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import classnames from 'classnames';
+import toggleShuffle from '../actionCreators';
 
 
-const Shuffle = ({shuffle, toggleShuffle}) => (
+const Shuffle = ({shuffle, handleClick}) => (
   <div
     id='shuffle'
     className={classnames({selected: shuffle})}
-    onClick={toggleShuffle}
+    onClick={handleClick}
   />
 );
-const mapStateToProps = (state) => state.media;
+const mapStateToProps = (state) => ({
+  shuffle: state.media.shuffle
+});
+
 const mapDispatchToProps = (dispatch) => ({
-  toggleShuffle: () => dispatch({type: 'TOGGLE_SHUFFLE'})
+  handleClick: () => dispatch(toggleShuffle())
 });
 module.exports = connect(mapStateToProps, mapDispatchToProps)(Shuffle);

js/hotkeys.js

@@ -59,7 +59,7 @@ module.exports = function(winamp, {dispatch}) {
           dispatch(toggleRepeat());
           break;
         case 83: // S
-          dispatch(toggleShuffle(winamp.media));
+          dispatch(toggleShuffle());
           break;
         case 86: // V
           dispatch(stop());

js/mediaMiddleware.js

@@ -3,12 +3,14 @@ import {
   IS_STOPPED,
   PAUSE,
   PLAY,
+  SEEK_TO_PERCENT_COMPLETE,
   SET_BALANCE,
   SET_VOLUME,
   START_WORKING,
   STOP,
   STOP_WORKING,
   TOGGLE_REPEAT,
+  TOGGLE_SHUFFLE,
   UPDATE_TIME_ELAPSED
 } from './actionTypes';
 
@@ -54,6 +56,12 @@ export default (media) => (
         case TOGGLE_REPEAT:
           media.toggleRepeat();
           break;
+        case TOGGLE_SHUFFLE:
+          media.toggleShuffle();
+          break;
+        case SEEK_TO_PERCENT_COMPLETE:
+          media.seekToPercentComplete(action.percent);
+          break;
       }
       return next(action);
     };