Merge pull request #971 from ciderapp/develop

Develop

src/i18n/hu_HU.json

@@ -73,7 +73,6 @@
   "term.viewAs": "Megjelenítés",
   "term.viewAs.coverArt": "Borító",
   "term.viewAs.list": "Lista",
-  "term.dynamic": "Dinamikus",
   "term.size": "Méret",
   "term.size.normal": "Normál",
   "term.size.compact": "Kompakt",
@@ -407,6 +406,7 @@
   "settings.option.lyrics.enableMusixmatchKaraoke": "Karaoke mód bekapcsolása (Csak MusixMatch)",
   "settings.option.lyrics.musixmatchPreferredLanguage": "MusixMatch fordítás nyelve",
   "settings.option.lyrics.enableYoutubeLyrics": "YouTube dalszövegek engedélyezése a zenei videóknál",
+  "settings.option.lyrics.enableQQLyrics": "QQLyrics dalszövegek engedélyezése",
   "settings.header.connectivity": "Csatlakozások",
   "settings.header.connectivity.description": "A Cider csatlakozás beállításainak módosítása.",
   "settings.option.connectivity.playbackNotifications": "Lejátszási értesítések",

src/i18n/zh_HK.json

@@ -115,7 +115,7 @@
   "term.contributors": "貢獻者",
   "term.equalizer": "均衡器",
   "term.reset": "重設",
-  "term.tracks": "首歌曲",
+  "term.tracks": "歌曲",
   "term.videos": "MV",
   "term.menu": "選項",
   "term.check": "檢查",
@@ -225,6 +225,10 @@
   "settings.option.general.resumebehavior.locally.description": "Cider 將還原你在這台電腦上的最後一次操作。",
   "settings.option.general.resumebehavior.history": "歷史",
   "settings.option.general.resumebehavior.history.description": "Cider 將跨裝置將你的整個 Apple Music 歷史記錄中的最後一首歌曲排隊入列。",
+  "settings.option.general.resumetabs" : "啟動時打開的選項",
+  "settings.option.general.resumetabs.description" : "你可以選擇啟動 Cider 時要打開的選項。",
+  "settings.option.general.resumetabs.dynamic" : "動態",
+  "settings.option.general.resumetabs.dynamic.description" : "Cider 將打開你上次停留的選項。",
   "settings.option.general.language": "語言",
   "settings.option.general.language.main": "語言",
   "settings.option.general.language.fun": "惡搞語言",
@@ -236,6 +240,8 @@
   "settings.option.general.updateCider.branch.develop": "測試",
   "settings.option.general.customizeSidebar": "自訂側邊欄的功能",
   "settings.option.general.customizeSidebar.customize": "自訂",
+  "settings.option.general.keybindings": "快捷操作鍵",
+  "settings.option.general.keybindings.open": "開啟",
   "settings.notyf.updateCider.update-not-available": "沒有可用的更新",
   "settings.notyf.updateCider.update-downloaded": "更新已成功下載，重啟後進行更新",
   "settings.notyf.updateCider.update-error": "更新時，發生錯誤",
@@ -281,6 +287,7 @@
   "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "標準",
   "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "發燒友",
   "settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "空間音訊無法與 CAP 相容，請關閉 CAP 再進行操作。",
+  "settings.option.visual.uiscale": "介面顯示大小",
   "settings.header.visual": "外觀",
   "settings.header.visual.description": "調整 Cider 的外觀",
   "settings.option.visual.windowBackgroundStyle": "視窗背景樣式",
@@ -335,14 +342,18 @@
   "settings.option.lyrics.enableMusixmatchKaraoke": "開啟卡拉OK模式（僅限Musixmatch）",
   "settings.option.lyrics.musixmatchPreferredLanguage": "Musixmatch 歌詞語言偏好",
   "settings.option.lyrics.enableYoutubeLyrics": "播放 MV 時，使用 YouTube 歌詞",
+  "settings.option.lyrics.enableQQLyrics": "開啟 QQ 音樂的歌詞",
   "settings.header.connectivity": "外部連結",
   "settings.header.connectivity.description": "調整 Cider 與外部的連結",
   "settings.option.connectivity.discordRPC": "Discord 狀態",
   "settings.option.connectivity.playbackNotifications": "播放通知",
+  "settings.option.connectivity.discordRPC.clientName": "應用程式名稱",
   "settings.header.connectivity.discordRPC.cider": "顯示為'Cider'",
   "settings.header.connectivity.discordRPC.appleMusic": "顯示為'Apple Music'",
   "settings.option.connectivity.discordRPC.clearOnPause": "暫停時清除 Discord 狀態",
   "settings.option.connectivity.discordRPC.hideButtons": "隱藏 Discord 狀態上的按鈕",
+  "settings.option.connectivity.discordRPC.detailsFormat": "詳細資訊格式",
+  "settings.option.connectivity.discordRPC.stateFormat": "狀態格式",
   "settings.option.connectivity.lastfmScrobble": "Last.fm Scrobbling 記錄",
   "settings.option.connectivity.lastfmScrobble.delay": "Last.fm Scrobble 延遲 (%)",
   "settings.option.connectivity.lastfmScrobble.nowPlaying": "開啟 Last.fm 正在播放",
@@ -366,6 +377,9 @@
   "settings.option.visual.transparent": "透明視窗框架",
   "settings.option.visual.transparent.description": "需主題有支援透明框架，且須重新啟動才會套用。",
   "settings.header.advanced": "進階",
+  "settings.header.connect": "同步",
+  "settings.option.connect.link_account": "開啟與 Cider Connect 同步",
+  "settings.option.connect.link_account.description": "將您的 Discord 帳戶與 Cider Connect 連接後，你可以儲存使用者資料，包括設定、等化器，並最終在完成後儲存更多資料。（正在進行中）",
   "spatial.notTurnedOn": "請先在設定中開啟空間音訊。",
   "spatial.spatialProperties": "空間音訊屬性",
   "spatial.width": "闊度",

