From 775c6aebf498684ecdb4e5e59172765c5737a473 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 25 Oct 2020 10:51:08 +0100
Subject: [PATCH] trying to implement volume toggle

---
 src/components/Player.vue |  7 ++++++-
 src/store.js              | 13 +++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 751d42b..6fff979 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -9,7 +9,8 @@
 		</div>
 		<div
 			class="volumeIcon"
-			:class="player.volume == 0 ? 'volumeMute' : 'volumeVolume'" />
+			:class="player.volume == 0 ? 'volumeMute' : 'volumeVolume'"
+			@click="toggleMute" />
 		<input
 			class="volume"
 			type="range"
@@ -34,6 +35,9 @@ export default {
 		changeVolume() {
 			this.$store.dispatch('changeVolume', event.target.value)
 		},
+		toggleMute() {
+			this.$store.dispatch('toggleMute')
+		},
 	},
 }
 </script>
@@ -98,6 +102,7 @@ export default {
 		position: relative;
 		left: 85px;
 		top: 20px;
+		cursor: pointer;
 	}
 
 	.volumeFull {
diff --git a/src/store.js b/src/store.js
index c6b729f..2a54d86 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,6 +8,8 @@ export default new Vuex.Store({
 			isPlaying: false,
 			isBuffering: false,
 			volume: 0,
+			isMute: false,
+			oldVolume: 0,
 		},
 	},
 	mutations: {
@@ -20,6 +22,14 @@ export default new Vuex.Store({
 		changeVolume(state, volume) {
 			state.player.volume = volume
 		},
+		toggleMute(state) {
+			if (state.player.isMute) {
+				state.player.volume = state.player.oldVolume
+			} else {
+				state.player.oldVolume = state.player.volume
+				state.player.volume = 0
+			}
+		},
 	},
 	actions: {
 		isPlaying(context, playerState) {
@@ -31,5 +41,8 @@ export default new Vuex.Store({
 		changeVolume(context, volume) {
 			context.commit('changeVolume', volume)
 		},
+		toggleMute(context) {
+			context.toggleMute()
+		},
 	},
 })