Merge branch 'develop' into patch-1

src/i18n/README.md

@@ -238,3 +238,6 @@ Update 10/04/2022 07:30 UTC
 
 * `settings.option.visual.uiscale`: Added for `en_US`
 
+Update 11/04/2022 13:45 UTC
+
+* `action.openArtworkInBrowser`: Added for `en_US`

src/i18n/en_US.json

@@ -258,6 +258,7 @@
   "action.cast.scan": "Scan",
   "action.cast.scanning": "Scanning...",
   "action.createNew": "Create New...",
+  "action.openArtworkInBrowser": "Open artwork in browser",
   "settings.header.general": "General",
   "settings.header.general.description": "Adjust the general settings for Cider.",
   "settings.option.general.language": "Language",

src/i18n/hu_HU.json

@@ -258,6 +258,7 @@
   "action.cast.scan": "Keresés",
   "action.cast.scanning": "Keresés folyamatban...",
   "action.createNew": "Új létrehozása...",
+  "action.openArtworkInBrowser": "Borító megnyitása a böngészőben",
   "settings.header.general": "Általános",
   "settings.header.general.description": "A Cider általános beállításainak módosítása.",
   "settings.option.general.language": "Nyelv",

src/i18n/source/en_US.json

@@ -258,6 +258,7 @@
   "action.cast.scan": "Scan",
   "action.cast.scanning": "Scanning...",
   "action.createNew": "Create New...",
+  "action.openArtworkInBrowser": "Open artwork in browser",
   "settings.header.general": "General",
   "settings.header.general.description": "Adjust the general settings for Cider.",
   "settings.option.general.language": "Language",

src/main/base/browserwindow.ts

