From df8cde6f54d436c602a872902ac44485a0ec7e88 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Thu, 7 Jul 2022 07:51:38 +0700
Subject: [PATCH 01/18] revert mxm back to local

---
 src/renderer/main/vueapp.js                   | 89 ++++++++++++++++---
 .../views/components/settings-window.ejs      | 20 +++--
 src/renderer/views/pages/settings.ejs         | 20 +++--
 3 files changed, 97 insertions(+), 32 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 0879c25e..7dfd7953 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3065,13 +3065,67 @@ const app = new Vue({
                 return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
             }
 
+            /* get token */
+            function getToken(mode, track, artist, songid, lang, time, id) {
+                if (attempt > 2) {
+                    app.loadNeteaseLyrics();
+                    // app.loadAMLyrics();
+                } else {
+                    attempt = attempt + 1;
+                    let url = "https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0&t=" + revisedRandId();
+                    let req = new XMLHttpRequest();
+                    req.overrideMimeType("application/json");
+                    req.open('GET', url, true);
+                    req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
+                    req.onload = function () {
+                        try {
+                            let jsonResponse = JSON.parse(this.responseText);
+                            let status2 = jsonResponse["message"]["header"]["status_code"];
+                            if (status2 == 200) {
+                                let token = jsonResponse["message"]["body"]["user_token"] ?? '';
+                                if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") {
+                                    console.debug('200 token', mode);
+                                    // token good
+                                    app.mxmtoken = token;
 
-            function getMXMSubs(track, artist, lang, time, id) {
-                let richsyncQuery = app.cfg.lyrics.mxm_karaoke
-                let itunesid = (id && id != "") ? id : ''; // Mode 1 -> Subs
-                let url = "https://api.cider.sh/v1/lyrics?" + "mode=1" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
+                                    if (mode == 1) {
+                                        getMXMSubs(track, artist, app.mxmtoken, lang, time, id);
+                                    } else {
+                                        getMXMTrans(songid, lang, app.mxmtoken);
+                                    }
+                                } else {
+                                    console.debug('fake 200 token');
+                                    getToken(mode, track, artist, songid, lang, time)
+                                }
+                            } else {
+                                // console.log('token 4xx');
+                                getToken(mode, track, artist, songid, lang, time)
+                            }
+                        } catch (e) {
+                            console.log('error');
+                            app.loadQQLyrics();
+                            //app.loadAMLyrics();
+                        }
+                    };
+                    req.onerror = function () {
+                        console.log('error');
+                        app.loadQQLyrics();
+                        // app.loadAMLyrics();
+                    };
+                    req.send();
+                }
+            }
+
+            function getMXMSubs(track, artist, token, lang, time, id) {
+                let usertoken = encodeURIComponent(token);
+                let richsyncQuery = (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : ""
+                let timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
+                let itunesid = (id && id != "") ? `&track_itunes_id=${id}` : '';
+                let url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched" + richsyncQuery + "&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + itunesid + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
                 let req = new XMLHttpRequest();
                 req.overrideMimeType("application/json");
+                req.open('GET', url, true);
+                req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
                 req.onload = function () {
                     try {
                         let jsonResponse = JSON.parse(this.responseText);
@@ -3098,7 +3152,7 @@ const app = new Vue({
                                     // app.loadAMLyrics()
                                 } else {
                                     if (richsync == [] || richsync.length == 0) {
-                                        console.log("musixmatch worki");
+                                        console.log("ok");
                                         // process lrcfile to json here
                                         app.lyricsMediaItem = lrcfile
                                         let u = app.lyricsMediaItem.split(/[\r\n]/);
@@ -3141,7 +3195,7 @@ const app = new Vue({
                                     }
                                     if (lrcfile != null && lrcfile != '') {
                                         // load translation
-                                        getMXMTrans(id, lang);
+                                        getMXMTrans(id, lang, token);
                                     } else {
                                         // app.loadAMLyrics()
                                         app.loadQQLyrics();
@@ -3152,7 +3206,9 @@ const app = new Vue({
                                 app.loadQQLyrics();
                                 //  app.loadAMLyrics()
                             }
-                        } 
+                        } else { //4xx rejected
+                            getToken(1, track, artist, '', lang, time);
+                        }
                     } catch (e) {
                         console.error(e);
                         app.loadQQLyrics();
@@ -3164,22 +3220,23 @@ const app = new Vue({
                     console.log('error');
                     // app.loadAMLyrics();
                 };
-                req.open('POST', url, true);
                 req.send();
             }
 
-            function getMXMTrans(id, lang) {
-                if (lang != "disabled" && id != '') { // Mode 2 -> Trans
-                    let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
+            function getMXMTrans(id, lang, token) {
+                if (lang != "disabled" && id != '') {
+                    let usertoken = encodeURIComponent(token);
+                    let url2 = "https://apic-desktop.musixmatch.com/ws/1.1/crowd.track.translations.get?translation_fields_set=minimal&selected_language=" + lang + "&track_id=" + id + "&comment_format=text&part=user&format=json&usertoken=" + usertoken + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
                     let req2 = new XMLHttpRequest();
                     req2.overrideMimeType("application/json");
-                    req2.open('POST', url2, true);
+                    req2.open('GET', url2, true);
+                    req2.setRequestHeader("authority", "apic-desktop.musixmatch.com");
                     req2.onload = function () {
                         try {
                             let jsonResponse2 = JSON.parse(this.responseText);
                             console.log(jsonResponse2);
                             let status2 = jsonResponse2["message"]["header"]["status_code"];
-                            if (status2 === 200) {
+                            if (status2 == 200) {
                                 try {
                                     let preTrans = []
                                     let u = app.lyrics;
@@ -3211,7 +3268,11 @@ const app = new Vue({
             }
 
             if (track != "" & track != "No Title Found") {
-                getMXMSubs(track, artist, lang, time, id)
+                if (app.mxmtoken != null && app.mxmtoken != '') {
+                    getMXMSubs(track, artist, app.mxmtoken, lang, time, id)
+                } else {
+                    getToken(1, track, artist, '', lang, time);
+                }
             }
         },
         loadNeteaseLyrics() {
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 9b8a0f1e..8f051f1b 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -709,15 +709,17 @@
                             <span>{{$root.getLz('settings.header.lyrics')}}</span>
                         </div>
                         <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" switch checked />
-                                    </label>
-                                    <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
+                            <div style="opacity: 0.5; pointer-events: none;">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" switch checked />
+                                        </label>
+                                        <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
+                                    </div>
                                 </div>
                             </div>
                             <div class="md-option-line">
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 0db48612..0b9fcbe8 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -614,15 +614,17 @@
                         <span>{{$root.getLz('settings.header.lyrics')}}</span>
                     </div>
                     <div class="settings-option-body">
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <input type="checkbox" switch checked/>
-                                </label>
-                                <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
+                        <div style="opacity: 0.5; pointer-events: none;">
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <input type="checkbox" switch checked/>
+                                    </label>
+                                    <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
+                                </div>
                             </div>
                         </div>
                         <div class="md-option-line">

From 2361cfaebe8cd39473fdd9ace9d2d9fdeecf5600 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 02:03:56 -0700
Subject: [PATCH 02/18] new mediaitem scaling method

---
 src/renderer/less/elements.less               | 127 +++++++++---------
 src/renderer/main/vueapp.js                   |  14 ++
 src/renderer/style.less                       |   1 +
 .../views/pages/library-recentlyadded.ejs     |   6 +-
 4 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 1b8026f7..403e38e0 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -984,11 +984,11 @@
 
 /* mediaitem-square */
 .cd-mediaitem-square {
-  --transitionDuration: .25s;
+  --transitionDuration: .5s;
   --scaleRate: 1.25;
   --scaleRateArtwork: 1;
-  width: 200px;
-  height: 200px;
+  width: calc(160px * var(--windowRelativeScale));
+  height: calc(200px * var(--windowRelativeScale));
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -996,14 +996,13 @@
   justify-content: center;
   align-items: center;
   border-radius: 6px;
-  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
   .artwork-container {
     position: relative;
 
     .artwork {
-      height: 150px;
-      width: 150px;
+      height: calc(140px * var(--windowRelativeScale));
+      width: calc(140px * var(--windowRelativeScale));
       background: blue;
       border-radius: var(--mediaItemRadius);
       background: var(--artwork);
@@ -1011,7 +1010,6 @@
       flex: 0 0 auto;
       margin: 6px;
       cursor: pointer;
-      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
       .mediaitem-artwork {
         box-shadow: unset;
@@ -1085,31 +1083,31 @@
     }
   }
 
-  &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
-    @media (min-width: 1460px) {
-      --scaleRate: 1.1;
-      --scaleRateArtwork: 0.9;
-      width: calc(200px * var(--scaleRate));
-      height: calc(200px * var(--scaleRate));
+  // &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
+  //   @media (min-width: 1460px) {
+  //     --scaleRate: 1.1;
+  //     --scaleRateArtwork: 0.9;
+  //     width: calc(200px * var(--scaleRate));
+  //     height: calc(200px * var(--scaleRate));
 
-      .artwork-container > .artwork {
-        width: calc(190px * var(--scaleRateArtwork));
-        height: calc(190px * var(--scaleRateArtwork));
-      }
-    }
+  //     .artwork-container > .artwork {
+  //       width: calc(190px * var(--scaleRateArtwork));
+  //       height: calc(190px * var(--scaleRateArtwork));
+  //     }
+  //   }
 
-    @media (min-width: 1550px) {
-      --scaleRate: 1.25;
-      --scaleRateArtwork: 1;
-      width: calc(200px * var(--scaleRate));
-      height: calc(200px * var(--scaleRate));
+  //   @media (min-width: 1550px) {
+  //     --scaleRate: 1.25;
+  //     --scaleRateArtwork: 1;
+  //     width: calc(200px * var(--scaleRate));
+  //     height: calc(200px * var(--scaleRate));
 
-      .artwork-container > .artwork {
-        width: calc(190px * var(--scaleRateArtwork));
-        height: calc(190px * var(--scaleRateArtwork));
-      }
-    }
-  }
+  //     .artwork-container > .artwork {
+  //       width: calc(190px * var(--scaleRateArtwork));
+  //       height: calc(190px * var(--scaleRateArtwork));
+  //     }
+  //   }
+  // }
 
 
   .info-rect {
@@ -1161,10 +1159,12 @@
   &.mediaitem-video {
     height: 200px;
     width: 240px;
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
       height: 120px;
       width: 212px;
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
     &:not(.noscale) {
@@ -1195,48 +1195,52 @@
   }
 
   &.mediaitem-brick {
-    height: 200px;
-    width: 240px;
+    height: calc(200px, var(--windowRelativeScale));
+    width: calc(240px, var(--windowRelativeScale));
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: 123px;
-      width: 220px;
+      height: calc(123px, var(--windowRelativeScale));
+      width: calc(220px, var(--windowRelativeScale));
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
-    &:not(.noscale) {
-      @media (min-width: 1460px) {
-        --scaleRate: 1.1;
-        --scaleRateArtwork: 1.1;
-        width: calc(240px * var(--scaleRate));
-        height: calc(200px * var(--scaleRate));
+    // &:not(.noscale) {
+    //   @media (min-width: 1460px) {
+    //     --scaleRate: 1.1;
+    //     --scaleRateArtwork: 1.1;
+    //     width: calc(240px * var(--scaleRate));
+    //     height: calc(200px * var(--scaleRate));
   
-        .artwork-container > .artwork {
-          width: calc(220px * var(--scaleRateArtwork));
-          height: calc(123px * var(--scaleRateArtwork));
-        }
-      }
+    //     .artwork-container > .artwork {
+    //       width: calc(220px * var(--scaleRateArtwork));
+    //       height: calc(123px * var(--scaleRateArtwork));
+    //     }
+    //   }
   
-      @media (min-width: 1550px) {
-        --scaleRate: 1.25;
-        --scaleRateArtwork: 1.25;
-        width: calc(240px * var(--scaleRate));
-        height: calc(200px * var(--scaleRate));
+    //   @media (min-width: 1550px) {
+    //     --scaleRate: 1.25;
+    //     --scaleRateArtwork: 1.25;
+    //     width: calc(240px * var(--scaleRate));
+    //     height: calc(200px * var(--scaleRate));
   
-        .artwork-container > .artwork {
-          width: calc(220px * var(--scaleRateArtwork));
-          height: calc(123px * var(--scaleRateArtwork));
-        }
-      }
-    }
+    //     .artwork-container > .artwork {
+    //       width: calc(220px * var(--scaleRateArtwork));
+    //       height: calc(123px * var(--scaleRateArtwork));
+    //     }
+    //   }
+    // }
   }
 
   &.mediaitem-small {
-    width: 140px;
-    height: 180px;
+    width: calc(140px, var(--windowRelativeScale));
+    height: calc(180px, var(--windowRelativeScale));
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: 128px;
-      width: 128px;
+      height: calc(128px, var(--windowRelativeScale));
+      width: calc(128px, var(--windowRelativeScale));
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
   }
 
@@ -1249,6 +1253,7 @@
     position: relative;
     border-radius: calc(var(--mediaItemRadius) * 2);
     box-shadow: var(--mediaItemShadow-ShadowSubtle);
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
       width: 230px;
@@ -1341,7 +1346,7 @@
     }
 
     &:not(.noscale) {
-      @media (min-width: 1460px) {
+      @media (min-width: 1200px) {
         width: calc(230px * 1.1);
         height: calc(298px * 1.1);
         .artwork-container > .artwork {
@@ -1350,7 +1355,7 @@
         }
       }
 
-      @media (min-width: 1550px) {
+      @media (min-width: 1400px) {
         width: calc(230px * 1.25);
         height: calc(298px * 1.25);
         .artwork-container > .artwork {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index a975a90d..1edc9418 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -706,6 +706,9 @@ const app = new Vue({
             } catch (err) {
             }
 
+            // Used to get a scale factor for the window for CSS scaling
+            window.addEventListener("resize", e =>  this.setWindowScaleFactor())
+            this.setWindowScaleFactor()
             this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
             this.mk._bag.features["broadcast-radio"] = true
             this.mk._services.apiManager.store.storekit._restrictedEnabled = false
@@ -1092,6 +1095,17 @@ const app = new Vue({
 
             ipcRenderer.invoke("scanLibrary")
         },
+        setWindowScaleFactor() {
+            let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
+
+            if(scale <= 1) {
+                scale = 1
+            }else if(scale >= 1.4) {
+                scale = 1.4
+            }
+            document.documentElement.style
+                    .setProperty('--windowRelativeScale', scale);
+        },
         showFoo(querySelector, time) {
             clearTimeout(this.idleTimer);
             if (this.idleState == true) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index a4592068..60619f5b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -14,6 +14,7 @@
 @import url("less/pages.less");
 
 :root {
+  --windowRelativeScale: 1;
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
   --borderColor: rgb(200 200 200 / 16%);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
diff --git a/src/renderer/views/pages/library-recentlyadded.ejs b/src/renderer/views/pages/library-recentlyadded.ejs
index 9f5b2151..b65150c9 100644
--- a/src/renderer/views/pages/library-recentlyadded.ejs
+++ b/src/renderer/views/pages/library-recentlyadded.ejs
@@ -1,13 +1,13 @@
 <script type="text/x-template" id="cider-recentlyadded">
     <div class="content-inner">
         <h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1>
-        <div class="well itemContainer" v-if="itemSize == 'normal'">
+        <div class="well itemContainer collection-list-square" v-if="itemSize == 'normal'">
             <mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
         </div>
-        <div class="well itemContainer" v-else="itemSize == 'compact'">
+        <div class="well itemContainer collection-list-square" v-else="itemSize == 'compact'">
             <mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
         </div>
-        <div class="well itemContainer" v-show="loading">
+        <div class="well itemContainer collection-list-square" v-show="loading">
             <div class="spinner"></div>
         </div>
         <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}

From 5e3bdd96f3d6a792d954427463e616ed98c28fa5 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 02:19:00 -0700
Subject: [PATCH 03/18] added Maximum Element Scale

---
 src/i18n/en_US.json                           |  1 +
 src/i18n/source/en_US.json                    |  1 +
 src/main/base/store.ts                        |  3 ++-
 src/renderer/main/vueapp.js                   |  6 ++---
 .../views/components/settings-window.ejs      | 23 +++++++++++++++++++
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 5924e72f..b01419a5 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -554,6 +554,7 @@
   "settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository",
   "settings.option.experimental.compactUI": "Compact UI",
   "settings.option.window.close_button_hide": "Close Button Should Hide the Application",
+  "settings.option.window.maxElementScale": "Maximum Element Scale",
   "settings.option.experimental.inline_playlists": "Inline Playlists and Albums",
   "settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping",
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index 5924e72f..b01419a5 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -554,6 +554,7 @@
   "settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository",
   "settings.option.experimental.compactUI": "Compact UI",
   "settings.option.window.close_button_hide": "Close Button Should Hide the Application",
+  "settings.option.window.maxElementScale": "Maximum Element Scale",
   "settings.option.experimental.inline_playlists": "Inline Playlists and Albums",
   "settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping",
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index b7786b98..b57a0cfa 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -239,7 +239,8 @@ export class Store {
             "windowColor": "#000000",
             "customAccentColor": false,
             "accentColor": "#fc3c44",
-            "purplePodcastPlaybackBar": false
+            "purplePodcastPlaybackBar": false,
+            "maxContentScale": -1 // -1 default, anything else is a custom scale
         },
         "lyrics": {
             "enable_mxm": false,
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 1edc9418..a5c0890e 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1097,11 +1097,11 @@ const app = new Vue({
         },
         setWindowScaleFactor() {
             let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
-
+            let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale)
             if(scale <= 1) {
                 scale = 1
-            }else if(scale >= 1.4) {
-                scale = 1.4
+            }else if(scale >= desiredScale) {
+                scale = desiredScale
             }
             document.documentElement.style
                     .setProperty('--windowRelativeScale', scale);
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index ac9ece72..9b8a0f1e 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -555,6 +555,29 @@
                             <span>{{$root.getLz('settings.header.window')}}</span>
                         </div>
                         <div class="settings-option-body">
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    {{$root.getLz("settings.option.window.maxElementScale")}}
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <select @change="$root.setWindowScaleFactor()" class="md-select" v-model="app.cfg.visual.maxElementScale" >
+                                            <option value="-1">Default (1.6x)</option>
+                                            <option value="1">1.0x</option>
+                                            <option value="1.1">1.1x</option>
+                                            <option value="1.2">1.2x</option>
+                                            <option value="1.3">1.3x</option>
+                                            <option value="1.4">1.4x</option>
+                                            <option value="1.5">1.5x</option>
+                                            <option value="1.6">1.6x</option>
+                                            <option value="1.7">1.7x</option>
+                                            <option value="1.8">1.8x</option>
+                                            <option value="1.9">1.9x</option>
+                                            <option value="2.0">2.0x</option>
+                                        </select>
+                                    </label>
+                                </div>
+                            </div>
                             <div class="md-option-line" v-show="app.platform !== 'darwin'">
                                 <div class="md-option-segment">
                                     {{$root.getLz("settings.option.window.close_button_hide")}}

From 6cb95f2d10ae9acb7e327453724595ab6f00af95 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 02:50:35 -0700
Subject: [PATCH 04/18] mediaitem square artwork res now adapts to window size

---
 src/renderer/less/elements.less               | 52 +++++++++----------
 src/renderer/main/vueapp.js                   |  1 +
 src/renderer/main/vuex-store.js               |  1 +
 .../views/components/mediaitem-artwork.ejs    | 28 +++++++++-
 .../views/components/mediaitem-square.ejs     |  1 +
 5 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 403e38e0..975ac5b6 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1195,41 +1195,41 @@
   }
 
   &.mediaitem-brick {
-    height: calc(200px, var(--windowRelativeScale));
-    width: calc(240px, var(--windowRelativeScale));
+    height: 200px;
+    width: 240px;
     transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: calc(123px, var(--windowRelativeScale));
-      width: calc(220px, var(--windowRelativeScale));
+      height: 123px;
+      width: 220px;
       transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
-    // &:not(.noscale) {
-    //   @media (min-width: 1460px) {
-    //     --scaleRate: 1.1;
-    //     --scaleRateArtwork: 1.1;
-    //     width: calc(240px * var(--scaleRate));
-    //     height: calc(200px * var(--scaleRate));
+    &:not(.noscale) {
+      @media (min-width: 1460px) {
+        --scaleRate: 1.1;
+        --scaleRateArtwork: 1.1;
+        width: calc(240px * var(--scaleRate));
+        height: calc(200px * var(--scaleRate));
   
-    //     .artwork-container > .artwork {
-    //       width: calc(220px * var(--scaleRateArtwork));
-    //       height: calc(123px * var(--scaleRateArtwork));
-    //     }
-    //   }
+        .artwork-container > .artwork {
+          width: calc(220px * var(--scaleRateArtwork));
+          height: calc(123px * var(--scaleRateArtwork));
+        }
+      }
   
-    //   @media (min-width: 1550px) {
-    //     --scaleRate: 1.25;
-    //     --scaleRateArtwork: 1.25;
-    //     width: calc(240px * var(--scaleRate));
-    //     height: calc(200px * var(--scaleRate));
+      @media (min-width: 1550px) {
+        --scaleRate: 1.25;
+        --scaleRateArtwork: 1.25;
+        width: calc(240px * var(--scaleRate));
+        height: calc(200px * var(--scaleRate));
   
-    //     .artwork-container > .artwork {
-    //       width: calc(220px * var(--scaleRateArtwork));
-    //       height: calc(123px * var(--scaleRateArtwork));
-    //     }
-    //   }
-    // }
+        .artwork-container > .artwork {
+          width: calc(220px * var(--scaleRateArtwork));
+          height: calc(123px * var(--scaleRateArtwork));
+        }
+      }
+    }
   }
 
   &.mediaitem-small {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index a5c0890e..88691a35 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1098,6 +1098,7 @@ const app = new Vue({
         setWindowScaleFactor() {
             let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
             let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale)
+            app.$store.state.windowRelativeScale = scale
             if(scale <= 1) {
                 scale = 1
             }else if(scale >= desiredScale) {
diff --git a/src/renderer/main/vuex-store.js b/src/renderer/main/vuex-store.js
index e8934d26..8263f065 100644
--- a/src/renderer/main/vuex-store.js
+++ b/src/renderer/main/vuex-store.js
@@ -1,5 +1,6 @@
 const store = new Vuex.Store({
     state: {
+        windowRelativeScale: 1,
         library: {
             // songs: ipcRenderer.sendSync("get-library-songs"),
             // albums: ipcRenderer.sendSync("get-library-albums"),
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index a58a2590..3898f641 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -1,6 +1,7 @@
 <script type="text/x-template" id="mediaitem-artwork">
     <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
-        <img :src="app.getMediaItemArtwork(url, size, width)"
+        <img :src="imgSrc"
+             ref="image"
              decoding="async"
              loading="lazy"
              :style="imgStyle"
@@ -47,6 +48,10 @@
             shadow: {
                 type: String,
                 default: ''
+            },
+            upscaling: {
+                type: Boolean,
+                default: false
             }
         },
         data: function () {
@@ -63,15 +68,34 @@
                     opacity: 0,
                     transition: "opacity .25s linear"
                 },
-                classes: []
+                classes: [],
+                imgSrc: ""
+            }
+        },
+        computed: {
+            windowRelativeScale: function () {
+                return app.$store.state.windowRelativeScale;
+            }
+        },
+        watch: {
+            windowRelativeScale: function (newValue, oldValue) {
+                this.swapImage(newScale)
             }
         },
         mounted() {
             this.getClasses()
+            this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
         },
         methods: {
+            swapImage(newValue) {
+                if(!this.upscaling) return
+                if (newValue > 1.5) {
+                    this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
+                }
+            },
             imgLoaded() {
                 this.imgStyle.opacity = 1
+                this.swapImage(app.$store.state.windowRelativeScale)
                 // this.awStyle.background = ""
             },
             contextMenu(event) {
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index ab34f7ae..9e399dcd 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -17,6 +17,7 @@
                                 :url="getArtworkUrl()"
                                 :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                                 :size="size"
+								:upscaling="true"
                                 shadow="subtle"
                                 :bgcolor="getBgColor()"
                                 :video-priority="forceVideo"

From 62688546ee133e795f0df86f3d15b043284aeea8 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 02:52:53 -0700
Subject: [PATCH 05/18] will not affect high dpi

---
 src/renderer/views/components/mediaitem-artwork.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 3898f641..81b51bf1 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -79,7 +79,7 @@
         },
         watch: {
             windowRelativeScale: function (newValue, oldValue) {
-                this.swapImage(newScale)
+                this.swapImage(newValue)
             }
         },
         mounted() {
@@ -88,7 +88,7 @@
         },
         methods: {
             swapImage(newValue) {
-                if(!this.upscaling) return
+                if(!this.upscaling || window.devicePixelRatio !== 1) return
                 if (newValue > 1.5) {
                     this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
                 }

From 643bf298dba7d74d88154983b197efeb71cf1a44 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 03:18:47 -0700
Subject: [PATCH 06/18] fix now playing artwork

---
 src/renderer/main/vueapp.js                         | 6 +++---
 src/renderer/views/app/chrome-bottom.ejs            | 2 +-
 src/renderer/views/components/mediaitem-artwork.ejs | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 88691a35..0879c25e 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3953,7 +3953,7 @@ const app = new Vue({
                         this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL
                     }
                     try {
-                        document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
+                        // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
                     } catch (e) {
                     }
                 } else {
@@ -3967,14 +3967,14 @@ const app = new Vue({
                         }
                         ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? '');
                         try {
-                            document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
+                            // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
                         } catch (e) {
                         }
                     } else {
                         this.currentArtUrlRaw = ''
                         this.currentArtUrl = '';
                         try {
-                            document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
+                            // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
                         } catch (e) {
                         }
                     }
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index ee044c82..c475119d 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -5,7 +5,7 @@
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                      @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
                     <div class="artwork" id="artworkLCD">
-                        <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                        <mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
                     </div>
                     <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
                         <div class="content">
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 81b51bf1..fbaf53be 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -80,6 +80,9 @@
         watch: {
             windowRelativeScale: function (newValue, oldValue) {
                 this.swapImage(newValue)
+            },
+            url: function (newValue, oldValue) {
+                this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
             }
         },
         mounted() {

From 492674da7305ca5a0dc5d96331411c973565da15 Mon Sep 17 00:00:00 2001
From: SoNothing <git@sonothing.com>
Date: Fri, 8 Jul 2022 00:01:36 +0800
Subject: [PATCH 07/18] fix album genre names

before: gets genre from 1st track
now: gets genre from album data
---
 src/renderer/main/vueapp.js                 | 2 +-
 src/renderer/views/pages/cider-playlist.ejs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 69ff2d0f..8a964505 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -2010,7 +2010,7 @@ const app = new Vue({
                     params["fields[artists]"] = "name,url"
                     params["omit[resource]"] = "autos"
                     params["meta[albums:tracks]"] = 'popularity'
-                    params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
+                    params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright,genreNames"
                 }
                 if (kind.includes("playlist") || kind.includes("album")) {
                     app.page = (kind) + "_" + (id);
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index fc7f79dc..0b3c3531 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -457,7 +457,7 @@
                 if (this.data.type.includes('albums')) {
                     let date = this.data.attributes.releaseDate;
                     if (date == null || date === "") return "";
-                    return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
+                    return `${this.data.attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
                 }
             },
             async isInLibrary() {

From 951538e6e70e6e29a1eeb11ce77e57c894766985 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 16:11:08 -0700
Subject: [PATCH 08/18] clamped element scale to 1.5x

---
 src/renderer/index.js                             | 4 ++++
 src/renderer/main/vueapp.js                       | 2 +-
 src/renderer/views/components/settings-window.ejs | 7 +------
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 13caca7b..a8f75f7c 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1,5 +1,9 @@
 var notyf = new Notyf();
 
+function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
 const MusicKitObjects = {
   LibraryPlaylist: function () {
     this.id = "";
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 2c1367af..94bf49bf 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1097,7 +1097,7 @@ const app = new Vue({
         },
         setWindowScaleFactor() {
             let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
-            let desiredScale = parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.6 : app.cfg.visual.maxElementScale)
+            let desiredScale = clamp(parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.5 : app.cfg.visual.maxElementScale), 1, 1.5)
             app.$store.state.windowRelativeScale = scale
             if(scale <= 1) {
                 scale = 1
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 8f051f1b..35745ee0 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -562,18 +562,13 @@
                                 <div class="md-option-segment md-option-segment_auto">
                                     <label>
                                         <select @change="$root.setWindowScaleFactor()" class="md-select" v-model="app.cfg.visual.maxElementScale" >
-                                            <option value="-1">Default (1.6x)</option>
+                                            <option value="-1">Default (1.5x)</option>
                                             <option value="1">1.0x</option>
                                             <option value="1.1">1.1x</option>
                                             <option value="1.2">1.2x</option>
                                             <option value="1.3">1.3x</option>
                                             <option value="1.4">1.4x</option>
                                             <option value="1.5">1.5x</option>
-                                            <option value="1.6">1.6x</option>
-                                            <option value="1.7">1.7x</option>
-                                            <option value="1.8">1.8x</option>
-                                            <option value="1.9">1.9x</option>
-                                            <option value="2.0">2.0x</option>
                                         </select>
                                     </label>
                                 </div>

From ae4e0d1badf88ce67199f32d09814e749dfa9aed Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 17:19:21 -0700
Subject: [PATCH 09/18] added caching for auth

---
 src/renderer/index.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index a8f75f7c..a9aaf86b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -88,8 +88,14 @@ function fallbackinitMusicKit() {
 }
 
 function initMusicKit() {
-
+  if(!this.responseText) {
+    console.log("Using stored token")
+    this.responseText = JSON.stringify({
+      token: localStorage.getItem("lastToken")
+    })
+  }
   let parsedJson = JSON.parse(this.responseText);
+  localStorage.setItem("lastToken", parsedJson.token);
   MusicKit.configure({
     developerToken: parsedJson.token,
     app: {
@@ -120,7 +126,13 @@ function capiInit() {
   request.addEventListener("load", initMusicKit);
   request.onreadystatechange = function (aEvt) {
     if (request.readyState == 4) {
-      if (request.status != 200) fallbackinitMusicKit();
+      if (request.status != 200) {
+        if(localStorage.getItem("lastToken") != null) {
+          initMusicKit()
+        }else{
+          fallbackinitMusicKit()
+        }
+      };
     }
   };
   request.open("GET", "https://api.cider.sh/v1/");

From 2cccb3185f699d69b8487292f1068df2c05505d8 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 17:42:19 -0700
Subject: [PATCH 10/18] adjustment to artist page

---
 src/renderer/less/pages.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 746ee6b5..f99df2e4 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -1230,7 +1230,7 @@
   }
 
   &.animated .artist-header {
-    min-height: 500px;
+    min-height: 80vh;
   }
 
   .artist-header {
@@ -1321,6 +1321,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        object-fit: cover;
       }
     }
 

From 38714e0440476bcd8a2203000a51355e02f30fdf Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 17:54:00 -0700
Subject: [PATCH 11/18] changed to v-show for list item vis

---
 src/renderer/style.less                               | 2 +-
 src/renderer/views/components/mediaitem-list-item.ejs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 60619f5b..c5df9e8d 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2051,7 +2051,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
       // screen size > 1200px
       @media screen and (min-width: 1500px) {
-        grid-template-columns: repeat(6, minmax(200px, 1fr));
+        grid-template-columns: repeat(5, minmax(200px, 1fr));
       }
       // less than 1100px
       @media screen and (max-width: 1150px) {
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index d72aa409..e5b21da9 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -16,7 +16,7 @@
          @controller-click="route()"
          tabindex="0"
          :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
-        <div v-if="isVisible" class="listitem-content">
+        <div v-show="isVisible" class="listitem-content">
             <div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">

From c5325a205b39db4688e77544394ae92c37d21f8a Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Thu, 7 Jul 2022 18:36:55 -0700
Subject: [PATCH 12/18] Bring back mxm lyrics (Fully tested)

---
 src/main/base/store.ts                        |  2 +-
 src/renderer/main/vueapp.js                   | 89 +++----------------
 .../views/components/settings-window.ejs      | 22 +++--
 src/renderer/views/pages/settings.ejs         | 32 ++++---
 4 files changed, 40 insertions(+), 105 deletions(-)

diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index b57a0cfa..42289d72 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -243,7 +243,7 @@ export class Store {
             "maxContentScale": -1 // -1 default, anything else is a custom scale
         },
         "lyrics": {
-            "enable_mxm": false,
+            "enable_mxm": true,
             "mxm_karaoke": false,
             "mxm_language": "en",
             "enable_qq": false,
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 94bf49bf..269e3ee0 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3065,67 +3065,13 @@ const app = new Vue({
                 return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
             }
 
-            /* get token */
-            function getToken(mode, track, artist, songid, lang, time, id) {
-                if (attempt > 2) {
-                    app.loadNeteaseLyrics();
-                    // app.loadAMLyrics();
-                } else {
-                    attempt = attempt + 1;
-                    let url = "https://apic-desktop.musixmatch.com/ws/1.1/token.get?app_id=web-desktop-app-v1.0&t=" + revisedRandId();
-                    let req = new XMLHttpRequest();
-                    req.overrideMimeType("application/json");
-                    req.open('GET', url, true);
-                    req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
-                    req.onload = function () {
-                        try {
-                            let jsonResponse = JSON.parse(this.responseText);
-                            let status2 = jsonResponse["message"]["header"]["status_code"];
-                            if (status2 == 200) {
-                                let token = jsonResponse["message"]["body"]["user_token"] ?? '';
-                                if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") {
-                                    console.debug('200 token', mode);
-                                    // token good
-                                    app.mxmtoken = token;
 
-                                    if (mode == 1) {
-                                        getMXMSubs(track, artist, app.mxmtoken, lang, time, id);
-                                    } else {
-                                        getMXMTrans(songid, lang, app.mxmtoken);
-                                    }
-                                } else {
-                                    console.debug('fake 200 token');
-                                    getToken(mode, track, artist, songid, lang, time)
-                                }
-                            } else {
-                                // console.log('token 4xx');
-                                getToken(mode, track, artist, songid, lang, time)
-                            }
-                        } catch (e) {
-                            console.log('error');
-                            app.loadQQLyrics();
-                            //app.loadAMLyrics();
-                        }
-                    };
-                    req.onerror = function () {
-                        console.log('error');
-                        app.loadQQLyrics();
-                        // app.loadAMLyrics();
-                    };
-                    req.send();
-                }
-            }
-
-            function getMXMSubs(track, artist, token, lang, time, id) {
-                let usertoken = encodeURIComponent(token);
-                let richsyncQuery = (app.cfg.lyrics.mxm_karaoke) ? "&optional_calls=track.richsync" : ""
-                let timecustom = (!time || (time && time < 0)) ? '' : `&f_subtitle_length=${time}&q_duration=${time}&f_subtitle_length_max_deviation=40`;
-                let itunesid = (id && id != "") ? `&track_itunes_id=${id}` : '';
-                let url = "https://apic-desktop.musixmatch.com/ws/1.1/macro.subtitles.get?format=json&namespace=lyrics_richsynched" + richsyncQuery + "&subtitle_format=lrc&q_artist=" + artist + "&q_track=" + track + itunesid + "&usertoken=" + usertoken + timecustom + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
+            function getMXMSubs(track, artist, lang, time, id) {
+                let richsyncQuery = app.cfg.lyrics.mxm_karaoke
+                let itunesid = (id && id != "") ? id : ''; // Mode 1 -> Subs
+                let url = "https://api.cider.sh/v1/lyrics?" + "mode=1" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
                 let req = new XMLHttpRequest();
                 req.overrideMimeType("application/json");
-                req.open('GET', url, true);
-                req.setRequestHeader("authority", "apic-desktop.musixmatch.com");
                 req.onload = function () {
                     try {
                         let jsonResponse = JSON.parse(this.responseText);
@@ -3152,7 +3098,7 @@ const app = new Vue({
                                     // app.loadAMLyrics()
                                 } else {
                                     if (richsync == [] || richsync.length == 0) {
-                                        console.log("ok");
+                                        console.log("musixmatch worki");
                                         // process lrcfile to json here
                                         app.lyricsMediaItem = lrcfile
                                         let u = app.lyricsMediaItem.split(/[\r\n]/);
@@ -3195,7 +3141,7 @@ const app = new Vue({
                                     }
                                     if (lrcfile != null && lrcfile != '') {
                                         // load translation
-                                        getMXMTrans(id, lang, token);
+                                        getMXMTrans(id, lang);
                                     } else {
                                         // app.loadAMLyrics()
                                         app.loadQQLyrics();
@@ -3206,9 +3152,7 @@ const app = new Vue({
                                 app.loadQQLyrics();
                                 //  app.loadAMLyrics()
                             }
-                        } else { //4xx rejected
-                            getToken(1, track, artist, '', lang, time);
-                        }
+                        } 
                     } catch (e) {
                         console.error(e);
                         app.loadQQLyrics();
@@ -3220,23 +3164,22 @@ const app = new Vue({
                     console.log('error');
                     // app.loadAMLyrics();
                 };
+                req.open('POST', url, true);
                 req.send();
             }
 
-            function getMXMTrans(id, lang, token) {
-                if (lang != "disabled" && id != '') {
-                    let usertoken = encodeURIComponent(token);
-                    let url2 = "https://apic-desktop.musixmatch.com/ws/1.1/crowd.track.translations.get?translation_fields_set=minimal&selected_language=" + lang + "&track_id=" + id + "&comment_format=text&part=user&format=json&usertoken=" + usertoken + "&app_id=web-desktop-app-v1.0&t=" + revisedRandId();
+            function getMXMTrans(id, lang) {
+                if (lang != "disabled" && id != '') { // Mode 2 -> Trans
+                    let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
                     let req2 = new XMLHttpRequest();
                     req2.overrideMimeType("application/json");
-                    req2.open('GET', url2, true);
-                    req2.setRequestHeader("authority", "apic-desktop.musixmatch.com");
+                    req2.open('POST', url2, true);
                     req2.onload = function () {
                         try {
                             let jsonResponse2 = JSON.parse(this.responseText);
                             console.log(jsonResponse2);
                             let status2 = jsonResponse2["message"]["header"]["status_code"];
-                            if (status2 == 200) {
+                            if (status2 === 200) {
                                 try {
                                     let preTrans = []
                                     let u = app.lyrics;
@@ -3268,11 +3211,7 @@ const app = new Vue({
             }
 
             if (track != "" & track != "No Title Found") {
-                if (app.mxmtoken != null && app.mxmtoken != '') {
-                    getMXMSubs(track, artist, app.mxmtoken, lang, time, id)
-                } else {
-                    getToken(1, track, artist, '', lang, time);
-                }
+                getMXMSubs(track, artist, lang, time, id)
             }
         },
         loadNeteaseLyrics() {
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 35745ee0..71788888 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -704,21 +704,19 @@
                             <span>{{$root.getLz('settings.header.lyrics')}}</span>
                         </div>
                         <div class="settings-option-body">
-                            <div style="opacity: 0.5; pointer-events: none;">
-                                <div class="md-option-line">
-                                    <div class="md-option-segment">
-                                        {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
-                                    </div>
-                                    <div class="md-option-segment md-option-segment_auto">
-                                        <label>
-                                            <input type="checkbox" switch checked />
-                                        </label>
-                                        <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
-                                    </div>
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <input type="checkbox" switch checked />
+                                    </label>
+                                   <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> 
                                 </div>
                             </div>
                             <div class="md-option-line">
-                                <!-- <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm"> -->
+                                <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
                                 <div class="md-option-segment">
                                     {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
                                 </div>
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 0b9fcbe8..940ca2fc 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -613,31 +613,29 @@
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.lyrics')}}</span>
                     </div>
-                    <div class="settings-option-body">
-                        <div style="opacity: 0.5; pointer-events: none;">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" switch checked/>
-                                    </label>
-                                    <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
-                                </div>
-                            </div>
-                        </div>
+                    <div class="settings-option-body">              
                         <div class="md-option-line">
-                            <!-- <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm"> -->
                             <div class="md-option-segment">
-                                {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
+                                {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
                                 <label>
-                                    <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
+                                    <input type="checkbox" switch checked/>
                                 </label>
+                                <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
                             </div>
                         </div>
+                        <div class="md-option-line">
+                            <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
+                                <div class="md-option-segment">
+                                    {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
+                                    </label>
+                                </div>
+                        </div>
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}

From c44ddebd88d5a01fb7915d7a4fd29e87b6c27410 Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Thu, 7 Jul 2022 18:43:39 -0700
Subject: [PATCH 13/18] fix mmx translation

---
 src/renderer/main/vueapp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 269e3ee0..daae563e 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3173,7 +3173,6 @@ const app = new Vue({
                     let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
                     let req2 = new XMLHttpRequest();
                     req2.overrideMimeType("application/json");
-                    req2.open('POST', url2, true);
                     req2.onload = function () {
                         try {
                             let jsonResponse2 = JSON.parse(this.responseText);
@@ -3205,6 +3204,7 @@ const app = new Vue({
                         } catch (e) {
                         }
                     }
+                    req2.open('POST', url2, true);
                     req2.send();
                 }
 

From 56ab11beca306be2c4b27361a12ac9c27f2c2b13 Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Thu, 7 Jul 2022 18:46:26 -0700
Subject: [PATCH 14/18] fix settings view

---
 src/renderer/views/pages/settings.ejs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 940ca2fc..b30be3aa 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -635,6 +635,7 @@
                                         <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
                                     </label>
                                 </div>
+                            </div>
                         </div>
                         <div class="md-option-line">
                             <div class="md-option-segment">

From 932a2e455af999d03b35e11192fe2b877f615121 Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Thu, 7 Jul 2022 19:47:56 -0700
Subject: [PATCH 15/18] remove useless args & nonexistent funcs

---
 src/renderer/main/vueapp.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index daae563e..4e0e2730 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -3168,9 +3168,9 @@ const app = new Vue({
                 req.send();
             }
 
-            function getMXMTrans(id, lang) {
+            function getMXMTrans(lang, id) {
                 if (lang != "disabled" && id != '') { // Mode 2 -> Trans
-                    let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time;
+                    let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=false" + "&songID=" + id + "&source=mxm" + "&lang=" + lang + "&time=" + time;
                     let req2 = new XMLHttpRequest();
                     req2.overrideMimeType("application/json");
                     req2.onload = function () {
@@ -3198,9 +3198,7 @@ const app = new Vue({
                                 } catch (e) {
                                     /// not found trans -> ignore
                                 }
-                            } else { //4xx rejected
-                                getToken(2, '', '', id, lang, '');
-                            }
+                            } 
                         } catch (e) {
                         }
                     }
@@ -3212,6 +3210,7 @@ const app = new Vue({
 
             if (track != "" & track != "No Title Found") {
                 getMXMSubs(track, artist, lang, time, id)
+                getMXMTrans(track, artist, lang, time, id)
             }
         },
         loadNeteaseLyrics() {
@@ -3954,8 +3953,7 @@ const app = new Vue({
                     }
                     try {
                         // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
-                    } catch (e) {
-                    }
+                    } catch (e) {}                               
                 } else {
                     let data = await this.mk.api.v3.music(`/v1/me/library/songs/${this.mk.nowPlayingItem.id}`);
                     data = data.data.data[0];

From 948ec739dc01d3135390479683162b8149d93fb7 Mon Sep 17 00:00:00 2001
From: maikirakiwi <stella@mai.kiwi>
Date: Thu, 7 Jul 2022 19:52:21 -0700
Subject: [PATCH 16/18] fix div hell

---
 src/renderer/views/components/settings-window.ejs | 5 ++---
 src/renderer/views/pages/settings.ejs             | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 71788888..36a98298 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -710,9 +710,8 @@
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
                                     <label>
-                                        <input type="checkbox" switch checked />
-                                    </label>
-                                   <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> 
+                                        <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> 
+                                    </label>     
                                 </div>
                             </div>
                             <div class="md-option-line">
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index b30be3aa..a167cb64 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -620,9 +620,8 @@
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
                                 <label>
-                                    <input type="checkbox" switch checked/>
-                                </label>
-                                <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
+                                    <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
+                                </label>              
                             </div>
                         </div>
                         <div class="md-option-line">

From 0d72b85c81e4bdff0fa2897b13fe33f8ca2d1afa Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 20:37:15 -0700
Subject: [PATCH 17/18] fixed missing end tag for local playlist

---
 src/renderer/views/components/settings-window.ejs | 13 +++++++++++++
 src/renderer/views/components/sidebar.ejs         |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 35745ee0..b9d5d86f 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -1345,6 +1345,19 @@
                                     </label>
                                 </div>
                             </div>
+                            
+                            <div class="md-option-line">
+                                <div class="md-option-segment">
+                                    Local Files
+                                </div>
+                                <div class="md-option-segment md-option-segment_auto">
+                                    <label>
+                                        <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('localLibrary')"
+                                               @click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
+                                               switch />
+                                    </label>
+                                </div>
+                            </div>
 
                             <div class="md-option-line">
                                 <div class="md-option-segment">
diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs
index cf3a9697..401603bb 100644
--- a/src/renderer/views/components/sidebar.ejs
+++ b/src/renderer/views/components/sidebar.ejs
@@ -145,7 +145,7 @@
                   Local Library
                 </div>
                 <template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
-                  <sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}">
+                  <sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
                 </template>
             </template>
             <template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">

From a62b71c04a78558c0998c4805b80f11aedde6715 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 7 Jul 2022 20:47:02 -0700
Subject: [PATCH 18/18] fix divs

---
 .../views/components/settings-window.ejs      | 3032 +++++++++--------
 1 file changed, 1545 insertions(+), 1487 deletions(-)

diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index ff90279f..3ebc5a4f 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -1,1422 +1,1480 @@
 <script type="text/x-template" id="settings-window">
-  <div class="settings-panel" @click.self="close()">
-    <div class="settings-window" :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
-        <button class="close-btn minmax-btn" @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen" :class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
-        <button class="close-btn" @click="close()"></button>
-        <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.general') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- General Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.general')}}</span>
+    <div class="settings-panel" @click.self="close()">
+        <div class="settings-window"
+             :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
+            <button class="close-btn minmax-btn"
+                    @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen"
+                    :class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
+            <button class="close-btn" @click="close()"></button>
+            <b-tabs class="no-style" pills vertical content-class="mt-3"
+                    v-model="$store.state.pageState['settings'].currentTabIndex">
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/settings.svg" classes="md" name="settings-general"/>
                         </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('term.language')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
-                                                v-model="app.cfg.general.language">
-                                            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
-                                                <option v-for="lang in categories" :value="lang.code">{{lang.nameNative}}
-                                                    ({{
-                                                    lang.nameEnglish }})
-                                                </option>
-                                            </optgroup>
-                                        </select>
-                                    </label>
-                                </div>
+                        <div>
+                            {{ $root.getLz('settings.header.general') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- General Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.general')}}</span>
                             </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('term.accountSettings')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="app.appRoute('apple-account-settings')">
-                                        {{$root.getLz('term.accountSettings')}}
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('term.privateSession')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="$root.cfg.general.privateEnabled"
-                                               v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.platform !== 'linux'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.window.openOnStartup')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.general.onStartup.enabled">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.window.openOnStartup.hidden')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.resumebehavior')}}<br>
-                                    <small>
-                                        {{$root.getLz('settings.option.general.resumebehavior.description')}}<br>
-                                        <b>{{$root.getLz('settings.option.general.resumebehavior.locally')}}: </b>
-                                        {{$root.getLz('settings.option.general.resumebehavior.locally.description')}}<br>
-                                        <b>{{$root.getLz('settings.option.general.resumebehavior.history')}}: </b>
-                                        {{$root.getLz('settings.option.general.resumebehavior.history.description')}}
-                                    </small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" style="width:180px;"
-                                                v-model="$root.cfg.general.resumeOnStartupBehavior">
-                                            <option value="disabled">{{$root.getLz('term.disabled')}}</option>
-                                            <option value="local">
-                                                {{$root.getLz('settings.option.general.resumebehavior.locally')}}
-                                            </option>
-                                            <option value="history">
-                                                {{$root.getLz('settings.option.general.resumebehavior.history')}}
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.resumetabs')}}<br>
-                                    <small>
-                                        {{$root.getLz('settings.option.general.resumetabs.description')}}<br>
-                                        <b>{{$root.getLz('settings.option.general.resumetabs.dynamic')}}: </b>
-                                        {{$root.getLz('settings.option.general.resumetabs.dynamic.description')}}
-                                    </small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" style="width:180px;"
-                                                v-model="$root.cfg.general.resumeTabs.tab">
-                                            <option value="dynamic">
-                                                {{$root.getLz('settings.option.general.resumetabs.dynamic')}}
-                                            </option>
-                                            <option value="home">{{$root.getLz('home.title')}}</option>
-                                            <option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
-                                            <option value="browse">{{$root.getLz('term.browse')}}</option>
-                                            <option value="radio">{{$root.getLz('term.radio')}}</option>
-                                            <option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}
-                                            </option>
-                                            <option value="library-songs">{{$root.getLz('term.songs')}}</option>
-                                            <option value="library-albums">{{$root.getLz('term.albums')}}</option>
-                                            <option value="library-artists">{{$root.getLz('term.artists')}}</option>
-                                            <option value="library-videos">{{$root.getLz('term.videos')}}</option>
-                                            <option value="podcasts">{{$root.getLz('term.podcasts')}}</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.customizeSidebar')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" v-b-modal.modal-1>
-                                        {{$root.getLz('settings.option.general.customizeSidebar.customize')}}
-                                    </button>
-                                </div>
-                                <b-modal id="modal-1" centered size="lg"
-                                         :title="$root.getLz('settings.option.general.customizeSidebar')">
-                                    <div class="settings-option-body">
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.recentlyAdded') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox"
-                                                           v-model="app.cfg.general.sidebarItems.recentlyAdded" switch />
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.songs') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox" v-model="app.cfg.general.sidebarItems.songs"
-                                                           switch />
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.albums') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox" v-model="app.cfg.general.sidebarItems.albums"
-                                                           switch />
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.artists') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox" v-model="app.cfg.general.sidebarItems.artists"
-                                                           switch />
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.videos') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox" v-model="app.cfg.general.sidebarItems.videos"
-                                                           switch />
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="md-option-line">
-                                            <div class="md-option-segment">
-                                                {{ $root.getLz('term.podcasts') }}
-                                            </div>
-                                            <div class="md-option-segment md-option-segment_auto">
-                                                <label>
-                                                    <input type="checkbox" v-model="app.cfg.general.sidebarItems.podcasts"
-                                                           switch />
-                                                </label>
-                                            </div>
-                                        </div>
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('term.language')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
+                                                    v-model="app.cfg.general.language">
+                                                <optgroup :label="index" v-for="(categories, index) in getLanguages()">
+                                                    <option v-for="lang in categories" :value="lang.code">
+                                                        {{lang.nameNative}}
+                                                        ({{
+                                                        lang.nameEnglish }})
+                                                    </option>
+                                                </optgroup>
+                                            </select>
+                                        </label>
                                     </div>
-                                </b-modal>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.keybindings')}}
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="$root.openSettingsPage('keybindings')">
-                                        {{$root.getLz('action.open')}}
-                                    </button>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('term.accountSettings')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="app.appRoute('apple-account-settings')">
+                                            {{$root.getLz('term.accountSettings')}}
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.themeUpdateNotification')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('term.privateSession')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="$root.cfg.general.privateEnabled"
+                                                   v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.themeUpdateNotification" switch />
-                                    </label>
+                                <div class="md-option-line" v-show="app.platform !== 'linux'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.window.openOnStartup')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.general.showLovedTracksInline')}}
+                                <div class="md-option-line" v-show="app.cfg.general.onStartup.enabled">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.window.openOnStartup.hidden')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.showLovedTracksInline" switch />
-                                    </label>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.resumebehavior')}}<br>
+                                        <small>
+                                            {{$root.getLz('settings.option.general.resumebehavior.description')}}<br>
+                                            <b>{{$root.getLz('settings.option.general.resumebehavior.locally')}}: </b>
+                                            {{$root.getLz('settings.option.general.resumebehavior.locally.description')}}<br>
+                                            <b>{{$root.getLz('settings.option.general.resumebehavior.history')}}: </b>
+                                            {{$root.getLz('settings.option.general.resumebehavior.history.description')}}
+                                        </small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" style="width:180px;"
+                                                    v-model="$root.cfg.general.resumeOnStartupBehavior">
+                                                <option value="disabled">{{$root.getLz('term.disabled')}}</option>
+                                                <option value="local">
+                                                    {{$root.getLz('settings.option.general.resumebehavior.locally')}}
+                                                </option>
+                                                <option value="history">
+                                                    {{$root.getLz('settings.option.general.resumebehavior.history')}}
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{'Local files path'}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.resumetabs')}}<br>
+                                        <small>
+                                            {{$root.getLz('settings.option.general.resumetabs.description')}}<br>
+                                            <b>{{$root.getLz('settings.option.general.resumetabs.dynamic')}}: </b>
+                                            {{$root.getLz('settings.option.general.resumetabs.dynamic.description')}}
+                                        </small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" style="width:180px;"
+                                                    v-model="$root.cfg.general.resumeTabs.tab">
+                                                <option value="dynamic">
+                                                    {{$root.getLz('settings.option.general.resumetabs.dynamic')}}
+                                                </option>
+                                                <option value="home">{{$root.getLz('home.title')}}</option>
+                                                <option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
+                                                <option value="browse">{{$root.getLz('term.browse')}}</option>
+                                                <option value="radio">{{$root.getLz('term.radio')}}</option>
+                                                <option value="library-recentlyadded">
+                                                    {{$root.getLz('term.recentlyAdded')}}
+                                                </option>
+                                                <option value="library-songs">{{$root.getLz('term.songs')}}</option>
+                                                <option value="library-albums">{{$root.getLz('term.albums')}}</option>
+                                                <option value="library-artists">{{$root.getLz('term.artists')}}</option>
+                                                <option value="library-videos">{{$root.getLz('term.videos')}}</option>
+                                                <option value="podcasts">{{$root.getLz('term.podcasts')}}</option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="openLocalSongsPathMenu">
-                                        {{'Edit Paths'}}
-                                    </button>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.customizeSidebar')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" v-b-modal.modal-1>
+                                            {{$root.getLz('settings.option.general.customizeSidebar.customize')}}
+                                        </button>
+                                    </div>
+                                    <b-modal id="modal-1" centered size="lg"
+                                             :title="$root.getLz('settings.option.general.customizeSidebar')">
+                                        <div class="settings-option-body">
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.recentlyAdded') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.recentlyAdded"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.songs') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.songs"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.albums') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.albums"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.artists') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.artists"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.videos') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.videos"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="md-option-line">
+                                                <div class="md-option-segment">
+                                                    {{ $root.getLz('term.podcasts') }}
+                                                </div>
+                                                <div class="md-option-segment md-option-segment_auto">
+                                                    <label>
+                                                        <input type="checkbox"
+                                                               v-model="app.cfg.general.sidebarItems.podcasts"
+                                                               switch/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </b-modal>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.keybindings')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="$root.openSettingsPage('keybindings')">
+                                            {{$root.getLz('action.open')}}
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.themeUpdateNotification')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
+                                                   switch/>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.general.showLovedTracksInline')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
+                                                   switch/>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{'Local files path'}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="openLocalSongsPathMenu">
+                                            {{'Edit Paths'}}
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.audio') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- Audio Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.audio')}}</span>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio"/>
                         </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.quality')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality"
-                                                v-on:change="changeAudioQuality">
-                                            <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
-                                            <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
-                                            <option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}}
-                                                ({{$root.getLz('settings.header.audio.quality.high.description')}})
-                                            </option>
-                                            <option value="STANDARD">
-                                                {{$root.getLz('settings.header.audio.quality.standard')}}
-                                                ({{$root.getLz('settings.header.audio.quality.standard.description')}})
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
+                        <div>
+                            {{ $root.getLz('settings.header.audio') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- Audio Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.audio')}}</span>
                             </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('term.audioControls')}}
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.quality')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" style="width:180px;"
+                                                    v-model="app.cfg.audio.quality"
+                                                    v-on:change="changeAudioQuality">
+                                                <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
+                                                <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
+                                                <option value="HIGH">
+                                                    {{$root.getLz('settings.header.audio.quality.high')}}
+                                                    ({{$root.getLz('settings.header.audio.quality.high.description')}})
+                                                </option>
+                                                <option value="STANDARD">
+                                                    {{$root.getLz('settings.header.audio.quality.standard')}}
+                                                    ({{$root.getLz('settings.header.audio.quality.standard.description')}})
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" onclick="app.modals.audioControls = true">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
                                         {{$root.getLz('term.audioControls')}}
-                                    </button>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" onclick="app.modals.audioControls = true">
+                                            {{$root.getLz('term.audioControls')}}
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.changePlaybackRate')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.changePlaybackRate')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" onclick="app.modals.audioPlaybackRate = true">
+                                            {{$root.getLz('settings.option.audio.playbackRate.change')}}
+                                        </button>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" onclick="app.modals.audioPlaybackRate = true">
-                                        {{$root.getLz('settings.option.audio.playbackRate.change')}}
-                                    </button>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.seamlessTransition')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.audio.seamless_audio"
+                                                   v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.seamlessTransition')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
+                                        <br>
+                                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.advanced.AudioContext"
+                                                   v-on:change="toggleAudioContext"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.audio.seamless_audio"
-                                               v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
-                                    <br>
-                                    <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.AudioContext"
-                                               v-on:change="toggleAudioContext"
-                                                switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('term.equalizer')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" onclick="app.modals.equalizer = true">
+                                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
+                                    <div class="md-option-segment">
                                         {{$root.getLz('term.equalizer')}}
-                                    </button>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" onclick="app.modals.equalizer = true">
+                                            {{$root.getLz('term.equalizer')}}
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
-                                <div class="md-option-segment" style="white-space: pre-line;">
-                                    {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
-                                    <small>{{app.cfg.audio.equalizer.vibrantBass != 0 || app.cfg.audio.maikiwiAudio.spatial
-                                        === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
-                                        `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
-                                        :
-                                        $root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
+                                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
+                                    <div class="md-option-segment" style="white-space: pre-line;">
+                                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
+                                        <small>{{app.cfg.audio.equalizer.vibrantBass != 0 ||
+                                            app.cfg.audio.maikiwiAudio.spatial
+                                            === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
+                                            `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
+                                            :
+                                            $root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.audio.normalization"
+                                                   v-on:change="toggleNormalization"
+                                                   :disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.audio.normalization"
-                                               v-on:change="toggleNormalization"
-                                               :disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
-                                               switch />
-                                    </label>
+                                <div class="md-option-line"
+                                     v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization && app.cfg.audio.advanced">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.dbspl.display')}}
+                                        <br>
+                                        <small>{{$root.getLz('settings.option.audio.dbspl.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line"
-                                 v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization && app.cfg.audio.advanced">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.dbspl.display')}}
-                                    <br>
-                                    <small>{{$root.getLz('settings.option.audio.dbspl.description')}}</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.audio.dBSPL" switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.audio.dBSPL">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.audio.dbfs.calibration')}}
-                                    <br>
-                                    <small>{{$root.getLz('settings.option.audio.dbfs.description')}}</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="number" v-model="app.cfg.audio.dBSPLcalibration" />
-                                    </label>
+                                <div class="md-option-line" v-show="app.cfg.audio.dBSPL">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.audio.dbfs.calibration')}}
+                                        <br>
+                                        <small>{{$root.getLz('settings.option.audio.dbfs.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <b-tab v-if="app.cfg.advanced.AudioContext">
-                <template #title>
-                    <div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
-                    <div>
-                        {{ $root.getLz('settings.option.audio.audioLab') }}
+                </b-tab>
+                <b-tab v-if="app.cfg.advanced.AudioContext">
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs"/>
+                        </div>
+                        <div>
+                            {{ $root.getLz('settings.option.audio.audioLab') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <audiolabs-page/>
                     </div>
-                </template>
-                <div class="settings-tab-content">
-                    <audiolabs-page/>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.visual.styles') }}
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles"/>
+                        </div>
+                        <div>
+                            {{ $root.getLz('settings.header.visual.styles') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <installed-themes/>
                     </div>
-                </template>
-                <div class="settings-tab-content">
-                    <installed-themes/>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.visual') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- Visual Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.visual')}}</span>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual"/>
                         </div>
-                        <div class="settings-option-body">
-                        <!--<div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.header.visual.theme')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn md-btn-block" @click="$root.appRoute('installed-themes')">
-                                        {{$root.getLz('settings.option.visual.theme.manageStyles')}}
-                                    </button>
-                                </div>
-                            </div>-->
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz("settings.option.visual.windowStyle")}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="$root.cfg.visual.directives.windowLayout">
-                                            <option value="default">Maverick</option>
-                                            <option value="twopanel">Mojave</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" @change="windowBgStyleChange"
-                                                v-model="app.cfg.visual.window_background_style">
-                                            <option value="none">
-                                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
-                                            </option>
-                                            <option value="artwork">
-                                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
-                                            </option>
-                                            <option value="image">
-                                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
-                                            </option>
-                                            <option value="color">
-                                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
-                                            </option>
-                                            <option v-if="$root.platform == 'win32'" value="mica">
-                                                Mica (Beta)
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line child" v-if="app.cfg.visual.window_background_style == 'color'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.windowColor')}}
-                                </div>
-                                <div class="md-option-segment_auto">
-                                    <input type="color" v-model="app.cfg.visual.windowColor" />
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.customAccentColor')}}
-                                </div>
-                                <div class="md-option-segment_auto">
-                                    <input type="checkbox" v-model="app.cfg.visual.customAccentColor"
-                                           :disabled="app.cfg.visual.purplePodcastPlaybackBar" switch />
-                                </div>
-                            </div>
-                            <div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.accentColor')}}
-                                </div>
-                                <div class="md-option-segment_auto">
-                                    <input type="color" v-model="app.cfg.visual.accentColor" />
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.purplePodcastPlaybackBar')}}
-                                </div>
-                                <div class="md-option-segment_auto">
-                                    <input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
-                                           :disabled="app.cfg.visual.customAccentColor" switch />
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
-                                    <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" style="width:180px;"
-                                                v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
-                                            <option value="default">
-                                                {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
-                                            </option>
-                                            <option value="webgpu">
-                                                {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
-                                            </option>
-                                            <option value="disabled">{{$root.getLz('term.disabled')}}</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.showPersonalInfo')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
-                                               v-on:change="toggleUserInfo" switch />
-                                    </label>
-                                </div>
-                            </div>
+                        <div>
+                            {{ $root.getLz('settings.header.visual') }}
                         </div>
-                        <!-- Window Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.window')}}</span>
-                        </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz("settings.option.window.maxElementScale")}}
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- Visual Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.visual')}}</span>
+                            </div>
+                            <div class="settings-option-body">
+                                <!--<div class="md-option-line">
+                                        <div class="md-option-segment">
+                                            {{$root.getLz('settings.header.visual.theme')}}
+                                        </div>
+                                        <div class="md-option-segment md-option-segment_auto">
+                                            <button class="md-btn md-btn-block" @click="$root.appRoute('installed-themes')">
+                                                {{$root.getLz('settings.option.visual.theme.manageStyles')}}
+                                            </button>
+                                        </div>
+                                    </div>-->
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz("settings.option.visual.windowStyle")}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select"
+                                                    v-model="$root.cfg.visual.directives.windowLayout">
+                                                <option value="default">Maverick</option>
+                                                <option value="twopanel">Mojave</option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select @change="$root.setWindowScaleFactor()" class="md-select" v-model="app.cfg.visual.maxElementScale" >
-                                            <option value="-1">Default (1.5x)</option>
-                                            <option value="1">1.0x</option>
-                                            <option value="1.1">1.1x</option>
-                                            <option value="1.2">1.2x</option>
-                                            <option value="1.3">1.3x</option>
-                                            <option value="1.4">1.4x</option>
-                                            <option value="1.5">1.5x</option>
-                                        </select>
-                                    </label>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" @change="windowBgStyleChange"
+                                                    v-model="app.cfg.visual.window_background_style">
+                                                <option value="none">
+                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
+                                                </option>
+                                                <option value="artwork">
+                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
+                                                </option>
+                                                <option value="image">
+                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
+                                                </option>
+                                                <option value="color">
+                                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
+                                                </option>
+                                                <option v-if="$root.platform == 'win32'" value="mica">
+                                                    Mica (Beta)
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line child"
+                                     v-if="app.cfg.visual.window_background_style == 'color'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.windowColor')}}
+                                    </div>
+                                    <div class="md-option-segment_auto">
+                                        <input type="color" v-model="app.cfg.visual.windowColor"/>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.customAccentColor')}}
+                                    </div>
+                                    <div class="md-option-segment_auto">
+                                        <input type="checkbox" v-model="app.cfg.visual.customAccentColor"
+                                               :disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
+                                    </div>
+                                </div>
+                                <div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.accentColor')}}
+                                    </div>
+                                    <div class="md-option-segment_auto">
+                                        <input type="color" v-model="app.cfg.visual.accentColor"/>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.purplePodcastPlaybackBar')}}
+                                    </div>
+                                    <div class="md-option-segment_auto">
+                                        <input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
+                                               :disabled="app.cfg.visual.customAccentColor" switch/>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
+                                        <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" style="width:180px;"
+                                                    v-model="app.cfg.visual.hw_acceleration"
+                                                    @change="promptForRelaunch()">
+                                                <option value="default">
+                                                    {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
+                                                </option>
+                                                <option value="webgpu">
+                                                    {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
+                                                </option>
+                                                <option value="disabled">{{$root.getLz('term.disabled')}}</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.showPersonalInfo')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
+                                                   v-on:change="toggleUserInfo" switch/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz("settings.option.window.close_button_hide")}}
+                            <!-- Window Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.window')}}</span>
+                            </div>
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz("settings.option.window.maxElementScale")}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select @change="$root.setWindowScaleFactor()" class="md-select"
+                                                    v-model="app.cfg.visual.maxElementScale">
+                                                <option value="-1">Default (1.5x)</option>
+                                                <option value="1">1.0x</option>
+                                                <option value="1.1">1.1x</option>
+                                                <option value="1.2">1.2x</option>
+                                                <option value="1.3">1.3x</option>
+                                                <option value="1.4">1.4x</option>
+                                                <option value="1.5">1.5x</option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch />
-                                    </label>
+                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz("settings.option.window.close_button_hide")}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
+                                        <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
+                                                   @change="promptForRelaunch()"/>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz("settings.option.window.windowControlStyle")}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
+                                                <option value="0">
+                                                    {{$root.getLz("settings.option.window.windowControlStyle.right")}}
+                                                </option>
+                                                <option value="1">
+                                                    {{$root.getLz("settings.option.window.windowControlStyle.left")}}
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
-                                    <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
-                                               @change="promptForRelaunch()" />
-                                    </label>
-                                </div>
+                            <!-- Advanced Visual -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.advanced')}}</span>
                             </div>
-                            <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz("settings.option.window.windowControlStyle")}}
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.animatedArtwork')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" v-model="app.cfg.visual.animated_artwork">
+                                                <option value="always">
+                                                    {{$root.getLz('settings.header.visual.animatedArtwork.always')}}
+                                                </option>
+                                                <option value="limited">
+                                                    {{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
+                                                </option>
+                                                <option value="disabled">
+                                                    {{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
-                                            <option value="0">
-                                                {{$root.getLz("settings.option.window.windowControlStyle.right")}}
-                                            </option>
-                                            <option value="1">
-                                                {{$root.getLz("settings.option.window.windowControlStyle.left")}}
-                                            </option>
-                                        </select>
-                                    </label>
+                                <div class="md-option-line"
+                                     v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select"
+                                                    v-model="app.cfg.visual.animated_artwork_qualityLevel">
+                                                <option value="0">
+                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
+                                                </option>
+                                                <option value="1">
+                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
+                                                </option>
+                                                <option value="2">
+                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
+                                                </option>
+                                                <option value="3">
+                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
+                                                </option>
+                                                <option value="4">
+                                                    {{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                        <!-- Advanced Visual -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.advanced')}}</span>
-                        </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.animatedArtwork')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="app.cfg.visual.animated_artwork">
-                                            <option value="always">
-                                                {{$root.getLz('settings.header.visual.animatedArtwork.always')}}
-                                            </option>
-                                            <option value="limited">
-                                                {{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
-                                            </option>
-                                            <option value="disabled">
-                                                {{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line"
-                                 v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel">
-                                            <option value="0">
-                                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
-                                            </option>
-                                            <option value="1">
-                                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
-                                            </option>
-                                            <option value="2">
-                                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
-                                            </option>
-                                            <option value="3">
-                                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
-                                            </option>
-                                            <option value="4">
-                                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.animatedWindowBackground')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation" />
-                                    </label>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.animatedWindowBackground')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins" /></div>
-                    <div>
-                        {{ $root.getLz('term.plugins') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <plugins-github/>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.lyrics') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- Lyric Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.lyrics')}}</span>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins"/>
                         </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> 
-                                    </label>     
-                                </div>
+                        <div>
+                            {{ $root.getLz('term.plugins') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <plugins-github/>
+                    </div>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics"/>
+                        </div>
+                        <div>
+                            {{ $root.getLz('settings.header.lyrics') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- Lyric Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.lyrics')}}</span>
                             </div>
-                            <div class="md-option-line">
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
+                                        </label>
+                                    </div>
+                                </div>
                                 <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch />
-                                    </label>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" v-model="app.cfg.lyrics.mxm_language">
+                                                <option value='disabled'>Disabled</option>
+                                                <option value='ab'>Abkhazian</option>
+                                                <option value='aa'>Afar</option>
+                                                <option value='af'>Afrikaans</option>
+                                                <option value='ak'>Akan</option>
+                                                <option value='sq'>Albanian</option>
+                                                <option value='am'>Amharic</option>
+                                                <option value='ar'>Arabic</option>
+                                                <option value='an'>Aragonese</option>
+                                                <option value='hy'>Armenian</option>
+                                                <option value='as'>Assamese</option>
+                                                <option value='a5'>Assamese-romaji</option>
+                                                <option value='a3'>Asturian</option>
+                                                <option value='av'>Avaric</option>
+                                                <option value='ae'>Avestan</option>
+                                                <option value='ay'>Aymara</option>
+                                                <option value='az'>Azerbaijani</option>
+                                                <option value='bm'>Bambara</option>
+                                                <option value='ba'>Bashkir</option>
+                                                <option value='eu'>Basque</option>
+                                                <option value='b1'>Bavarian</option>
+                                                <option value='be'>Belarusian</option>
+                                                <option value='bn'>Bengali</option>
+                                                <option value='b5'>Bengali-romaji</option>
+                                                <option value='bh'>Bihari languages</option>
+                                                <option value='b3'>Bishnupriya</option>
+                                                <option value='bi'>Bislama</option>
+                                                <option value='bs'>Bosnian</option>
+                                                <option value='br'>Breton</option>
+                                                <option value='bg'>Bulgarian</option>
+                                                <option value='my'>Burmese</option>
+                                                <option value='ca'>Catalan</option>
+                                                <option value='c2'>Cebuano</option>
+                                                <option value='b2'>Central bikol</option>
+                                                <option value='c3'>Central kurdish</option>
+                                                <option value='ch'>Chamorro</option>
+                                                <option value='c1'>Chavacano</option>
+                                                <option value='ce'>Chechen</option>
+                                                <option value='ny'>Chichewa</option>
+                                                <option value='zh'>Chinese (simplified)</option>
+                                                <option value='z1'>Chinese (traditional)</option>
+                                                <option value='rz'>Chinese-romaji</option>
+                                                <option value='cu'>Church slavic</option>
+                                                <option value='cv'>Chuvash</option>
+                                                <option value='kw'>Cornish</option>
+                                                <option value='co'>Corsican</option>
+                                                <option value='cr'>Cree</option>
+                                                <option value='c4'>Creoles and pidgins</option>
+                                                <option value='c5'>Creoles and pidgins, english based</option>
+                                                <option value='c6'>Creoles and pidgins, french-based</option>
+                                                <option value='c7'>Creoles and pidgins, portuguese-based</option>
+                                                <option value='hr'>Croatian</option>
+                                                <option value='cs'>Czech</option>
+                                                <option value='da'>Danish</option>
+                                                <option value='d1'>Dimli (individual language)</option>
+                                                <option value='dv'>Divehi</option>
+                                                <option value='d3'>Dotyali</option>
+                                                <option value='nl'>Dutch</option>
+                                                <option value='dz'>Dzongkha</option>
+                                                <option value='m2'>Eastern mari</option>
+                                                <option value='a2'>Egyptian arabic</option>
+                                                <option value='e1'>Emilian-romagnol</option>
+                                                <option value='en'>English</option>
+                                                <option value='m6'>Erzya</option>
+                                                <option value='eo'>Esperanto</option>
+                                                <option value='et'>Estonian</option>
+                                                <option value='ee'>Ewe</option>
+                                                <option value='fo'>Faroese</option>
+                                                <option value='h1'>Fiji hindi</option>
+                                                <option value='fj'>Fijian</option>
+                                                <option value='f1'>Filipino</option>
+                                                <option value='fi'>Finnish</option>
+                                                <option value='fr'>French</option>
+                                                <option value='f2'>Frisian, northern</option>
+                                                <option value='fy'>Frisian, western</option>
+                                                <option value='ff'>Fulah</option>
+                                                <option value='gl'>Galician</option>
+                                                <option value='lg'>Ganda</option>
+                                                <option value='ka'>Georgian</option>
+                                                <option value='de'>German</option>
+                                                <option value='n2'>German, low</option>
+                                                <option value='g1'>Goan konkani</option>
+                                                <option value='el'>Greek</option>
+                                                <option value='e2'>Greek-romaji</option>
+                                                <option value='kl'>Greenlandic</option>
+                                                <option value='gn'>Guarani</option>
+                                                <option value='gu'>Gujarati</option>
+                                                <option value='g2'>Gujarati-romaji</option>
+                                                <option value='ht'>Haitian creole</option>
+                                                <option value='ha'>Hausa</option>
+                                                <option value='he'>Hebrew</option>
+                                                <option value='hz'>Herero</option>
+                                                <option value='hi'>Hindi</option>
+                                                <option value='h3'>Hindi-romaji</option>
+                                                <option value='ho'>Hiri motu</option>
+                                                <option value='hu'>Hungarian</option>
+                                                <option value='is'>Icelandic</option>
+                                                <option value='io'>Ido</option>
+                                                <option value='ig'>Igbo</option>
+                                                <option value='i1'>Iloko</option>
+                                                <option value='id'>Indonesian</option>
+                                                <option value='ia'>Interlingua</option>
+                                                <option value='ie'>Interlingue</option>
+                                                <option value='iu'>Inuktitut</option>
+                                                <option value='ik'>Inupiaq</option>
+                                                <option value='ga'>Irish</option>
+                                                <option value='it'>Italian</option>
+                                                <option value='ja'>Japanese</option>
+                                                <option value='rj'>Japanese-romaji</option>
+                                                <option value='jv'>Javanese</option>
+                                                <option value='x1'>Kalmyk</option>
+                                                <option value='kn'>Kannada</option>
+                                                <option value='k2'>Kannada-romaji</option>
+                                                <option value='kr'>Kanuri</option>
+                                                <option value='k1'>Karachay-balkar</option>
+                                                <option value='ks'>Kashmiri</option>
+                                                <option value='kk'>Kazakh</option>
+                                                <option value='km'>Khmer, central</option>
+                                                <option value='ki'>Kikuyu</option>
+                                                <option value='rw'>Kinyarwanda</option>
+                                                <option value='ky'>Kirghiz</option>
+                                                <option value='kv'>Komi</option>
+                                                <option value='kg'>Kongo</option>
+                                                <option value='ko'>Korean</option>
+                                                <option value='rk'>Korean-romaji</option>
+                                                <option value='kj'>Kuanyama</option>
+                                                <option value='ku'>Kurdish</option>
+                                                <option value='lo'>Lao</option>
+                                                <option value='la'>Latin</option>
+                                                <option value='lv'>Latvian</option>
+                                                <option value='l1'>Lezghian</option>
+                                                <option value='li'>Limburgish</option>
+                                                <option value='ln'>Lingala</option>
+                                                <option value='lt'>Lithuanian</option>
+                                                <option value='j1'>Lojban</option>
+                                                <option value='l2'>Lombard</option>
+                                                <option value='lu'>Luba-katanga</option>
+                                                <option value='lb'>Luxembourgish</option>
+                                                <option value='mk'>Macedonian</option>
+                                                <option value='m1'>Maithili</option>
+                                                <option value='mg'>Malagasy</option>
+                                                <option value='ms'>Malay</option>
+                                                <option value='ml'>Malayalam</option>
+                                                <option value='m8'>Malayalam-romaji</option>
+                                                <option value='mt'>Maltese</option>
+                                                <option value='gv'>Manx</option>
+                                                <option value='mi'>Maori</option>
+                                                <option value='mr'>Marathi</option>
+                                                <option value='m9'>Marathi-romaji</option>
+                                                <option value='mh'>Marshallese</option>
+                                                <option value='m7'>Mazanderani</option>
+                                                <option value='m3'>Minangkabau</option>
+                                                <option value='x2'>Mingrelian</option>
+                                                <option value='m5'>Mirandese</option>
+                                                <option value='mo'>Moldavian</option>
+                                                <option value='mn'>Mongolian</option>
+                                                <option value='n4'>Nahuatl</option>
+                                                <option value='na'>Nauru</option>
+                                                <option value='nv'>Navajo</option>
+                                                <option value='nd'>Ndebele, north</option>
+                                                <option value='nr'>Ndebele, south</option>
+                                                <option value='ng'>Ndonga</option>
+                                                <option value='n1'>Neapolitan</option>
+                                                <option value='n3'>Nepal bhasa</option>
+                                                <option value='ne'>Nepali</option>
+                                                <option value='n5'>Nepali-romaji</option>
+                                                <option value='l3'>Northern luri</option>
+                                                <option value='no'>Norwegian</option>
+                                                <option value='nb'>Norwegian bokmål</option>
+                                                <option value='nn'>Norwegian nynorsk</option>
+                                                <option value='oc'>Occitan</option>
+                                                <option value='oj'>Ojibwa</option>
+                                                <option value='or'>Oriya</option>
+                                                <option value='o1'>Oriya-romaji</option>
+                                                <option value='om'>Oromo</option>
+                                                <option value='os'>Ossetian</option>
+                                                <option value='pi'>Pali</option>
+                                                <option value='p1'>Pampanga</option>
+                                                <option value='pa'>Panjabi</option>
+                                                <option value='p5'>Panjabi-romaji</option>
+                                                <option value='fa'>Persian</option>
+                                                <option value='p2'>Pfaelzisch</option>
+                                                <option value='p3'>Piemontese</option>
+                                                <option value='pl'>Polish</option>
+                                                <option value='pt'>Portuguese</option>
+                                                <option value='ps'>Pushto</option>
+                                                <option value='qu'>Quechua</option>
+                                                <option value='ro'>Romanian</option>
+                                                <option value='rm'>Romansh</option>
+                                                <option value='rn'>Rundi</option>
+                                                <option value='b4'>Russia buriat</option>
+                                                <option value='ru'>Russian</option>
+                                                <option value='r2'>Russian-romaji</option>
+                                                <option value='r1'>Rusyn</option>
+                                                <option value='se'>Sami, northern</option>
+                                                <option value='sm'>Samoan</option>
+                                                <option value='sg'>Sango</option>
+                                                <option value='sa'>Sanskrit</option>
+                                                <option value='s4'>Sanskrit-romaji</option>
+                                                <option value='sc'>Sardinian</option>
+                                                <option value='s3'>Scots</option>
+                                                <option value='gd'>Scottish gaelic</option>
+                                                <option value='sr'>Serbian</option>
+                                                <option value='sh'>Serbo-croatian</option>
+                                                <option value='sn'>Shona</option>
+                                                <option value='ii'>Sichuan yi</option>
+                                                <option value='s2'>Sicilian</option>
+                                                <option value='sd'>Sindhi</option>
+                                                <option value='si'>Sinhala</option>
+                                                <option value='sk'>Slovak</option>
+                                                <option value='sl'>Slovenian</option>
+                                                <option value='so'>Somali</option>
+                                                <option value='d2'>Sorbian, lower</option>
+                                                <option value='h2'>Sorbian, upper</option>
+                                                <option value='st'>Sotho, southern</option>
+                                                <option value='a4'>South azerbaijani</option>
+                                                <option value='es'>Spanish</option>
+                                                <option value='su'>Sundanese</option>
+                                                <option value='sw'>Swahili</option>
+                                                <option value='ss'>Swati</option>
+                                                <option value='sv'>Swedish</option>
+                                                <option value='tl'>Tagalog</option>
+                                                <option value='ty'>Tahitian</option>
+                                                <option value='tg'>Tajik</option>
+                                                <option value='ta'>Tamil</option>
+                                                <option value='t2'>Tamil-romaji</option>
+                                                <option value='tt'>Tatar</option>
+                                                <option value='te'>Telugu</option>
+                                                <option value='t3'>Telugu-romaji</option>
+                                                <option value='th'>Thai</option>
+                                                <option value='t4'>Thai-romaji</option>
+                                                <option value='bo'>Tibetan</option>
+                                                <option value='ti'>Tigrinya</option>
+                                                <option value='to'>Tonga (tonga islands)</option>
+                                                <option value='a1'>Tosk albanian</option>
+                                                <option value='ts'>Tsonga</option>
+                                                <option value='tn'>Tswana</option>
+                                                <option value='tr'>Turkish</option>
+                                                <option value='tk'>Turkmen</option>
+                                                <option value='t1'>Tuvinian</option>
+                                                <option value='tw'>Twi</option>
+                                                <option value='ug'>Uighur</option>
+                                                <option value='uk'>Ukrainian</option>
+                                                <option value='ur'>Urdu</option>
+                                                <option value='u1'>Urdu-romaji</option>
+                                                <option value='uz'>Uzbek</option>
+                                                <option value='ve'>Venda</option>
+                                                <option value='v1'>Venetian</option>
+                                                <option value='v2'>Veps</option>
+                                                <option value='vi'>Vietnamese</option>
+                                                <option value='v3'>Vlaams</option>
+                                                <option value='vo'>Volapük</option>
+                                                <option value='wa'>Walloon</option>
+                                                <option value='w1'>Waray</option>
+                                                <option value='cy'>Welsh</option>
+                                                <option value='m4'>Western mari</option>
+                                                <option value='p4'>Western panjabi</option>
+                                                <option value='wo'>Wolof</option>
+                                                <option value='w2'>Wu chinese</option>
+                                                <option value='xh'>Xhosa</option>
+                                                <option value='s1'>Yakut</option>
+                                                <option value='yi'>Yiddish</option>
+                                                <option value='yo'>Yoruba</option>
+                                                <option value='y1'>Yue chinese</option>
+                                                <option value='za'>Zhuang</option>
+                                                <option value='zu'>Zulu</option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="app.cfg.lyrics.mxm_language">
-                                            <option value='disabled'>Disabled</option>
-                                            <option value='ab'>Abkhazian</option>
-                                            <option value='aa'>Afar</option>
-                                            <option value='af'>Afrikaans</option>
-                                            <option value='ak'>Akan</option>
-                                            <option value='sq'>Albanian</option>
-                                            <option value='am'>Amharic</option>
-                                            <option value='ar'>Arabic</option>
-                                            <option value='an'>Aragonese</option>
-                                            <option value='hy'>Armenian</option>
-                                            <option value='as'>Assamese</option>
-                                            <option value='a5'>Assamese-romaji</option>
-                                            <option value='a3'>Asturian</option>
-                                            <option value='av'>Avaric</option>
-                                            <option value='ae'>Avestan</option>
-                                            <option value='ay'>Aymara</option>
-                                            <option value='az'>Azerbaijani</option>
-                                            <option value='bm'>Bambara</option>
-                                            <option value='ba'>Bashkir</option>
-                                            <option value='eu'>Basque</option>
-                                            <option value='b1'>Bavarian</option>
-                                            <option value='be'>Belarusian</option>
-                                            <option value='bn'>Bengali</option>
-                                            <option value='b5'>Bengali-romaji</option>
-                                            <option value='bh'>Bihari languages</option>
-                                            <option value='b3'>Bishnupriya</option>
-                                            <option value='bi'>Bislama</option>
-                                            <option value='bs'>Bosnian</option>
-                                            <option value='br'>Breton</option>
-                                            <option value='bg'>Bulgarian</option>
-                                            <option value='my'>Burmese</option>
-                                            <option value='ca'>Catalan</option>
-                                            <option value='c2'>Cebuano</option>
-                                            <option value='b2'>Central bikol</option>
-                                            <option value='c3'>Central kurdish</option>
-                                            <option value='ch'>Chamorro</option>
-                                            <option value='c1'>Chavacano</option>
-                                            <option value='ce'>Chechen</option>
-                                            <option value='ny'>Chichewa</option>
-                                            <option value='zh'>Chinese (simplified)</option>
-                                            <option value='z1'>Chinese (traditional)</option>
-                                            <option value='rz'>Chinese-romaji</option>
-                                            <option value='cu'>Church slavic</option>
-                                            <option value='cv'>Chuvash</option>
-                                            <option value='kw'>Cornish</option>
-                                            <option value='co'>Corsican</option>
-                                            <option value='cr'>Cree</option>
-                                            <option value='c4'>Creoles and pidgins</option>
-                                            <option value='c5'>Creoles and pidgins, english based</option>
-                                            <option value='c6'>Creoles and pidgins, french-based</option>
-                                            <option value='c7'>Creoles and pidgins, portuguese-based</option>
-                                            <option value='hr'>Croatian</option>
-                                            <option value='cs'>Czech</option>
-                                            <option value='da'>Danish</option>
-                                            <option value='d1'>Dimli (individual language)</option>
-                                            <option value='dv'>Divehi</option>
-                                            <option value='d3'>Dotyali</option>
-                                            <option value='nl'>Dutch</option>
-                                            <option value='dz'>Dzongkha</option>
-                                            <option value='m2'>Eastern mari</option>
-                                            <option value='a2'>Egyptian arabic</option>
-                                            <option value='e1'>Emilian-romagnol</option>
-                                            <option value='en'>English</option>
-                                            <option value='m6'>Erzya</option>
-                                            <option value='eo'>Esperanto</option>
-                                            <option value='et'>Estonian</option>
-                                            <option value='ee'>Ewe</option>
-                                            <option value='fo'>Faroese</option>
-                                            <option value='h1'>Fiji hindi</option>
-                                            <option value='fj'>Fijian</option>
-                                            <option value='f1'>Filipino</option>
-                                            <option value='fi'>Finnish</option>
-                                            <option value='fr'>French</option>
-                                            <option value='f2'>Frisian, northern</option>
-                                            <option value='fy'>Frisian, western</option>
-                                            <option value='ff'>Fulah</option>
-                                            <option value='gl'>Galician</option>
-                                            <option value='lg'>Ganda</option>
-                                            <option value='ka'>Georgian</option>
-                                            <option value='de'>German</option>
-                                            <option value='n2'>German, low</option>
-                                            <option value='g1'>Goan konkani</option>
-                                            <option value='el'>Greek</option>
-                                            <option value='e2'>Greek-romaji</option>
-                                            <option value='kl'>Greenlandic</option>
-                                            <option value='gn'>Guarani</option>
-                                            <option value='gu'>Gujarati</option>
-                                            <option value='g2'>Gujarati-romaji</option>
-                                            <option value='ht'>Haitian creole</option>
-                                            <option value='ha'>Hausa</option>
-                                            <option value='he'>Hebrew</option>
-                                            <option value='hz'>Herero</option>
-                                            <option value='hi'>Hindi</option>
-                                            <option value='h3'>Hindi-romaji</option>
-                                            <option value='ho'>Hiri motu</option>
-                                            <option value='hu'>Hungarian</option>
-                                            <option value='is'>Icelandic</option>
-                                            <option value='io'>Ido</option>
-                                            <option value='ig'>Igbo</option>
-                                            <option value='i1'>Iloko</option>
-                                            <option value='id'>Indonesian</option>
-                                            <option value='ia'>Interlingua</option>
-                                            <option value='ie'>Interlingue</option>
-                                            <option value='iu'>Inuktitut</option>
-                                            <option value='ik'>Inupiaq</option>
-                                            <option value='ga'>Irish</option>
-                                            <option value='it'>Italian</option>
-                                            <option value='ja'>Japanese</option>
-                                            <option value='rj'>Japanese-romaji</option>
-                                            <option value='jv'>Javanese</option>
-                                            <option value='x1'>Kalmyk</option>
-                                            <option value='kn'>Kannada</option>
-                                            <option value='k2'>Kannada-romaji</option>
-                                            <option value='kr'>Kanuri</option>
-                                            <option value='k1'>Karachay-balkar</option>
-                                            <option value='ks'>Kashmiri</option>
-                                            <option value='kk'>Kazakh</option>
-                                            <option value='km'>Khmer, central</option>
-                                            <option value='ki'>Kikuyu</option>
-                                            <option value='rw'>Kinyarwanda</option>
-                                            <option value='ky'>Kirghiz</option>
-                                            <option value='kv'>Komi</option>
-                                            <option value='kg'>Kongo</option>
-                                            <option value='ko'>Korean</option>
-                                            <option value='rk'>Korean-romaji</option>
-                                            <option value='kj'>Kuanyama</option>
-                                            <option value='ku'>Kurdish</option>
-                                            <option value='lo'>Lao</option>
-                                            <option value='la'>Latin</option>
-                                            <option value='lv'>Latvian</option>
-                                            <option value='l1'>Lezghian</option>
-                                            <option value='li'>Limburgish</option>
-                                            <option value='ln'>Lingala</option>
-                                            <option value='lt'>Lithuanian</option>
-                                            <option value='j1'>Lojban</option>
-                                            <option value='l2'>Lombard</option>
-                                            <option value='lu'>Luba-katanga</option>
-                                            <option value='lb'>Luxembourgish</option>
-                                            <option value='mk'>Macedonian</option>
-                                            <option value='m1'>Maithili</option>
-                                            <option value='mg'>Malagasy</option>
-                                            <option value='ms'>Malay</option>
-                                            <option value='ml'>Malayalam</option>
-                                            <option value='m8'>Malayalam-romaji</option>
-                                            <option value='mt'>Maltese</option>
-                                            <option value='gv'>Manx</option>
-                                            <option value='mi'>Maori</option>
-                                            <option value='mr'>Marathi</option>
-                                            <option value='m9'>Marathi-romaji</option>
-                                            <option value='mh'>Marshallese</option>
-                                            <option value='m7'>Mazanderani</option>
-                                            <option value='m3'>Minangkabau</option>
-                                            <option value='x2'>Mingrelian</option>
-                                            <option value='m5'>Mirandese</option>
-                                            <option value='mo'>Moldavian</option>
-                                            <option value='mn'>Mongolian</option>
-                                            <option value='n4'>Nahuatl</option>
-                                            <option value='na'>Nauru</option>
-                                            <option value='nv'>Navajo</option>
-                                            <option value='nd'>Ndebele, north</option>
-                                            <option value='nr'>Ndebele, south</option>
-                                            <option value='ng'>Ndonga</option>
-                                            <option value='n1'>Neapolitan</option>
-                                            <option value='n3'>Nepal bhasa</option>
-                                            <option value='ne'>Nepali</option>
-                                            <option value='n5'>Nepali-romaji</option>
-                                            <option value='l3'>Northern luri</option>
-                                            <option value='no'>Norwegian</option>
-                                            <option value='nb'>Norwegian bokmål</option>
-                                            <option value='nn'>Norwegian nynorsk</option>
-                                            <option value='oc'>Occitan</option>
-                                            <option value='oj'>Ojibwa</option>
-                                            <option value='or'>Oriya</option>
-                                            <option value='o1'>Oriya-romaji</option>
-                                            <option value='om'>Oromo</option>
-                                            <option value='os'>Ossetian</option>
-                                            <option value='pi'>Pali</option>
-                                            <option value='p1'>Pampanga</option>
-                                            <option value='pa'>Panjabi</option>
-                                            <option value='p5'>Panjabi-romaji</option>
-                                            <option value='fa'>Persian</option>
-                                            <option value='p2'>Pfaelzisch</option>
-                                            <option value='p3'>Piemontese</option>
-                                            <option value='pl'>Polish</option>
-                                            <option value='pt'>Portuguese</option>
-                                            <option value='ps'>Pushto</option>
-                                            <option value='qu'>Quechua</option>
-                                            <option value='ro'>Romanian</option>
-                                            <option value='rm'>Romansh</option>
-                                            <option value='rn'>Rundi</option>
-                                            <option value='b4'>Russia buriat</option>
-                                            <option value='ru'>Russian</option>
-                                            <option value='r2'>Russian-romaji</option>
-                                            <option value='r1'>Rusyn</option>
-                                            <option value='se'>Sami, northern</option>
-                                            <option value='sm'>Samoan</option>
-                                            <option value='sg'>Sango</option>
-                                            <option value='sa'>Sanskrit</option>
-                                            <option value='s4'>Sanskrit-romaji</option>
-                                            <option value='sc'>Sardinian</option>
-                                            <option value='s3'>Scots</option>
-                                            <option value='gd'>Scottish gaelic</option>
-                                            <option value='sr'>Serbian</option>
-                                            <option value='sh'>Serbo-croatian</option>
-                                            <option value='sn'>Shona</option>
-                                            <option value='ii'>Sichuan yi</option>
-                                            <option value='s2'>Sicilian</option>
-                                            <option value='sd'>Sindhi</option>
-                                            <option value='si'>Sinhala</option>
-                                            <option value='sk'>Slovak</option>
-                                            <option value='sl'>Slovenian</option>
-                                            <option value='so'>Somali</option>
-                                            <option value='d2'>Sorbian, lower</option>
-                                            <option value='h2'>Sorbian, upper</option>
-                                            <option value='st'>Sotho, southern</option>
-                                            <option value='a4'>South azerbaijani</option>
-                                            <option value='es'>Spanish</option>
-                                            <option value='su'>Sundanese</option>
-                                            <option value='sw'>Swahili</option>
-                                            <option value='ss'>Swati</option>
-                                            <option value='sv'>Swedish</option>
-                                            <option value='tl'>Tagalog</option>
-                                            <option value='ty'>Tahitian</option>
-                                            <option value='tg'>Tajik</option>
-                                            <option value='ta'>Tamil</option>
-                                            <option value='t2'>Tamil-romaji</option>
-                                            <option value='tt'>Tatar</option>
-                                            <option value='te'>Telugu</option>
-                                            <option value='t3'>Telugu-romaji</option>
-                                            <option value='th'>Thai</option>
-                                            <option value='t4'>Thai-romaji</option>
-                                            <option value='bo'>Tibetan</option>
-                                            <option value='ti'>Tigrinya</option>
-                                            <option value='to'>Tonga (tonga islands)</option>
-                                            <option value='a1'>Tosk albanian</option>
-                                            <option value='ts'>Tsonga</option>
-                                            <option value='tn'>Tswana</option>
-                                            <option value='tr'>Turkish</option>
-                                            <option value='tk'>Turkmen</option>
-                                            <option value='t1'>Tuvinian</option>
-                                            <option value='tw'>Twi</option>
-                                            <option value='ug'>Uighur</option>
-                                            <option value='uk'>Ukrainian</option>
-                                            <option value='ur'>Urdu</option>
-                                            <option value='u1'>Urdu-romaji</option>
-                                            <option value='uz'>Uzbek</option>
-                                            <option value='ve'>Venda</option>
-                                            <option value='v1'>Venetian</option>
-                                            <option value='v2'>Veps</option>
-                                            <option value='vi'>Vietnamese</option>
-                                            <option value='v3'>Vlaams</option>
-                                            <option value='vo'>Volapük</option>
-                                            <option value='wa'>Walloon</option>
-                                            <option value='w1'>Waray</option>
-                                            <option value='cy'>Welsh</option>
-                                            <option value='m4'>Western mari</option>
-                                            <option value='p4'>Western panjabi</option>
-                                            <option value='wo'>Wolof</option>
-                                            <option value='w2'>Wu chinese</option>
-                                            <option value='xh'>Xhosa</option>
-                                            <option value='s1'>Yakut</option>
-                                            <option value='yi'>Yiddish</option>
-                                            <option value='yo'>Yoruba</option>
-                                            <option value='y1'>Yue chinese</option>
-                                            <option value='za'>Zhuang</option>
-                                            <option value='zu'>Zulu</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch />
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.lyrics.enableQQLyrics')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch />
-                                    </label>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.lyrics.enableQQLyrics')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
-                    <div>
-                        {{ $root.getLz('settings.header.connectivity') }}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- Connectivity Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.connectivity')}}</span>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity"/>
                         </div>
-                        <div class="settings-option-body">
+                        <div>
+                            {{ $root.getLz('settings.header.connectivity') }}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- Connectivity Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.connectivity')}}</span>
+                            </div>
+                            <div class="settings-option-body">
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.playbackNotifications')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.playbackNotifications')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.general.playbackNotifications"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.general.playbackNotifications" switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <!-- DiscordRPC -->
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC')}}
+                                <!-- DiscordRPC -->
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled" switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select" v-model="app.cfg.connectivity.discord_rpc.client">
+                                                <option value="Cider">{{$root.getLz('app.name')}}</option>
+                                                <option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
+                                                </option>
+                                            </select>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <select class="md-select" v-model="app.cfg.connectivity.discord_rpc.client">
-                                            <option value="Cider">{{$root.getLz('app.name')}}</option>
-                                            <option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
-                                            </option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br />
-                                    <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
-                                        {trackNumber}</small>
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
+                                        <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
+                                            {album},
+                                            {trackNumber}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="text"
+                                                   v-model="app.cfg.connectivity.discord_rpc.details_format"/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="text" v-model="app.cfg.connectivity.discord_rpc.details_format" />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
-                                    <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
-                                        {trackNumber}</small>
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
+                                        <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
+                                            {album},
+                                            {trackNumber}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format"/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format" />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.discordRPC.reload')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.discordRPC.reload')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="reloadDiscordRPC()">
+                                            {{$root.getLz('menubar.options.reload')}}
+                                        </button>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="reloadDiscordRPC()">
-                                        {{$root.getLz('menubar.options.reload')}}
-                                    </button>
-                                </div>
-                            </div>
 
-                            <!-- LastFM -->
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
+                                <!-- LastFM -->
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" id="lfmConnect"
+                                                @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
+                                            {{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" :
+                                            "connect"}`)}}<br>
+                                            <small>{{app.cfg.connectivity.lastfm.enabled ?
+                                                `${$root.getLz('term.authed')}:
+                                                ${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
+                                        </button>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto" >
-                                    <button class="md-btn" id="lfmConnect" @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
-                                        {{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" : "connect"}`)}}<br>
-                                        <small>{{app.cfg.connectivity.lastfm.enabled ? `${$root.getLz('term.authed')}: ${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
-                                    </button>
+                                <div class="md-option-line" v-show="lastfmConnecting">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.manualToken')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <form @submit.prevent="submitToken">
+                                                <input type="text" autofocus id="lfmToken"/>
+                                                <input type="submit" class="md-btn"
+                                                       @value="$root.getLz('action.submit')"/>
+                                            </form>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line" v-show="lastfmConnecting">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.lastfmScrobble.manualToken')}}
+                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="number" min="50" max="100"
+                                                   v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <form @submit.prevent="submitToken">
-                                            <input type="text" autofocus id="lfmToken" />
-                                            <input type="submit" class="md-btn" @value="$root.getLz('action.submit')" />
-                                        </form>
-                                    </label>
+                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
+                                        <small>{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="number" min="50" max="100" v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
-                                    <small>{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop.description')}}</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop" switch/>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterTypes')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" @change="filterChange" value="song">{{$root.getLz('term.songs')}}<br>
-                                        <input type="checkbox" @change="filterChange" value="musicVideo">{{$root.getLz('term.musicVideos')}}<br>
-                                    </label>
+                                <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterTypes')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" @change="filterChange" value="song">{{$root.getLz('term.songs')}}<br>
+                                            <input type="checkbox" @change="filterChange" value="musicVideo">{{$root.getLz('term.musicVideos')}}<br>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <b-tab>
-                <template #title>
-                    <div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
-                    <div>
-                        {{$root.getLz('settings.header.advanced')}}
-                    </div>
-                </template>
-                <div class="settings-tab-content">
-                    <div class="md-option-container">
-                        <!-- Debug Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.debug')}}</span>
+                </b-tab>
+                <b-tab>
+                    <template #title>
+                        <div>
+                            <svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced"/>
                         </div>
-                        <div class="settings-option-body">
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.debug.copy_log')}}
+                        <div>
+                            {{$root.getLz('settings.header.advanced')}}
+                        </div>
+                    </template>
+                    <div class="settings-tab-content">
+                        <div class="md-option-container">
+                            <!-- Debug Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.debug')}}</span>
+                            </div>
+                            <div class="settings-option-body">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.debug.copy_log')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="copyLogs">
+                                            {{$root.getLz('action.copy')}}
+                                        </button>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="copyLogs">
-                                        {{$root.getLz('action.copy')}}
-                                    </button>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.debug.openAppData')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="openAppData">
+                                            {{$root.getLz('action.open')}}
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        Performant Logging
+                                        <small>Disables debug logging, resulting in a slightly faster Cider. (Requires
+                                            relaunch)</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.debug.openAppData')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="openAppData">
-                                        {{$root.getLz('action.open')}}
-                                    </button>
-                                </div>
+
+                            <!-- Experimental Settings -->
+                            <div class="md-option-header">
+                                <span>{{$root.getLz('settings.header.experimental')}}</span>
                             </div>
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    Performant Logging
-                                    <small>Disables debug logging, resulting in a slightly faster Cider. (Requires
-                                        relaunch)</small>
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch />
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
+                            <div class="settings-option-body">
 
-                        <!-- Experimental Settings -->
-                        <div class="md-option-header">
-                            <span>{{$root.getLz('settings.header.experimental')}}</span>
-                        </div>
-                        <div class="settings-option-body">
+                                <!--<div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.plugin.github.explore')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
+                                            $root.getLz("settings.option.visual.plugin.github.explore") }}
+                                        </button>
+                                    </div>
+                                </div> -->
 
-                            <!--<div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.plugin.github.explore')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
-                                        $root.getLz("settings.option.visual.plugin.github.explore") }}
-                                    </button>
-                                </div>
-                            </div> -->
-
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="reinstallWidevineCDM">
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
                                         {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
-                                    </button>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <button class="md-btn" @click="reinstallWidevineCDM">
+                                            {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    Immersive Fullscreen Test
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        Immersive Fullscreen Test
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
+                                                   @click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox"
-                                               v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
-                                               @click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.experimental.unknownPlugin')}}
-                                    <br>
-                                    <small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.experimental.unknownPlugin')}}
+                                        <br>
+                                        <small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
+                                                   @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox"
-                                               v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
-                                               @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    Use MusicKit V3
-                                    <small>Requires relaunch</small>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        Use MusicKit V3
+                                        <small>Requires relaunch</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.advanced.experiments.includes('ampv3')"
+                                                   @click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('ampv3')"
-                                               @click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.advanced.playlistTrackMapping')}}
-                                    <br>
-                                    <small>{{$root.getLz('settings.option.advanced.playlistTrackMapping.description')}}</small>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.advanced.playlistTrackMapping')}}
+                                        <br>
+                                        <small>{{$root.getLz('settings.option.advanced.playlistTrackMapping.description')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping" switch />
-                                    </label>
-                                </div>
-                            </div>
-                            
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    Local Files
-                                </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('localLibrary')"
-                                               @click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.experimental.compactUI')}}
-                                    <small
-                                            v-if="!!app.getThemeDirective('forceUI')">{{$root.getLz('term.themeManaged')}}</small>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        Local Files
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.advanced.experiments.includes('localLibrary')"
+                                                   @click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')"
-                                               @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
-                                               switch :disabled="!!app.getThemeDirective('forceUI')" />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.experimental.inline_playlists')}}
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.experimental.compactUI')}}
+                                        <small
+                                                v-if="!!app.getThemeDirective('forceUI')">{{$root.getLz('term.themeManaged')}}</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox"
+                                                   v-model="app.cfg.advanced.experiments.includes('compactui')"
+                                                   @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
+                                                   switch :disabled="!!app.getThemeDirective('forceUI')"/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" disabled
-                                               v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
-                                               @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
-                                               switch />
-                                    </label>
-                                </div>
-                            </div>
 
-                            <div class="md-option-line update-check" v-if="app.platform === 'win32'">
-                                <div class="md-option-segment">
-                                    {{$root.getLz('settings.option.visual.transparent')}}<br>
-                                    <small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.experimental.inline_playlists')}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" disabled
+                                                   v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
+                                                   @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
+                                                   switch/>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div class="md-option-segment md-option-segment_auto">
-                                    <label>
-                                        <input type="checkbox" v-model="app.cfg.visual.transparent" switch
-                                               @change="promptForRelaunch()" />
-                                    </label>
+
+                                <div class="md-option-line update-check" v-if="app.platform === 'win32'">
+                                    <div class="md-option-segment">
+                                        {{$root.getLz('settings.option.visual.transparent')}}<br>
+                                        <small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <input type="checkbox" v-model="app.cfg.visual.transparent" switch
+                                                   @change="promptForRelaunch()"/>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </b-tab>
-            <!--keybinds Settings -->
-            <b-tab id="hid">
-                <template>
-                    <keybinds-settings/>
-                </template>
-            </b-tab>
-            <!--keybinds-settings -->
-            <!--Github-theme-settings -->
-            <b-tab id="hid">
-                <template>
-                    <themes-github/>
-                </template>
-            </b-tab>
-            <!--Github-theme-settings -->
-            <!-- Connect Settings -->
-            <!-- Not Prod Ready
+                </b-tab>
+                <!--keybinds Settings -->
+                <b-tab id="hid">
+                    <template>
+                        <keybinds-settings/>
+                    </template>
+                </b-tab>
+                <!--keybinds-settings -->
+                <!--Github-theme-settings -->
+                <b-tab id="hid">
+                    <template>
+                        <themes-github/>
+                    </template>
+                </b-tab>
+                <!--Github-theme-settings -->
+                <!-- Connect Settings -->
+                <!-- Not Prod Ready
             <b-tab :title="$root.getLz('settings.header.connect')">
                 <div class="md-option-container">
                     <!!!!!-- Cider Connect / Linking Settings -!->
@@ -1502,190 +1560,190 @@
                 </div>
             </b-tab>
             -->
-        </b-tabs>
+            </b-tabs>
+        </div>
     </div>
-</div>
 </script>
 <script>
-  Vue.component("settings-window", {
-    template: "#settings-window",
-    data: function() {
-      return {
-        app: this.$root,
-        themes: ipcRenderer.sendSync("get-themes"),
-        tabIndex: 0,
-        canChangeHash: false,
-        lastfmConnecting: false
-      }
-    },
-    watch: {
-      tabIndex: function(val) {
-        if (this.canChangeHash) {
-          // window.location.hash = `#settings/${val}`
-        }
-      }
-    },
-    methods: {
-      sidebarVis() {
-        const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
-        if(tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
-            return true;
-        }
-        return false
-      },
-      close() {
-        this.$root.modals.settings = false
-      },
-      windowBgStyleChange() {
-        this.$root.getNowPlayingArtworkBG(undefined, true)
-        if (this.$root.cfg.visual.window_background_style === "mica") {
-          this.$root.spawnMica()
-        }
-      },
-      reinstallWidevineCDM() {
-        app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
-          if (ok) {
-            ipcRenderer.invoke("reinstall-widevine-cdm");
-          }
-        })
-      },
-      gitHubExplore() {
-        app.openSettingsPage("github-themes")
-      },
-      copyLogs() {
-        ipcRenderer.send('fetch-log')
-        notyf.success(app.getLz('term.share.success'));
-      },
-      openAppData() {
-        ipcRenderer.send('open-appdata')
-      },
-      getLanguages: function() {
-        let langs = this.$root.lzListing
-        let categories = {
-          "main": [],
-          "fun": [],
-          "unsorted": []
-        }
-        // sort by category if category is undefined or empty put it in "unsorted"
-        for (let i = 0; i < langs.length; i++) {
-          if (langs[i].category === undefined || langs[i].category === "") {
-            categories.unsorted.push(langs[i])
-          } else {
-            categories[langs[i].category].push(langs[i])
-          }
-        }
-        // return
-        return categories
-      },
-      addExperiment(flag) {
-        app.cfg.advanced.experiments.push(flag);
-      },
-      removeExperiment(flag) {
-        app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
-      },
-      toggleAudioContext: function() {
-        if (app.cfg.advanced.AudioContext === true) {
-          if (navigator.hardwareConcurrency < 6) {
-            app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function(result) {
-              if (result) {
-                CiderAudio.init();
-                if (app.cfg.audio.normalization === true) {
-                  CiderAudio.normalizerOn()
-                }
-              }
-            })
-          } else {
-            CiderAudio.init();
-            if (app.cfg.audio.normalization === true) {
-              CiderAudio.normalizerOn()
+    Vue.component("settings-window", {
+        template: "#settings-window",
+        data: function () {
+            return {
+                app: this.$root,
+                themes: ipcRenderer.sendSync("get-themes"),
+                tabIndex: 0,
+                canChangeHash: false,
+                lastfmConnecting: false
+            }
+        },
+        watch: {
+            tabIndex: function (val) {
+                if (this.canChangeHash) {
+                    // window.location.hash = `#settings/${val}`
+                }
+            }
+        },
+        methods: {
+            sidebarVis() {
+                const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
+                if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
+                    return true;
+                }
+                return false
+            },
+            close() {
+                this.$root.modals.settings = false
+            },
+            windowBgStyleChange() {
+                this.$root.getNowPlayingArtworkBG(undefined, true)
+                if (this.$root.cfg.visual.window_background_style === "mica") {
+                    this.$root.spawnMica()
+                }
+            },
+            reinstallWidevineCDM() {
+                app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
+                    if (ok) {
+                        ipcRenderer.invoke("reinstall-widevine-cdm");
+                    }
+                })
+            },
+            gitHubExplore() {
+                app.openSettingsPage("github-themes")
+            },
+            copyLogs() {
+                ipcRenderer.send('fetch-log')
+                notyf.success(app.getLz('term.share.success'));
+            },
+            openAppData() {
+                ipcRenderer.send('open-appdata')
+            },
+            getLanguages: function () {
+                let langs = this.$root.lzListing
+                let categories = {
+                    "main": [],
+                    "fun": [],
+                    "unsorted": []
+                }
+                // sort by category if category is undefined or empty put it in "unsorted"
+                for (let i = 0; i < langs.length; i++) {
+                    if (langs[i].category === undefined || langs[i].category === "") {
+                        categories.unsorted.push(langs[i])
+                    } else {
+                        categories[langs[i].category].push(langs[i])
+                    }
+                }
+                // return
+                return categories
+            },
+            addExperiment(flag) {
+                app.cfg.advanced.experiments.push(flag);
+            },
+            removeExperiment(flag) {
+                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+            },
+            toggleAudioContext: function () {
+                if (app.cfg.advanced.AudioContext === true) {
+                    if (navigator.hardwareConcurrency < 6) {
+                        app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
+                            if (result) {
+                                CiderAudio.init();
+                                if (app.cfg.audio.normalization === true) {
+                                    CiderAudio.normalizerOn()
+                                }
+                            }
+                        })
+                    } else {
+                        CiderAudio.init();
+                        if (app.cfg.audio.normalization === true) {
+                            CiderAudio.normalizerOn()
+                        }
+                    }
+                } else {
+                    CiderAudio.off();
+                }
+            },
+            toggleNormalization: function () {
+                if (app.cfg.audio.normalization) {
+                    CiderAudio.normalizerOn()
+                } else {
+                    CiderAudio.normalizerOff()
+                }
+            },
+            changeAudioQuality: function () {
+                app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
+            },
+            toggleUserInfo: function () {
+                app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
+            },
+            sendDataToMTT: function () {
+                ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
+                //  setStoreValue does not change plugin store values somehow
+                ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
+            },
+            checkIfUpdateDisabled() {
+                if (app.cfg.main.UPDATABLE) return;
+
+                let updateFields = document.getElementsByClassName('update-check');
+                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() {
+                app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
+                    if (result) {
+                        ipcRenderer.send('relaunchApp', '');
+                    }
+                });
+            },
+            authCC() {
+                ipcRenderer.send('cc-auth')
+            },
+            logoutCC() {
+                ipcRenderer.send('cc-logout')
+            },
+            reloadDiscordRPC() {
+                ipcRenderer.send('reloadRPC')
+            },
+            lfmDisconnect() {
+                this.$root.cfg.connectivity.lastfm.enabled = false;
+                this.$root.cfg.connectivity.lastfm.secrets.username = "";
+                this.$root.cfg.connectivity.lastfm.secrets.key = "";
+                ipcRenderer.send('lastfm:disconnect');
+            },
+            async lfmAuthorize() {
+                this.lastfmConnecting = true;
+                window.open(await ipcRenderer.invoke('lastfm:url'));
+                app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
+
+                /* Just a timeout for the button */
+                setTimeout(() => {
+                    if (!this.$root.cfg.connectivity.lastfm.enabled) {
+                        app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
+                        console.warn('[lastfm:authorize] Last.fm authorization timed out.');
+                        this.lastfmConnecting = false;
+                    }
+                }, 20000);
+
+                ipcRenderer.once('lastfm:authenticated', (_e, session) => {
+                    this.$root.cfg.connectivity.lastfm.secrets.username = session.username
+                    this.$root.cfg.connectivity.lastfm.secrets.key = session.key
+                    this.$root.cfg.connectivity.lastfm.enabled = true
+                    this.lastfmConnecting = false;
+                    app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
+                })
+            },
+            filterChange(e) {
+                this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
+            },
+            submitToken() {
+                const token = document.getElementById('lfmToken').value;
+                ipcRenderer.send('lastfm:auth', token);
+            },
+            openLocalSongsPathMenu() {
+                app.modals.pathMenu = true
             }
-          }
-        } else {
-          CiderAudio.off();
         }
-      },
-      toggleNormalization: function() {
-        if (app.cfg.audio.normalization) {
-          CiderAudio.normalizerOn()
-        } else {
-          CiderAudio.normalizerOff()
-        }
-      },
-      changeAudioQuality: function() {
-        app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
-      },
-      toggleUserInfo: function() {
-        app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
-      },
-      sendDataToMTT: function() {
-        ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
-        //  setStoreValue does not change plugin store values somehow
-        ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
-      },
-      checkIfUpdateDisabled() {
-        if (app.cfg.main.UPDATABLE) return;
-
-        let updateFields = document.getElementsByClassName('update-check');
-        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() {
-        app.confirm(app.getLz('action.relaunch.confirm'), function(result) {
-          if (result) {
-            ipcRenderer.send('relaunchApp', '');
-          }
-        });
-      },
-      authCC() {
-        ipcRenderer.send('cc-auth')
-      },
-      logoutCC() {
-        ipcRenderer.send('cc-logout')
-      },
-      reloadDiscordRPC() {
-        ipcRenderer.send('reloadRPC')
-      },
-      lfmDisconnect() {
-        this.$root.cfg.connectivity.lastfm.enabled = false;
-        this.$root.cfg.connectivity.lastfm.secrets.username = "";
-        this.$root.cfg.connectivity.lastfm.secrets.key = "";
-        ipcRenderer.send('lastfm:disconnect');
-      },
-      async lfmAuthorize() {
-        this.lastfmConnecting = true;
-        window.open(await ipcRenderer.invoke('lastfm:url'));
-        app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
-
-        /* Just a timeout for the button */
-        setTimeout(() => {
-          if (!this.$root.cfg.connectivity.lastfm.enabled) {
-            app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
-            console.warn('[lastfm:authorize] Last.fm authorization timed out.');
-            this.lastfmConnecting = false;
-          }
-        }, 20000);
-
-        ipcRenderer.once('lastfm:authenticated', (_e, session) => {
-          this.$root.cfg.connectivity.lastfm.secrets.username = session.username
-          this.$root.cfg.connectivity.lastfm.secrets.key = session.key
-          this.$root.cfg.connectivity.lastfm.enabled = true
-          this.lastfmConnecting = false;
-          app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
-        })
-      },
-      filterChange(e) {
-        this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
-      },
-      submitToken() {
-        const token = document.getElementById('lfmToken').value;
-        ipcRenderer.send('lastfm:auth', token);
-      },
-      openLocalSongsPathMenu() {
-        app.modals.pathMenu = true
-      }
-    }
-  })
+    })
 </script>
\ No newline at end of file