src/i18n/zh_TW.json

@@ -151,6 +151,9 @@
   "podcast.episodes": "單集",
   "podcast.playEpisode": "播放單集",
   "podcast.website": "Podcast 網站",
+  "action.edit": "編輯",
+  "action.done": "完成",
+  "action.editTracklist": "編輯歌曲清單",
   "action.addToLibrary": "加入到資料庫",
   "action.addToLibrary.success": "成功加入資料庫",
   "action.addToLibrary.error": "加入資料庫時，發生錯誤",
@@ -215,6 +218,10 @@
   "settings.option.general.resumebehavior.locally.description": "Cider 將還原你在這台電腦上的最後一次操作。",
   "settings.option.general.resumebehavior.history": "歷史",
   "settings.option.general.resumebehavior.history.description": "Cider 將跨裝置將你的整個 Apple Music 歷史記錄中的最後一首歌曲排隊入列。",
+  "settings.option.general.resumetabs": "啟動時打開的選項頁面",
+  "settings.option.general.resumetabs.description": "你可以選擇啟動 Cider 時要預設打開的頁面。",
+  "settings.option.general.resumetabs.dynamic": "自動",
+  "settings.option.general.resumetabs.dynamic.description": "Cider 將自動打開你上次停留的頁面。",
   "settings.option.general.language.main": "語言",
   "settings.option.general.language.fun": "特殊語言",
   "settings.option.general.language.unsorted": "未分類",
@@ -345,8 +352,8 @@
   "settings.option.connectivity.discordRPC.hideButtons": "隱藏 Discord 動態上的按鈕",
   "settings.option.connectivity.discordRPC.detailsFormat": "詳細資訊格式",
   "settings.option.connectivity.discordRPC.stateFormat": "狀態格式",
-  "settings.option.connectivity.lastfmScrobble": "Last.FM Scrobbling 記錄",
+  "settings.option.connectivity.lastfmScrobble": "Last.FM 音樂記錄",
-  "settings.option.connectivity.lastfmScrobble.delay": "Last.FM Scrobble 延遲 (%)",
+  "settings.option.connectivity.lastfmScrobble.delay": "Last.FM 歌曲追蹤延遲 (%)",
   "settings.option.connectivity.lastfmScrobble.nowPlaying": "開啟 Last.FM 正在聆聽",
   "settings.option.connectivity.lastfmScrobble.removeFeatured": "從歌名中移除客串藝人 (Last.FM)",
   "settings.option.connectivity.lastfmScrobble.filterLoop": "不記錄單曲循環 (Last.FM)",

src/main/base/plugins.ts

@@ -26,9 +26,9 @@ export class Plugins {
     }
 
     public static getPluginFromMap(plugin: string): any {
-        if(Plugins.PluginMap[plugin]) {
+        if (Plugins.PluginMap[plugin]) {
             return Plugins.PluginMap[plugin];
-        }else{
+        } else {
             return plugin;
         }
     }

src/renderer/assets/feather/heart-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

src/renderer/index.js

@@ -105,7 +105,7 @@ function fallbackinitMusicKit() {
         })
         setTimeout(() => {
             app.init()
-            if(app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+            if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
                 app.spawnMica()
             }
         }, 1000)
