Merge pull request #153 from JaxonTekk/upcoming

UI Changes and Feature Additions

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/assets/feather/volume-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

src/renderer/assets/feather/volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>

src/renderer/assets/volume-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"/></svg>

src/renderer/assets/volume-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"/></svg>

src/renderer/index.js

@@ -526,7 +526,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
                 // })
@@ -2997,6 +3006,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

@@ -854,12 +854,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   margin-right: 6px;
 }
 
-.app-chrome-item.volume-icon {
+.volume-button {
-  opacity: 0.7;
+  background-image: url("./assets/feather/volume-2.svg");
-  background-image: url(http://localhost:9000/assets/volume-up.svg);
   height: 15px;
   width: 30px;
+  padding: 0px;
+  background: transparent;
+  border: 0px;
+  border-radius: 0px;
+  box-shadow: unset;
+  background-size: 12px;
+  background-position: center;
   background-repeat: no-repeat;
+  opacity: 0.70;
+  border-radius: 6px;
+}
+
+.volume-button:active, .volume-button--small:active {
+  transform: scale(0.9);
+}
+
+.volume-button.active, .volume-button--small.active {
+  background-image: url("./assets/feather/volume.svg");
+}
+
+.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");
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
@@ -1399,6 +1430,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 32px;
   border: 0px;
   box-shadow: unset;
+  opacity: 0.70;
 }
 
 .playback-button:hover,
@@ -1474,12 +1506,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .player-volume-glyph.decrease {
-  background-image: url("./assets/volume-down.svg");
+  background-image: url("./assets/volume.svg");
   opacity: 0.5;
 }
 
 .player-volume-glyph.increase {
-  background-image: url("./assets/volume-up.svg");
+  background-image: url("./assets/volume-2.svg");
   opacity: 0.5;
 }
 
@@ -4207,6 +4239,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;
@@ -4332,6 +4387,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 5vh;
     justify-content: space-evenly;
 
+    .volume {
+      background-image: url("./assets/feathers/volume.svg");
+      padding: 0.5vh;
+      width: 2vh;
+      height: 2vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
     .queue {
       background-image: url("./assets/list.svg");
       padding: 0.5vh;
@@ -4395,6 +4459,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
       .song-artist {
         font-size: 0.875em;
+        font-weight: 400;
       }
 
       .song-name {

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

@@ -91,13 +91,14 @@
                                     </div>
                                     <div class="song-artist"
                                          style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
-                                        <div class="item-navigate song-artist" style="display: inline-block;"
+                                        <div class="item-navigate song-artist" style="display: inline-block"
+                                            :style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'} ]"
                                              @click="getNowPlayingItemDetailed(`artist`)">
                                             {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                                         </div>
-                                        <div class="song-artist item-navigate" style="display: inline-block;"
+                                        <div class="song-artist item-navigate" style="display: inline-block"
-                                             @click="getNowPlayingItemDetailed('album')"
+                                        :style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'}]"
-                                             v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                                        @click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
                                             <div class="separator" style="display: inline-block;">{{"—"}}</div>
                                             {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
                                             (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@@ -132,7 +133,7 @@
                 </div>
                 <div class="app-chrome--right">
                     <div class="app-chrome-item volume display--large">
-                        <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'">
@@ -296,7 +297,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'">

src/web-remote/style.css

@@ -321,12 +321,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .player-volume-glyph.decrease {
-    background-image: url("./assets/volume-down.svg");
+    background-image: url("./assets/volume.svg");
     opacity: 0.5;
 }
 
 .player-volume-glyph.increase {
-    background-image: url("./assets/volume-up.svg");
+    background-image: url("./assets/volume-2.svg");
     opacity: 0.5;
 }
 
@@ -1002,6 +1002,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     }
     .player-song-artist {
         font-size: 1.25em;
+        font-weight: 400;
     }
     .search-panel {}
     .md-footer {