From 2f3e477ce5f9169f600c12f1e27c849e5127a068 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Fri, 21 Jan 2022 05:07:43 -0800 Subject: [PATCH] added option to disable artwork bg, changes to settings style, fixed selects size on settings --- src/main/base/store.ts | 1 + src/renderer/index.js | 11 +- src/renderer/style.less | 37 +++- src/renderer/views/main.ejs | 2 +- src/renderer/views/pages/settings.ejs | 264 ++++++++++++++------------ 5 files changed, 192 insertions(+), 123 deletions(-) diff --git a/src/main/base/store.ts b/src/main/base/store.ts index 79df0198..b388df7b 100644 --- a/src/main/base/store.ts +++ b/src/main/base/store.ts @@ -54,6 +54,7 @@ export class ConfigStore { "theme": "", "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show "refresh_rate": 0, + "window_background_style": "artwork", // "none", "artwork", "color" "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never "animated_artwork_qualityLevel": 1, "bg_artwork_rotation": false, diff --git a/src/renderer/index.js b/src/renderer/index.js index c78ad7e5..dad05ccd 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -731,9 +731,14 @@ const app = new Vue({ document.location.reload() }, getAppClasses() { + let classes = {} if (this.cfg.advanced.experiments.includes('compactui')) { - return { compact: true } + classes.compact = true } + if(this.cfg.visual.window_background_style == "none") { + classes.simplebg = true + } + return classes }, invokeDrawer(panel) { if (this.drawer.panel == panel && this.drawer.open) { @@ -2744,7 +2749,7 @@ const app = new Vue({ // if rgb return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})` }, - getNowPlayingArtworkBG(size = 600) { + getNowPlayingArtworkBG(size = 32, force = false) { let self = this if (typeof this.mk.nowPlayingItem === "undefined") return; let bginterval = setInterval(() => { @@ -2753,7 +2758,7 @@ const app = new Vue({ } try { - if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackID && document.querySelector('.bg-artwork')) { + if ((this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackID && document.querySelector('.bg-artwork')) || force) { if (document.querySelector('.bg-artwork')) { clearInterval(bginterval); } diff --git a/src/renderer/style.less b/src/renderer/style.less index adecc4f5..f8162a67 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -46,6 +46,7 @@ body { transition: opacity .10s var(--appleEase); } + a:-webkit-any-link { color: var(--keyColor); } @@ -130,6 +131,25 @@ body.notransparency::before { overflow: hidden; background-size: 400% 400%; + &.simplebg { + background: #0e0e0e; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.5; + z-index:0; + background-image: url(data:image/png;base64,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); + } + + .app-chrome { + z-index: 1; + } + } //&::before { // position: absolute; // top: -50%; @@ -2131,7 +2151,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { } .md-select { - width: 100%; padding: 6px; border-radius: 6px; border: 1px solid rgba(200, 200, 200, 0.1); @@ -4610,6 +4629,22 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { /* Cider */ +.settings-page { + padding:0px; + + .md-option-header { + padding: 1.25em 1.25em; + border-bottom: unset; + border-top: unset; + font-weight: 600; + font-size: 1.0em; + background: rgb(255 255 255 / 3%); + } + .settings-option-body { + margin: 16px; + } +} + // sidebar icon .svg-icon { --color: #aaa; diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 04d217b8..c12f56af 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -574,7 +574,7 @@ -
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs index d68e7d31..0df48007 100644 --- a/src/renderer/views/pages/settings.ejs +++ b/src/renderer/views/pages/settings.ejs @@ -4,116 +4,133 @@
Audio
-
-
- Audio Quality +
+
+
+ Audio Quality +
+
+ +
-
- +
+
+ Seamless Audio Transitions +
+
+ +
-
-
-
- Seamless Audio Transitions +
+
+ Enable Advanced Functionality +
+ Enabling AudioContext functionality will allow for extended audio features like Audio Normalization , Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks. +
+
+ +
-
- +
+
+ Audio Normalization +
+
+ +
-
-
-
- Enable Advanced Functionality +
+
+ Audio Spatialization
- Enabling AudioContext functionality will allow for extended audio features like Audio Normalization , Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks. -
-
- -
-
-
-
- Audio Normalization -
-
- -
-
-
-
- Audio Spatialization -
- Spatialize audio and make audio more 3-dimensional (note: This is not Dolby Atmos) -
-
- + Spatialize audio and make audio more 3-dimensional (note: This is not Dolby Atmos) +
+
+ +
Visual
-
-
- Animated Artwork +
+
+
+ Window Background Style +
+
+ +
-
- -
-
-
-
- Animated Artwork Quality -
-
- -
-
-
-
- Animated Window Background -
-
- -
-
-
-
- Hardware Acceleration
- (Requires relaunch) -
-
- -
-
-
-
- Show Personal Info -
-
- +
+
+ Animated Artwork +
+
+ +
+
+
+
+ Animated Artwork Quality +
+
+ +
+
+
+
+ Animated Window Background +
+
+ +
+
+
+
+ Hardware Acceleration
+ (Requires relaunch) +
+
+ +
+
+
+
+ Show Personal Info +
+
+ +
+
Lyrics
+
Enable Musixmatch Lyrics @@ -413,9 +430,12 @@
-
- Conectivity -
+
+
+ Conectivity +
+
+
Discord Rich Presence @@ -472,9 +492,12 @@
-
- Experimental -
+
+
+ Experimental +
+
+
Compact UI @@ -485,10 +508,12 @@
+
Unfinished / Non Functional
+
Theme @@ -561,6 +586,7 @@
+
@@ -575,11 +601,11 @@ } }, mounted: function () { - if (app.cfg.lastfm.enabled){ + if (app.cfg.lastfm.enabled) { const element = document.getElementById('lfmConnect'); - if (element){ - element.innerHTML = `Disconnect\n

(Authed: ${app.cfg.lastfm.auth_token})

`; - element.onclick = app.LastFMDeauthorize; + if (element) { + element.innerHTML = `Disconnect\n

(Authed: ${app.cfg.lastfm.auth_token})

`; + element.onclick = app.LastFMDeauthorize; } } }, @@ -590,31 +616,33 @@ removeExperiment(flag) { app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1); }, - toggleAudioContext: function(){ - if (app.cfg.advanced.AudioContext){ + toggleAudioContext: function () { + if (app.cfg.advanced.AudioContext) { CiderAudio.init(); - if (app.cfg.audio.normalization){ - CiderAudio.normalizerOn()} - if (app.cfg.audio.spatial){ - CiderAudio.spatialOn()} + if (app.cfg.audio.normalization) { + CiderAudio.normalizerOn() + } + if (app.cfg.audio.spatial) { + CiderAudio.spatialOn() + } } else { CiderAudio.off(); } }, - toggleNormalization : function(){ - if (app.cfg.audio.normalization){ + toggleNormalization: function () { + if (app.cfg.audio.normalization) { CiderAudio.normalizerOn() - } else {CiderAudio.normalizerOff()} + } else { CiderAudio.normalizerOff() } }, - toggleSpatial : function(){ - if (app.cfg.audio.spatial){ + toggleSpatial: function () { + if (app.cfg.audio.spatial) { CiderAudio.spatialOn() - } else {CiderAudio.spatialOff()} + } else { CiderAudio.spatialOff() } }, - changeAudioQuality : function(){ + changeAudioQuality: function () { app.mk.bitrate = app.cfg.audio.quality }, - toggleUserInfo : function(){ + toggleUserInfo: function () { app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo } }