Merge branch 'main' into paginate-all-the-things

src/main/base/browserwindow.ts

@@ -373,7 +373,8 @@ export class BrowserWindow {
      * @yields {object} Electron browser window
      */
     async createWindow(): Promise<Electron.BrowserWindow> {
-        this.clientPort = await getPort({ port: 9000 });
+        const envPort = process.env?.CIDER_PORT || '9000'
+        this.clientPort = await getPort({ port: parseInt(envPort, 10) || 9000 });
         BrowserWindow.verifyFiles();
         this.StartWatcher(utils.getPath('themes'));
 

src/main/base/plugins.ts

@@ -16,10 +16,10 @@ import {utils} from './utils';
  * @see {@link https://github.com/ciderapp/Cider/wiki/Plugins|Documentation}
  */
 export class Plugins {
+    private static PluginMap: any = {};
     private basePluginsPath = path.join(__dirname, '../plugins');
     private userPluginsPath = path.join(electron.app.getPath('userData'), 'Plugins');
     private readonly pluginsList: any = {};
-    private static PluginMap: any = {};
 
     constructor() {
         this.pluginsList = this.getPlugins();
@@ -104,9 +104,9 @@ export class Plugins {
     public callPlugins(event: string, ...args: any[]) {
         for (const plugin in this.pluginsList) {
             if (this.pluginsList[plugin][event]) {
-                try{
+                try {
                     this.pluginsList[plugin][event](...args);
-                }catch(e) {
+                } catch (e) {
                     console.error(`[${plugin}] An error was encountered: ${e}`);
                     console.error(e)
                 }

src/main/base/utils.ts

@@ -26,6 +26,9 @@ export class utils {
         },
         previous: () => {
             bw.win.webContents.executeJavaScript("MusicKitInterop.previous()")
+        },
+        seek: (seconds: number) => {
+            bw.win.webContents.executeJavaScript(`MusicKit.getInstance().seekToTime(${seconds})`)
         }
     }
     /**

src/main/index.ts

@@ -76,10 +76,6 @@ ipcMain.on("nowPlayingItemDidChange", (_event, attributes) => {
     CiderPlug.callPlugins("onNowPlayingItemDidChange", attributes);
 });
 
-ipcMain.on("nowPlayingItemDidChangeLastFM", (_event, attributes) => {
-    CiderPlug.callPlugin("lastfm.js", "nowPlayingItemDidChangeLastFM", attributes);
-})
-
 app.on("before-quit", () => {
     CiderPlug.callPlugins("onBeforeQuit");
     console.warn(`${app.getName()} exited.`);

src/main/plugins/mpris.ts

@@ -6,7 +6,10 @@ export default class mpris {
      * Private variables for interaction in plugins
      */
     private static utils: any;
-
+    /**
+     * MPRIS Service
+     */
+    private static player: Player.Player;
     /**
      * Base Plugin Details (Eventually implemented into a GUI in settings)
      */
@@ -15,30 +18,17 @@ export default class mpris {
     public version: string = '1.0.0';
     public author: string = 'Core';
 
-    /**
-     * MPRIS Service
-     */
-    private static player: Player.Player;
-    private static mprisEvents: Object = {
-        "playpause": "playPause",
-        "play": "play",
-        "pause": "pause",
-        "next": "next",
-        "previous": "previous",
-    }
-
     /*******************************************************************************************
      * Private Methods
      * ****************************************************************************************/
 
     /**
-     * Runs a media event
+     * Runs on plugin load (Currently run on application start)
-     * @param type - pausePlay, next, previous
-     * @private
      */
-    private static runMediaEvent(type: string) {
+    constructor(utils: any) {
-        // console.debug(`[Plugin][${this.name}] ${type}.`);
+        mpris.utils = utils
-        mpris.utils.getWindow().webContents.executeJavaScript(`MusicKitInterop.${type}()`).catch(console.error)
+
+        console.debug(`[Plugin][${mpris.name}] Loading Complete.`);
     }
 
     /**
@@ -54,7 +44,6 @@ export default class mpris {
         }
     }
 
-
     /**
      * Connects to MPRIS Service
      */
@@ -63,29 +52,49 @@ export default class mpris {
         const player = Player({
             name: 'cider',
             identity: 'Cider',
-            supportedUriSchemes: [],
-            supportedMimeTypes: [],
             supportedInterfaces: ['player']
         });
 
-        console.debug(`[Plugin][${mpris.name}] Successfully connected.`);
+        console.debug(`[${mpris.name}:connect] Successfully connected.`);
 
-        const pos_atr = {durationInMillis: 0};
+        const renderer = mpris.utils.getWindow().webContents
-        player.getPosition = function () {
+        const loopType: { [key: string]: number; } = {
-            const durationInMicro = pos_atr.durationInMillis * 1000;
+            'none': 0,
-            const percentage = parseFloat("0") || 0;
+            'track': 1,
-            return durationInMicro * percentage;
+            'playlist': 2,
         }
 
-        for (const [key, value] of Object.entries(mpris.mprisEvents)) {
+        player.on('next', () => mpris.utils.playback.next())
-            player.on(key, function () {
+        player.on('previous', () => mpris.utils.playback.previous())
-                mpris.runMediaEvent(value)
+        player.on('playpause', () => mpris.utils.playback.playPause())
-            });
+        player.on('play', () => mpris.utils.playback.play())
-        }
+        player.on('pause', () => mpris.utils.playback.pause())
+        player.on('quit', () => mpris.utils.getApp().exit())
+        player.on('position', (args: { position: any; }) => mpris.utils.playback.seek(args.position / 1000 / 1000))
+        player.on('loopStatus', (status: string) => renderer.executeJavaScript(`app.mk.repeatMode = ${loopType[status.toLowerCase()]}`))
+        player.on('shuffle', () => renderer.executeJavaScript('app.mk.shuffleMode = (app.mk.shuffleMode === 0) ? 1 : 0'))
 
-        player.on('quit', function () {
+        mpris.utils.getIPCMain().on('mpris:playbackTimeDidChange', (event: any, time: number) => {
-            process.exit();
+            player.getPosition = () => time;
-        });
+        })
+
+        mpris.utils.getIPCMain().on('repeatModeDidChange', (_e: any, mode: number) => {
+            switch (mode) {
+                case 0:
+                    player.loopStatus = Player.LOOP_STATUS_NONE;
+                    break;
+                case 1:
+                    player.loopStatus = Player.LOOP_STATUS_TRACK;
+                    break;
+                case 2:
+                    player.loopStatus = Player.LOOP_STATUS_PLAYLIST;
+                    break;
+            }
+        })
+
+        mpris.utils.getIPCMain().on('shuffleModeDidChange', (_e: any, mode: number) => {
+            player.shuffle = mode === 1
+        })
 
         mpris.player = player;
     }
@@ -93,9 +102,9 @@ export default class mpris {
     /**
      * Update M.P.R.I.S Player Attributes
      */
-    private static updatePlayer(attributes: any) {
+    private static updateMetaData(attributes: any) {
 
-        const MetaData = {
+        mpris.player.metadata = {
             'mpris:trackid': mpris.player.objectPath(`track/${attributes.playParams.id.replace(/[.]+/g, "")}`),
             'mpris:length': attributes.durationInMillis * 1000, // In microseconds
             'mpris:artUrl': (attributes.artwork.url.replace('/{w}x{h}bb', '/512x512bb')).replace('/2000x2000bb', '/35x35bb'),
@@ -103,33 +112,12 @@ export default class mpris {
             'xesam:album': `${attributes.albumName}`,
             'xesam:artist': [`${attributes.artistName}`],
             'xesam:genre': attributes.genreNames
+        };
     }
 
-        if (mpris.player.metadata["mpris:trackid"] === MetaData["mpris:trackid"]) {
+    /*******************************************************************************************
-            return
+     * Public Methods
-        }
+     * ****************************************************************************************/
-
-        mpris.player.metadata = MetaData;
-    }
-
-    /**
-     * Update M.P.R.I.S Player State
-     * @private
-     * @param attributes
-     */
-    private static updatePlayerState(attributes: any) {
-        switch (attributes.status) {
-            case true: // Playing
-                mpris.player.playbackStatus = Player.PLAYBACK_STATUS_PLAYING;
-                break;
-            case false: // Paused
-                mpris.player.playbackStatus = Player.PLAYBACK_STATUS_PAUSED;
-                break;
-            default:
-                mpris.player.playbackStatus = Player.PLAYBACK_STATUS_STOPPED;
-                break
-        }
-    }
 
     /**
      * Clear state
@@ -143,26 +131,12 @@ export default class mpris {
         mpris.player.playbackStatus = Player.PLAYBACK_STATUS_STOPPED;
     }
 
-
-    /*******************************************************************************************
-     * Public Methods
-     * ****************************************************************************************/
-
-    /**
-     * Runs on plugin load (Currently run on application start)
-     */
-    constructor(utils: any) {
-        mpris.utils = utils
-
-        console.debug(`[Plugin][${mpris.name}] Loading Complete.`);
-    }
-
     /**
      * Runs on app ready
      */
     @mpris.linuxOnly
     onReady(_: any): void {
-        console.debug(`[Plugin][${mpris.name}] Ready.`);
+        console.debug(`[${mpris.name}:onReady] Ready.`);
     }
 
     /**
@@ -187,9 +161,8 @@ export default class mpris {
      * @param attributes Music Attributes (attributes.status = current state)
      */
     @mpris.linuxOnly
-    onPlaybackStateDidChange(attributes: object): void {
+    onPlaybackStateDidChange(attributes: any): void {
-        // console.debug(`[Plugin][${mpris.name}] onPlaybackStateDidChange.`);
+        mpris.player.playbackStatus = attributes?.status ? Player.PLAYBACK_STATUS_PLAYING : Player.PLAYBACK_STATUS_PAUSED
-        mpris.updatePlayerState(attributes)
     }
 
     /**
@@ -198,8 +171,7 @@ export default class mpris {
      */
     @mpris.linuxOnly
     onNowPlayingItemDidChange(attributes: object): void {
-        // console.debug(`[Plugin][${mpris.name}] onMetadataDidChange.`);
+        mpris.updateMetaData(attributes);
-        mpris.updatePlayer(attributes);
     }
 
 }

src/preload/cider-preload.js

@@ -20,6 +20,10 @@ const MusicKitInterop = {
 		});
 		/** wsapi */
 
+		MusicKit.getInstance().addEventListener(MusicKit.Events.playbackTimeDidChange, () => {
+			ipcRenderer.send('mpris:playbackTimeDidChange', (MusicKit.getInstance()?.currentPlaybackTime * 1000 * 1000 ) ?? 0);
+		})
+
 		MusicKit.getInstance().addEventListener(MusicKit.Events.nowPlayingItemDidChange, async () => {
 			console.debug('[cider:preload] nowPlayingItemDidChange')
 			const attributes = MusicKitInterop.getAttributes()
@@ -38,11 +42,19 @@ const MusicKitInterop = {
 
 		MusicKit.getInstance().addEventListener(MusicKit.Events.authorizationStatusDidChange, () => {
 			global.ipcRenderer.send('authorizationStatusDidChange', MusicKit.getInstance().authorizationStatus)
-		})
+		});
 
 		MusicKit.getInstance().addEventListener(MusicKit.Events.mediaPlaybackError, (e) => {
 			console.warn(`[cider:preload] mediaPlaybackError] ${e}`);
-		})
+		});
+
+		MusicKit.getInstance().addEventListener(MusicKit.Events.shuffleModeDidChange, () => {
+			global.ipcRenderer.send('shuffleModeDidChange', MusicKit.getInstance().shuffleMode)
+		});
+
+		MusicKit.getInstance().addEventListener(MusicKit.Events.repeatModeDidChange, () => {
+			global.ipcRenderer.send('repeatModeDidChange', MusicKit.getInstance().repeatMode)
+		});
 	},
 
 	sleep(ms) {
@@ -79,6 +91,7 @@ const MusicKitInterop = {
 			? remainingTimeExport * 1000
 			: 0;
 		attributes.durationInMillis = attributes?.durationInMillis ?? 0;
+		attributes.currentPlaybackTime = mk?.currentPlaybackTime ?? 0;
 		attributes.currentPlaybackProgress = currentPlaybackProgress ?? 0;
 		attributes.startTime = Date.now();
 		attributes.endTime = Math.round(

src/renderer/less/directives.less

@@ -35,6 +35,11 @@
             margin          : 0px;
             height          : 100%;
             position        : relative;
+            white-space: nowrap;
+
+            ._svg-icon {
+              flex: 0 0 auto;
+            }
 
             &:before {
               --dist          : 1px;

src/renderer/main/vueapp.js

@@ -1226,7 +1226,7 @@ const app = new Vue({
             } else if (this.cfg.visual.directives[directive]) {
                 return this.cfg.visual.directives[directive]
             } else {
-                return ""
+                return false
             }
         },
         unauthorize() {
@@ -2017,7 +2017,7 @@ const app = new Vue({
                 });
                 window.location.hash = `${kind}/${id}`
                 document.querySelector("#app-content").scrollTop = 0
-            } else if (kind = "social-profiles") {
+            } else if (kind.toString().includes("social-profiles")) {
                 app.page = (kind) + "_" + (id);
                 app.mk.api.v3.music(
                     `/v1/social/${app.mk.storefrontId}/social-profiles/${id}`,
@@ -3196,45 +3196,40 @@ const app = new Vue({
             function getMXMTrans(lang, vanity_id) {
                 try { 
                     if (lang != "disabled" && vanity_id != '') { // Mode 2 -> Trans
-                        fetch('https://www.musixmatch.com/lyrics/' + vanity_id +'/translation/' + lang, {
+                        let url = "https://api.cider.sh/v1/lyrics?vanityID=" + vanity_id +'&source=mxm&lang=' + lang;
-                            method: 'GET',
+                        let req = new XMLHttpRequest();
-                            headers: {
+                        req.overrideMimeType("application/json");
-                                'Host': 'musixmatch.com',
+                        req.onload = function () { 
-                                'User-Agent': "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36",
+                            if (req.status == 200) { // If it's not 200, 237890127389012 things could go wrong and I don't really care what those things are.
-                                'authority': "www.musixmatch.com"
+                                let jsonResponse = JSON.parse(this.responseText);     
-                            },
-                        })
-                            .then(async (res) => {
-                                if (res.status != 200) {return}
-                                let html = document.createElement('html'); html.innerHTML = await res.text()
-                                let lyric_isolated = html.querySelector("#site > div > div > div > main > div > div > div.mxm-track-lyrics-container > div.container > div > div > div > div.col-sm-12.col-md-10.col-ml-9.col-lg-9 > div.mxm-lyrics.translated > div.row > div.col-xs-12.col-sm-12.col-md-12.col-ml-12.col-lg-12")
-                                let raw_lines = lyric_isolated.getElementsByClassName("col-xs-6 col-sm-6 col-md-6 col-ml-6 col-lg-6")
                                 let applied = 0;
-                                for (let i = 1; applied < app.lyrics.length; i+=2) { // Start on odd elements because even ones are original.
+                                for (let i = 0; applied < app.lyrics.length; i++) { 
-                                    if (raw_lines[i].childNodes[0].childNodes[0].textContent.trim() == "") {i+=2;}
+                                    if (app.lyrics[applied].line.trim() === "") {applied+=1;}
-                                    if (app.lyrics[applied].line.trim() == "") {applied+=1;}
+                                    if (app.lyrics[applied].line.trim() === jsonResponse[i]) {                           
-                                    if (app.lyrics[applied].line.trim() === raw_lines[i].childNodes[0].childNodes[0].textContent.trim().replace('′', "'")) {                           
                                         // Do Nothing
                                         applied +=1;
                                     }
                                     else  {                
                                         if (app.lyrics[applied].line === "lrcInstrumental") { 
-                                            if (app.lyrics[applied+1].line.trim() === raw_lines[i].childNodes[0].childNodes[0].textContent.trim()) {                           
+                                            if (app.lyrics[applied+1].line.trim() === jsonResponse[i]) {                           
                                                 // Do Nothing
                                                 applied +=2;
                                             }
                                             else {
-                                                app.lyrics[applied+1].translation = raw_lines[i].childNodes[0].childNodes[0].textContent.trim();  
+                                                app.lyrics[applied+1].translation = jsonResponse[i];  
                                                 applied +=2;
                                                 }                      
                                         }      
                                         else {
-                                            app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent.trim();       
+                                            app.lyrics[applied].translation = jsonResponse[i];       
                                             applied +=1;
                                         }
                                     } 
                                 }
-                            })
+                            }
+                        }
+                        req.open('POST', url, true);
+                        req.send();
                     }
                 } catch (e) {console.debug("Error while parsing MXM Trans: " + e)}
 

src/renderer/style.css

@@ -3160,6 +3160,11 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
   flex: 0 0 auto;
   width: auto;
 }
+@media only screen and (min-width: 1133px) and (max-width: 1233px) {
+  .about-page .row .col-auto {
+    display: none !important;
+  }
+}
 .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -6007,6 +6012,11 @@ fieldset:disabled .btn {
   flex: 0 0 auto;
   width: auto;
 }
+@media only screen and (min-width: 1133px) and (max-width: 1233px) {
+  .about-page .row .col-auto {
+    display: none !important;
+  }
+}
 .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
@@ -11324,11 +11334,11 @@ fieldset:disabled .btn {
 }
 /* mediaitem-square */
 .cd-mediaitem-square {
-  --transitionDuration: 0.25s;
+  --transitionDuration: 0.5s;
   --scaleRate: 1.25;
   --scaleRateArtwork: 1;
-  width: 200px;
+  width: calc(160px * var(--windowRelativeScale));
-  height: 200px;
+  height: calc(200px * var(--windowRelativeScale));
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -11336,14 +11346,13 @@ fieldset:disabled .btn {
   justify-content: center;
   align-items: center;
   border-radius: 6px;
-  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square .artwork-container {
   position: relative;
 }
 .cd-mediaitem-square .artwork-container .artwork {
-  height: 150px;
+  height: calc(140px * var(--windowRelativeScale));
-  width: 150px;
+  width: calc(140px * var(--windowRelativeScale));
   background: blue;
   border-radius: var(--mediaItemRadius);
   background: var(--artwork);
@@ -11351,7 +11360,6 @@ fieldset:disabled .btn {
   flex: 0 0 auto;
   margin: 6px;
   cursor: pointer;
-  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork {
   box-shadow: unset;
@@ -11411,30 +11419,6 @@ fieldset:disabled .btn {
 .cd-mediaitem-square .artwork-container:hover > .menu-btn {
   opacity: 1;
 }
-@media (min-width: 1460px) {
-  .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
-    --scaleRate: 1.1;
-    --scaleRateArtwork: 0.9;
-    width: calc(200px * var(--scaleRate));
-    height: calc(200px * var(--scaleRate));
-  }
-  .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
-    width: calc(190px * var(--scaleRateArtwork));
-    height: calc(190px * var(--scaleRateArtwork));
-  }
-}
-@media (min-width: 1550px) {
-  .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
-    --scaleRate: 1.25;
-    --scaleRateArtwork: 1;
-    width: calc(200px * var(--scaleRate));
-    height: calc(200px * var(--scaleRate));
-  }
-  .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
-    width: calc(190px * var(--scaleRateArtwork));
-    height: calc(190px * var(--scaleRateArtwork));
-  }
-}
 .cd-mediaitem-square .info-rect {
   width: 90%;
   height: 100%;
@@ -11478,10 +11462,12 @@ fieldset:disabled .btn {
 .cd-mediaitem-square.mediaitem-video {
   height: 200px;
   width: 240px;
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square.mediaitem-video .artwork {
   height: 120px;
   width: 212px;
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 @media (min-width: 1460px) {
   .cd-mediaitem-square.mediaitem-video:not(.noscale) {
@@ -11510,10 +11496,12 @@ fieldset:disabled .btn {
 .cd-mediaitem-square.mediaitem-brick {
   height: 200px;
   width: 240px;
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square.mediaitem-brick .artwork {
   height: 123px;
   width: 220px;
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 @media (min-width: 1460px) {
   .cd-mediaitem-square.mediaitem-brick:not(.noscale) {
@@ -11540,12 +11528,14 @@ fieldset:disabled .btn {
   }
 }
 .cd-mediaitem-square.mediaitem-small {
-  width: 140px;
+  width: calc(140px, var(--windowRelativeScale));
-  height: 180px;
+  height: calc(180px, var(--windowRelativeScale));
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square.mediaitem-small .artwork {
-  height: 128px;
+  height: calc(128px, var(--windowRelativeScale));
-  width: 128px;
+  width: calc(128px, var(--windowRelativeScale));
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square.mediaitem-card {
   background: #ccc;
@@ -11556,6 +11546,7 @@ fieldset:disabled .btn {
   position: relative;
   border-radius: calc(var(--mediaItemRadius) * 2);
   box-shadow: var(--mediaItemShadow-ShadowSubtle);
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 }
 .cd-mediaitem-square.mediaitem-card .artwork {
   width: 230px;
@@ -11635,7 +11626,7 @@ fieldset:disabled .btn {
 .cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before {
   filter: brightness(0.3) blur(50px) saturate(180%);
 }
-@media (min-width: 1460px) {
+@media (min-width: 1200px) {
   .cd-mediaitem-square.mediaitem-card:not(.noscale) {
     width: calc(230px * 1.1);
     height: calc(298px * 1.1);
@@ -11645,7 +11636,7 @@ fieldset:disabled .btn {
     height: calc(230px * 1.1);
   }
 }
-@media (min-width: 1550px) {
+@media (min-width: 1400px) {
   .cd-mediaitem-square.mediaitem-card:not(.noscale) {
     width: calc(230px * 1.25);
     height: calc(298px * 1.25);
@@ -12985,8 +12976,7 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page {
   display: flex;
   flex-direction: column;
-  padding: 0px;
+  height: 100%;
-  height: calc(100% - var(--navigationBarHeight));
 }
 .github-themes-page .github-avatar {
   height: 42px;
@@ -13010,9 +13000,11 @@ input[type=checkbox][switch]:checked:active::before {
 }
 .github-themes-page .repos-list {
   height: 100%;
-  overflow-y: overlay;
   width: 320px;
   font-size: 14px;
+  overflow: overlay;
+  padding-bottom: 16px;
+  flex: 0 0 auto;
 }
 .github-themes-page .repos-list > .list-group {
   margin: 0px;
@@ -13029,9 +13021,9 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page .github-preview {
   height: 100%;
   flex: 1;
-  background: var(--color2);
   padding: 16px 32px;
-  overflow-y: overlay;
+  overflow: auto;
+  padding-bottom: 16px;
 }
 .github-themes-page .gh-content {
   display: flex;
@@ -13041,6 +13033,147 @@ input[type=checkbox][switch]:checked:active::before {
 }
 .github-themes-page .gh-header {
   padding: 16px;
+  height: 64px;
+  display: grid;
+  align-content: center;
+  flex: 0 0 auto;
+}
+.github-themes-page .gh-header .header-text {
+  position: initial !important;
+  justify-content: left !important;
+}
+.github-themes-page .installed-themes-page .style-editor-container {
+  height: 100%;
+  flex: 1;
+  background: var(--color2);
+  padding: 0px;
+  overflow-y: overlay;
+}
+.github-themes-page .installed-themes-page .style-editor-container .list-group-item {
+  border-radius: 0px;
+}
+.installed-themes-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.installed-themes-page .themeContextMenu {
+  background: transparent;
+  color: var(--keyColor);
+  border: 0px;
+}
+.installed-themes-page .list-group-item.addon {
+  background: rgba(86, 86, 86, 0.2);
+}
+.installed-themes-page .list-group-item.applied {
+  background: var(--keyColor-disabled);
+  pointer-events: none;
+}
+.installed-themes-page .repo-header {
+  font-size: 16px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 1;
+  background: rgba(36, 36, 36, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: var(--glassFilter);
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  border-top: 1px solid rgba(135, 135, 135, 0.18);
+}
+.installed-themes-page .gh-header {
+  z-index: 5;
+  padding: 16px;
+  flex: 0 0 auto;
+  height: 64px;
+  display: grid;
+  align-content: center;
+}
+.installed-themes-page .gh-header .header-text {
+  position: initial !important;
+  justify-content: left !important;
+}
+.installed-themes-page .gh-content {
+  display: flex;
+  flex-direction: row;
+  padding: 0px;
+  height: 100%;
+  flex: 0 0 auto;
+}
+.installed-themes-page .gh-content .repos-list {
+  width: 320px;
+  overflow: overlay;
+  height: 90%;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.installed-themes-page .gh-content .repos-list > .list-group {
+  margin: 0px;
+  padding-bottom: 16px;
+}
+.installed-themes-page .gh-content .repos-list .list-group-item {
+  padding: 12px 6px;
+}
+.installed-themes-page .gh-content .repos-list .list-group-item:hover {
+  filter: brightness(1.2);
+}
+.installed-themes-page .gh-content .repos-list .list-group-item:active {
+  filter: brightness(0.8);
+}
+.installed-themes-page .gh-content .style-editor-container {
+  height: 100%;
+  flex: 1;
+  padding: 0px;
+  width: 100%;
+  overflow: hidden;
+}
+.installed-themes-page .gh-content .style-editor-container .stylestack-editor {
+  padding-bottom: 16px;
+}
+.installed-themes-page .gh-content .style-editor-container .list-group-item {
+  border-radius: 0px;
+}
+.installed-themes-page .stylestack-editor {
+  width: 100%;
+}
+.installed-themes-page .stylestack-editor .btn,
+.installed-themes-page .stylestack-editor .btn-group {
+  width: 100%;
+}
+.installed-themes-page .stylestack-editor .themeLabel {
+  display: flex;
+  align-items: center;
+}
+.installed-themes-page .stylestack-editor .handle {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.installed-themes-page .stylestack-editor .list-group-item:hover {
+  cursor: grab;
+}
+.installed-themes-page .stylestack-editor .list-group-item:active {
+  cursor: grabbing;
+}
+.installed-themes-page .stylestack-editor .removeItem {
+  border: 0px;
+  background: transparent;
+  height: 32px;
+  font-weight: bold;
+  color: var(--textColor);
+  cursor: pointer;
+}
+.installed-themes-page .stylestack-editor .stylesDropdown > .dropdown-menu {
+  height: 300px;
+  overflow-y: overlay;
 }
 .library-page {
   padding: 0px;
@@ -13843,7 +13976,7 @@ input[type=checkbox][switch]:checked:active::before {
   right: 28px;
 }
 .artist-page.animated .artist-header {
-  min-height: 500px;
+  min-height: 80vh;
 }
 .artist-page .artist-header {
   color: white;
@@ -13893,6 +14026,23 @@ input[type=checkbox][switch]:checked:active::before {
   bottom: 82px;
   right: 28px;
 }
+.artist-page .artist-header .social-btn {
+  border-radius: 100%;
+  background: transparent;
+  height: 17px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 69;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: right;
+}
+@media only screen and (min-width: 1133px) and (max-width: 1277px) {
+  .artist-page .artist-header .about-page .social-btn {
+    display: none !important;
+  }
+}
 .artist-page .artist-header .animated {
   width: 100%;
   height: 100%;
@@ -13911,6 +14061,7 @@ input[type=checkbox][switch]:checked:active::before {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  object-fit: cover;
 }
 .artist-page .artist-header .row .col.flex-center {
   z-index: 4;
@@ -14025,81 +14176,6 @@ input[type=checkbox][switch]:checked:active::before {
   background: rgba(200, 200, 200, 0.1);
 }
 /* Artist Page End */
-.installed-themes-page .themeContextMenu {
-  background: transparent;
-  color: var(--keyColor);
-  border: 0px;
-}
-.installed-themes-page .list-group-item.addon {
-  background: rgba(86, 86, 86, 0.2);
-}
-.installed-themes-page .list-group-item.applied {
-  background: var(--keyColor-disabled);
-  pointer-events: none;
-}
-.installed-themes-page .repo-header {
-  font-size: 16px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 1;
-  background: rgba(36, 36, 36, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  backdrop-filter: var(--glassFilter);
-  overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
-  border-top: 1px solid rgba(135, 135, 135, 0.18);
-}
-.installed-themes-page .style-editor-container {
-  height: 100%;
-  flex: 1;
-  background: var(--color2);
-  padding: 0px;
-  overflow-y: overlay;
-}
-.installed-themes-page .style-editor-container .list-group-item {
-  border-radius: 0px;
-}
-.installed-themes-page .stylestack-editor {
-  width: 100%;
-}
-.installed-themes-page .stylestack-editor .btn,
-.installed-themes-page .stylestack-editor .btn-group {
-  width: 100%;
-}
-.installed-themes-page .stylestack-editor .themeLabel {
-  display: flex;
-  align-items: center;
-}
-.installed-themes-page .stylestack-editor .handle {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.installed-themes-page .stylestack-editor .list-group-item:hover {
-  cursor: grab;
-}
-.installed-themes-page .stylestack-editor .list-group-item:active {
-  cursor: grabbing;
-}
-.installed-themes-page .stylestack-editor .removeItem {
-  border: 0px;
-  background: transparent;
-  height: 32px;
-  font-weight: bold;
-  color: var(--textColor);
-  cursor: pointer;
-}
-.installed-themes-page .stylestack-editor .stylesDropdown > .dropdown-menu {
-  height: 300px;
-  overflow-y: overlay;
-}
 .settings-page {
   padding: 0px;
 }
@@ -14612,7 +14688,7 @@ input[type=checkbox][switch]:checked:active::before {
 }
 .settings-panel .settings-window {
   background: var(--baseColorMix);
-  max-width: 80%;
+  max-width: 90%;
   max-height: 90%;
   width: 100%;
   height: 100%;
@@ -14646,6 +14722,10 @@ input[type=checkbox][switch]:checked:active::before {
   display: flex;
   gap: 10px;
   align-items: center;
+  height: 35px;
+}
+.settings-panel .settings-window .nav-pills .nav-link :nth-child(2) {
+  white-space: nowrap;
 }
 .settings-panel .settings-window .md-option-header {
   padding: 0px 26px;
@@ -14696,6 +14776,10 @@ input[type=checkbox][switch]:checked:active::before {
 .settings-panel .settings-window .close-btn:hover {
   background-color: #c42b1c;
 }
+.settings-panel .settings-window .close-btn.back-btn {
+  left: 10px;
+  right: unset;
+}
 .settings-panel .settings-window .close-btn.minmax-btn {
   right: 52px;
 }
@@ -14716,6 +14800,9 @@ input[type=checkbox][switch]:checked:active::before {
 }
 .settings-panel .settings-window .tabs > .col-auto {
   width: 230px;
+  overflow-x: hidden;
+  overflow-y: overlay;
+  transition: width 0.25s ease-in-out;
 }
 .settings-panel .settings-window .tabs .tab-content {
   margin: 0 !important;
@@ -14724,13 +14811,40 @@ input[type=checkbox][switch]:checked:active::before {
   overflow-y: overlay;
   height: 100%;
   background-color: var(--panelColor2);
+  padding: 0px;
   padding-top: 48px;
   border-left: 1px solid var(--borderColor);
 }
+.settings-panel .settings-window .github-themes-page .header-text,
+.settings-panel .settings-window .installed-themes-page .header-text {
+  font-size: 1.25em;
+}
+.settings-panel .settings-window .tab-pane {
+  height: 100%;
+}
+.settings-panel .settings-window .settings-tab-content {
+  height: 100%;
+}
+.settings-panel .settings-window.no-sidebar .gh-header > .row:last-child {
+  padding-right: 90px;
+}
+.settings-panel .settings-window.no-sidebar .tab-content {
+  padding-top: 0px;
+}
+.settings-panel .settings-window.no-sidebar .tabs .nav-pills .nav-link {
+  width: 50px;
+}
+.settings-panel .settings-window.no-sidebar .tabs .nav-pills .nav-link :nth-child(2) {
+  opacity: 0;
+}
+.settings-panel .settings-window.no-sidebar .tabs > .col-auto {
+  width: 80px;
+}
 #hid___BV_tab_button__ {
   display: none;
 }
 :root {
+  --windowRelativeScale: 1;
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
   --borderColor: rgba(200, 200, 200, 0.16);
   --mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16);
@@ -15086,6 +15200,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   overflow: hidden;
   height: calc(calc(100% - 6%) - var(--chromeHeight1));
   top: calc(var(--chromeHeight1) + 3%);
+  transition: 0.3s var(--appleEase);
 }
 .app-drawer .bgArtworkMaterial {
   display: none;
@@ -15553,7 +15668,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 .app-chrome .top-nav-group .app-sidebar-item {
   background-color: var(--baseColor);
-  border-radius: 10px!important;
+  border-radius: 10px !important;
   border: 0px;
   min-width: 120px;
   padding: 6px;
@@ -15855,6 +15970,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
   height: 15px;
   width: 15px;
   margin-bottom: 15px;
+  z-index: 1;
 }
 div[data-type="library-music-videos"] .info-rect .title::before,
 div[data-type="musicVideo"] .info-rect .title::before {
@@ -16030,8 +16146,8 @@ div[data-type="musicVideo"] .info-rect .title::before {
   font-weight: 400;
   font-size: 12px;
   text-align: center;
-  /*height: 1.2em;
+  /*height       : 1.2em;
-  line-height: 1.2em;*/
+  line-height    : 1.2em;*/
   z-index: 1;
   align-items: center;
   justify-content: center;
@@ -16318,6 +16434,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   background: #eee;
   --url: url("./views/svg/more.svg");
 }
+.social-btn {
+  border-radius: 100%;
+  background: transparent;
+  height: 17px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 69;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: right;
+}
+@media only screen and (min-width: 1133px) and (max-width: 1277px) {
+  .about-page .social-btn {
+    display: none !important;
+  }
+}
 .about-page .teamBtn {
   display: flex;
   align-items: center;
@@ -16450,7 +16583,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 @media screen and (min-width: 1500px) {
   .well.itemContainer.collection-list-square {
-    grid-template-columns: repeat(6, minmax(200px, 1fr));
+    grid-template-columns: repeat(5, minmax(200px, 1fr));
   }
 }
 @media screen and (max-width: 1150px) {
@@ -17322,7 +17455,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: 14!important;
+  z-index: 14 !important;
   backdrop-filter: var(--glassFilter);
 }
 .modular-fs .app-navigation {
@@ -17602,8 +17735,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-weight: 400;
   font-size: 12px;
   text-align: center;
-  /*height: 1.2em;
+  /*height       : 1.2em;
-      line-height: 1.2em;*/
+      line-height    : 1.2em;*/
   z-index: 1;
   align-items: center;
   justify-content: center;
@@ -17727,7 +17860,7 @@ body.no-gpu .floating-header {
   backdrop-filter: unset;
 }
 body.no-gpu .artworkContainer {
-  animation: unset!important;
+  animation: unset !important;
   opacity: 0.7;
 }
 body.no-gpu .info-rect-card:before {
@@ -17750,6 +17883,7 @@ body.no-gpu .app-drawer {
   backdrop-filter: unset;
   mix-blend-mode: unset;
   background: #1c1c1c;
+  transition: unset;
 }
 body.no-gpu .wpfade-enter-active,
 body.no-gpu .wpfade-leave-active {
@@ -17949,7 +18083,7 @@ body[platform='darwin'] .app-chrome .app-chrome-item > .app-mainmenu {
   padding: 15px;
 }
 body[platform="darwin"] html {
-  background: transparent!important;
+  background: transparent !important;
 }
 body[platform="darwin"].notransparency::before {
   display: none;
@@ -17976,6 +18110,18 @@ body[platform="darwin"] #app.twopanel .app-chrome .app-mainmenu {
 body[platform="darwin"] #app.twopanel .app-chrome.chrome-bottom {
   background-color: var(--macOSChromeColor);
 }
+body[platform="darwin"] #app[window-state="normal"]::after {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: inset 0px 0px 0.5px 1px rgba(200, 200, 200, 0.4);
+  border-radius: 10px;
+  content: " ";
+  z-index: 999999;
+  pointer-events: none;
+}
 body[platform="darwin"] #app-main {
   background-color: transparent;
 }
@@ -17985,6 +18131,10 @@ body[platform="darwin"] #app-main .app-navigation {
 body[platform="darwin"] #app-main #app-content {
   background-color: #1e1e1e6b;
 }
+body[platform="darwin"] .settings-window.maxed .tabs > .col-auto {
+  transition: padding-top 0.3s linear;
+  padding-top: var(--chromeHeight1);
+}
 body[platform="darwin"] #apple-music-video-player-controls #player-exit {
   margin-top: 18px;
   left: 70px;
@@ -18111,6 +18261,10 @@ body[platform="linux"] .window-controls > div.restore::before {
   margin: 0px;
   height: 100%;
   position: relative;
+  white-space: nowrap;
+}
+#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item ._svg-icon {
+  flex: 0 0 auto;
 }
 #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item:before {
   --dist: 1px;

src/renderer/views/app/chrome-bottom.ejs

@@ -46,9 +46,9 @@
                         <div class="chrome-icon-container">
                             <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
                             <div class="audio-type lossless-icon" v-if="(mk.nowPlayingItem?.localFilesMetadata?.lossless ?? false) === true" 
-                                :title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate + 'khz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
+                                :title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'-bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate/1000 + ' kHz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
                             ></div>          
-                            <div class="audio-type ppe-icon" v-if="(mk.nowPlayingItem?.localFilesMetadata?.lossless ?? false) === false && cfg.audio.maikiwiAudio.ciderPPE === true"
+                            <div class="audio-type ppe-icon" v-if="mk.nowPlayingItem.localFilesMetadata == null && cfg.audio.maikiwiAudio.ciderPPE === true"
                                 :title="$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')" v-b-tooltip.hover
                             ></div>
                         </div>

src/renderer/views/app/chrome-top.ejs

@@ -122,9 +122,9 @@
             <div class="chrome-icon-container">
               <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
               <div class="audio-type lossless-icon" v-if="(mk.nowPlayingItem?.localFilesMetadata?.lossless ?? false) === true" 
-                :title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate + 'khz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
+                :title="mk.nowPlayingItem?.localFilesMetadata?.bitDepth +'-bit / '+ mk.nowPlayingItem?.localFilesMetadata?.sampleRate/1000 + ' kHz ' + mk.nowPlayingItem.localFilesMetadata.container" v-b-tooltip.hover
               ></div>          
-              <div class="audio-type ppe-icon" v-if="(mk.nowPlayingItem?.localFilesMetadata?.lossless ?? false) === false && cfg.audio.maikiwiAudio.ciderPPE === true"
+              <div class="audio-type ppe-icon" v-if="mk.nowPlayingItem.localFilesMetadata == null && cfg.audio.maikiwiAudio.ciderPPE === true"
                 :title="$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')" v-b-tooltip.hover
               ></div>
             </div>

src/renderer/views/components/sidebar.ejs

@@ -38,7 +38,7 @@
         </template>
         <div class="app-sidebar-content" scrollaxis="y">
             <!-- AM Navigation -->
-            <template v-if="$root.getThemeDirective('windowLayout') != 'twopanel'">
+            <div v-show="$root.getThemeDirective('windowLayout') != 'twopanel'" class="sidebarCatalogSection">
                 <div
                         class="app-sidebar-header-text"
                         @click="$root.cfg.general.sidebarCollapsed.cider = !$root.cfg.general.sidebarCollapsed.cider"
@@ -84,7 +84,7 @@
                             page="radio"
                     ></sidebar-library-item>
                 </template>
-            </template>
+            </div>
 
             <div
                     class="app-sidebar-header-text"

src/renderer/views/main.ejs

@@ -110,7 +110,7 @@
 <% } %>
 
 <script async
-        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
+        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://api.cider.sh/musickit.js") %>"
         data-web-components>
 </script>
 <script src="index.js?v=1"></script>

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

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="cider-playlist">
-    <div class="content-inner playlist-page" :class="classes" v-if="data != [] && data.attributes != null"
+    <div class="content-inner playlist-page" :class="classes" :is-album="isAlbum()" v-if="data != [] && data.attributes != null"
 
          :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
         <template v-if="app.playlists.loadingState == 0">
@@ -415,6 +415,9 @@
                 this.start = newRange[0];
                 this.end = newRange[1];
             },
+            isAlbum() {
+                return (this.data.attributes?.playParams?.kind ?? this.data.type ?? '').includes('album')
+            },
             minClass(val) {
                 if(app.appMode == 'fullscreen') {
                     return