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

@@ -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.audiophile": "Audiophile",
-  "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.separation": "Separation",
-  "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "Minimal",
   "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.",

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",

src/main/base/store.ts

@@ -108,7 +108,8 @@ export class Store {
                     process.platform == "darwin" ? "Option" : "Shift",
                     "I"
                 ]
-            }
+            },
+            "showLovedTracksInline": true
         },
         "home": {
             "followedArtists": [],

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) => {
+            ipcRenderer.on('theme-update', async (event, arg) => {
-                less.refresh(true, true, true)
+                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
         },

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 {
+  // @keyframes expandIndicator {
-    0% {
+  //   0% {
-      transform: scaleY(0);
+  //     transform: scaleY(0);
-    }
+  //   }
 
-    100% {
+  //   100% {
-      transform: scaleY(1);
+  //     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;
+    --transitionTime: 0.2s;
-  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+    transition      : opacity var(--transitionTime) var(--appleEase);
-  will-change: opacity, transform;
+    will-change     : opacity, transform;
 }
 
 .wpfade_transform-enter {
-  opacity: 0;
+    opacity    : 0;
-  transform: translateX(50%) translate3d(0,0,0);
+    transform  : unset;
-  will-change: opacity, transform;
+    will-change: opacity;
 }
+
 .wpfade_transform-leave-to {
-  opacity: 0;
+    opacity    : 0;
-  transform: translateX(-50%) translate3d(0,0,0);
+    transform  : unset;
-  will-change: opacity, transform;
+    will-change: opacity;
 }
 
 
 .wpfade_transform_backwards-enter-active,
 .wpfade_transform_backwards-leave-active {
-  --transitionTime: 0.2s;
+    --transitionTime: 0.2s;
-  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+    transition      : opacity var(--transitionTime) var(--appleEase);
 }
 
 .wpfade_transform_backwards-enter {
-  opacity: 0;
+    opacity    : 0;
-  transform: translateX(-50%) translate3d(0,0,0);
+    transform  : unset;
-  will-change: opacity, transform;
+    will-change: opacity;
 }
+
 .wpfade_transform_backwards-leave-to {
-  opacity: 0;
+    opacity    : 0;
-  transform: translateX(50%) translate3d(0,0,0);
+    transform  : unset;
-  will-change: opacity, transform;
+    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;

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;
 }

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

src/renderer/views/pages/settings.ejs

@@ -195,7 +195,29 @@
                                     {{$root.getLz('settings.option.general.keybindings.open')}}
                                 </button>
                             </div>
-                        </div>                      
+                        </div>        
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.general.themeUpdateNotification')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
+                                           switch/>
+                                </label>
+                            </div>
+                        </div>            
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.general.showLovedTracksInline')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
+                                           switch/>
+                                </label>
+                            </div>
+                        </div>         
                     </div>
                 </div>
             </b-tab>