@@ -134,7 +134,7 @@ document.addEventListener('musickitloaded', function () {
             function waitForApp() {
                 if (typeof app.init !== "undefined") {
                     app.init()
-                    if(app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+                    if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
                         app.spawnMica()
                     }
                 }

src/renderer/less/directives.less

@@ -16,6 +16,7 @@
     height: var(--chromeHeight1);
 
     &.chrome-bottom {
+      -webkit-app-region: no-drag;
       height    : var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
       z-index   : 1;
@@ -30,6 +31,7 @@
     .app-playback-controls .actions {
       align-self: center;
     }
+    -webkit-app-region: no-drag;
 
     .playback-button.play,
     .playback-button.pause {
@@ -120,8 +122,9 @@
       width          : 30%;
       justify-content: flex-start;
       align-items    : flex-start;
-
+      -webkit-app-region: no-drag!important;
       .playback-controls {
+        -webkit-app-region: no-drag!important;
         .artwork {
           width     : var(--chromeHeight2);
           height    : var(--chromeHeight2);

src/renderer/less/elements.css

@@ -371,6 +371,12 @@
   filter: contrast(0);
   background-repeat: no-repeat;
 }
+.heart-icon {
+  position: absolute;
+  right: 30em;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 @keyframes load-bar {
   10% {
     box-shadow: inset 0 -4px 0;

src/renderer/less/elements.less

@@ -456,6 +456,13 @@
     background-repeat: no-repeat;
   }
 
+  .heart-icon {
+    position: absolute;
+    right: 30em;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
   /* CSS.gg
   */
   @keyframes load-bar {

src/renderer/main/events.js

@@ -22,7 +22,7 @@ const Events = {
             if (event.keyCode === 82 && event.ctrlKey) {
                 event.preventDefault()
                 bootbox.confirm("Reload Cider?", (res)=>{
-                    if(res) {
+                    if (res) {
                         window.location.reload()
                     }
                 })

src/renderer/main/gamepad.js

@@ -251,9 +251,9 @@ function simulateGamepad () {
 
                 cursorPos[1] -= cursorSpeed
                 // sounds.Hover.play()
-                // if(intTabIndex <= 0) {
+                // if (intTabIndex <= 0) {
                 //     intTabIndex = 0
-                // }else{
+                // } else {
                 //     intTabIndex--
                 // }
                 // $(tabbable[intTabIndex]).focus()
@@ -263,9 +263,9 @@ function simulateGamepad () {
                 e.preventDefault()
 
                 cursorPos[1] += cursorSpeed
-                // if(intTabIndex < tabbable.length) {
+                // if (intTabIndex < tabbable.length) {
                 //     intTabIndex++
-                // }else{
+                // } else {
                 //     intTabIndex = tabbable.length
                 // }
                 // $(tabbable[intTabIndex]).focus()

src/renderer/main/vueapp.js

@@ -235,7 +235,7 @@ const app = new Vue({
     watch: {
         cfg: {
             handler: function (val, oldVal) {
-                console.log(`cfg changed from ${oldVal} to ${val}`);
+                console.debug(`cfg changed from ${oldVal} to ${val}`);
                 ipcRenderer.send("setStore", val);
             },
             deep: true
@@ -255,6 +255,12 @@ const app = new Vue({
             app.resetState()
         }
     },
+    mounted() {
+        window.addEventListener("hashchange", function (event) {
+            let currentPath = window.location.hash.slice(1);
+            console.debug("hashchange", currentPath);
+        }, false)
+    },
     methods: {
         setTimeout(func, time) {
             return setTimeout(func, time);
@@ -269,10 +275,10 @@ const app = new Vue({
                 if (httpRequest.readyState === 4) {
                     if (httpRequest.status === 200) {
                         let response = JSON.parse(httpRequest.responseText);
-                        console.log(response);
+                        console.debug(response);
                         self.copyToClipboard(response.pageUrl)
                     } else {
-                        console.log('There was a problem with the request.');
+                        console.warn('There was a problem with the request.');
                         notyf.error(app.getLz('term.requestError'))
                     }
                 }
@@ -941,7 +947,7 @@ const app = new Vue({
             })
         },
         async setTheme(theme = "", onlyPrefs = false) {
-            console.log(theme)
+            console.debug(theme)
             if (this.cfg.visual.theme == "") {
                 this.cfg.visual.theme = "default.less"
             }
@@ -1122,15 +1128,15 @@ const app = new Vue({
             const cachedTrackMapping = await CiderCache.getCache("library-playlists-tracks")
 
             if (cachedPlaylist) {
-                console.log("using cached playlists")
+                console.debug("using cached playlists")
                 this.playlists.listing = cachedPlaylist
                 self.sortPlaylists()
             } else {
-                console.log("playlist has no cache")
+                console.debug("playlist has no cache")
             }
 
             if (cachedTrackMapping) {
-                console.log("using cached track mapping")
+                console.debug("using cached track mapping")
                 this.playlists.trackMapping = cachedTrackMapping
             }
             if (localOnly) {
@@ -1141,7 +1147,7 @@ const app = new Vue({
             this.library.backgroundNotification.show = true
 
             async function deepScan(parent = "p.playlistsroot") {
-                console.log(`scanning ${parent}`)
+                console.debug(`scanning ${parent}`)
                 const playlistData = await app.mk.api.v3.music(`/v1/me/library/playlist-folders/${parent}/children/`)
                 await asyncForEach(playlistData.data.data, async (playlist) => {
                     playlist.parent = parent
@@ -1260,7 +1266,7 @@ const app = new Vue({
             // this.darwinShare(str)
             // } else {
             notyf.success(app.getLz('term.share.success'))
-            navigator.clipboard.writeText(str).then(r => console.log("Copied to clipboard."))
+            navigator.clipboard.writeText(str).then(r => console.debug("Copied to clipboard."))
             // }
         },
         newPlaylist(name = app.getLz('term.newPlaylist'), tracks = []) {
@@ -1283,7 +1289,7 @@ const app = new Vue({
                 }
             }).then(res => {
                 res = res.data.data[0]
-                console.log(res)
+                console.debug(res)
                 self.appRoute(`playlist_` + res.id);
                 self.showingPlaylist = [];
                 self.getPlaylistFromID(app.page.substring(9), true)
@@ -1318,7 +1324,7 @@ const app = new Vue({
         },
         async showCollection(response, title, type, requestBody = {}) {
             let self = this
-            console.log(response)
+            console.debug(response)
             this.collectionList.requestBody = {}
             this.collectionList.response = response
             this.collectionList.title = title
@@ -1328,7 +1334,7 @@ const app = new Vue({
         },
         async showArtistView(artist, title, view) {
             let response = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artist}/view/${view}?l=${this.mklang}`, {}, { includeResponseMeta: !0 })).data
-            console.log(response)
+            console.debug(response)
             await this.showCollection(response, title, "artists")
         },
         async showRecordLabelView(label, title, view) {
@@ -1368,7 +1374,7 @@ const app = new Vue({
                 includeResponseMeta: !0
             })
 
-            console.log('searchres', response)
+            console.debug('searchres', response)
             let responseFormat = {
                 data: response.data.results[group].data,
                 next: response.data.results[group].next,
@@ -1422,13 +1428,13 @@ const app = new Vue({
             app.mk.api.v3.music(`/v1/me/library/playlists/${id}`, params).then(res => {
                 self.getPlaylistContinuous(res, transient)
             }).catch((e) => {
-                console.log(e);
+                console.debug(e);
                 try {
                     app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/playlists/${id}`, params).then(res => {
                         self.getPlaylistContinuous(res, transient)
                     })
                 } catch (err) {
-                    console.log(err)
+                    console.debug(err)
                 }
             })
 
@@ -1445,7 +1451,7 @@ const app = new Vue({
                 "art[url]": "f",
                 l: this.mklang
             }, { includeResponseMeta: !0 })
-            console.log(artistData.data.data[0])
+            console.debug(artistData.data.data[0])
             this.artistPage.data = artistData.data.data[0]
             this.page = "artist-page"
         },
@@ -1480,12 +1486,12 @@ const app = new Vue({
                 "meta": {}
             }
             if (response.next) {
-                console.log("has next")
+                console.debug("has next")
                 returnData.data.concat(response.data)
                 returnData.meta = response.meta
                 return await this.getRecursive(await response.next())
             } else {
-                console.log("no next")
+                console.debug("no next")
                 returnData.data.concat(response.data)
                 return returnData
             }
@@ -1574,7 +1580,7 @@ const app = new Vue({
             }
             route = route.replace(/#/g, "")
             if (app.cfg.general.resumeTabs.tab == "dynamic") {
-                if (route == "home" || route == "library-songs" || route == "library-albums" || route == "library-artists" || route == "library-videos" || route == "podcasts") {
+                if (route == "home" || route == "listen_now" || route == "browse" || route == "radio" || route == "library-songs" || route == "library-albums" || route == "library-artists" || route == "library-videos" || route == "podcasts") {
                     app.cfg.general.resumeTabs.dynamicData = route
                 } else {
                     app.cfg.general.resumeTabs.dynamicData = "home"
@@ -1625,7 +1631,7 @@ const app = new Vue({
                 window.location.hash = `${kind}/${id}`
                 document.querySelector("#app-content").scrollTop = 0
             } else if (kind == "editorial-elements") {
-                console.log(item)
+                console.debug(item)
                 if (item.relationships?.contents?.data != null && item.relationships?.contents?.data.length > 0) {
                     this.routeView(item.relationships.contents.data[0])
                 } else if (item.attributes?.link?.url != null) {
@@ -1666,28 +1672,16 @@ const app = new Vue({
                     params["meta[albums:tracks]"] = 'popularity'
                     params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
                 }
-
+                if (kind.includes("playlist") || kind.includes("album")){
-                // if (this.cfg.advanced.experiments.includes('inline-playlists')) {
-                if (false) {
-                    let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
-                    if (app.page.includes("playlist") || app.page.includes("album")) {
-                        showModal = false
-                    }
-                    if (showModal) {
-                        app.modals.showPlaylist = true
-                        app.chrome.contentAreaScrolling = false
-                    } else {
                     app.page = (kind) + "_" + (id);
                     window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
-                    }
-                } else {
-                    app.page = (kind) + "_" + (id);
-                    window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
-                }
-
-
                     app.getTypeFromID((kind), (id), (isLibrary), params);
-                // document.querySelector("#app-content").scrollTop = 0
+                } else {
+                    app.page = (kind)
+                    window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
+                }
+
+                // app.getTypeFromID((kind), (id), (isLibrary), params);
             } else {
                 app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
             }
@@ -1753,12 +1747,12 @@ const app = new Vue({
                         try {
                             if (artistQuery.artists.data.length > 0) {
                                 artistId = artistQuery.artists.data[0].id;
-                                console.log(artistId)
+                                console.debug(artistId)
                             }
                         } catch (e) {
                         }
                     }
-                    console.log(artistId);
+                    console.debug(artistId);
                     if (artistId != "")
                         self.appRoute(`artist/${artistId}`)
                     break;
@@ -1790,7 +1784,7 @@ const app = new Vue({
                             })).data.results;
                             if (albumQuery.albums.data.length > 0) {
                                 albumId = albumQuery.albums.data[0].id;
-                                console.log(albumId)
+                                console.debug(albumId)
                             }
                         } catch (e) {
                         }
@@ -1814,7 +1808,7 @@ const app = new Vue({
                             })).data.results;
                             if (labelQuery["record-labels"].data.length > 0) {
                                 labelId = labelQuery["record-labels"].data[0].id;
-                                console.log(labelId)
+                                console.debug(labelId)
                             }
                         } catch (e) {
                         }
@@ -1847,7 +1841,7 @@ const app = new Vue({
             }
         },
         followingArtist(id) {
-            console.log(`check for ${id}`)
+            console.debug(`check for ${id}`)
             return this.cfg.home.followedArtists.includes(id)
         },
         playMediaItem(item) {
@@ -1877,7 +1871,7 @@ const app = new Vue({
             try {
                 a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params, params2);
             } catch (e) {
-                console.log(e);
+                console.debug(e);
                 try {
                     a = await this.mkapi(kind.toString(), !isLibrary, id.toString(), params, params2);
                 } catch (err) {
@@ -2132,7 +2126,7 @@ const app = new Vue({
                     return await this.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${truemethod}/${term.toString()}`, params, params2)
                 }
             } catch (e) {
-                console.log(e)
+                console.debug(e)
                 return await this.mkapi(method, library, term, params, params2, attempts + 1)
             }
         },
@@ -2184,7 +2178,7 @@ const app = new Vue({
                     l: app.mklang,
                 },
                 onProgress: (data) => {
-                    console.log(`${data.total}/${data.response.data.meta.total}`)
+                    console.debug(`${data.total}/${data.response.data.meta.total}`)
                     self.library.backgroundNotification.show = true
                     self.library.backgroundNotification.message = app.getLz('notification.updatingLibrarySongs')
                     self.library.backgroundNotification.total = data.response.data.meta.total
@@ -2200,7 +2194,7 @@ const app = new Vue({
             self.library.backgroundNotification.show = false
             self.searchLibrarySongs()
             CiderCache.putCache(cacheId, library)
-            console.log("Done!")
+            console.debug("Done!")
 
             return
         },
@@ -2251,7 +2245,7 @@ const app = new Vue({
                     app.mk.api.v3.music(`/v1/me/library/albums/`, params).then((response) => {
                         processChunk(response.data)
                     }).catch((error) => {
-                        console.log('safe loading');
+                        console.debug('safe loading');
                         app.mk.api.v3.music(`/v1/me/library/albums/`, safeparams).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
@@ -2265,7 +2259,7 @@ const app = new Vue({
                         app.mk.api.v3.music(downloaded.next, params).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
-                            console.log('safe loading');
+                            console.debug('safe loading');
                             app.mk.api.v3.music(downloaded.next, safeparams).then((response) => {
                                 processChunk(response.data)
                             }).catch((error) => {
@@ -2275,7 +2269,7 @@ const app = new Vue({
                             })
                         })
                     } else {
-                        console.log("Download next", downloaded.next)
+                        console.debug("Download next", downloaded.next)
                     }
                 }
             }
@@ -2292,7 +2286,7 @@ const app = new Vue({
                     return
                 }
                 if (typeof downloaded.next == "undefined") {
-                    console.log("downloaded.next is undefined")
+                    console.debug("downloaded.next is undefined")
                     self.library.albums.listing = library
                     self.library.albums.downloadState = 2
                     self.library.backgroundNotification.show = false
@@ -2300,7 +2294,7 @@ const app = new Vue({
                     self.searchLibraryAlbums(index)
                 }
                 if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
-                    console.log(`downloading next chunk - ${library.length
+                    console.debug(`downloading next chunk - ${library.length
                         } albums so far`)
                     downloadChunk()
                 } else {
@@ -2358,7 +2352,7 @@ const app = new Vue({
                     app.mk.api.v3.music(`/v1/me/library/artists/`, params).then((response) => {
                         processChunk(response.data)
                     }).catch((error) => {
-                        console.log('safe loading');
+                        console.debug('safe loading');
                         app.mk.api.v3.music(`/v1/me/library/artists/`, safeparams).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
@@ -2486,7 +2480,7 @@ const app = new Vue({
                     reload: !0
                 })).data;
                 this.listennow.timestamp = Date.now()
-                console.log(this.listennow)
+                console.debug(this.listennow)
             } catch (e) {
                 console.log(e)
                 this.getListenNow(attempt + 1)
@@ -2514,7 +2508,7 @@ const app = new Vue({
                 });
                 this.browsepage = browse.data.data[0];
                 this.browsepage.timestamp = Date.now()
-                console.log(this.browsepage)
+                console.debug(this.browsepage)
             } catch (e) {
                 console.log(e)
                 this.getBrowsePage(attempt + 1)
@@ -2715,7 +2709,7 @@ const app = new Vue({
                             if (status2 == 200) {
                                 let token = jsonResponse["message"]["body"]["user_token"] ?? '';
                                 if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") {
-                                    console.log('200 token', mode);
+                                    console.debug('200 token', mode);
                                     // token good
                                     app.mxmtoken = token;
 
@@ -2725,7 +2719,7 @@ const app = new Vue({
                                         getMXMTrans(songid, lang, app.mxmtoken);
                                     }
                                 } else {
-                                    console.log('fake 200 token');
+                                    console.debug('fake 200 token');
                                     getToken(mode, track, artist, songid, lang, time)
                                 }
                             } else {
@@ -2760,7 +2754,7 @@ const app = new Vue({
                 req.onload = function () {
                     try {
                         let jsonResponse = JSON.parse(this.responseText);
-                        console.log(jsonResponse);
+                        console.debug(jsonResponse);
                         let status1 = jsonResponse["message"]["header"]["status_code"];
 
                         if (status1 == 200) {
@@ -2824,7 +2818,7 @@ const app = new Vue({
                                             });
                                         app.lyrics = preLrc;
                                     }
-                                    if (lrcfile != null && lrcfile != '' && lang != "disabled") {
+                                    if (lrcfile != null && lrcfile != '') {
                                         // load translation
                                         getMXMTrans(id, lang, token);
                                     } else {
@@ -3146,7 +3140,7 @@ const app = new Vue({
         },
         playMediaItemById(id, kind, isLibrary, raurl = "") {
             let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-            console.log(id, truekind, isLibrary)
+            console.debug(id, truekind, isLibrary)
             try {
                 if (truekind.includes("artist")) {
                     app.mk.setStationQueue({ artist: 'a-' + id }).then(() => {
@@ -3771,7 +3765,7 @@ const app = new Vue({
         volumeUp() {
             if ((app.mk.volume + app.cfg.audio.volumeStep) > app.cfg.audio.maxVolume) {
                 app.mk.volume = app.cfg.audio.maxVolume;
-                console.log('setting max volume')
+                console.debug('setting max volume')
             } else {
                 console.log('volume up')
                 app.mk.volume = ((app.mk.volume * 100) + (app.cfg.audio.volumeStep * 100)) / 100
@@ -3780,7 +3774,7 @@ const app = new Vue({
         volumeDown() {
             if ((app.mk.volume - app.cfg.audio.volumeStep) < 0) {
                 app.mk.volume = 0;
-                console.log('setting volume to 0')
+                console.debug('setting volume to 0')
             } else {
                 console.log('volume down')
                 app.mk.volume = ((app.mk.volume * 100) - (app.cfg.audio.volumeStep * 100)) / 100

src/renderer/main/wsapi_interop.js

@@ -108,11 +108,11 @@ const wsapi = {
         app.mk.isPlaying ? app.mk.pause() : app.mk.play()
     },
     toggleRepeat() {
-        if(MusicKit.getInstance().repeatMode == 0) {
+        if (MusicKit.getInstance().repeatMode == 0) {
             MusicKit.getInstance().repeatMode = 1
-        }else if(MusicKit.getInstance().repeatMode == 1){
+        } else if (MusicKit.getInstance().repeatMode == 1){
             MusicKit.getInstance().repeatMode = 2
-        }else{
+        } else {
             MusicKit.getInstance().repeatMode = 0
         }
     },

src/renderer/style.css

@@ -7936,6 +7936,12 @@ fieldset:disabled .btn {
   filter: contrast(0);
   background-repeat: no-repeat;
 }
+.cd-mediaitem-list-item .heart-icon {
+  position: absolute;
+  right: 30em;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 @keyframes load-bar {
   10% {
     box-shadow: inset 0 -4px 0;

src/renderer/style.less

@@ -1207,6 +1207,14 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
       background-repeat: no-repeat;
       margin-left: 3px;
     }
+
+    .heart-icon {
+      height: 9px;
+      width: 13px;
+      filter: contrast(0);
+      background-repeat: no-repeat;
+      margin-left: 3px;
+    }
   }
 
   .lossless-icon {

src/renderer/todo.js

@@ -133,11 +133,11 @@ app.mkapi("artists", false, "412778295", {
 var library = []
 var downloaded = null;
 function downloadChunk () {
-    if(downloaded == null) {
+    if (downloaded == null) {
         app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{
             processChunk(response)
         })
-    }else{
+    } else {
         downloaded.next("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{
             processChunk(response)
         })

src/renderer/views/components/artist-chip.ejs

@@ -29,7 +29,7 @@
         template: '#artist-chip',
         async mounted() {
             let artistId = this.item.id
-            if(typeof this.item.relationships == "object") {
+            if (typeof this.item.relationships == "object") {
                 artistId = this.item.relationships.catalog.data[0].id
             }
             app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {

src/renderer/views/components/audio-settings.ejs

@@ -54,7 +54,7 @@
                 app.modals.audioSettings = false
             },
             openSpatialAudio() {
-                if(app.cfg.audio.spatial === true && app.cfg.audio.maikiwiAudio.spatial === false) {
+                if (app.cfg.audio.spatial === true && app.cfg.audio.maikiwiAudio.spatial === false) {
                     app.modals.spatialProperties = true
                     app.modals.audioSettings = false
                 } else {

src/renderer/views/components/listitem-horizontal.ejs

@@ -40,7 +40,7 @@
             this.itemPages = app.arrayToChunk(this.items, 4);
             try{
             this.simplifiedParent = JSON.stringify(this.items.map ( function(x){return x.attributes.playParams}));
-            console.log("simplifiedParent: " + this.simplifiedParent);
+            console.debug("simplifiedParent: " + this.simplifiedParent);
             }
             catch (e){}
             

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

@@ -115,7 +115,7 @@
         },
         methods: {
             seekTo(startTime) {
-                if(startTime != 9999999) this.app.seekTo(startTime, false);
+                if (startTime != 9999999) this.app.seekTo(startTime, false);
             },
             getActiveLyric() {
                 const delayfix = 0.1
@@ -125,7 +125,7 @@
                         if (app.currentLyricsLine != i) {
                             app.currentLyricsLine = i;
                             if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
-                               if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
+                               if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
                                 this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
                                 if (this.checkIfScrollIsStatic) {
                                     let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)

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

@@ -76,9 +76,9 @@
                 }, event)
             },
             getVideoPriority() {
-                if(app.cfg.visual.animated_artwork == "always") {
+                if (app.cfg.visual.animated_artwork == "always") {
                     return true;
-                }else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
+                } else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
                     return true
                 } else if (app.cfg.visual.animated_artwork == "disabled") {
                     return false

src/renderer/views/components/mediaitem-list-item.ejs

@@ -65,6 +65,9 @@
                     </template>
                 </div>
             </div>
+            <div class="heart-icon" v-if="isLoved">
+                <div class="svg-icon" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}"></div>
+            </div>
             <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="route()">
                 <div class="metainfo">
@@ -98,7 +101,8 @@
                 displayDuration: true,
                 addClasses: {},
                 itemId: 0,
-                isLibrary: false
+                isLibrary: false,
+                isLoved: null
             }
         },
         props: {
@@ -121,6 +125,9 @@
             } else {
                 this.itemId = this.item.id;
             }
+            if (this.item.attributes.playParams) {
+                this.getHeartStatus();
+            }
             let duration = this.item.attributes.durationInMillis ?? 0
             if (duration == 0 || !this.showDuration) {
                 this.displayDuration = false
@@ -145,7 +152,7 @@
             },
             getClasses() {
                 this.addClasses = {}
-                if(typeof this.item.attributes.playParams == "undefined") {
+                if (typeof this.item.attributes.playParams == "undefined") {
                     this.addClasses["disabled"] = true
                 }
                 if (this.classList) {
@@ -178,7 +185,7 @@
                     } else {
                         return this.item.attributes.playParams.kind
                     }
-                }else{
+                } else {
                     return this.item.type
                 }
             },
@@ -323,6 +330,7 @@
                                 "hidden": false,
                                 "disabled": true,
                                 "action": function () {
+                                    self.isLoved = true
                                     app.love(self.item)
                                 }
                             },
@@ -333,6 +341,7 @@
                                 "name": this.app.getLz('action.unlove'),
                                 "hidden": true,
                                 "action": function () {
+                                    self.isLoved = false
                                     app.unlove(self.item)
                                 }
                             },
@@ -499,6 +508,19 @@
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
             },
+            async getHeartStatus() {
+                try {
+                    await app.getRating(this.item).then(res => {
+                        if (res == 1) {
+                            this.isLoved = true
+                        } else {
+                            this.isLoved = false
+                        }
+                    })
+                } catch (err) {
+                    console.log(err)
+                }
+            },
             addToLibrary() {
                 let item = this.item
                 if (item.attributes.playParams.id) {

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

@@ -27,7 +27,7 @@
                 <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
                     {{ item.attributes.name ?? '' }}
                 </div>
-                <div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
+                <div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if (item.attributes.artistName)app.searchAndNavigate(item,'artist')">
                     {{ item.attributes.artistName ?? '' }}
                 </div>
 

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

@@ -93,12 +93,12 @@
         },
         async mounted() {
             await this.getBadges()
-            if(typeof this.item.attributes.playParams == "object") {
+            if (typeof this.item.attributes.playParams == "object") {
-                if(this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1 || this.item.attributes.playParams.streamingKind == 2)) {
+                if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1 || this.item.attributes.playParams.streamingKind == 2)) {
                     this.unavailable = true
                 }
-            }else{
+            } else {
-                if(this.item.type == "music-movies" || this.item.type == "tv-episodes") {
+                if (this.item.type == "music-movies" || this.item.type == "tv-episodes") {
                     this.unavailable = true
                 }
             }
@@ -116,7 +116,7 @@
                 }
             },
             getSubtitle() {
-                if(this.kind == 'card') {
+                if (this.kind == 'card') {
                     try {
                         if (typeof this.item.attributes.artistNames != "undefined") {
                             return this.item.attributes.artistNames
@@ -130,7 +130,7 @@
                     }catch(e) {
                         return ''
                     }
-                }else {
+                } else {
                     if (typeof this.item.attributes.artistName != "undefined") {
                         return this.item.attributes.artistName
                     } else {
@@ -139,7 +139,7 @@
                 }
             },
             getSubtitleNavigation() {
-                if(this.kind == 'card') {
+                if (this.kind == 'card') {
                     try {
                         if (typeof this.item.attributes.artistNames != "undefined") {
                             return app.routeView(this.item)
@@ -153,7 +153,7 @@
                     }catch(e) {
                         return app.routeView(this.item)
                     }
-                }else {
+                } else {
                     if (typeof this.item.attributes.artistName != "undefined") {
                         return app.searchAndNavigate(this.item,'artist')
                     } else {
@@ -224,7 +224,7 @@
             },
             getArtworkUrl(size = -1, includeUrl = false) {
                 let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
-                if(size != -1) {
+                if (size != -1) {
                     artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', ((size === 900) ? "sr" : "cc"))
                 }
                 switch (this.kind) {
@@ -232,9 +232,9 @@
                         artwork = this.item.attributes.editorialArtwork?.subscriptionHero?.url ?? (this.item.attributes.artwork?.url ?? (this.item.relationships?.contents?.data[0]?.attributes?.editorialArtwork?.subscriptionHero?.url ?? ''))
                         break;
                 }
-                if(!includeUrl) {
+                if (!includeUrl) {
                     return artwork
-                }else{
+                } else {
                     return `url("${artwork}")`
                 }
             },
@@ -442,7 +442,7 @@
                                         if (self.item.relationships.catalog){
                                             app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
                                         }
-                                    }else {
+                                    } else {
                                     self.app.copyToClipboard(self.item.attributes.url)}
                                 }
                             },
@@ -454,7 +454,7 @@
                                         if (self.item.relationships.catalog){
                                             app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.songLinkShare((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
                                         }
-                                    }else {
+                                    } else {
                                     self.app.songLinkShare(self.item.attributes.url)}
                                 }
                             }
@@ -471,10 +471,10 @@
 
                 try {
                     await this.isInLibrary().then((_) => {
-                        if(self.addedToLibrary) {
+                        if (self.addedToLibrary) {
                             menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
                             menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
-                        }else{
+                        } else {
                             menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
                         }
                     })
@@ -530,7 +530,7 @@
                         }
                     }
                 }
-                if(self.app.cfg.home.followedArtists.includes(this.item.id)) {
+                if (self.app.cfg.home.followedArtists.includes(this.item.id)) {
                     followAction = "unfollow"
                 }
                 app.showMenuPanel({

src/renderer/views/components/menu-panel.ejs

@@ -54,7 +54,6 @@
             }
         },
         mounted() {
-            console.log("MOUNTED")
             if (this.event) {
                 this.position = [this.event.clientX, this.event.clientY];
             }
@@ -81,7 +80,6 @@
             },
             getStyle() {
                 let style = {}
-                console.debug(this.$refs.menubody)
                 this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
                 if (this.event) {
                     style["position"] = "absolute";

src/renderer/views/components/queue.ejs

@@ -70,8 +70,8 @@
                 this.history = history.data.data
             },
             select(e, position) {
-                if(e.ctrlKey || e.shiftKey) {
+                if (e.ctrlKey || e.shiftKey) {
-                    if(this.selectedItems.indexOf(position) == -1) {
+                    if (this.selectedItems.indexOf(position) == -1) {
                         this.selectedItems.push(position)
                     } else {
                         this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
@@ -83,7 +83,7 @@
             queueContext(event, item, position) {
                 let self = this
                 let useMenu = "single"
-                if(this.selectedItems.length > 1) {
+                if (this.selectedItems.length > 1) {
                     useMenu = "multiple"
                 }
                 let menus = {

src/renderer/views/components/share-sheet.ejs

@@ -63,7 +63,7 @@
         },
         methods: {
             playlistSelect(playlist) {
-                if(playlist.type != "library-playlist-folders") {
+                if (playlist.type != "library-playlist-folders") {
                     this.addToPlaylist(playlist.id)
                 }
             },

src/renderer/views/components/spatial-properties.ejs

@@ -294,7 +294,7 @@
             this.room_materials = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.room_materials))
             this.audio_position = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.audio_position))
             this.listener_position = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.listener_position))
-            if(typeof this.app.mk.nowPlayingItem != "undefined") {
+            if (typeof this.app.mk.nowPlayingItem != "undefined") {
                 this.setRoom()
             }
             this.ready = true
@@ -320,7 +320,7 @@
             },
             objectContainerStyle() {
                 let scale = 1
-                if(this.room_dimensions.width * this.visualMultiplier > 300) {
+                if (this.room_dimensions.width * this.visualMultiplier > 300) {
                     scale = 300 / (this.room_dimensions.width * this.visualMultiplier)
                 }
                 let style = {
@@ -346,7 +346,7 @@
                 window.CiderAudio.audioNodes.spatialNode.setRoomProperties(this.room_dimensions, this.room_materials);
                 CiderAudio.audioNodes.spatialInput.setPosition(...this.audio_position)
                 CiderAudio.audioNodes.spatialNode.setListenerPosition(...this.listener_position)
-                if(!this.app.cfg.audio.normalization) {
+                if (!this.app.cfg.audio.normalization) {
                     window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
                 }
             }

src/renderer/views/pages/artist.ejs

@@ -172,7 +172,7 @@
                         }
                     }
                 }
-                if(this.app.cfg.home.followedArtists.includes(self.data.id)) {
+                if (this.app.cfg.home.followedArtists.includes(self.data.id)) {
                     followAction = "unfollow"
                 }
                 app.showMenuPanel({

src/renderer/views/pages/plugins-github.ejs

@@ -132,9 +132,9 @@
                                 self.themes = []
                                 notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
                                 bootbox.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
-                                    if(ok) {
+                                    if (ok) {
                                         ipcRenderer.invoke("relaunchApp")
-                                    }else{
+                                    } else {
                                         return
                                     }
                                 })
@@ -154,9 +154,9 @@
                             if (arg.success) {
                                 self.themes = ipcRenderer.sendSync("get-themes")
                                 bootbox.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
-                                    if(ok) {
+                                    if (ok) {
                                         ipcRenderer.invoke("relaunchApp")
-                                    }else{
+                                    } else {
                                         return
                                     }
                                 })

src/renderer/views/pages/podcasts.ejs

@@ -187,7 +187,7 @@
             },
             searchPodcasts() {
                 let self = this
-                if(this.search.term == "") {
+                if (this.search.term == "") {
                     return
                 }
                 app.mk.api.v3.podcasts("/v1/catalog/us/search", {term: this.search.term, types: ["podcasts"], limit: 25}).then(response => {
@@ -227,7 +227,7 @@
             async getNextEpisodes(next, podcastId) {
 
                 let podcastShow = await app.mk.api.v3.podcasts(next)
-                if(podcastId != this.podcastSelected.id) {
+                if (podcastId != this.podcastSelected.id) {
                     return
                 }
                 podcastShow.data.data.forEach(ep => {

src/renderer/views/pages/settings.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-settings">
     <div class="content-inner settings-page">
-        <b-tabs pills fill content-class="mt-3">
+        <b-tabs pills fill content-class="mt-3" v-model="tabIndex">
             <b-tab :title="$root.getLz('settings.header.general')" active>
                 <div class="md-option-container">
                     <!-- General Settings -->
@@ -90,6 +90,9 @@
                                     <select class="md-select" style="width:180px;"
                                             v-model="$root.cfg.general.resumeTabs.tab">
                                         <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>
@@ -1522,10 +1525,28 @@
         data: function () {
             return {
                 app: this.$root,
-				themes: ipcRenderer.sendSync("get-themes")
+                themes: ipcRenderer.sendSync("get-themes"),
+                tabIndex: 0,
+                canChangeHash: false
+            }
+        }, watch: {
+            tabIndex: function (val) {
+                if (this.canChangeHash) {
+                    window.location.hash = `#settings/${val}`
+                }
             }
         },
         mounted: function () {
+            this.$nextTick(function () {
+                if (window.location.hash.split("/").length > 1) {
+                    this.tabIndex = parseInt(window.location.hash.split("/")[1])
+                    console.debug("tabIndex", this.tabIndex)
+                    this.canChangeHash = true
+                } else {
+                    this.canChangeHash = true
+                }
+            })
+
             if (app.cfg.lastfm.enabled) {
                 const element = document.getElementById('lfmConnect');
                 if (element) {

src/web-remote/views/components/mediaitem-artwork.ejs

@@ -90,7 +90,7 @@
                 return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"
             }
             height = parseInt(height * window.devicePixelRatio)
-            if(width) {
+            if (width) {
                 width = parseInt(width * window.devicePixelRatio)
             }
             let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;

src/web-remote/views/components/mediaitem-square.ejs

@@ -86,14 +86,14 @@
 
                 if (luma > 140) {
                     return "#aaaaaa"
-                }else{
+                } else {
                     return color
                 }
 
 
             },
             getSubtitle() {
-                if(this.kind == 'card') {
+                if (this.kind == 'card') {
                     try {
                         if (typeof this.item.attributes.artistNames != "undefined") {
                             return this.item.attributes.artistNames
@@ -107,7 +107,7 @@
                     }catch(e) {
                         return ''
                     }
-                }else {
+                } else {
                     if (typeof this.item.attributes.artistName != "undefined") {
                         return this.item.attributes.artistName
                     } else {
@@ -116,7 +116,7 @@
                 }
             },
             getSubtitleNavigation() {
-                if(this.kind == 'card') {
+                if (this.kind == 'card') {
                     try {
                         if (typeof this.item.attributes.artistNames != "undefined") {
                             return app.routeView(this.item)
@@ -130,7 +130,7 @@
                     }catch(e) {
                         return app.routeView(this.item)
                     }
-                }else {
+                } else {
                     if (typeof this.item.attributes.artistName != "undefined") {
                         return app.searchAndNavigate(this.item,'artist')
                     } else {
@@ -200,7 +200,7 @@
             },
             getArtworkUrl(size = -1, includeUrl = false) {
                 let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
-                if(size != -1) {
+                if (size != -1) {
                     artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', ((size === 900) ? "sr" : "cc"))
                 }
                 switch (this.kind) {
@@ -208,9 +208,9 @@
                         artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
                         break;
                 }
-                if(!includeUrl) {
+                if (!includeUrl) {
                     return artwork
-                }else{
+                } else {
                     return `url("${artwork}")`
                 }
             },
@@ -423,10 +423,10 @@
 
                 try {
                     await this.isInLibrary().then((_) => {
-                        if(self.addedToLibrary) {
+                        if (self.addedToLibrary) {
                             menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
                             menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
-                        }else{
+                        } else {
                             menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
                         }
                     })