Volume control modal mute button

src/js/components/Modal/VolumeModal.js

@@ -10,7 +10,7 @@ export default class VolumeModal extends React.Component{
 		super(props)
 	}
 
-	handleClick(e){
+	changeVolume(e){
 		var slider = e.target;
 
 		var sliderY = e.clientY - slider.getBoundingClientRect().top;
@@ -20,10 +20,17 @@ export default class VolumeModal extends React.Component{
 		this.props.mopidyActions.setVolume( percent )
 	}
 
+	toggleMute(e){
+		this.props.mopidyActions.setMute(!this.props.mute)
+	}
+
 	render(){
 		return (
 			<div>
-				<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
+				<a className="toggle-mute" onClick={e => this.toggleMute(e)}>
+					{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
+				</a>
+				<div className={this.props.mute ? "slider vertical disabled" : "slider vertical"} onClick={e => this.changeVolume(e)}>
 					<div className="track">
 						<div className="progress" style={{ height: this.props.volume+'%' }}></div>
 					</div>

src/js/components/VolumeControl.js

@@ -26,22 +26,19 @@ class VolumeControl extends React.Component{
 
 	render(){
 		var className = "volume-control"
-		if (this.props.mute){
-			className += " muted"
-		}
 		return (
 			<span className={className}>
 
 				<a className="modal-trigger" onClick={() => this.props.uiActions.openModal('volume')}>
-					{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
+					{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
 				</a>
 
 				<span className="hover-trigger">
 					<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
-						{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
+						{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
 					</a>
 					<div className="slider-wrapper">
-						<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
+						<div className={this.props.mute ? "slider vertical disabled" : "slider vertical"} onClick={ (e) => this.handleClick(e) } >
 							<div className="track">
 								<div className="progress" style={{ height: this.props.volume+'%' }}></div>
 							</div>

src/scss/components/_modal.scss

@@ -206,12 +206,25 @@
 		.slider {
 			position: absolute;
 			top: 10vh;
-			left: 45vw;
+			left: 55vw;
 			height: 80vh;
-			width: 10vw;
+			width: 20vw;
 
 			.track {
-				width: 100%;
+				width: auto;
+				left: 25%;
+				right: 25%;
+			}
+		}
+
+		.toggle-mute {
+			position: absolute;
+			font-size: 16vh;
+			top: 42vh;
+			left: 20vw;
+
+			.fa.muted {
+				color: $red;
 			}
 		}
 	}

src/scss/components/_player.scss

@@ -24,16 +24,9 @@
 		z-index: 98;
 	}
 
-	&.muted {
-		.fa {
-			color: $red;
-		}
-
-		.slider {
-			.progress {
-				background: rgba(255,255,255,0.25);
-			}
-		}
+	.fa.muted {
+		color: $red;
+		position: relative;
 	}
 
 	.modal-trigger {

src/scss/components/_slider.scss

@@ -15,6 +15,12 @@
 		}
 	}
 
+	&.disabled {
+		.progress {
+			background: rgba(255,255,255,0.25);
+		}
+	}
+
 	&.horizontal {
 		margin: 10px 0;
 		height: 20px;