From 929d92bbac467e4b8820e3c31df476c80a447ea2 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 19 May 2017 16:47:40 +1200
Subject: [PATCH] Mute visual feedback

---
 src/js/components/VolumeControl.js |  2 +-
 src/scss/components/_player.scss   | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/js/components/VolumeControl.js b/src/js/components/VolumeControl.js
index 1e02797f..da8773ec 100755
--- a/src/js/components/VolumeControl.js
+++ b/src/js/components/VolumeControl.js
@@ -25,7 +25,7 @@ class VolumeControl extends React.Component{
 
 	render(){
 		return (
-			<span className="volume-control">
+			<span className={this.props.mute ? "volume-control muted" : "volume-control"}>
 				<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
 					{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
 				</a>
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index 339cccc1..38ff16e2 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -151,16 +151,12 @@
 	a {
 		position: relative;
 		z-index: 99;
-	}
-
-	&:hover {
-		.slider-wrapper {
-			display: block;
-		}
+		padding: 0 !important;
 	}
 
 	.fa {
 		width: 6px;
+		padding: 12px;
 	}
 
 	.slider-wrapper {
@@ -173,4 +169,22 @@
 		background: rgba(0,0,0,0.8);
 		z-index: 98;
 	}
+
+	&.muted {
+		.fa {
+			color: $red;
+		}
+
+		.slider {
+			.progress {
+				background: rgba(255,255,255,0.25);
+			}
+		}
+	}
+
+	&:hover {
+		.slider-wrapper {
+			display: block;
+		}
+	}
 }
\ No newline at end of file