add mute toggle

src/player/Player.vue

@@ -48,12 +48,12 @@
         <div class="col-auto col-sm p-0">
           <div class="d-flex flex-nowrap justify-content-end pr-3">
             <div class="m-0 d-none d-sm-inline-flex align-items-center pr-3">
-              <b-button variant="link">
+              <b-button variant="link" @click="toggleMute">
-                <Icon class="volume-icon" icon="volume-up-fill" />
+                <Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" />
               </b-button>
               <b-form-input type="range" min="0" max="1" step="0.05" style="width: 130px"
                             :title="`Volume: ${Math.round(volume * 100)}%`"
-                            :value="volume" @input="setVolume" />
+                            :value="muteActive ? 0.0 : volume" @input="setVolume" />
             </div>
             <b-button variant="link"
                       class="m-0 d-none d-sm-inline-block "
@@ -130,6 +130,7 @@
         currentTime: (state: any) => state.currentTime,
         repeatActive: (state: any) => state.repeat,
         shuffleActive: (state: any) => state.shuffle,
+        muteActive: (state: any) => state.mute,
         visible: (state: any) => state.queue.length > 0,
         volume: (state: any) => state.volume,
       }),
@@ -145,6 +146,7 @@
         'previous',
         'toggleRepeat',
         'toggleShuffle',
+        'toggleMute',
       ]),
       seek(event: any) {
         if (event.target) {

src/player/store.ts

@@ -5,11 +5,12 @@ import { API } from '@/shared/api'
 const audio = new Audio()
 const storedQueue = JSON.parse(localStorage.getItem('queue') || '[]')
 const storedQueueIndex = parseInt(localStorage.getItem('queueIndex') || '-1')
-const storedVolume = parseFloat(localStorage.getItem('player.volume') || '1.0')
 if (storedQueueIndex > -1 && storedQueueIndex < storedQueue.length) {
   audio.src = storedQueue[storedQueueIndex].url
 }
-audio.volume = storedVolume
+const storedVolume = parseFloat(localStorage.getItem('player.volume') || '1.0')
+const storedMuteState = localStorage.getItem('player.mute') === 'true'
+audio.volume = storedMuteState ? 0.0 : storedVolume
 const mediaSession: MediaSession | undefined = navigator.mediaSession
 
 interface State {
@@ -21,6 +22,7 @@ interface State {
   currentTime: number; // position of current track in seconds
   repeat: boolean;
   shuffle: boolean;
+  mute: boolean;
   volume: number; // integer between 0 and 1 representing the volume of the player
 }
 
@@ -35,6 +37,7 @@ export const playerModule: Module<State, any> = {
     currentTime: 0,
     repeat: localStorage.getItem('player.repeat') !== 'false',
     shuffle: localStorage.getItem('player.shuffle') === 'true',
+    mute: storedMuteState,
     volume: storedVolume,
   },
 
@@ -59,6 +62,10 @@ export const playerModule: Module<State, any> = {
       state.shuffle = enable
       localStorage.setItem('player.shuffle', enable)
     },
+    setMute(state, enable) {
+      state.mute = enable
+      localStorage.setItem('player.mute', enable)
+    },
     setQueue(state, queue) {
       state.queue = queue
       state.queueIndex = -1
@@ -106,10 +113,11 @@ export const playerModule: Module<State, any> = {
     setScrobbled(state) {
       state.scrobbled = true
     },
-    setVolume(state, value: any) {
+    setVolume(state, value: number) {
       state.volume = value
+      state.mute = value <= 0.0
       localStorage.setItem('player.volume', String(value))
-    }
+    },
   },
 
   actions: {
@@ -178,6 +186,10 @@ export const playerModule: Module<State, any> = {
     toggleShuffle({ commit, state }) {
       commit('setShuffle', !state.shuffle)
     },
+    toggleMute({ commit, state }) {
+      commit('setMute', !state.mute)
+      audio.volume = state.mute ? 0.0 : state.volume
+    },
     addToQueue({ commit }, track) {
       commit('addToQueue', track)
     },

src/shared/components/Icon.vue

@@ -29,6 +29,7 @@
     BIconRss,
     BIconX,
     BIconVolumeUpFill,
+    BIconVolumeMuteFill,
   } from 'bootstrap-vue'
 
   export default Vue.extend({
@@ -58,6 +59,7 @@
       BIconRss,
       BIconX,
       BIconVolumeUpFill,
+      BIconVolumeMuteFill,
     },
     props: {
       icon: { type: String, required: true }