From 4cda5a5303f3911ded8b79994c40e74e0388335f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 10:49:34 -0700
Subject: [PATCH 1/6] fixes artist chip spacing for multiple artists

---
 src/renderer/less/elements.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 13b65d5f..768b2a8f 100644
--- a/src/renderer/less/elements.less
+++ b/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;

From 51e78ee8663c42661bc187218f3e089cfd993aef Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 12:39:19 -0700
Subject: [PATCH 2/6] adds style stack editor

---
 src/main/base/store.ts                |   1 +
 src/renderer/main/vueapp.js           |  31 ++++++-
 src/renderer/views/pages/settings.ejs | 125 +++++++++++++++++++++-----
 3 files changed, 133 insertions(+), 24 deletions(-)

diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index 6d59627f..6f1ea21e 100644
--- a/src/main/base/store.ts
+++ b/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"
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 1cb68db9..bffe6a59 100644
--- a/src/renderer/main/vueapp.js
+++ b/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 = ""
             }
         },
@@ -956,6 +956,31 @@ const app = new Vue({
                 less.refresh()
             }
         },
+        async reloadStyles() {
+            const styles = this.cfg.visual.styles
+            document.querySelectorAll(`[id*='less']`).forEach(el => {
+                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()
+        },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {
                 value: true
@@ -3811,7 +3836,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
             }
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index a21bee83..3388d3dd 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -840,6 +840,17 @@
                             </div>
                         </div>
 
+                        <div class="md-option-line">
+                            <!-- Do not translate -->
+                            <div class="md-option-segment">
+                                Style Stack Editor
+                            </div>
+                        </div>
+
+                        <div class="md-option-line">
+                            <stylestack-editor :themes="themes"/>
+                        </div>
+
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.experimental.unknownPlugin')}}
@@ -938,6 +949,77 @@
     </div>
 </script>
 
+<script>
+    // do not translate
+    Vue.component('stylestack-editor', {
+        /*html*/
+        template: `
+            <b-row>
+                <b-col>
+                    <select size="6" v-model="selected" style="width:100%;">
+                        <option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option>
+                    </select>    
+                    <div class="btn-group" style="width: 100%">
+                        <button @click="moveUp" class="md-btn md-btn-small">Up</button>
+                        <button @click="remove" class="md-btn md-btn-small">Remove</button>
+                        <button @click="moveDown" class="md-btn md-btn-small">Down</button>
+                    </div>
+                </b-col>    
+                <b-col>
+                    <select class="md-select" style="width:100%;" v-model="newTheme">
+                        <option v-for="theme in themes" :value="theme.file">{{theme.name}}</option>
+                    </select>    
+                    <button class="md-btn" @click="addStyle()">Add</button>
+                </b-col>    
+            </b-row>
+        `,
+        props: {
+            themes: {
+                type: Array,
+                default: []
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null
+            }
+        },
+        methods: {
+            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() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                styles.splice(index, 1)
+                this.$root.reloadStyles()
+            },
+            addStyle() {
+                const styles = this.$root.cfg.visual.styles
+                styles.push(this.newTheme)
+                this.newTheme = null
+                this.$root.reloadStyles()
+            }
+        }
+    })
+</script>
+
 <script>
     Vue.component('cider-settings', {
         template: "#cider-settings",
@@ -960,13 +1042,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 () {
-                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok)=>{
-                    if(ok) {
+            reinstallWidevineCDM() {
+                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
+                    if (ok) {
                         ipcRenderer.invoke("reinstall-widevine-cdm");
                     }
                 })
@@ -1009,16 +1091,17 @@
                 if (app.cfg.advanced.AudioContext === true) {
                     if (navigator.hardwareConcurrency < 6) {
                         bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
-                        if (result) {
-                            CiderAudio.init();
-                            if (app.cfg.audio.normalization === true) {
-                                CiderAudio.normalizerOn()
+                            if (result) {
+                                CiderAudio.init();
+                                if (app.cfg.audio.normalization === true) {
+                                    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 +1137,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) {
-                    ipcRenderer.send('relaunchApp','');
-                }
-            });
+                    if (result) {
+                        ipcRenderer.send('relaunchApp', '');
+                    }
+                });
             }
         }
     })
-</script>
+</script>
\ No newline at end of file

From 7cbdbe482504dc97c506275cb26b6f43d151eec1 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 12:41:53 -0700
Subject: [PATCH 3/6] masks style changes

---
 src/renderer/main/vueapp.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index bffe6a59..b8a94584 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -957,6 +957,8 @@ const app = new Vue({
             }
         },
         async reloadStyles() {
+            document.querySelector("body").style.opacity = 0
+            document.querySelector("body").style.overflow = "hidden"
             const styles = this.cfg.visual.styles
             document.querySelectorAll(`[id*='less']`).forEach(el => {
                 el.remove()
@@ -980,6 +982,10 @@ const app = new Vue({
             less.registerStylesheetsImmediately()
             less.refresh(true, true, true)
             this.$forceUpdate()
+            setTimeout(() => {
+                document.querySelector("body").style.opacity = ""
+                document.querySelector("body").style.overflow = ""
+            }, 500)
         },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {

From 07b4d3b8ff9fc4a30ad2c471597028141f918248 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 12:46:09 -0700
Subject: [PATCH 4/6] Update vueapp.js

---
 src/renderer/main/vueapp.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index b8a94584..5f064127 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -899,6 +899,9 @@ const app = new Vue({
                 this.$forceUpdate()
             }, 500)
             ipcRenderer.invoke("renderer-ready", true)
+            if (this.cfg.visual.styles.length != 0) {
+                this.reloadStyles()
+            }
             document.querySelector("#LOADER").remove()
             if (this.cfg.general.themeUpdateNotification) {
                 this.checkForThemeUpdates()

From 74c42ede844ac4bae37bbf4e486dc0c4453259b8 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 13:32:19 -0700
Subject: [PATCH 5/6] removed isvisible check

---
 src/renderer/views/components/mediaitem-artwork.ejs | 1 +
 src/renderer/views/components/mediaitem-square.ejs  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 16a79210..806aa32e 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/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">
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 90d45943..fa44a94e 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/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>           

From 8616f4297863dd0c849c3f1ea4678dd8c3617a2b Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 13:40:05 -0700
Subject: [PATCH 6/6] moved onEnter to mounted

---
 src/main/base/browserwindow.ts               | 10 +++++-----
 src/renderer/views/pages/browse.ejs          |  3 +++
 src/renderer/views/pages/library-albums.ejs  |  7 +++++++
 src/renderer/views/pages/library-artists.ejs |  1 +
 src/renderer/views/pages/library-songs.ejs   |  3 +++
 src/renderer/views/pages/listen_now.ejs      |  3 +++
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index f3308f78..158cf251 100644
--- a/src/main/base/browserwindow.ts
+++ b/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>`,
diff --git a/src/renderer/views/pages/browse.ejs b/src/renderer/views/pages/browse.ejs
index 4f4bfec1..f49ecc9e 100644
--- a/src/renderer/views/pages/browse.ejs
+++ b/src/renderer/views/pages/browse.ejs
@@ -42,5 +42,8 @@
                 app: this.$root
             }
         },
+        mounted() {
+            this.$root.getBrowsePage();
+        }
     })    
 </script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs
index 06c33ffc..961d2114 100644
--- a/src/renderer/views/pages/library-albums.ejs
+++ b/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: {
         }
     });
diff --git a/src/renderer/views/pages/library-artists.ejs b/src/renderer/views/pages/library-artists.ejs
index 967b8e10..87d9edc2 100644
--- a/src/renderer/views/pages/library-artists.ejs
+++ b/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;
diff --git a/src/renderer/views/pages/library-songs.ejs b/src/renderer/views/pages/library-songs.ejs
index b2e27ab5..bfe6a88e 100644
--- a/src/renderer/views/pages/library-songs.ejs
+++ b/src/renderer/views/pages/library-songs.ejs
@@ -80,6 +80,9 @@
                 app : this.$root
             }
         },
+        mounted() {
+            this.$root.getLibrarySongsFull()
+        },
         methods: {
             sayHello: function () {
                 alert('Hello world!');
diff --git a/src/renderer/views/pages/listen_now.ejs b/src/renderer/views/pages/listen_now.ejs
index fe84b52b..6bf87e36 100644
--- a/src/renderer/views/pages/listen_now.ejs
+++ b/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>