Added some settings

index.js

@@ -1,12 +1,11 @@
 require('v8-compile-cache');
-const {app} = require('electron');
+const { app } = require('electron');
 
 // Analytics for debugging.
 const ElectronSentry = require("@sentry/electron");
-ElectronSentry.init({dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214"});
+ElectronSentry.init({ dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214" });
 
 // Enable WebGPU and list adapters (EXPERIMENTAL.)
-app.commandLine.appendSwitch('enable-unsafe-webgpu');
 
 const configSchema = {
     "general": {
@@ -15,9 +14,6 @@ const configSchema = {
         "discord_rpc": 1, // 0 = disabled, 1 = enabled as Cider, 2 = enabled as Apple Music
         "volume": 1
     },
-    "behavior": {
-        "hw_acceleration": 0 // 0 = default, 1 = webgpu, 2 = gpu disabled
-    },
     "audio": {
         "quality": "extreme",
         "seamless_audio": true
@@ -26,7 +22,9 @@ const configSchema = {
         "theme": "",
         "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
         "refresh_rate": 0,
-        "animated_artwork": 0 // 0 = always, 1 = limited, 2 = never
+        "animated_artwork": "always", // 0 = always, 1 = limited, 2 = never
+        "hw_acceleration": "default", // default, webgpu, disabled
+        "window_transparency": "default"
     },
     "lyrics": {
         "enable_mxm": false,
@@ -50,6 +48,22 @@ function CreateWindow() {
         defaults: configSchema,
     });
 
+    switch (app.cfg.get("visual.hw_acceleration")) {
+        default:
+        case "default":
+
+            break;
+        case "webgpu":
+            console.info("WebGPU is enabled.");
+            app.commandLine.appendSwitch('enable-unsafe-webgpu');
+            break;
+        case "disabled":
+            console.info("Hardware acceleration is disabled.");
+            app.commandLine.appendSwitch('disable-gpu')
+            break;
+    }
+
+
     /** CIDER **/
     const ciderwin = require("./src/main/cider-base")
     app.win = ciderwin
@@ -67,7 +81,7 @@ app.commandLine.appendSwitch('js-flags', '--max-old-space-size=1024')
 app.on('ready', () => {
     if (app.isQuiting) { app.quit(); return; }
     console.log('[Cider] Application is Ready. Creating Window.')
-    if(!app.isPackaged) {
+    if (!app.isPackaged) {
         console.info('[Cider] Running in development mode.')
     }
     CreateWindow()

src/main/cider-base.js

@@ -9,81 +9,6 @@ const Store = require("electron-store");
 const store = new Store();
 const yt = require('youtube-search-without-api-key');
 
-const schema = {
-    "general": {
-        "close_behavior": {
-            type: "number",
-            default: 0
-        },
-        "startup_behavior": {
-            type: "number",
-            default: 0
-        },
-        "discord_rpc": {
-            type: "number",
-            default: 1
-        },
-    },
-    "behavior": {
-        "hw_acceleration": {
-            type: "number",
-            default: 0 // 0 = default, 1 = webgpu, 2 = gpu disabled
-        }
-    },
-    "audio": {
-        "quality": {
-            type: "string",
-            default: "extreme",
-        },
-        "seamless_audio": {
-            type: "boolean",
-            default: true,
-        }
-    },
-    "visual": {
-        "theme": {
-            type: "string",
-            default: ""
-        },
-        "scrollbars": {
-            type: "number",
-            default: 0
-        },
-        "refresh_rate": {
-            type: "number",
-            default: 0
-        },
-        "animated_artwork": {
-            type: "number",
-            default: 0 // 0 = always, 1 = limited, 2 = never
-        }
-    },
-    "lyrics": {
-        "enable_mxm": {
-            type: "boolean",
-            default: false
-        },
-        "mxm_language": {
-            type: "string",
-            default: "en"
-        }
-    },
-    "lastfm": {
-        "enabled": {
-            type: "boolean",
-            default: false
-        },
-        "scrobble_after": {
-            type: "number",
-            default: 30
-        },
-        "auth_token": {
-            type: "string",
-            default: ""
-        }
-    }
-}
-
 // Analytics for debugging.
 const ElectronSentry = require("@sentry/electron");
 ElectronSentry.init({dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214"});
@@ -127,7 +52,6 @@ const CiderBase = {
                 contextIsolation: false,
                 preload: join(__dirname, '../preload/cider-preload.js')
             }
-
         }
 
         CiderBase.InitWebServer()

src/renderer/index.js

@@ -269,6 +269,19 @@ const app = new Vue({
         },
     },
     methods: {
+        getHTMLStyle() {
+            switch(this.cfg.visual.window_transparency) {
+                case "acrylic":
+                default:
+                    document.querySelector("html").style.background = ""; 
+                    document.querySelector("body").style.background = ""; 
+                break;
+                case "disabled":
+                    document.querySelector("html").style.background = "#222"; 
+                    document.querySelector("body").style.background = "#222"; 
+                break;
+            }
+        },
         resetState() {
             app.selectedMediaItems = [];
             for (let key in app.modals) {
@@ -2306,6 +2319,8 @@ function refreshFocus() {
     setTimeout(refreshFocus, 200);
 }
 
+app.getHTMLStyle()
+
 refreshFocus();
 
 function xmlToJson(xml) {

src/renderer/views/components/animatedartwork-view.ejs

@@ -9,10 +9,27 @@
 <script>
     Vue.component('animatedartwork-view', {
         template: '#animatedartwork-view',
-        props: ['video', 'hls'],
+        props: {
+            video: {
+                type: String,
+                required: true
+            },
+            hls: {
+                type: Object,
+                default: ''
+            },
+            priority: {
+                type: Boolean,
+                default: false
+            }
+        },
         async mounted()  {
+            if(!this.priority && app.cfg.visual.animated_artwork == "limited") {
+                return
+            }else if(app.cfg.visual.animated_artwork == "disabled") {
+                return
+            }
             if (this.video) {
-
                 this.$nextTick(function () {
                     var config = {
                         backBufferLength: 0,
@@ -21,7 +38,6 @@
                         emeEnabled: false,
                         abrEwmaDefaultEstimate: 10000,
                         testBandwidth: false,
-                        capLevelToPlayerSize: true
                     };
                     if (this.hls) {
                         this.hls.detachMedia();

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

@@ -12,8 +12,8 @@
             <img :src="app.getMediaItemArtwork(url, size, width)"
                  decoding="async"
                  class="mediaitem-artwork--img">
-            <div v-if="video && isVisible" class="animatedartwork-view-box">
+            <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
-                <animatedartwork-view  :video="video"></animatedartwork-view>   
+                <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>   
             </div>  
         </div>
     </template>
@@ -43,6 +43,10 @@
                 type: String,
                 required: false
             },
+            videoPriority: {
+                type: Boolean,
+                required: false
+            },
             shadow: {
                 type: String,
                 default: 'none'
@@ -57,8 +61,18 @@
             }
         },
         methods: {
+            getVideoPriority() {
+                if(app.cfg.visual.animated_artwork == "always") {
+                    return true;
+                }else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
+                    return true
+                } else if (app.cfg.visual.animated_artwork == "disabled") {
+                    return false
+                }
+                return this.videoPriority
+            },
             getStyle() {
-                switch(this.shadow) {
+                switch (this.shadow) {
                     case "large":
                         this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
                         break;

src/renderer/views/pages/artist.ejs

@@ -2,6 +2,7 @@
     <div class="content-inner artist-page">
         <div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
             <animatedartwork-view
+                    :priority="true"
                     v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
                     :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
             </animatedartwork-view>

src/renderer/views/pages/cider-playlist.ejs

@@ -13,6 +13,7 @@
                 <div class="col-auto flex-center">
                     <div style="width: 260px;height:260px;">
                         <mediaitem-artwork
+                                :video-priority="true"
                                 :url="(data.attributes != null && data.attributes.artwork && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0) ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
                                 :video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                                 size="260"

src/renderer/views/pages/settings.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-settings">
     <div class="content-inner settings-page">
-        <h1 class="header-text">Settings <small>(non functional, stay tuned)</small></h1>
+        <h1 class="header-text">Settings <small>(WIP)</small></h1>
         <div class="md-option-container">
             <div class="md-option-line">
                 <div class="md-option-segment">
@@ -8,9 +8,10 @@
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
                     <select class="md-select" style="width:180px;">
-                        <option value="990">Extreme</option>
+                        <option value="extreme">Extreme</option>
-                        <option value="256">High</option>
+                        <option value="high">High</option>
-                        <option value="64">Low</option>
+                        <option value="low">Low</option>
+                        <option value="auto">Auto</option>
                     </select>
                 </div>
             </div>
@@ -19,7 +20,7 @@
                     Seamless Audio Transitions
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
-                    <input type="checkbox" switch/>
+                    <input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
                 </div>
             </div>
             <div class="md-option-line">
@@ -27,10 +28,10 @@
                     Animated Artwork
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
+                    <select class="md-select" v-model="app.cfg.visual.animated_artwork">
-                        <option value="0">Always</option>
+                        <option value="always">Always</option>
-                        <option value="1">Limit to pages and special entries</option>
+                        <option value="limited">Limit to pages and special entries</option>
-                        <option value="2">Disable Everywhere</option>
+                        <option value="disabled">Disable Everywhere</option>
                     </select>
                 </div>
             </div>
@@ -39,7 +40,7 @@
                     Discord Rich Presence
                 </div>
                 <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
+                    <select class="md-select" v-model="app.cfg.general.discord_rpc">
                         <option value="0">Disabled</option>
                         <option value="1">Display as 'Cider'</option>
                         <option value="2">Display as 'Apple Music'</option>
@@ -72,6 +73,31 @@
                     <input type="checkbox" switch/>
                 </div>
             </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Hardware Acceleration<br>
+                    <small>(Requires relaunch)</small>
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
+                        <option value="default">Default</option>
+                        <option value="webgpu">WebGPU</option>
+                        <option value="disabled">Disabled</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Window Transparency
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
+                        <option value="default">Default</option>
+                        <option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
+                        <option value="disabled">Disabled</option>
+                    </select>
+                </div>
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Theme