Merge pull request #229 from Chandankkrr/master

Added ability to mute volume when clicking on volume icon

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

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 = 'MUTE';
+export const UNMUTE = 'UNMUTE';
 export const UPDATE_PLAYBACK_STREAM_LOADING = 'UPDATE_PLAYBACK_STREAM_LOADING';
 
 export function startPlayback() {
@@ -58,6 +60,30 @@ export function updateVolume(volume) {
   };
 }
 
+export function mute(){
+  return {
+    type: MUTE,
+    payload: null
+  };
+}
+
+export function unMute(){
+  return {
+    type: UNMUTE,
+    payload: null
+  };
+}
+
+export function toggleMute(muted) {
+  return dispatch => {
+    if (muted){
+      dispatch(mute());
+    } else {
+      dispatch(unMute());
+    }
+  };
+}
+
 export function updateStreamLoading(state) {
   return {
     type: UPDATE_PLAYBACK_STREAM_LOADING,

app/components/VolumeControls/index.js

@@ -11,19 +11,27 @@ class VolumeControls extends React.Component {
   handleClick(value) {
     return this.props.updateVolume(value);
   }
-
+
+  toggleMute(){
+    this.props.toggleMute(!this.props.muted);
+  }
+
   render() {
     return (
       <div className={styles.volume_controls_container}>
         <PlayOptionsControls
           toggleOption={this.props.toggleOption}
           settings={this.props.settings}
         />
-        <FontAwesome name='volume-up'/>
+        <div className={styles.volume_speaker_control}
+          onClick={this.toggleMute.bind(this)}>
+          <FontAwesome name={this.props.muted ? 'volume-off' : 'volume-up'} />
+        </div>
+
         <VolumeSlider
           fill={this.props.fill}
           handleClick={this.handleClick.bind(this)}
-	      />
+        />
       </div>
     );
   }

app/components/VolumeControls/styles.scss

@@ -15,3 +15,12 @@
 
   font-size: 24px;
 }
+
+.volume_speaker_control{
+    display: flex;
+
+    cursor: pointer;
+
+    width: 50px;
+    height: 52px
+}

app/containers/SoundContainer/index.js

@@ -150,7 +150,7 @@ class SoundContainer extends React.Component {
         onLoading={this.handleLoading.bind(this)}
         onLoad={this.handleLoaded.bind(this)}
         position={player.seek}
-        volume={player.volume}
+        volume={player.muted ? 0 : player.volume}
       />
     );
   }

app/reducers/player.js

@@ -6,6 +6,8 @@ import {
   UPDATE_PLAYBACK_PROGRESS,
   UPDATE_SEEK,
   UPDATE_VOLUME,
+  MUTE,
+  UNMUTE,
   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:
+    return Object.assign({}, state, {
+      muted: true
+    });
+  case UNMUTE:
+    return Object.assign({}, state, {
+      muted: false
+    });
   case NEXT_SONG:
   case PREVIOUS_SONG:
   case SELECT_SONG: