adds style stack editor

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

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 () {
+            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");
                     }
                 })
@@ -1018,7 +1100,8 @@
                                     CiderAudio.spatialOn()
                                     CiderAudio.hierarchical_loading();
                                 }
-                        }})
+                            }
+                        })
                     }
                     else {
                         CiderAudio.init();
@@ -1057,16 +1140,16 @@
                 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','');
+                        ipcRenderer.send('relaunchApp', '');
                     }
                 });
             }