From 1b3e7b1bdf177c8220d760c24c8b923a23908c3a Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Tue, 18 Jan 2022 21:03:41 -0800 Subject: [PATCH 1/5] update volume icons --- src/renderer/assets/feather/volume-2.svg | 1 + src/renderer/assets/feather/volume.svg | 1 + src/renderer/assets/volume-down.svg | 1 - src/renderer/assets/volume-up.svg | 1 - src/renderer/style.less | 6 +++--- src/web-remote/style.css | 4 ++-- 6 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 src/renderer/assets/feather/volume-2.svg create mode 100644 src/renderer/assets/feather/volume.svg delete mode 100644 src/renderer/assets/volume-down.svg delete mode 100644 src/renderer/assets/volume-up.svg diff --git a/src/renderer/assets/feather/volume-2.svg b/src/renderer/assets/feather/volume-2.svg new file mode 100644 index 00000000..eaf07b56 --- /dev/null +++ b/src/renderer/assets/feather/volume-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/volume.svg b/src/renderer/assets/feather/volume.svg new file mode 100644 index 00000000..a6282072 --- /dev/null +++ b/src/renderer/assets/feather/volume.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/volume-down.svg b/src/renderer/assets/volume-down.svg deleted file mode 100644 index 87c9f9fc..00000000 --- a/src/renderer/assets/volume-down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/renderer/assets/volume-up.svg b/src/renderer/assets/volume-up.svg deleted file mode 100644 index 05db44e8..00000000 --- a/src/renderer/assets/volume-up.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/renderer/style.less b/src/renderer/style.less index 603847af..f5341266 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -829,7 +829,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .app-chrome-item.volume-icon { opacity: 0.7; - background-image: url(http://localhost:9000/assets/volume-up.svg); + background-image: url("./assets/feather/volume-2.svg"); height: 15px; width: 30px; background-repeat: no-repeat; @@ -1366,12 +1366,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; } diff --git a/src/web-remote/style.css b/src/web-remote/style.css index f7db8489..5b3227f0 100644 --- a/src/web-remote/style.css +++ b/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; } From 0b4d771d2383a9e9e231106b5f98879c95317d9b Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Tue, 18 Jan 2022 22:35:38 -0800 Subject: [PATCH 2/5] style album name when in full screen --- src/web-remote/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web-remote/style.css b/src/web-remote/style.css index 5b3227f0..57c83dc3 100644 --- a/src/web-remote/style.css +++ b/src/web-remote/style.css @@ -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 { From e0f1fcc795d2fa19b1137ff248b0f9d8c15f9767 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Tue, 18 Jan 2022 22:53:41 -0800 Subject: [PATCH 3/5] hide album/artist name when hovered over nowPlayingItem --- src/renderer/style.less | 45 +++++++++++++++++++++++++++++++++++-- src/renderer/views/main.ejs | 10 +++++---- 2 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/renderer/style.less b/src/renderer/style.less index f5341266..11db2fca 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -827,12 +827,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track { margin-right: 6px; } -.app-chrome-item.volume-icon { - opacity: 0.7; +.volume-button { background-image: url("./assets/feather/volume-2.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 { @@ -3980,6 +4011,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; @@ -4043,6 +4083,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .song-artist { font-size: 0.875em; + font-weight: 400; } .song-name { diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index c952abf6..83789751 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -87,12 +87,14 @@
-
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
-
+
{{"—"}}
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? (mk.nowPlayingItem["attributes"]["albumName"]) : "" }} @@ -127,7 +129,7 @@
-
+ From c36b47bd93834471a91dadabae38f03ab04c2b39 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 19 Jan 2022 19:19:47 -0800 Subject: [PATCH 4/5] click volume button to mute and unclick to go back to lastVolume --- src/main/base/store.ts | 2 ++ src/renderer/index.js | 24 ++++++++++++++++++-- src/renderer/style.less | 23 +++++++++++++++++++ src/renderer/views/components/fullscreen.ejs | 2 +- src/renderer/views/main.ejs | 4 ++-- 5 files changed, 50 insertions(+), 5 deletions(-) diff --git a/src/main/base/store.ts b/src/main/base/store.ts index 766fddb0..686cca4f 100644 --- a/src/main/base/store.ts +++ b/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, diff --git a/src/renderer/index.js b/src/renderer/index.js index 611d27d8..a478a3ca 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -517,8 +517,17 @@ const app = new Vue({ } } MusicKitInterop.init() - // Set the volume - this.mk.volume = this.cfg.audio.volume + // 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(); diff --git a/src/renderer/style.less b/src/renderer/style.less index 65b5389a..ef4a5e56 100644 --- a/src/renderer/style.less +++ b/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; diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs index 796eb955..2c0e8257 100644 --- a/src/renderer/views/components/fullscreen.ejs +++ b/src/renderer/views/components/fullscreen.ejs @@ -78,8 +78,8 @@
-
+
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 5e63354f..7dac8db4 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -131,7 +131,7 @@
- + @@ -293,7 +293,7 @@
-
+ From 6170ed6f0858021d8e77d954506ef7e792d10b01 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Wed, 19 Jan 2022 19:22:19 -0800 Subject: [PATCH 5/5] style icons --- src/renderer/style.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/style.less b/src/renderer/style.less index ef4a5e56..7d886249 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -1430,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, @@ -4117,7 +4118,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { opacity: 0.70; background-image: url("./assets/feather/volume-2.svg"); } - + .volume-button--small:active { transform: scale(0.9); }