player: support toggle mute again

src/components/Player.vue

@@ -24,15 +24,15 @@
 	<div id="app-settings">
 		<div
 			class="wrap"
-			:class="{ buffering: player.isBuffering }">
+			:class="{ buffering: getBuffering }">
 			<button
 				class="player"
-				:class="player.isPlaying ? 'pause' : 'play'"
+				:class="getPlaying ? 'pause' : 'play'"
 				@click="togglePlay" />
 		</div>
 		<div
 			class="volumeIcon"
-			:class="player.volume == 0 ? 'volumeMute' : 'volumeFull'"
+			:class="getVolume == 0 ? 'volumeMute' : 'volumeFull'"
 			@click="toggleMute" />
 		<input
 			class="volume"
@@ -41,31 +41,32 @@
 			min="0"
 			max="1"
 			step=".05"
-			:value="player.volume"
-			@input="setVolume($event)">
+			:value="getVolume"
+			@input="setVolume($event.target.value)">
 		<div class="playerMetadata">
-			{{ player.title }}
+			{{ getTitle }}
 		</div>
 	</div>
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex'
+
 export default {
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapGetters([
+			'getVolume',
+			'getBuffering',
+			'getPlaying',
+			'getTitle',
+		]),
 	},
 	methods: {
-		setVolume() {
-			this.$store.dispatch('setVolume', event.target.value)
-		},
-		toggleMute() {
-			this.$store.dispatch('toggleMute')
-		},
-		togglePlay() {
-			this.$store.dispatch('togglePlay')
-		},
+		...mapActions([
+			'toggleMute',
+			'setVolume',
+			'togglePlay',
+		]),
 	},
 }
 </script>

src/store/player.js

@@ -33,6 +33,20 @@ export default ({
 		oldVolume: localStorage.getItem('radio.volume') || 0.5,
 		title: '',
 	},
+	getters: {
+		getPlaying: state => {
+			return state.isPlaying
+		},
+		getBuffering: state => {
+			return state.isBuffering
+		},
+		getVolume: state => {
+			return state.volume
+		},
+		getTitle: state => {
+			return state.title
+		},
+	},
 	mutations: {
 		setPlaying(state, playerState) {
 			state.isPlaying = playerState
@@ -46,16 +60,18 @@ export default ({
 		setVolume(state, volume) {
 			state.volume = volume
 			localStorage.setItem('radio.volume', volume)
+			player.setVolume(state.volume)
 		},
 		toggleMute(state) {
 			if (state.isMute) {
-				state.volume = state.player.oldVolume
+				state.volume = state.oldVolume
 				state.isMute = false
 			} else {
-				state.oldVolume = state.player.volume
+				state.oldVolume = state.volume
 				state.volume = 0
 				state.isMute = true
 			}
+			player.setVolume(state.volume)
 		},
 		togglePlay(state) {
 			if (state.isPlaying) {