@@ -167,12 +167,12 @@ export class BrowserWindow {
                     page: "browsepage",
                     component: `<cider-browse :data="browsepage"></cider-browse>`,
                     condition: `page == 'browse'`,
-                    onEnter: `getBrowsePage();`
+                    onEnter: ``
                 }, {
                     page: "listen_now",
                     component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
                     condition: `page == 'listen_now'`,
-                    onEnter: `getListenNow()`
+                    onEnter: ``
                 }, {
                     page: "settings",
                     component: `<cider-settings></cider-settings>`,
@@ -185,17 +185,17 @@ export class BrowserWindow {
                     page: "library-songs",
                     component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
                     condition: `page == 'library-songs'`,
-                    onEnter: `getLibrarySongsFull()`
+                    onEnter: ``
                 }, {
                     page: "library-albums",
                     component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
                     condition: `page == 'library-albums'`,
-                    onEnter: `getLibraryAlbumsFull(null, 1); getAlbumSort(); searchLibraryAlbums(1); getLibrarySongsFull() ;searchLibraryAlbums(1);`
+                    onEnter: ``
                 }, {
                     page: "library-artists",
                     component: `<cider-library-artists></cider-library-artists>`,
                     condition: `page == 'library-artists'`,
-                    onEnter: `getLibraryArtistsFull(null, 0);`
+                    onEnter: ``
                 }, {
                     page: "appleCurator",
                     component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,

src/main/base/store.ts

@@ -115,6 +115,7 @@ export class Store {
         },
         "visual": {
             "theme": "",
+            "styles": [],
             "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
             "refresh_rate": 0,
             "window_background_style": "artwork", // "none", "artwork", "color"

src/renderer/less/bootstrap.less

@@ -35,10 +35,12 @@
   color: #212529;
   text-align: left;
   list-style: none;
-  background-color: #fff;
+  background-color: var(--color1);
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
+  box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
+  backdrop-filter: var(--glassFilter);
 }
 .dropdown-menu[data-bs-popper] {
   top: 100%;
@@ -1388,23 +1390,24 @@ fieldset:disabled .btn {
 
 .btn-secondary {
   color           : #fff;
-  background-color: #6c757d;
+  border-color    : 1px solid rgba(100, 100, 100, 0.35);
-  border-color    : #6c757d;
+  background-color: rgba(100, 100, 100, 0.25);
+  border-top-color: 1px solid rgba(100, 100, 100, 0.5);
 }
 
 .btn-secondary:hover {
   color           : #fff;
-  background-color: #5c636a;
+  // background-color: #5c636a;
-  border-color    : #565e64;
+  // border-color    : #565e64;
 }
 
-.btn-check:focus+.btn-secondary,
+// .btn-check:focus+.btn-secondary,
-.btn-secondary:focus {
+// .btn-secondary:focus {
-  color           : #fff;
+//   color           : #fff;
-  background-color: #5c636a;
+//   background-color: #5c636a;
-  border-color    : #565e64;
+//   border-color    : #565e64;
-  box-shadow      : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+//   box-shadow      : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
-}
+// }
 
 .btn-check:checked+.btn-secondary,
 .btn-check:active+.btn-secondary,

src/renderer/less/elements.less

@@ -1738,7 +1738,7 @@ input[type=checkbox][switch]:checked:active::before {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin: 12px 0px;
+  margin: 12px 12px 12px 0px;
   border-radius: 4px;
   color: white;
   font-size: 1em;

src/renderer/less/pages.less

@@ -281,13 +281,14 @@
 // Podcast Page
 .content-inner.library-artists-page {
   // top: 0;
-  height: calc(100% - 60px - var(--navigationBarHeight));
+  height : calc(100% - 60px - var(--navigationBarHeight));
   padding: 0px;
+
   .inner-container {
     display: flex;
     height : calc(100% - var(--navigationBarHeight));
     padding: 0px;
-    height: 100%;
+    height : 100%;
 
     .list-flat {
       border-radius: 0px;
@@ -331,7 +332,7 @@
     }
 
     .episodes-list {
-      height: calc(100% + 60px);
+      height    : calc(100% + 60px);
       width     : 100%;
       background: rgb(200 200 200 / 6%);
       overflow-y: overlay;
@@ -568,7 +569,7 @@
           font-size      : 1.6rem;
           //margin-bottom: 6px;
           margin-right   : 6px;
-          margin-bottom: 6px;
+          margin-bottom  : 6px;
           flex-shrink    : unset;
         }
 
@@ -972,9 +973,11 @@
       display : flex;
       overflow: hidden;
       padding : 16px 32px;
+
       >.latestRelease {
         width: 250px;
       }
+
       >.topSongs {
         width: calc(100% - 250px);
       }
@@ -1016,18 +1019,49 @@
 .settings-page {
   padding: 0px;
 
+  .stylestack-editor {
+    width: 100%;
+
+    .btn,
+    .btn-group {
+      width: 100%;
+    }
+
+    .themeLabel {
+      display:flex;
+      align-items: center;
+    }
+
+    .removeItem {
+      border: 0px;
+      background: transparent;
+      height: 32px;
+      font-weight: bold;
+      color: var(--textColor);
+      cursor: pointer;
+    }
+
+    .stylesDropdown {
+      >.dropdown-menu {
+        height    : 300px;
+        overflow-y: overlay;
+      }
+    }
+  }
+
+
   .nav {
-    width: 90%;
+    width : 90%;
     margin: 16px auto 0px;
   }
 
   .md-option-header {
-    padding: 0px 26px;
+    padding      : 0px 26px;
     border-bottom: unset;
-    border-top: unset;
+    border-top   : unset;
-    font-weight: 600;
+    font-weight  : 600;
-    background: rgb(255 255 255 / 0%);
+    background   : rgb(255 255 255 / 0%);
-    font-size: 2em;
+    font-size    : 2em;
   }
 
   .settings-option-body {
@@ -1050,36 +1084,38 @@
 
   .carousel-item>img {
     object-fit: cover;
-    width:100%;
+    width     : 100%;
   }
 
   .spprofile-line {
-    height: 300px;
+    height   : 300px;
-    width: 100%;
+    width    : 100%;
     max-width: 1024px;
-    padding: 16px;
+    padding  : 16px;
-    margin: 0 auto;
+    margin   : 0 auto;
 
     .spprofile-viewport {
-      height: 100%;
+      height       : 100%;
-      position: relative;
+      position     : relative;
       border-radius: var(--mediaItemRadius);
-      overflow: hidden;
+      overflow     : hidden;
-      box-shadow: var(--mediaItemShadow-Shadow);
+      box-shadow   : var(--mediaItemShadow-Shadow);
-      background: black;
+      background   : black;
 
-      .spprev, .nextprev {
+      .spprev,
-        position: absolute;
+      .nextprev {
-        height: 100%;
+        position  : absolute;
-        width: 64px;
+        height    : 100%;
-        top: 0;
+        width     : 64px;
+        top       : 0;
         background: rgb(0 0 0 / 20%);
-        z-index: 1;
+        z-index   : 1;
-        border: 0px;
+        border    : 0px;
         transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
+
         &:hover {
           background: var(--selected);
-          transform: scale(1.1);
+          transform : scale(1.1);
         }
 
         &:active {
@@ -1088,22 +1124,23 @@
         }
 
         &:before {
-          content: '';
+          content              : '';
-          position: absolute;
+          position             : absolute;
-          top: 0;
+          top                  : 0;
-          left: 0;
+          left                 : 0;
-          width: 100%;
+          width                : 100%;
-          height: 100%;
+          height               : 100%;
-          background: #eee;
+          background           : #eee;
-          opacity: 1;
+          opacity              : 1;
           -webkit-mask-position: center;
-          -webkit-mask-repeat: no-repeat;
+          -webkit-mask-repeat  : no-repeat;
-          -webkit-mask-size: 1em;
+          -webkit-mask-size    : 1em;
         }
       }
 
       .spprev {
         left: 0;
+
         &:before {
           -webkit-mask-image: url("./views/svg/chevron-left.svg");
         }
@@ -1112,6 +1149,7 @@
 
       .nextprev {
         right: 0;
+
         &:before {
           -webkit-mask-image: url("./views/svg/chevron-right.svg");
         }
@@ -1119,25 +1157,25 @@
       }
 
       .spslide {
-        position: absolute;
+        position  : absolute;
-        width: 100%;
+        width     : 100%;
-        height: 100%;
+        height    : 100%;
-        overflow: hidden;
+        overflow  : hidden;
         background: black;
 
         >img {
-          WIDTH: 100%;
+          WIDTH     : 100%;
-          height: 100%;
+          height    : 100%;
           object-fit: cover;
         }
 
         .sptitle {
-          position: absolute;
+          position   : absolute;
-          bottom: 0px;
+          bottom     : 0px;
-          left: 0;
+          left       : 0;
-          width: 100%;
+          width      : 100%;
-          text-align: center;
+          text-align : center;
-          font-size: 18px;
+          font-size  : 18px;
           text-shadow: 0px 2px 4px #00000033;
         }
       }
@@ -1145,18 +1183,19 @@
       .spfade-enter-active,
       .spfade-leave-active {
         --transitionTime: 0.2s;
-        transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+        transition      : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
-        will-change: opacity, transform;
+        will-change     : opacity, transform;
       }
 
       .spfade-enter {
-        opacity: 0;
+        opacity    : 0;
-        transform: scale(1.2) translate3d(0,0,0);
+        transform  : scale(1.2) translate3d(0, 0, 0);
         will-change: opacity, transform;
       }
+
       .spfade-leave-to {
-        opacity: 1;
+        opacity    : 1;
-        transform: scale(1) translate3d(0,0,0);
+        transform  : scale(1) translate3d(0, 0, 0);
         will-change: opacity, transform;
       }
     }
@@ -1171,9 +1210,11 @@
   0% {
     background-position: 0% 0%;
   }
+
   50% {
     background-position: 100% 0%;
   }
+
   100% {
     background-position: 0% 0%;
   }
@@ -1181,31 +1222,31 @@
 
 //Home
 .home-page {
-  top        : 0;
+  top          : 0;
   //padding-top: var(--navbarHeight);
 
   .md-btn-replay {
     background-image: linear-gradient(-45deg, #2e2173, #925042);
-    animation: gradient-animation 5s ease-in-out infinite;
+    animation       : gradient-animation 5s ease-in-out infinite;
-    background-size: 400% 400%;
+    background-size : 400% 400%;
-    border        : 0px;
+    border          : 0px;
-    box-shadow    : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+    box-shadow      : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
-    text-transform: uppercase;
+    text-transform  : uppercase;
-    font-weight   : bold;
+    font-weight     : bold;
   }
 
   .md-btn-replay--hero {
-    font-size     : 1em;
+    font-size       : 1em;
-    padding       : 16px;
+    padding         : 16px;
     background-image: linear-gradient(-45deg, #2e2173, #925042);
-    animation: gradient-animation 5s ease-in-out infinite;
+    animation       : gradient-animation 5s ease-in-out infinite;
-    background-size: 400% 400%;
+    background-size : 400% 400%;
-    border        : 0px;
+    border          : 0px;
-    box-shadow    : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+    box-shadow      : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
-    margin-top    : 1em;
+    margin-top      : 1em;
-    font-size     : 0.9em;
+    font-size       : 0.9em;
-    text-transform: uppercase;
+    text-transform  : uppercase;
-    font-weight   : bold;
+    font-weight     : bold;
   }
 
   .artist-feed-card {
@@ -1375,12 +1416,12 @@
 
   .replay-viewport {
     background-image: linear-gradient(-45deg, #2e2173, #925042);
-    animation: gradient-animation 5s ease-in-out infinite;
+    animation       : gradient-animation 5s ease-in-out infinite;
-    background-size: 400% 400%;
+    background-size : 400% 400%;
-    padding      : 16px 40px;
+    padding         : 16px 40px;
-    border-radius: 10px;
+    border-radius   : 10px;
-    box-shadow   : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
+    box-shadow      : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
-    color        : rgb(238 238 238 / 86%);
+    color           : rgb(238 238 238 / 86%);
 
     .replay-header {
       text-align : center;

src/renderer/main/vueapp.js

@@ -465,9 +465,9 @@ const app = new Vue({
             history.forward()
         },
         getHTMLStyle() {
-            if(app.cfg.visual.uiScale != 1) {
+            if (app.cfg.visual.uiScale != 1) {
                 document.querySelector("#app").style.zoom = app.cfg.visual.uiScale
-            }else{
+            } else {
                 document.querySelector("#app").style.zoom = ""
             }
         },
@@ -581,6 +581,9 @@ const app = new Vue({
             if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
                 this.setTheme(this.cfg.visual.theme)
             }
+            if (this.cfg.visual.styles.length != 0) {
+                await this.reloadStyles()
+            }
 
             if (this.platform == "darwin") {
                 this.chrome.windowControlPosition = "left"
@@ -762,6 +765,9 @@ const app = new Vue({
             ipcRenderer.on('theme-update', (event, arg) => {
                 less.refresh(true, true, true)
                 self.setTheme(self.cfg.visual.theme, true)
+                if (app.cfg.visual.styles.length != 0) {
+                    app.reloadStyles()
+                }
             })
 
             ipcRenderer.on('SoundCheckTag', (event, tag) => {
@@ -956,6 +962,35 @@ const app = new Vue({
                 less.refresh()
             }
         },
+        async reloadStyles() {
+            const styles = this.cfg.visual.styles
+            document.querySelectorAll(`[id*='less']`).forEach(el => {
+                if(el.id != "less:style") {
+                    el.remove()
+                }
+            });
+
+            this.chrome.appliedTheme.info = {}
+            await asyncForEach(styles, async (style) => {
+                let styleEl = document.createElement("link")
+                styleEl.id = `less-${style.replace(".less", "")}`
+                styleEl.rel = "stylesheet/less"
+                styleEl.href = `themes/${style}`
+                styleEl.type = "text/css"
+                document.head.appendChild(styleEl)
+                try {
+                    let infoResponse = await fetch("themes/" + style.replace("index.less", "theme.json"))
+                    this.chrome.appliedTheme.info = Object.assign(this.chrome.appliedTheme.info, await infoResponse.json())
+                } catch (e) {
+                    e = null
+                    console.warn("failed to get theme.json")
+                }
+            })
+            less.registerStylesheetsImmediately()
+            less.refresh(true, true, true)
+            this.$forceUpdate()
+            return
+        },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {
                 value: true
@@ -3811,7 +3846,7 @@ const app = new Vue({
                     ]
                 }
             }
-            if(this.cfg.advanced.AudioContext) {
+            if (this.cfg.advanced.AudioContext) {
                 menus.normal.items.find(i => i.id === 'audioLab').hidden = false
                 menus.normal.items.find(i => i.id === 'equalizer').hidden = false
             }

src/renderer/style.less

@@ -44,6 +44,7 @@
   --songProgressBackground: #333;
   --textColor: #eee;
   --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
+  --glassFilter: blur(16px) saturate(180%); 
 }
 
 *:focus-visible {
@@ -238,6 +239,17 @@ input[type="text"], input[type="number"] {
   opacity: 0.70;
 }
 
+a.dropdown-item {
+  color: var(--textColor);
+
+  &:hover {
+    background-color: var(--selected);
+    color: var(--textColor);
+  }
+  &:active {
+    background-color: var(--selected-click);
+  }
+}
 
 .bg-artwork {
   position: absolute;
@@ -1554,7 +1566,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 26px;
   transform: scale(0.8);
   transform-origin: left center;
-  transition: transform 0.2s var(--appleEase);
+  transition: transform 0.5s var(--appleEase);
   opacity: 0.75;
   width: auto;
   display: inline-block;
@@ -1614,7 +1626,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   filter: none !important;
 }
 .lyric-body > .lyric-line:not(.active) {
-  transition: filter var(--appleEase) 0.5s ease;
+  // transition: filter var(--appleEase) 0.5s ease;
 }
 
 .lyricWaiting {

src/renderer/themes/groovy/index.less

@@ -1 +0,0 @@
-//

src/renderer/themes/groovy/theme.json

@@ -1,15 +0,0 @@
-{
-    "name": "Groovy",
-    "description": "Inspired by Groove Music and Media Player found on Windows",
-    "version": "1.0.0",
-    "author": "ciderapp",
-    "github_repo": "ciderapp/Groovy",
-    "directives": {
-        "windowLayout": {
-            "value": "twopanel"
-        },
-        "lcdArtworkSize": {
-            "value": 70
-        }
-    }
-}

src/renderer/themes/inline_drawer.less

@@ -0,0 +1,41 @@
+&:not(.modular-fs) {
+    .app-drawer {
+        border-radius: 0px;
+        top          : 0;
+        right        : 0;
+        height       : 100%;
+        box-shadow   : unset;
+        border-left  : 1px solid var(--color2);
+        background   : var(--color1);
+        margin-right : 0px;
+        position     : relative;
+    }
+
+    .drawertransition-enter-active,
+    .drawertransition-leave-active {
+        transition: margin .25s var(--appleEase), opacity .25s var(--appleEase);
+    }
+
+    .drawertransition-enter,
+    .drawertransition-leave-to {
+        margin-right: -300px;
+    }
+    
+    @media screen and (max-width: 1120px) {
+        .app-drawer {
+            margin-right: 0px;
+            position    : absolute;
+        }
+
+        .drawertransition-enter-active,
+        .drawertransition-leave-active {
+            transition: right .25s var(--appleEase), opacity .25s var(--appleEase);
+        }
+
+        .drawertransition-enter,
+        .drawertransition-leave-to {
+            right: -300px;
+        }
+    }
+
+}

src/renderer/themes/reduce_visuals.less

@@ -0,0 +1,115 @@
+body {
+    --ciderShadow-Generic         : var(--mediaItemShadow);
+    --mediaItemShadow-Shadow      : var(--mediaItemShadow);
+    --mediaItemShadow-ShadowSubtle: var(--mediaItemShadow);
+}
+
+.bg-artwork-container {
+    display  : none;
+    animation: none !important;
+
+    .bg-artwork {
+        animation: none !important;
+    }
+}
+
+.replaycard-enter-active,
+.replaycard-leave-active {
+    transition: unset;
+}
+
+.replaycard-enter,
+.replaycard-leave-to {
+    opacity  : 0;
+    transform: translateY(20px);
+}
+
+.modal-enter-active,
+.modal-leave-active {
+    transition: unset;
+}
+
+.modal-enter,
+.modal-leave-to {
+    opacity  : 0;
+    transform: scale(1.10);
+}
+
+.wpfade-enter-active,
+.wpfade-leave-active {
+    transition: opacity .1s var(--appleEase);
+}
+
+.wpfade-enter,
+.wpfade-leave-to {
+    opacity: 0;
+}
+
+.wpfade_transform-enter-active,
+.wpfade_transform-leave-active {
+    transition : unset;
+    will-change: unset;
+}
+
+.wpfade_transform-enter {
+    opacity    : 0;
+    transform  : unset;
+    will-change: unset;
+}
+
+.wpfade_transform-leave-to {
+    opacity    : 0;
+    transform  : unset;
+    will-change: unset;
+}
+
+
+.wpfade_transform_backwards-enter-active,
+.wpfade_transform_backwards-leave-active {
+    transition: unset;
+}
+
+.wpfade_transform_backwards-enter {
+    opacity    : 0;
+    transform  : unset;
+    will-change: unset;
+}
+
+.wpfade_transform_backwards-leave-to {
+    opacity    : 0;
+    transform  : unset;
+    will-change: unset;
+}
+
+.fabfade-enter-active,
+.fabfade-leave-active {
+    transition: unset;
+}
+
+.fabfade-enter,
+.fabfade-leave-to {
+    opacity  : 0;
+    transform: scale(0.5);
+}
+
+.fsModeSwitch-enter-active,
+.fsModeSwitch-leave-active {
+    transition: unset;
+}
+
+.fsModeSwitch-enter,
+.fsModeSwitch-leave-to {
+    transform: scale(1.10);
+    opacity  : 0;
+}
+
+
+.drawertransition-enter-active,
+.drawertransition-leave-active {
+    transition: unset;
+}
+
+.drawertransition-enter,
+.drawertransition-leave-to {
+    right: -300px;
+}

src/renderer/views/components/mediaitem-artwork.ejs

@@ -2,6 +2,7 @@
     <div class="mediaitem-artwork" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async"
+             loading="lazy"
              :style="{background: bgcolor}"
              class="mediaitem-artwork--img">
         <div v-if="video && getVideoPriority()" class="animatedartwork-view-box">
@@ -66,7 +67,7 @@
                 app.showMenuPanel({
                     items: {
                         "save": {
-                            name: "Open artwork in browser",
+                            name: app.getLz('action.openArtworkInBrowser'),
                             action: () => {
                                 window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
                             }

src/renderer/views/components/mediaitem-square.ejs

@@ -5,7 +5,7 @@
     @contextmenu.self="contextMenu"
     v-observe-visibility="{callback: visibilityChanged}"
    >
-    <div v-if="reasonShown && isVisible" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ' '}}</div>
+    <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
     <div style="{'--spcolor': getBgColor()}"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu">
         <template>           

src/renderer/views/pages/browse.ejs

@@ -42,5 +42,8 @@
                 app: this.$root
             }
         },
+        mounted() {
+            this.$root.getBrowsePage();
+        }
     })    
 </script>

src/renderer/views/pages/library-albums.ejs

@@ -71,6 +71,13 @@
                 app : this.$root
             }
         },
+        mounted() {
+            this.$root.getLibraryAlbumsFull(null, 1); 
+            this.$root.getAlbumSort(); 
+            this.$root.searchLibraryAlbums(1); 
+            this.$root.getLibrarySongsFull() ;
+            this.$root.searchLibraryAlbums(1);
+        },
         methods: {
         }
     });

src/renderer/views/pages/library-artists.ejs

@@ -63,6 +63,7 @@
         },
         mounted() {
             let self = this;
+            this.$root.getLibraryArtistsFull(null, 0);
             this.$root.$on('ap-inlinecollection', function(e){
                 console.log("hey",e)
                 self.clready = true;

src/renderer/views/pages/library-songs.ejs

@@ -80,6 +80,9 @@
                 app : this.$root
             }
         },
+        mounted() {
+            this.$root.getLibrarySongsFull()
+        },
         methods: {
             sayHello: function () {
                 alert('Hello world!');

src/renderer/views/pages/listen_now.ejs

@@ -15,6 +15,9 @@ Vue.component('cider-listen-now', {
         return {
             app : this.$root
         }
+    },
+    mounted() {
+        this.$root.getListenNow()
     }
 })    
 </script>

src/renderer/views/pages/search.ejs

@@ -83,6 +83,8 @@
            <div v-if="categoriesReady || getCategories()">
                 <div>
                     <div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
+                        <h3>{{$root.getLz('home.recentlyPlayed')}}</h3>
+                    <mediaitem-square :kind="'385'" size="600" v-for="item in recentlyPlayed.limit(10)" :item="item" :imagesize="800"></mediaitem-square>
                         <h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
                     </div>  
                     <mediaitem-square :kind="'385'" size="600"
@@ -102,6 +104,7 @@
         data: function () {
             return {
                 app: this.$root,
+                recentlyPlayed: [],
                 categoriesView: [],
                 categoriesReady: false,
             }
@@ -114,8 +117,15 @@
                     return false
                 }
             },
+            async seeAllHistory() {
+                let hist = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, {
+                    l: this.$root.mklang
+                })
+                this.recentlyPlayed = hist.data.data
+            },
             async getCategories() {
                 if (this.categoriesView != [] && this.categoriesView.length > 0) { this.categoriesReady = true; return await true; } else {
+                    await this.seeAllHistory()
                     let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities&l=${this.$root.mklang}`);
                     this.categoriesView = response.data.data;
                     console.log(this.categoriesView)

src/renderer/views/pages/settings.ejs

@@ -226,7 +226,6 @@
                                 <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
                                     <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
                                     <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
-                                    <option value="sweetener.less">Sweetener</option>
                                     <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                                 </select>
                                 <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
@@ -840,6 +839,17 @@
                             </div>
                         </div>
 
+                        <div class="md-option-line">
+                            <!-- Do not translate -->
+                            <div class="md-option-segment">
+                                Style Editor<br>
+                                <small>Mix and match various theme components to get Cider looking exactly how you want.</small>
+                            </div>
+                            <div class="md-option-segment">
+                                <stylestack-editor :themes="themes"/>
+                            </div>
+                        </div>
+
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.experimental.unknownPlugin')}}
@@ -938,6 +948,106 @@
     </div>
 </script>
 
+<script>
+    // do not translate
+    Vue.component('stylestack-editor', {
+        /*html*/
+        template: `
+            <div class="stylestack-editor">
+                <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
+                    <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
+                        <b-row>
+                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
+                            <b-col sm="auto">
+                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
+                            </b-col>
+                        </b-row>
+                        </b-list-group-item>
+                        <b-list-group-item slot="footer" style="-webkit-user-drag: none" variant="dark">
+                            <b-row>
+                                <b-col>
+                                    <b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
+                                        <b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
+                                    </b-dropdown>
+                                </b-col>
+                                <b-col>
+                                    <b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>    
+                                </b-col>
+                            </b-row>
+                        </b-list-group-item>
+                </draggable>    
+            </div>
+        `,
+        props: {
+            themes: {
+                type: Array,
+                default: []
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null
+            }
+        },
+        mounted() {
+            this.themes.unshift({
+                name: "Sweetener",
+                file: "sweetener.less"
+            })
+            this.themes.unshift({
+                name: "Reduce Visuals",
+                file: "reduce_visuals.less"
+            })
+            this.themes.unshift({
+                name: "Inline Drawer",
+                file: "inline_drawer.less"
+            })
+        },
+        methods: {
+            gitHubExplore() {
+                this.$root.appRoute("themes-github")
+            },
+            getThemeName(filename) {
+                try {
+                    return this.themes.find(theme => theme.file === filename).name;                    
+                }catch(e) {
+                    return filename;
+                }
+            },
+            moveUp() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index > 0) {
+                    styles.splice(index, 1)
+                    styles.splice(index - 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            moveDown() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index < styles.length - 1) {
+                    styles.splice(index, 1)
+                    styles.splice(index + 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            remove(style) {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(style)
+                styles.splice(index, 1)
+                this.$root.reloadStyles()
+            },
+            addStyle(style) {
+                const styles = this.$root.cfg.visual.styles
+                styles.push(style)
+                this.$root.reloadStyles()
+            }
+        }
+    })
+</script>
+
 <script>
     Vue.component('cider-settings', {
         template: "#cider-settings",
@@ -960,13 +1070,13 @@
         methods: {
             windowBgStyleChange() {
                 this.$root.getNowPlayingArtworkBG(undefined, true)
-                if(this.$root.cfg.visual.window_background_style == "mica") {
+                if (this.$root.cfg.visual.window_background_style == "mica") {
                     this.$root.spawnMica()
                 }
             },
-            reinstallWidevineCDM () {
+            reinstallWidevineCDM() {
-                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok)=>{
+                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
-                    if(ok) {
+                    if (ok) {
                         ipcRenderer.invoke("reinstall-widevine-cdm");
                     }
                 })
@@ -1009,16 +1119,17 @@
                 if (app.cfg.advanced.AudioContext === true) {
                     if (navigator.hardwareConcurrency < 6) {
                         bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
-                        if (result) {
+                            if (result) {
-                            CiderAudio.init();
+                                CiderAudio.init();
-                            if (app.cfg.audio.normalization === true) {
+                                if (app.cfg.audio.normalization === true) {
-                                CiderAudio.normalizerOn()
+                                    CiderAudio.normalizerOn()
+                                }
+                                if (app.cfg.audio.spatial === true) {
+                                    CiderAudio.spatialOn()
+                                    CiderAudio.hierarchical_loading();
+                                }
                             }
-                            if (app.cfg.audio.spatial === true) {
+                        })
-                                CiderAudio.spatialOn()
-                                CiderAudio.hierarchical_loading();
-                            }
-                        }})
                     }
                     else {
                         CiderAudio.init();
@@ -1054,22 +1165,22 @@
                 ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
             },
             checkIfUpdateDisabled() {
-				if (app.cfg.main.UPDATABLE) return;
+                if (app.cfg.main.UPDATABLE) return;
 
                 let updateFields = document.getElementsByClassName('update-check');
-                for (let i=0; i < updateFields.length; i++) {
+                for (let i = 0; i < updateFields.length; i++) {
                     updateFields[i].style = "opacity: 0.5; pointer-events: none;";
                     updateFields[i].title = "Not available on this type of build";
                 }
 
             },
-            promptForRelaunch(){
+            promptForRelaunch() {
                 bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
-                if (result) {
+                    if (result) {
-                    ipcRenderer.send('relaunchApp','');
+                        ipcRenderer.send('relaunchApp', '');
-                }
+                    }
-            });
+                });
             }
         }
     })
-</script>
+</script>

src/renderer/views/pages/themes-github.ejs

@@ -10,7 +10,6 @@
                             v-model="$root.cfg.visual.theme">
                         <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
                         <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
-                        <option value="sweetener.less">Sweetener</option>
                         <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                     </select>
                 </div>