From a3835f4e3e1a541b29150b2a9abc4acb815c81a4 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 25 Oct 2020 10:41:19 +0100
Subject: [PATCH] change volume icon state

---
 src/components/Player.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 6466f6c..751d42b 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -7,8 +7,9 @@
 				class="player"
 				:class="player.isPlaying ? 'pause' : 'play'" />
 		</div>
-		<div class="volumeIcon volumeFull
-		" />
+		<div
+			class="volumeIcon"
+			:class="player.volume == 0 ? 'volumeMute' : 'volumeVolume'" />
 		<input
 			class="volume"
 			type="range"
@@ -106,6 +107,13 @@ export default {
 		mask-image: var(--icon-sound-000);
 	}
 
+	.volumeMute {
+		background-color: #0082c9;
+		mask-repeat: no-repeat;
+		mask-size: 100%;
+		mask-image: var(--icon-sound-off-000);
+	}
+
 	.volume{
 		width: 170px;
 		display: inline-block;