click volume button to mute and unclick to go back to lastVolume

src/main/base/store.ts

@@ -24,6 +24,8 @@ export class ConfigStore {
         },
         "audio": {
             "volume": 1,
+            "lastVolume": 1,
+            "muted": false,
             "quality": "990",
             "seamless_audio": true,
             "normalization": false,

src/renderer/index.js

@@ -518,7 +518,16 @@ const app = new Vue({
             }
             MusicKitInterop.init()
             // Set the volume
+
+            // Check the value of this.cfg.audio.muted
+            if( !this.cfg.audio.muted )
+            {
+                // Set the mk.volume to the last stored volume data
                 this.mk.volume = this.cfg.audio.volume
+            } else if( this.cfg.audio.muted ) {
+                // Set mk.volume to -1 (setting to 0 wont work, so temp solution setting to -1)
+                this.mk.volume = -1;
+            }
                 // ipcRenderer.invoke('getStoreValue', 'audio.volume').then((value) => {
                 //     self.mk.volume = value
                 // })
@@ -2984,6 +2993,17 @@ const app = new Vue({
                 }
             }
         },
+        muteButtonPressed() {
+            if( this.cfg.audio.muted ) {
+                this.mk.volume = this.cfg.audio.lastVolume;
+                this.cfg.audio.muted = false;
+            } else {
+                this.cfg.audio.lastVolume = this.cfg.audio.volume;
+                this.mk.volume = 0;
+                this.cfg.audio.muted = true;
+            }
+        },
+
         async apiCall(url, callback) {
             const xmlHttp = new XMLHttpRequest();
 

src/renderer/style.less

@@ -4103,6 +4103,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width: 100%
     }
 
+    .volume-button--small {
+      border-radius: 6px;
+      color: inherit;
+      background-size: 16px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent;
+      height: 15px;
+      width: 30px;
+      border: 0px;
+      box-shadow: unset;
+      opacity: 0.70;
+      background-image: url("./assets/feather/volume-2.svg");
+    }
+    
+    .volume-button--small:active {
+      transform: scale(0.9);
+    }
+    
+    .volume-button--small.active {
+      background-image: url("./assets/feather/volume.svg");
+    }
+
     input[type=range] {
       -webkit-appearance: none;
       height: 4px;

src/renderer/views/components/fullscreen.ejs

@@ -78,8 +78,8 @@
                         </div>
                     </div>
                     <div class="app-chrome-item volume display--large">
-                        <div class="app-chrome-item volume-icon"></div>
                         <div class="input-container">
+                        <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
                         <input type="range" class="slider" @wheel="app.volumeWheel" step="0.01" min="0" max="1" v-model="app.mk.volume"
                                v-if="typeof app.mk.volume != 'undefined'">
                         </div>       

src/renderer/views/main.ejs

@@ -131,7 +131,7 @@
                 </div>
                 <div class="app-chrome--right">
                     <div class="app-chrome-item volume display--large">
-                        <button class="volume-button--small volume"></button>
+                        <button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button>
                         <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
                                v-model="mk.volume"
                                v-if="typeof mk.volume != 'undefined'">
@@ -293,7 +293,7 @@
                             </div>
                             <div class="app-chrome-item volume">
                                 <div class="input-container">
-                                    <div class="app-chrome-item volume-icon"></div>
+                                    <button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button>
                                     <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
                                            v-model="mk.volume"
                                            v-if="typeof mk.volume != 'undefined'">