Avoiding stateful VolumeControl component. Maintating muted in player…

… global state.
AnneHalliwell · Feb 1, 2019 · d3b9ec8 · d3b9ec8
1 parent da1a5e8
commit d3b9ec8
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 35 deletions.
diff --git a/app/App.js b/app/App.js
@@ -228,10 +228,12 @@ class App extends React.Component {
   renderVolumeControl (settings) {
     return (
       <VolumeControls
-        fill={this.props.player.volume}
+        volume={this.props.player.volume}
         updateVolume={this.props.actions.updateVolume}
         toggleOption={this.props.actions.toggleOption}
         settings={settings}
+        muted={this.props.player.muted}
+        toggleMute={this.props.actions.toggleMute}
       />
     );
   }

diff --git a/app/actions/player.js b/app/actions/player.js
@@ -6,6 +6,9 @@ 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 TOGGLE_MUTE = 'TOGGLE_MUTE';
+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 +61,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(muted) {
+  return dispatch => {
+    if (muted) {
+      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,15 @@ 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
-    });
+    if (value > 0){
+      this.props.toggleMute(false);
+    }
     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);
+    this.props.toggleMute(!this.props.muted);
   }
 
   render() {
@@ -52,12 +27,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.volume}
           handleClick={this.handleClick.bind(this)}
         />
       </div>

diff --git a/app/reducers/player.js b/app/reducers/player.js
@@ -6,7 +6,9 @@ import {
   UPDATE_PLAYBACK_PROGRESS,
   UPDATE_SEEK,
   UPDATE_VOLUME,
-  UPDATE_PLAYBACK_STREAM_LOADING
+  UPDATE_PLAYBACK_STREAM_LOADING,
+  MUTE_ON,
+  MUTE_OFF
 } from '../actions/player';
 
 import {
@@ -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: