Added ability to mute volume when clicking on volume icon

Volume icon changes when clicking on it
AnneHalliwell · Jan 31, 2019 · da1a5e8 · da1a5e8
1 parent 2da156d
commit da1a5e8
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/app/components/VolumeControls/index.js b/app/components/VolumeControls/index.js
@@ -8,22 +8,58 @@ 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);
+  }
+
   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}>
+          <FontAwesome name={this.state.isVolumeMuted ? 'volume-off' : 'volume-up'} />
+        </div>
+
         <VolumeSlider
-          fill={this.props.fill}
+          fill={this.state.volume}
           handleClick={this.handleClick.bind(this)}
-	      />
+        />
       </div>
     );
   }

diff --git a/app/components/VolumeControls/styles.scss b/app/components/VolumeControls/styles.scss
@@ -15,3 +15,12 @@
 
   font-size: 24px;
 }
+
+.volume_speaker_control{
+    display: flex;
+
+    cursor: pointer;
+
+    width: 50px;
+    height: 52px
+}