Moved state out.

AnneHalliwell · Jan 31, 2019 · 0d1dd26 · 0d1dd26
1 parent da1a5e8
commit 0d1dd26
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 34 deletions.
diff --git a/app/App.js b/app/App.js
@@ -230,6 +230,8 @@ class App extends React.Component {
       <VolumeControls
         fill={this.props.player.volume}
         updateVolume={this.props.actions.updateVolume}
+        muted={this.props.player.muted}
+        toggleMute={this.props.actions.toggleMute}
         toggleOption={this.props.actions.toggleOption}
         settings={settings}
       />

diff --git a/app/actions/player.js b/app/actions/player.js
@@ -6,6 +6,8 @@ export const PAUSE_PLAYBACK = 'PAUSE_PLAYBACK';
 export const UPDATE_PLAYBACK_PROGRESS = 'UPDATE_PLAYBACK_PROGRESS';
 export const UPDATE_SEEK = 'UPDATE_SEEK';
 export const UPDATE_VOLUME = 'UPDATE_VOLUME';
+export const MUTE_ON = 'MUTE_ON';
+export const MUTE_OFF = 'MUTE_OFF';
 export const UPDATE_PLAYBACK_STREAM_LOADING = 'UPDATE_PLAYBACK_STREAM_LOADING';
 
 export function startPlayback() {
@@ -58,6 +60,31 @@ export function updateVolume(volume) {
   };
 }
 
+export function muteOn(){
+  return {
+    type: MUTE_ON,
+    payload: null
+  };
+}
+
+export function muteOff(){
+  return {
+    type: MUTE_OFF,
+    payload: null
+  };
+}
+
+export function toggleMute(mute) {
+  return dispatch => {
+    if (mute){
+      dispatch(muteOn());
+      dispatch(updateVolume(0));
+    } else {
+      dispatch(muteOff());
+    }
+  };
+}
+
 export function updateStreamLoading(state) {
   return {
     type: UPDATE_PLAYBACK_STREAM_LOADING,

diff --git a/app/components/VolumeControls/index.js b/app/components/VolumeControls/index.js
@@ -8,40 +8,12 @@ import VolumeSlider from './VolumeSlider';
 
 class VolumeControls extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isVolumeMuted: false,
-      volume: 100
-    };
-  }
-
   handleClick(value) {
-    this.setState({
-      volume: value,
-      isVolumeMuted: this.state.isVolumeMuted && value === 0
-    });
     return this.props.updateVolume(value);
   }
 
-  toggleMute = () => {
-    if (this.state.isVolumeMuted) {
-      this.handleMuteOff();
-    } else {
-      this.handleMuteOn();
-    }
-
-    this.setState({
-      isVolumeMuted: !this.state.isVolumeMuted
-    });
-  }
-
-  handleMuteOn() {
-    this.props.updateVolume(0);
-  }
-
-  handleMuteOff() {
-    this.handleClick(this.state.volume);
+  toggleMute(){
+    this.props.toggleMute(!this.props.muted);
   }
 
   render() {
@@ -52,12 +24,12 @@ class VolumeControls extends React.Component {
           settings={this.props.settings}
         />
         <div className={styles.volume_speaker_control}
-          onClick={this.toggleMute}>
-          <FontAwesome name={this.state.isVolumeMuted ? 'volume-off' : 'volume-up'} />
+          onClick={this.toggleMute.bind(this)}>
+          <FontAwesome name={this.props.muted ? 'volume-off' : 'volume-up'} />
         </div>
 
         <VolumeSlider
-          fill={this.state.volume}
+          fill={this.props.fill}
           handleClick={this.handleClick.bind(this)}
         />
       </div>

diff --git a/app/reducers/player.js b/app/reducers/player.js
@@ -6,6 +6,8 @@ import {
   UPDATE_PLAYBACK_PROGRESS,
   UPDATE_SEEK,
   UPDATE_VOLUME,
+  MUTE_ON,
+  MUTE_OFF,
   UPDATE_PLAYBACK_STREAM_LOADING
 } from '../actions/player';
 
@@ -20,7 +22,8 @@ const initialState = {
   playbackStreamLoading: false,
   playbackProgress: 0,
   seek: 0,
-  volume: 100
+  volume: 100,
+  muted: false
 };
 
 export default function PlayerReducer(state=initialState, action) {
@@ -46,6 +49,14 @@ export default function PlayerReducer(state=initialState, action) {
     return Object.assign({}, state, {
       volume: action.payload
     });
+  case MUTE_ON:
+    return Object.assign({}, state, {
+      muted: true
+    });
+  case MUTE_OFF:
+    return Object.assign({}, state, {
+      muted: false
+    });
   case NEXT_SONG:
   case PREVIOUS_SONG:
   case SELECT_SONG: