trying to implement volume toggle

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 {

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()
+		},
 	},
 })