Merge branch 'ciderapp:develop' into develop

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

@@ -114,6 +114,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/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/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()
@@ -956,6 +959,37 @@ const app = new Vue({
                 less.refresh()
             }
         },
+        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()
+            });
+            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()
+            setTimeout(() => {
+                document.querySelector("body").style.opacity = ""
+                document.querySelector("body").style.overflow = ""
+            }, 500)
+        },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {
                 value: true

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

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/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",
@@ -1018,7 +1100,8 @@
                                     CiderAudio.spatialOn()
                                     CiderAudio.hierarchical_loading();
                                 }
-                        }})
+                            }
+                        })
                     }
                     else {
                         CiderAudio.init();