From 4138c5aaa06245de028c0b139a29290409eba4ea Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 3 Jan 2017 22:13:23 -0800
Subject: [PATCH] More media middleware cleanup

---
 js/actionCreators.js         |  3 +--
 js/actionTypes.js            |  1 +
 js/components/MainWindow.jsx |  4 ++--
 js/components/Position.jsx   |  8 ++++----
 js/components/Shuffle.jsx    | 12 ++++++++----
 js/hotkeys.js                |  2 +-
 js/mediaMiddleware.js        |  8 ++++++++
 7 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/js/actionCreators.js b/js/actionCreators.js
index 3ada2ea0..e7c5b19d 100644
--- a/js/actionCreators.js
+++ b/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};
 }
 
diff --git a/js/actionTypes.js b/js/actionTypes.js
index d0d87615..c8a77db8 100644
--- a/js/actionTypes.js
+++ b/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';
diff --git a/js/components/MainWindow.jsx b/js/components/MainWindow.jsx
index 8f2f0a1f..4c420ead 100644
--- a/js/components/MainWindow.jsx
+++ b/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>
diff --git a/js/components/Position.jsx b/js/components/Position.jsx
index 3b693658..00dfba5c 100644
--- a/js/components/Position.jsx
+++ b/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) => {
diff --git a/js/components/Shuffle.jsx b/js/components/Shuffle.jsx
index d723374c..9fe170f0 100644
--- a/js/components/Shuffle.jsx
+++ b/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);
diff --git a/js/hotkeys.js b/js/hotkeys.js
index 50511096..8057877f 100644
--- a/js/hotkeys.js
+++ b/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());
diff --git a/js/mediaMiddleware.js b/js/mediaMiddleware.js
index 12a339c1..11e493ae 100644
--- a/js/mediaMiddleware.js
+++ b/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);
     };