From 71768e7b88f515bb5d4f80cb44d53b762518cc5a Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Thu, 12 May 2022 19:23:42 -0700 Subject: [PATCH] optimizations added show loved tracks inline set several less operations to async changed default transition to fade in, moved slide in to sweetener changed drawer transition to transform optimizations for disabled gpu --- src/i18n/en_US.json | 6 +- src/i18n/source/en_US.json | 2 + src/main/base/store.ts | 3 +- src/renderer/main/vueapp.js | 8 +- src/renderer/style.less | 81 ++++++++++++------- src/renderer/themes/sweetener.less | 36 +++++++++ .../views/components/mediaitem-list-item.ejs | 2 +- src/renderer/views/pages/settings.ejs | 24 +++++- 8 files changed, 123 insertions(+), 39 deletions(-) diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index 4bd74b1c..a4383eca 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -343,6 +343,8 @@ "settings.notyf.general.keybindings.update.success": "Keybind updated successfully", "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider", "settings.option.general.keybindings.open": "Open", + "settings.option.general.themeUpdateNotification": "Automatically check for theme updates", + "settings.option.general.showLovedTracksInline": "Show loved tracks inline", "settings.description.search": "Search", "settings.description.albums": "Library Albums", "settings.description.artists": "Library Artists", @@ -414,9 +416,7 @@ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider Spatialization Profile", "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "Changes the Tuning Profile of the Spatialization.", "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "Standard", - "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.soundstage": "Soundstage", - "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.separation": "Separation", - "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "Minimal", + "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "Audiophile", "settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "Spatialization is not compatible with CAP. Please disable CAP to continue.", "settings.header.visual": "Visual", "settings.header.visual.description": "Adjust the visual settings for Cider.", diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json index 907eefb2..a4383eca 100644 --- a/src/i18n/source/en_US.json +++ b/src/i18n/source/en_US.json @@ -343,6 +343,8 @@ "settings.notyf.general.keybindings.update.success": "Keybind updated successfully", "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider", "settings.option.general.keybindings.open": "Open", + "settings.option.general.themeUpdateNotification": "Automatically check for theme updates", + "settings.option.general.showLovedTracksInline": "Show loved tracks inline", "settings.description.search": "Search", "settings.description.albums": "Library Albums", "settings.description.artists": "Library Artists", diff --git a/src/main/base/store.ts b/src/main/base/store.ts index d55f7778..c088ed2e 100644 --- a/src/main/base/store.ts +++ b/src/main/base/store.ts @@ -108,7 +108,8 @@ export class Store { process.platform == "darwin" ? "Option" : "Shift", "I" ] - } + }, + "showLovedTracksInline": true }, "home": { "followedArtists": [], diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index 6764e0de..7aeb367d 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -784,8 +784,8 @@ const app = new Vue({ MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player") - ipcRenderer.on('theme-update', (event, arg) => { - less.refresh(true, true, true) + ipcRenderer.on('theme-update', async (event, arg) => { + await less.refresh(true, true, true) self.setTheme(self.cfg.visual.theme, true) if (app.cfg.visual.styles.length != 0) { app.reloadStyles() @@ -991,7 +991,7 @@ const app = new Vue({ document.querySelectorAll(`[id*='less']`).forEach(el => { el.remove() }); - less.refresh() + await less.refresh() } }, async reloadStyles() { @@ -1019,7 +1019,7 @@ const app = new Vue({ } }) less.registerStylesheetsImmediately() - less.refresh(true, true, true) + await less.refresh(true, true, true) this.$forceUpdate() return }, diff --git a/src/renderer/style.less b/src/renderer/style.less index 8e404005..58517522 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -417,7 +417,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { position: absolute; right: 16px; top: 3%; - background: #1c1c1c8f; + background: var(--color2); border-radius: 12px; z-index: 10; height: 94%; @@ -875,17 +875,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track { border-radius: 10px; left: 0px; background: var(--keyColor); - animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1); + // animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1); - @keyframes expandIndicator { - 0% { - transform: scaleY(0); - } + // @keyframes expandIndicator { + // 0% { + // transform: scaleY(0); + // } - 100% { - transform: scaleY(1); - } - } + // 100% { + // transform: scaleY(1); + // } + // } } .app-chrome { @@ -2885,38 +2885,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .wpfade_transform-enter-active, .wpfade_transform-leave-active { - --transitionTime: 0.2s; - transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); - will-change: opacity, transform; + --transitionTime: 0.2s; + transition : opacity var(--transitionTime) var(--appleEase); + will-change : opacity, transform; } .wpfade_transform-enter { - opacity: 0; - transform: translateX(50%) translate3d(0,0,0); - will-change: opacity, transform; + opacity : 0; + transform : unset; + will-change: opacity; } + .wpfade_transform-leave-to { - opacity: 0; - transform: translateX(-50%) translate3d(0,0,0); - will-change: opacity, transform; + opacity : 0; + transform : unset; + will-change: opacity; } .wpfade_transform_backwards-enter-active, .wpfade_transform_backwards-leave-active { - --transitionTime: 0.2s; - transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); + --transitionTime: 0.2s; + transition : opacity var(--transitionTime) var(--appleEase); } .wpfade_transform_backwards-enter { - opacity: 0; - transform: translateX(-50%) translate3d(0,0,0); - will-change: opacity, transform; + opacity : 0; + transform : unset; + will-change: opacity; } + .wpfade_transform_backwards-leave-to { - opacity: 0; - transform: translateX(50%) translate3d(0,0,0); - will-change: opacity, transform; + opacity : 0; + transform : unset; + will-change: opacity; } .fabfade-enter-active, @@ -2944,12 +2946,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .drawertransition-enter-active, .drawertransition-leave-active { - transition: right .25s var(--appleEase); + transition: transform .25s var(--appleEase); } .drawertransition-enter, .drawertransition-leave-to { - right: -300px; + transform: translateX(400px); } @media (prefers-color-scheme: dark) { @@ -3111,6 +3113,27 @@ body.no-gpu { } } + .floating-header { + background: black; + backdrop-filter: unset; + } + + .artworkContainer { + animation: unset!important; + opacity: 0.7; + } + + .info-rect-card { + &:before { + display: none; + } + } + + .menu-panel .menu-panel-body { + background: rgb(30 30 30); + backdrop-filter: unset; + } + #navigation-bar { backdrop-filter: unset; mix-blend-mode: unset; diff --git a/src/renderer/themes/sweetener.less b/src/renderer/themes/sweetener.less index 79b76138..28c65ddd 100644 --- a/src/renderer/themes/sweetener.less +++ b/src/renderer/themes/sweetener.less @@ -86,4 +86,40 @@ &:active { } +} + +.wpfade_transform-enter-active, +.wpfade_transform-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); + will-change: opacity, transform; +} + +.wpfade_transform-enter { + opacity: 0; + transform: translateX(50%) translate3d(0,0,0); + will-change: opacity, transform; +} +.wpfade_transform-leave-to { + opacity: 0; + transform: translateX(-50%) translate3d(0,0,0); + will-change: opacity, transform; +} + + +.wpfade_transform_backwards-enter-active, +.wpfade_transform_backwards-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); +} + +.wpfade_transform_backwards-enter { + opacity: 0; + transform: translateX(-50%) translate3d(0,0,0); + will-change: opacity, transform; +} +.wpfade_transform_backwards-leave-to { + opacity: 0; + transform: translateX(50%) translate3d(0,0,0); + will-change: opacity, transform; } \ No newline at end of file diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs index 6ea0d3bc..30b8b864 100644 --- a/src/renderer/views/components/mediaitem-list-item.ejs +++ b/src/renderer/views/components/mediaitem-list-item.ejs @@ -128,7 +128,7 @@ } else { this.itemId = this.item.id; } - if (this.item.attributes.playParams) { + if (this.item.attributes.playParams && this.$root.cfg.general.showLovedTracksInline) { this.getHeartStatus(); } let duration = this.item.attributes.durationInMillis ?? 0 diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs index b3cdc082..45e61e30 100644 --- a/src/renderer/views/pages/settings.ejs +++ b/src/renderer/views/pages/settings.ejs @@ -195,7 +195,29 @@ {{$root.getLz('settings.option.general.keybindings.open')}} - + +