Prettier

README.md

@@ -18,12 +18,14 @@
 </p>
 
 #### Links
-* [Wiki](https://github.com/ciderapp/Cider/wiki)
+
-* [Request Feature](https://github.com/ciderapp/Cider/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BEnhancement%5D)
+-   [Wiki](https://github.com/ciderapp/Cider/wiki)
-* [Report Bug](https://github.com/ciderapp/Cider/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D+)
+-   [Request Feature](https://github.com/ciderapp/Cider/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BEnhancement%5D)
-* [**View The Releases**](https://github.com/ciderapp/Cider/releases/latest)
+-   [Report Bug](https://github.com/ciderapp/Cider/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D+)
+-   [**View The Releases**](https://github.com/ciderapp/Cider/releases/latest)
 
 ### Install Sources
+
 [![Get it from Github](https://img.shields.io/badge/Get_It_From_GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ciderapp/cider/releases/latest)
 
 [![Get it from the Microsoft Store](https://img.shields.io/badge/Get_It_From_The_Microsoft_Store-100000?style=for-the-badge&logo=microsoft)](https://www.microsoft.com/store/apps/9P21XJ9D9G66)
@@ -34,17 +36,21 @@
 
 [![Get it from the Snap Store](https://img.shields.io/badge/Get_It_From_The_Snap_Store-100000?style=for-the-badge&logo=snapcraft)](https://snapcraft.io/apple-music-electron)
 -->
+
 [![Get it from the AUR](https://img.shields.io/badge/Get_It_From_The_AUR-100000?style=for-the-badge&logo=archlinux)](https://aur.archlinux.org/packages/cider)
 
 ### Compiling and Configuration
+
 For more information surrounding configuration, compiling and other developer documentation, see the [compilation docs](https://cider.sh/docs/compile).
 
 ### Credits
+
 ![Contributors](https://contrib.rocks/image?repo=ciderapp/Cider)
 
 ### Disclaimer
-*This project is NOT affiliated with Apple in any way shape or form. The project is open source and free to use (with an Apple Music subscription)
+
-for any legal concerns contact me at <a href="mailto:cryptofyre@cryptofyre.org">cryptofyre@cryptofyre.org</a>.*
+_This project is NOT affiliated with Apple in any way shape or form. The project is open source and free to use (with an Apple Music subscription)
+for any legal concerns contact me at <a href="mailto:cryptofyre@cryptofyre.org">cryptofyre@cryptofyre.org</a>._
 
 <p align="center">
   <br>

src/main/cider-base.js

@@ -1,9 +1,9 @@
-const { BrowserWindow, ipcMain, shell, app, screen } = require("electron")
+const { BrowserWindow, ipcMain, shell, app, screen } = require('electron');
-const { join } = require("path")
+const { join } = require('path');
-const getPort = require("get-port");
+const getPort = require('get-port');
-const express = require("express");
+const express = require('express');
-const path = require("path");
+const path = require('path');
-const windowStateKeeper = require("electron-window-state");
+const windowStateKeeper = require('electron-window-state');
 const os = require('os');
 const yt = require('youtube-search-without-api-key');
 const discord = require('./discordrpc');
@@ -16,8 +16,10 @@ const fetch = require('electron-fetch').default;
 const { Stream } = require('stream');
 
 // Analytics for debugging.
-const ElectronSentry = require("@sentry/electron");
+const ElectronSentry = require('@sentry/electron');
-ElectronSentry.init({ dsn: "https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214" });
+ElectronSentry.init({
+    dsn: 'https://68c422bfaaf44dea880b86aad5a820d2@o954055.ingest.sentry.io/6112214'
+});
 
 const CiderBase = {
     win: null,
@@ -25,18 +27,18 @@ const CiderBase = {
     audiostream: new Stream.PassThrough(),
     async Start() {
         this.clientPort = await getPort({ port: 9000 });
-        this.win = this.CreateBrowserWindow()
+        this.win = this.CreateBrowserWindow();
     },
     clientPort: 0,
     CreateBrowserWindow() {
-        this.VerifyFiles()
+        this.VerifyFiles();
         // Set default window sizes
         const mainWindowState = windowStateKeeper({
             defaultWidth: 1024,
             defaultHeight: 600
         });
 
-        let win = null
+        let win = null;
         const options = {
             icon: join(__dirname, `../../resources/icons/icon.ico`),
             width: mainWindowState.width,
@@ -46,7 +48,7 @@ const CiderBase = {
             minWidth: 844,
             minHeight: 410,
             frame: false,
-            title: "Cider",
+            title: 'Cider',
             vibrancy: 'dark',
             //  transparent: true,
             hasShadow: false,
@@ -63,135 +65,172 @@ const CiderBase = {
                 contextIsolation: false,
                 preload: join(__dirname, '../preload/cider-preload.js')
             }
-        }
+        };
 
-        CiderBase.InitWebServer()
+        CiderBase.InitWebServer();
 
         // Create the BrowserWindow
-        if (process.platform === "darwin" || process.platform === "linux") {
+        if (process.platform === 'darwin' || process.platform === 'linux') {
-            win = new BrowserWindow(options)
+            win = new BrowserWindow(options);
         } else {
             // i don't know why but we have to do this for acrylic to work properly
-            if (app.cfg.get("visual.window_transparency") !== "disabled") {
+            if (app.cfg.get('visual.window_transparency') !== 'disabled') {
-                const { BrowserWindow } = require("electron-acrylic-window");
+                const { BrowserWindow } = require('electron-acrylic-window');
-                win = new BrowserWindow(options)
+                win = new BrowserWindow(options);
-                win.setVibrancy("dark")
+                win.setVibrancy('dark');
             } else {
-                win = new BrowserWindow(options)
+                win = new BrowserWindow(options);
-                win.setVibrancy("dark")
+                win.setVibrancy('dark');
             }
-
         }
 
         // intercept "https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js" and redirect to local file "./apple-hls.js" instead
         win.webContents.session.webRequest.onBeforeRequest(
             {
-                urls: ["https://*/*.js"]
+                urls: ['https://*/*.js']
             },
             (details, callback) => {
-                if (details.url.includes("hls.js")) {
+                if (details.url.includes('hls.js')) {
                     callback({
                         redirectURL: `http://localhost:${CiderBase.clientPort}/apple-hls.js`
-                    })
+                    });
                 } else {
                     callback({
                         cancel: false
-                    })
+                    });
                 }
             }
-        )
+        );
 
-        win.webContents.session.webRequest.onBeforeSendHeaders(async (details, callback) => {
+        win.webContents.session.webRequest.onBeforeSendHeaders(
-            if (details.url === "https://buy.itunes.apple.com/account/web/info") {
+            async (details, callback) => {
+                if (
+                    details.url ===
+                    'https://buy.itunes.apple.com/account/web/info'
+                ) {
                     details.requestHeaders['sec-fetch-site'] = 'same-site';
                     details.requestHeaders['DNT'] = '1';
-                let itspod = await win.webContents.executeJavaScript(`window.localStorage.getItem("music.ampwebplay.itspod")`)
+                    let itspod = await win.webContents.executeJavaScript(
+                        `window.localStorage.getItem("music.ampwebplay.itspod")`
+                    );
                     if (itspod != null)
-                    details.requestHeaders['Cookie'] = `itspod=${itspod}`
+                        details.requestHeaders['Cookie'] = `itspod=${itspod}`;
                 }
-            callback({ requestHeaders: details.requestHeaders })
+                callback({ requestHeaders: details.requestHeaders });
-        })
+            }
+        );
 
-        let location = `http://localhost:${CiderBase.clientPort}/`
+        let location = `http://localhost:${CiderBase.clientPort}/`;
-        win.loadURL(location)
+        win.loadURL(location);
-        win.on("closed", () => {
+        win.on('closed', () => {
-            win = null
+            win = null;
-        })
+        });
 
         // Register listeners on Window to track size and position of the Window.
         mainWindowState.manage(win);
 
         // IPC stuff (senders)
-        ipcMain.on("cider-platform", (event) => {
+        ipcMain.on('cider-platform', (event) => {
-            event.returnValue = process.platform
+            event.returnValue = process.platform;
-        })
+        });
 
-        ipcMain.on("get-gpu-mode", (event) => {
+        ipcMain.on('get-gpu-mode', (event) => {
-            event.returnValue = process.platform
+            event.returnValue = process.platform;
-        })
+        });
 
-        ipcMain.on("is-dev", (event) => {
+        ipcMain.on('is-dev', (event) => {
-            event.returnValue = !app.isPackaged
+            event.returnValue = !app.isPackaged;
-        })
+        });
 
         // IPC stuff (listeners)
-        ipcMain.on('close', () => { // listen for close event
+        ipcMain.on('close', () => {
+            // listen for close event
             win.close();
-        })
+        });
 
         ipcMain.on('put-library-songs', (event, arg) => {
-            fs.writeFileSync(join(app.paths.ciderCache, "library-songs.json"), JSON.stringify(arg))
+            fs.writeFileSync(
-        })
+                join(app.paths.ciderCache, 'library-songs.json'),
+                JSON.stringify(arg)
+            );
+        });
 
         ipcMain.on('put-library-artists', (event, arg) => {
-            fs.writeFileSync(join(app.paths.ciderCache, "library-artists.json"), JSON.stringify(arg))
+            fs.writeFileSync(
-        })
+                join(app.paths.ciderCache, 'library-artists.json'),
+                JSON.stringify(arg)
+            );
+        });
 
         ipcMain.on('put-library-albums', (event, arg) => {
-            fs.writeFileSync(join(app.paths.ciderCache, "library-albums.json"), JSON.stringify(arg))
+            fs.writeFileSync(
-        })
+                join(app.paths.ciderCache, 'library-albums.json'),
+                JSON.stringify(arg)
+            );
+        });
 
         ipcMain.on('put-library-playlists', (event, arg) => {
-            fs.writeFileSync(join(app.paths.ciderCache, "library-playlists.json"), JSON.stringify(arg))
+            fs.writeFileSync(
-        })
+                join(app.paths.ciderCache, 'library-playlists.json'),
+                JSON.stringify(arg)
+            );
+        });
 
         ipcMain.on('put-library-recentlyAdded', (event, arg) => {
-            fs.writeFileSync(join(app.paths.ciderCache, "library-recentlyAdded.json"), JSON.stringify(arg))
+            fs.writeFileSync(
-        })
+                join(app.paths.ciderCache, 'library-recentlyAdded.json'),
+                JSON.stringify(arg)
+            );
+        });
 
         ipcMain.on('get-library-songs', (event) => {
-            let librarySongs = fs.readFileSync(join(app.paths.ciderCache, "library-songs.json"), "utf8")
+            let librarySongs = fs.readFileSync(
-            event.returnValue = JSON.parse(librarySongs)
+                join(app.paths.ciderCache, 'library-songs.json'),
-        })
+                'utf8'
+            );
+            event.returnValue = JSON.parse(librarySongs);
+        });
 
         ipcMain.on('get-library-artists', (event) => {
-            let libraryArtists = fs.readFileSync(join(app.paths.ciderCache, "library-artists.json"), "utf8")
+            let libraryArtists = fs.readFileSync(
-            event.returnValue = JSON.parse(libraryArtists)
+                join(app.paths.ciderCache, 'library-artists.json'),
-        })
+                'utf8'
+            );
+            event.returnValue = JSON.parse(libraryArtists);
+        });
 
         ipcMain.on('get-library-albums', (event) => {
-            let libraryAlbums = fs.readFileSync(join(app.paths.ciderCache, "library-albums.json"), "utf8")
+            let libraryAlbums = fs.readFileSync(
-            event.returnValue = JSON.parse(libraryAlbums)
+                join(app.paths.ciderCache, 'library-albums.json'),
-        })
+                'utf8'
+            );
+            event.returnValue = JSON.parse(libraryAlbums);
+        });
 
         ipcMain.on('get-library-playlists', (event) => {
-            let libraryPlaylists = fs.readFileSync(join(app.paths.ciderCache, "library-playlists.json"), "utf8")
+            let libraryPlaylists = fs.readFileSync(
-            event.returnValue = JSON.parse(libraryPlaylists)
+                join(app.paths.ciderCache, 'library-playlists.json'),
-        })
+                'utf8'
+            );
+            event.returnValue = JSON.parse(libraryPlaylists);
+        });
 
         ipcMain.on('get-library-recentlyAdded', (event) => {
-            let libraryRecentlyAdded = fs.readFileSync(join(app.paths.ciderCache, "library-recentlyAdded.json"), "utf8")
+            let libraryRecentlyAdded = fs.readFileSync(
-            event.returnValue = JSON.parse(libraryRecentlyAdded)
+                join(app.paths.ciderCache, 'library-recentlyAdded.json'),
-        })
+                'utf8'
+            );
+            event.returnValue = JSON.parse(libraryRecentlyAdded);
+        });
 
         ipcMain.handle('getYTLyrics', async (event, track, artist) => {
-            var u = track + " " + artist + " official video";
+            var u = track + ' ' + artist + ' official video';
             const videos = await yt.search(u);
-            return videos
+            return videos;
-        })
+        });
 
         ipcMain.handle('getStoreValue', (event, key, defaultValue) => {
-            return (defaultValue ? app.cfg.get(key, true) : app.cfg.get(key));
+            return defaultValue ? app.cfg.get(key, true) : app.cfg.get(key);
         });
 
         ipcMain.handle('setStoreValue', (event, key, value) => {
@@ -199,181 +238,209 @@ const CiderBase = {
         });
 
         ipcMain.on('getStore', (event) => {
-            event.returnValue = app.cfg.store
+            event.returnValue = app.cfg.store;
-        })
-
-        ipcMain.on('setStore', (event, store) => {
-            app.cfg.store = store
-        })
-
-        ipcMain.handle('setVibrancy', (event, key, value) => {
-            win.setVibrancy(value)
         });
 
-        ipcMain.on('maximize', () => { // listen for maximize event
+        ipcMain.on('setStore', (event, store) => {
+            app.cfg.store = store;
+        });
+
+        ipcMain.handle('setVibrancy', (event, key, value) => {
+            win.setVibrancy(value);
+        });
+
+        ipcMain.on('maximize', () => {
+            // listen for maximize event
             if (win.isMaximized()) {
-                win.unmaximize()
+                win.unmaximize();
             } else {
-                win.maximize()
+                win.maximize();
             }
-        })
+        });
 
-        ipcMain.on('minimize', () => { // listen for minimize event
+        ipcMain.on('minimize', () => {
+            // listen for minimize event
             win.minimize();
-        })
+        });
 
-        if (process.platform === "win32") {
+        if (process.platform === 'win32') {
             let WND_STATE = {
                 MINIMIZED: 0,
                 NORMAL: 1,
                 MAXIMIZED: 2,
                 FULL_SCREEN: 3
-            }
+            };
-            let wndState = WND_STATE.NORMAL
+            let wndState = WND_STATE.NORMAL;
 
-            win.on("resize", (_event) => {
+            win.on('resize', (_event) => {
-                const isMaximized = win.isMaximized()
+                const isMaximized = win.isMaximized();
-                const isMinimized = win.isMinimized()
+                const isMinimized = win.isMinimized();
-                const isFullScreen = win.isFullScreen()
+                const isFullScreen = win.isFullScreen();
                 const state = wndState;
                 if (isMinimized && state !== WND_STATE.MINIMIZED) {
-                    wndState = WND_STATE.MINIMIZED
+                    wndState = WND_STATE.MINIMIZED;
                 } else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
-                    wndState = WND_STATE.FULL_SCREEN
+                    wndState = WND_STATE.FULL_SCREEN;
                 } else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
-                    wndState = WND_STATE.MAXIMIZED
+                    wndState = WND_STATE.MAXIMIZED;
-                    win.webContents.executeJavaScript(`app.chrome.maximized = true`)
+                    win.webContents.executeJavaScript(
+                        `app.chrome.maximized = true`
+                    );
                 } else if (state !== WND_STATE.NORMAL) {
-                    wndState = WND_STATE.NORMAL
+                    wndState = WND_STATE.NORMAL;
-                    win.webContents.executeJavaScript(`app.chrome.maximized = false`)
+                    win.webContents.executeJavaScript(
+                        `app.chrome.maximized = false`
+                    );
                 }
-            })
+            });
         }
 
         // Set window Handler
         win.webContents.setWindowOpenHandler(({ url }) => {
-            if (url.includes("apple") || url.includes("localhost")) {
+            if (url.includes('apple') || url.includes('localhost')) {
-                return { action: "allow" }
+                return { action: 'allow' };
             }
-            shell.openExternal(url).catch(() => {
+            shell.openExternal(url).catch(() => {});
-            })
             return {
                 action: 'deny'
-            }
+            };
-        })
+        });
 
         // Set scale
         ipcMain.on('setScreenScale', (event, scale) => {
-            win.webContents.setZoomFactor(parseFloat(scale))
+            win.webContents.setZoomFactor(parseFloat(scale));
-        })
+        });
 
-        win.webContents.setZoomFactor(screen.getPrimaryDisplay().scaleFactor)
+        win.webContents.setZoomFactor(screen.getPrimaryDisplay().scaleFactor);
 
-        mpris.connect(win)
+        mpris.connect(win);
 
-        lastfm.authenticate()
+        lastfm.authenticate();
         //  Discord
-        discord.connect((app.cfg.get("general.discord_rpc") == 1) ? '911790844204437504' : '886578863147192350');
+        discord.connect(
+            app.cfg.get('general.discord_rpc') == 1
+                ? '911790844204437504'
+                : '886578863147192350'
+        );
         ipcMain.on('playbackStateDidChange', (_event, a) => {
             app.media = a;
-            discord.updateActivity(a)
+            discord.updateActivity(a);
-            mpris.updateState(a)
+            mpris.updateState(a);
-            lastfm.scrobbleSong(a)
+            lastfm.scrobbleSong(a);
-            lastfm.updateNowPlayingSong(a)
+            lastfm.updateNowPlayingSong(a);
         });
 
         ipcMain.on('nowPlayingItemDidChange', (_event, a) => {
             app.media = a;
-            discord.updateActivity(a)
+            discord.updateActivity(a);
-            mpris.updateAttributes(a)
+            mpris.updateAttributes(a);
-            lastfm.scrobbleSong(a)
+            lastfm.scrobbleSong(a);
-            lastfm.updateNowPlayingSong(a)
+            lastfm.updateNowPlayingSong(a);
         });
 
-        ipcMain.on("getPreviewURL", (_event, url) => {
+        ipcMain.on('getPreviewURL', (_event, url) => {
             fetch(url)
-                .then(res => res.buffer())
+                .then((res) => res.buffer())
                 .then(async (buffer) => {
                     try {
-                        const metadata = await mm.parseBuffer(buffer, 'audio/x-m4a');
+                        const metadata = await mm.parseBuffer(
-                        SoundCheckTag = metadata.native.iTunes[1].value
+                            buffer,
-                        win.webContents.send('SoundCheckTag', SoundCheckTag)
+                            'audio/x-m4a'
+                        );
+                        SoundCheckTag = metadata.native.iTunes[1].value;
+                        win.webContents.send('SoundCheckTag', SoundCheckTag);
                     } catch (error) {
                         console.error(error.message);
                     }
-                })
+                });
         });
 
         ipcMain.on('writeAudio', function (event, buffer) {
             CiderBase.audiostream.write(Buffer.from(buffer));
-        })
+        });
 
-        return win
+        return win;
     },
     VerifyFiles() {
-        const expectedDirectories = [
+        const expectedDirectories = ['CiderCache'];
-            "CiderCache"
-        ]
         const expectedFiles = [
-            "library-songs.json",
+            'library-songs.json',
-            "library-artists.json",
+            'library-artists.json',
-            "library-albums.json",
+            'library-albums.json',
-            "library-playlists.json",
+            'library-playlists.json',
-            "library-recentlyAdded.json",
+            'library-recentlyAdded.json'
-        ]
+        ];
         for (let i = 0; i < expectedDirectories.length; i++) {
-            if (!existsSync(path.join(app.getPath("userData"), expectedDirectories[i]))) {
+            if (
-                mkdirSync(path.join(app.getPath("userData"), expectedDirectories[i]))
+                !existsSync(
+                    path.join(app.getPath('userData'), expectedDirectories[i])
+                )
+            ) {
+                mkdirSync(
+                    path.join(app.getPath('userData'), expectedDirectories[i])
+                );
             }
         }
         for (let i = 0; i < expectedFiles.length; i++) {
-            const file = path.join(app.paths.ciderCache, expectedFiles[i])
+            const file = path.join(app.paths.ciderCache, expectedFiles[i]);
             if (!existsSync(file)) {
-                writeFileSync(file, JSON.stringify([]))
+                writeFileSync(file, JSON.stringify([]));
             }
         }
     },
     EnvironmentVariables: {
-        "env": {
+        env: {
             platform: os.platform(),
             dev: app.isPackaged
         }
     },
     LinkHandler: (startArgs) => {
         if (!startArgs) return;
-        console.log("lfmtoken", String(startArgs))
+        console.log('lfmtoken', String(startArgs));
         if (String(startArgs).includes('auth')) {
-            let authURI = String(startArgs).split('/auth/')[1]
+            let authURI = String(startArgs).split('/auth/')[1];
-            if (authURI.startsWith('lastfm')) { // If we wanted more auth options
+            if (authURI.startsWith('lastfm')) {
+                // If we wanted more auth options
                 const authKey = authURI.split('lastfm?token=')[1];
                 app.cfg.set('lastfm.enabled', true);
                 app.cfg.set('lastfm.auth_token', authKey);
                 CiderBase.win.webContents.send('LastfmAuthenticated', authKey);
-                lastfm.authenticate()
+                lastfm.authenticate();
             }
         } else {
-            const formattedSongID = startArgs.replace('ame://', '').replace('/', '');
+            const formattedSongID = startArgs
-            console.warn(`[LinkHandler] Attempting to load song id: ${formattedSongID}`);
+                .replace('ame://', '')
+                .replace('/', '');
+            console.warn(
+                `[LinkHandler] Attempting to load song id: ${formattedSongID}`
+            );
 
             // setQueue can be done with album, song, url, playlist id
-            this.win.webContents.executeJavaScript(`
+            this.win.webContents
+                .executeJavaScript(
+                    `
                 MusicKit.getInstance().setQueue({ song: '${formattedSongID}'}).then(function(queue) {
                     MusicKit.getInstance().play();
                 });
-            `).catch((err) => console.error(err));
+            `
+                )
+                .catch((err) => console.error(err));
         }
-
     },
 
     async InitWebServer() {
         const webapp = express();
         const webRemotePath = path.join(__dirname, '../renderer/');
-        webapp.set("views", path.join(webRemotePath, "views"));
+        webapp.set('views', path.join(webRemotePath, 'views'));
-        webapp.set("view engine", "ejs");
+        webapp.set('view engine', 'ejs');
 
         webapp.use(function (req, res, next) {
             // if not localhost
-            if (req.url.includes("audio.webm") || (req.headers.host.includes("localhost") && req.headers["user-agent"].includes("Cider"))) {
+            if (
+                req.url.includes('audio.webm') ||
+                (req.headers.host.includes('localhost') &&
+                    req.headers['user-agent'].includes('Cider'))
+            ) {
                 next();
             }
         });
@@ -381,7 +448,7 @@ const CiderBase = {
         webapp.use(express.static(webRemotePath));
         webapp.get('/', function (req, res) {
             //res.sendFile(path.join(webRemotePath, 'index_old.html'));
-            res.render("main", CiderBase.EnvironmentVariables)
+            res.render('main', CiderBase.EnvironmentVariables);
         });
         webapp.get('/audio.webm', function (req, res) {
             try {
@@ -397,16 +464,17 @@ const CiderBase = {
                     try {
                         res.write(data);
                     } catch (ex) {
-                        console.log(ex)
+                        console.log(ex);
+                    }
+                });
+            } catch (ex) {
+                console.log(ex);
             }
-                })
-            } catch (ex) { console.log(ex) }
         });
         webapp.listen(CiderBase.clientPort, function () {
             console.log(`Cider client port: ${CiderBase.clientPort}`);
         });
-    },
-
     }
+};
 
 module.exports = CiderBase;

src/main/discordrpc.js

@@ -1,8 +1,7 @@
 const { app } = require('electron'),
-    DiscordRPC = require('discord-rpc')
+    DiscordRPC = require('discord-rpc');
 
 module.exports = {
-
     /**
      * Connects to Discord RPC
      * @param {string} clientId
@@ -11,30 +10,39 @@ module.exports = {
         app.discord = { isConnected: false };
         if (app.cfg.get('general.discord_rpc') == 0) return;
 
-        DiscordRPC.register(clientId) // Apparently needed for ask to join, join, spectate etc.
+        DiscordRPC.register(clientId); // Apparently needed for ask to join, join, spectate etc.
-        const client = new DiscordRPC.Client({transport: "ipc"});
+        const client = new DiscordRPC.Client({ transport: 'ipc' });
-        app.discord = Object.assign(client, {error: false, activityCache: null, isConnected: false});
+        app.discord = Object.assign(client, {
+            error: false,
+            activityCache: null,
+            isConnected: false
+        });
 
         // Login to Discord
-        app.discord.login({clientId})
+        app.discord
+            .login({ clientId })
             .then(() => {
                 app.discord.isConnected = true;
             })
             .catch((e) => console.error(`[DiscordRPC][connect] ${e}`));
 
         app.discord.on('ready', () => {
-            console.log(`[DiscordRPC][connect] Successfully Connected to Discord. Authed for user: ${client.user.username} (${client.user.id})`);
+            console.log(
+                `[DiscordRPC][connect] Successfully Connected to Discord. Authed for user: ${client.user.username} (${client.user.id})`
+            );
 
             if (app.discord.activityCache) {
-                client.setActivity(app.discord.activityCache).catch((e) => console.error(e));
+                client
+                    .setActivity(app.discord.activityCache)
+                    .catch((e) => console.error(e));
                 app.discord.activityCache = null;
             }
-        })
+        });
 
         // Handles Errors
-        app.discord.on('error', err => {
+        app.discord.on('error', (err) => {
             console.error(`[DiscordRPC] ${err}`);
-            this.disconnect()
+            this.disconnect();
             app.discord.isConnected = false;
         });
     },
@@ -43,15 +51,21 @@ module.exports = {
      * Disconnects from Discord RPC
      */
     disconnect: function () {
-        if (app.cfg.get('general.discord_rpc') == 0 || !app.discord.isConnected) return;
+        if (app.cfg.get('general.discord_rpc') == 0 || !app.discord.isConnected)
+            return;
 
         try {
-            app.discord.destroy().then(() => {
+            app.discord
+                .destroy()
+                .then(() => {
                     app.discord.isConnected = false;
-                console.log('[DiscordRPC][disconnect] Disconnected from discord.')
+                    console.log(
-            }).catch((e) => console.error(`[DiscordRPC][disconnect] ${e}`));
+                        '[DiscordRPC][disconnect] Disconnected from discord.'
+                    );
+                })
+                .catch((e) => console.error(`[DiscordRPC][disconnect] ${e}`));
         } catch (err) {
-            console.error(err)
+            console.error(err);
         }
     },
 
@@ -63,76 +77,87 @@ module.exports = {
         if (app.cfg.get('general.discord_rpc') == 0) return;
 
         if (!app.discord.isConnected) {
-            this.connect()
+            this.connect();
         }
 
         if (!app.discord.isConnected) return;
 
         // console.log('[DiscordRPC][updateActivity] Updating Discord Activity.')
 
-        const listenURL = `https://applemusicelectron.com/p?id=${attributes.playParams.id}`
+        const listenURL = `https://applemusicelectron.com/p?id=${attributes.playParams.id}`;
         //console.log(attributes)
         let ActivityObject = {
             details: attributes.name,
             state: `by ${attributes.artistName}`,
             startTimestamp: attributes.startTime,
             endTimestamp: attributes.endTime,
-            largeImageKey: (attributes.artwork.url.replace('{w}', '1024').replace('{h}', '1024')) ?? 'cider',
+            largeImageKey:
+                attributes.artwork.url
+                    .replace('{w}', '1024')
+                    .replace('{h}', '1024') ?? 'cider',
             largeImageText: attributes.albumName,
-            smallImageKey: (attributes.status ? 'play' : 'pause'),
+            smallImageKey: attributes.status ? 'play' : 'pause',
-            smallImageText: (attributes.status ? 'Playing' : 'Paused'),
+            smallImageText: attributes.status ? 'Playing' : 'Paused',
             instance: true,
-            buttons: [
+            buttons: [{ label: 'Listen on Cider', url: listenURL }]
-                {label: "Listen on Cider", url: listenURL},
-            ]
         };
-        if (ActivityObject.largeImageKey == "" || ActivityObject.largeImageKey == null) {
+        if (
-            ActivityObject.largeImageKey = (app.cfg.get("general.discord_rpc") == 1)  ? "cider" : "logo"
+            ActivityObject.largeImageKey == '' ||
+            ActivityObject.largeImageKey == null
+        ) {
+            ActivityObject.largeImageKey =
+                app.cfg.get('general.discord_rpc') == 1 ? 'cider' : 'logo';
         }
         // console.log(`[LinkHandler] Listening URL has been set to: ${listenURL}`);
 
         if (app.cfg.get('general.discordClearActivityOnPause') == 1) {
-            delete ActivityObject.smallImageKey
+            delete ActivityObject.smallImageKey;
-            delete ActivityObject.smallImageText
+            delete ActivityObject.smallImageText;
         }
 
         // Check all the values work
-        if (!((new Date(attributes.endTime)).getTime() > 0)) {
+        if (!(new Date(attributes.endTime).getTime() > 0)) {
-            delete ActivityObject.startTimestamp
+            delete ActivityObject.startTimestamp;
-            delete ActivityObject.endTimestamp
+            delete ActivityObject.endTimestamp;
         }
         if (!attributes.artistName) {
-            delete ActivityObject.state
+            delete ActivityObject.state;
         }
-        if (!ActivityObject.largeImageText || ActivityObject.largeImageText.length < 2) {
+        if (
-            delete ActivityObject.largeImageText
+            !ActivityObject.largeImageText ||
+            ActivityObject.largeImageText.length < 2
+        ) {
+            delete ActivityObject.largeImageText;
         }
         if (ActivityObject.details.length > 128) {
-            AcitivityObject.details = ActivityObject.details.substring(0, 125) + '...'
+            AcitivityObject.details =
+                ActivityObject.details.substring(0, 125) + '...';
         }
 
         // Clear if if needed
         if (!attributes.status) {
             if (app.cfg.get('general.discordClearActivityOnPause') == 1) {
-                app.discord.clearActivity().catch((e) => console.error(`[DiscordRPC][clearActivity] ${e}`));
+                app.discord
-                ActivityObject = null
+                    .clearActivity()
-            } else
+                    .catch((e) =>
-             {
+                        console.error(`[DiscordRPC][clearActivity] ${e}`)
-            delete ActivityObject.startTimestamp
+                    );
-            delete ActivityObject.endTimestamp
+                ActivityObject = null;
-            ActivityObject.smallImageKey = 'pause'
+            } else {
-            ActivityObject.smallImageText = 'Paused'
+                delete ActivityObject.startTimestamp;
+                delete ActivityObject.endTimestamp;
+                ActivityObject.smallImageKey = 'pause';
+                ActivityObject.smallImageText = 'Paused';
             }
         }
 
         if (ActivityObject) {
             try {
                 //  console.log(`[DiscordRPC][setActivity] Setting activity to ${JSON.stringify(ActivityObject)}`);
-                app.discord.setActivity(ActivityObject)
+                app.discord.setActivity(ActivityObject);
             } catch (err) {
-                console.error(`[DiscordRPC][setActivity] ${err}`)
+                console.error(`[DiscordRPC][setActivity] ${err}`);
             }
-
         }
-    },
     }
+};

src/main/lastfm.js

@@ -7,10 +7,12 @@ const {app, Notification} = require('electron'),
 
 const lfm = {
     authenticateFromFile: function () {
-        let sessionData = require(sessionPath)
+        let sessionData = require(sessionPath);
-        console.log("[LastFM][authenticateFromFile] Logging in with Session Info.")
+        console.log(
-        app.lastfm.setSessionCredentials(sessionData.name, sessionData.key)
+            '[LastFM][authenticateFromFile] Logging in with Session Info.'
-        console.log("[LastFM][authenticateFromFile] Logged in.")
+        );
+        app.lastfm.setSessionCredentials(sessionData.name, sessionData.key);
+        console.log('[LastFM][authenticateFromFile] Logged in.');
     },
 
     authenticate: function () {
@@ -18,84 +20,125 @@ const lfm = {
             app.cfg.set('lastfm.enabled', true);
         }
 
-        if (!app.cfg.get('lastfm.enabled') || !app.cfg.get('lastfm.auth_token')) {
+        if (
+            !app.cfg.get('lastfm.enabled') ||
+            !app.cfg.get('lastfm.auth_token')
+        ) {
             app.cfg.set('lastfm.enabled', false);
-            return
+            return;
         }
 
         const lfmAPI = new LastfmAPI({
-            'api_key': apiCredentials.key,
+            api_key: apiCredentials.key,
-            'secret': apiCredentials.secret
+            secret: apiCredentials.secret
         });
 
-        app.lastfm = Object.assign(lfmAPI, {cachedAttributes: false, cachedNowPlayingAttributes: false});
+        app.lastfm = Object.assign(lfmAPI, {
+            cachedAttributes: false,
+            cachedNowPlayingAttributes: false
+        });
 
         fs.stat(sessionPath, function (err) {
             if (err) {
-                console.error("[LastFM][Session] Session file couldn't be opened or doesn't exist,", err)
+                console.error(
-                console.log("[LastFM][Auth] Beginning authentication from configuration")
+                    "[LastFM][Session] Session file couldn't be opened or doesn't exist,",
-                app.lastfm.authenticate(app.cfg.get('lastfm.auth_token'), function (err, session) {
+                    err
+                );
+                console.log(
+                    '[LastFM][Auth] Beginning authentication from configuration'
+                );
+                app.lastfm.authenticate(
+                    app.cfg.get('lastfm.auth_token'),
+                    function (err, session) {
                         if (err) {
                             throw err;
                         }
-                    console.log("[LastFM] Successfully obtained LastFM session info,", session); // {"name": "LASTFM_USERNAME", "key": "THE_USER_SESSION_KEY"}
+                        console.log(
-                    console.log("[LastFM] Saving session info to disk.")
+                            '[LastFM] Successfully obtained LastFM session info,',
-                    let tempData = JSON.stringify(session)
+                            session
+                        ); // {"name": "LASTFM_USERNAME", "key": "THE_USER_SESSION_KEY"}
+                        console.log('[LastFM] Saving session info to disk.');
+                        let tempData = JSON.stringify(session);
                         fs.writeFile(sessionPath, tempData, (err) => {
-                        if (err)
+                            if (err) console.log('[LastFM][fs]', err);
-                            console.log("[LastFM][fs]", err)
                             else {
-                            console.log("[LastFM][fs] File was written successfully.")
+                                console.log(
-                            lfm.authenticateFromFile()
+                                    '[LastFM][fs] File was written successfully.'
+                                );
+                                lfm.authenticateFromFile();
                                 new Notification({
                                     title: app.getName(),
-                                body: "Successfully logged into LastFM using Authentication Key."
+                                    body: 'Successfully logged into LastFM using Authentication Key.'
-                            }).show()
+                                }).show();
                             }
-                    })
                         });
-            } else {
-                lfm.authenticateFromFile()
                     }
-        })
+                );
+            } else {
+                lfm.authenticateFromFile();
+            }
+        });
     },
 
     scrobbleSong: async function (attributes) {
-        await new Promise(resolve => setTimeout(resolve, app.cfg.get('lastfm.scrobble_after') * 1000));
+        await new Promise((resolve) =>
+            setTimeout(resolve, app.cfg.get('lastfm.scrobble_after') * 1000)
+        );
         const currentAttributes = app.media;
 
         if (!app.lastfm || app.lastfm.cachedAttributes === attributes) {
-            return
+            return;
         }
 
         if (app.lastfm.cachedAttributes) {
-            if (app.lastfm.cachedAttributes.playParams.id === attributes.playParams.id) return;
+            if (
+                app.lastfm.cachedAttributes.playParams.id ===
+                attributes.playParams.id
+            )
+                return;
         }
 
         if (currentAttributes.status && currentAttributes === attributes) {
             if (fs.existsSync(sessionPath)) {
                 // Scrobble playing song.
                 if (attributes.status === true) {
-                    app.lastfm.track.scrobble({
+                    app.lastfm.track.scrobble(
-                        'artist': lfm.filterArtistName(attributes.artistName),
+                        {
-                        'track': attributes.name,
+                            artist: lfm.filterArtistName(attributes.artistName),
-                        'album': attributes.albumName,
+                            track: attributes.name,
-                        'albumArtist': this.filterArtistName(attributes.artistName),
+                            album: attributes.albumName,
-                        'timestamp': new Date().getTime() / 1000
+                            albumArtist: this.filterArtistName(
-                    }, function (err, scrobbled) {
+                                attributes.artistName
+                            ),
+                            timestamp: new Date().getTime() / 1000
+                        },
+                        function (err, scrobbled) {
                             if (err) {
-                            return console.error('[LastFM] An error occurred while scrobbling', err);
+                                return console.error(
+                                    '[LastFM] An error occurred while scrobbling',
+                                    err
+                                );
                             }
 
-                        console.log('[LastFM] Successfully scrobbled: ', scrobbled);
+                            console.log(
-                    });
+                                '[LastFM] Successfully scrobbled: ',
-                    app.lastfm.cachedAttributes = attributes
+                                scrobbled
+                            );
+                        }
+                    );
+                    app.lastfm.cachedAttributes = attributes;
                 }
             } else {
                 this.authenticate();
             }
         } else {
-            return console.log('[LastFM] Did not add ', attributes.name , '-' , lfm.filterArtistName(attributes.artistName), 'because now playing a other song.');
+            return console.log(
+                '[LastFM] Did not add ',
+                attributes.name,
+                '-',
+                lfm.filterArtistName(attributes.artistName),
+                'because now playing a other song.'
+            );
         }
     },
 
@@ -111,43 +154,61 @@ const lfm = {
         }
         artist = artist.join(' ');
         if (artist.includes(',')) {
-            artist = artist.split(',')
+            artist = artist.split(',');
-            artist = artist[0]
+            artist = artist[0];
         }
         return artist.charAt(0).toUpperCase() + artist.slice(1);
     },
 
     updateNowPlayingSong: function (attributes) {
-        if (!app.lastfm ||app.lastfm.cachedNowPlayingAttributes === attributes  | !app.cfg.get('lastfm.NowPlaying')) {
+        if (
-            return
+            !app.lastfm ||
+            app.lastfm.cachedNowPlayingAttributes === attributes ||
+            !app.cfg.get('lastfm.NowPlaying')
+        ) {
+            return;
         }
 
         if (app.lastfm.cachedNowPlayingAttributes) {
-            if (app.lastfm.cachedNowPlayingAttributes.playParams.id === attributes.playParams.id) return;
+            if (
+                app.lastfm.cachedNowPlayingAttributes.playParams.id ===
+                attributes.playParams.id
+            )
+                return;
         }
 
         if (fs.existsSync(sessionPath)) {
             // update Now Playing
             if (attributes.status === true) {
-                app.lastfm.track.updateNowPlaying({
+                app.lastfm.track.updateNowPlaying(
-                   'artist': lfm.filterArtistName(attributes.artistName),
+                    {
-                   'track': attributes.name,
+                        artist: lfm.filterArtistName(attributes.artistName),
-                   'album': attributes.albumName,
+                        track: attributes.name,
-                   'albumArtist': this.filterArtistName(attributes.artistName)
+                        album: attributes.albumName,
-                }, function (err, nowPlaying) {
+                        albumArtist: this.filterArtistName(
+                            attributes.artistName
+                        )
+                    },
+                    function (err, nowPlaying) {
                         if (err) {
-                        return console.error('[LastFM] An error occurred while updating nowPlayingSong', err);
+                            return console.error(
+                                '[LastFM] An error occurred while updating nowPlayingSong',
+                                err
+                            );
                         }
 
-                    console.log('[LastFM] Successfully updated nowPlayingSong', nowPlaying);                 
+                        console.log(
-                });
+                            '[LastFM] Successfully updated nowPlayingSong',
-                app.lastfm.cachedNowPlayingAttributes = attributes
+                            nowPlaying
+                        );
+                    }
+                );
+                app.lastfm.cachedNowPlayingAttributes = attributes;
             }
-            
         } else {
-            this.authenticate()
+            this.authenticate();
-        }
         }
     }
+};
 
 module.exports = lfm;

src/main/mpris.js

@@ -1,13 +1,12 @@
 let mediaPlayer = null;
 
 module.exports = {
-
     /**
      * Connects to the MPRIS interface.
      * @param {Object} win - The BrowserWindow.
      */
     connect: (win) => {
-        if (process.platform !== "linux") return;
+        if (process.platform !== 'linux') return;
 
         const Player = require('mpris-service');
 
@@ -18,36 +17,51 @@ module.exports = {
             supportedMimeTypes: [],
             supportedInterfaces: ['player']
         });
-        mediaPlayer = Object.assign(mediaPlayer, { canQuit: true, canControl: true, canPause: true, canPlay: true, canGoNext: true })
+        mediaPlayer = Object.assign(mediaPlayer, {
-
+            canQuit: true,
+            canControl: true,
+            canPause: true,
+            canPlay: true,
+            canGoNext: true
+        });
 
         let pos_atr = { durationInMillis: 0 };
         mediaPlayer.getPosition = function () {
             const durationInMicro = pos_atr.durationInMillis * 1000;
-            const percentage = parseFloat("0") || 0;
+            const percentage = parseFloat('0') || 0;
             return durationInMicro * percentage;
-        }
+        };
 
-        mediaPlayer.active = true
+        mediaPlayer.active = true;
 
         mediaPlayer.on('playpause', async () => {
-            win.webContents.executeJavaScript('MusicKitInterop.pausePlay()').catch(err => console.error(err))
+            win.webContents
+                .executeJavaScript('MusicKitInterop.pausePlay()')
+                .catch((err) => console.error(err));
         });
 
         mediaPlayer.on('play', async () => {
-            win.webContents.executeJavaScript('MusicKitInterop.pausePlay()').catch(err => console.error(err))
+            win.webContents
+                .executeJavaScript('MusicKitInterop.pausePlay()')
+                .catch((err) => console.error(err));
         });
 
         mediaPlayer.on('pause', async () => {
-            win.webContents.executeJavaScript('MusicKitInterop.pausePlay()').catch(err => console.error(err))
+            win.webContents
+                .executeJavaScript('MusicKitInterop.pausePlay()')
+                .catch((err) => console.error(err));
         });
 
         mediaPlayer.on('next', async () => {
-            win.webContents.executeJavaScript('MusicKitInterop.nextTrack()').catch(err => console.error(err))
+            win.webContents
+                .executeJavaScript('MusicKitInterop.nextTrack()')
+                .catch((err) => console.error(err));
         });
 
         mediaPlayer.on('previous', async () => {
-            win.webContents.executeJavaScript('MusicKitInterop.previousTrack()').catch(err => console.error(err))
+            win.webContents
+                .executeJavaScript('MusicKitInterop.previousTrack()')
+                .catch((err) => console.error(err));
         });
     },
 
@@ -56,23 +70,29 @@ module.exports = {
      * @param {Object} attributes - The attributes of the track.
      */
     updateAttributes: (attributes) => {
-        if (process.platform !== "linux") return;
+        if (process.platform !== 'linux') return;
 
         const MetaData = {
-            'mpris:trackid': mediaPlayer.objectPath(`track/${attributes.playParams.id.replace(/[.]+/g, "")}`),
+            'mpris:trackid': mediaPlayer.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'),
+            'mpris:artUrl': attributes.artwork.url
+                .replace('/{w}x{h}bb', '/512x512bb')
+                .replace('/2000x2000bb', '/35x35bb'),
             'xesam:title': `${attributes.name}`,
             'xesam:album': `${attributes.albumName}`,
-            'xesam:artist': [`${attributes.artistName}`,],
+            'xesam:artist': [`${attributes.artistName}`],
             'xesam:genre': attributes.genreNames
+        };
+
+        if (
+            mediaPlayer.metadata['mpris:trackid'] === MetaData['mpris:trackid']
+        ) {
+            return;
         }
 
-        if (mediaPlayer.metadata["mpris:trackid"] === MetaData["mpris:trackid"]) {
+        mediaPlayer.metadata = MetaData;
-            return
-        }
-
-        mediaPlayer.metadata = MetaData
     },
 
     /**
@@ -80,11 +100,11 @@ module.exports = {
      * @param {Object} attributes - The attributes of the track.
      */
     updateState: (attributes) => {
-        if (process.platform !== "linux") return;
+        if (process.platform !== 'linux') return;
 
         function setPlaybackIfNeeded(status) {
             if (mediaPlayer.playbackStatus === status) {
-                return
+                return;
             }
             mediaPlayer.playbackStatus = status;
         }
@@ -96,7 +116,8 @@ module.exports = {
             case false: // Paused
                 setPlaybackIfNeeded('Paused');
                 break;
-            default: // Stopped
+            default:
+                // Stopped
                 setPlaybackIfNeeded('Stopped');
                 break;
         }
@@ -106,8 +127,10 @@ module.exports = {
      * Closes the MPRIS interface.
      */
     clearActivity: () => {
-        if (process.platform !== "linux") return;
+        if (process.platform !== 'linux') return;
-        mediaPlayer.metadata = {'mpris:trackid': '/org/mpris/MediaPlayer2/TrackList/NoTrack'}
+        mediaPlayer.metadata = {
+            'mpris:trackid': '/org/mpris/MediaPlayer2/TrackList/NoTrack'
+        };
         mediaPlayer.playbackStatus = 'Stopped';
-    },
     }
+};

src/preload/cider-preload.js

@@ -1,72 +1,135 @@
-const electron = require('electron')
+const electron = require('electron');
 
-console.log('Loaded Preload')
+console.log('Loaded Preload');
 
 let cache = { playParams: { id: 0 }, status: null, remainingTime: 0 },
     playbackCache = { status: null, time: Date.now() };
 
 const MusicKitInterop = {
     init: function () {
-        MusicKit.getInstance().addEventListener(MusicKit.Events.playbackStateDidChange, () => {
+        MusicKit.getInstance().addEventListener(
-            if (MusicKitInterop.filterTrack(MusicKitInterop.getAttributes(), true, false)) {
+            MusicKit.Events.playbackStateDidChange,
-                console.log("ayy");
+            () => {
-                global.ipcRenderer.send('playbackStateDidChange', MusicKitInterop.getAttributes())
+                if (
+                    MusicKitInterop.filterTrack(
+                        MusicKitInterop.getAttributes(),
+                        true,
+                        false
+                    )
+                ) {
+                    console.log('ayy');
+                    global.ipcRenderer.send(
+                        'playbackStateDidChange',
+                        MusicKitInterop.getAttributes()
+                    );
                     // if (typeof _plugins != "undefined") {
                     //     _plugins.execute("OnPlaybackStateChanged", {Attributes: MusicKitInterop.getAttributes()})
                     // }
                 }
-        });
-
-        MusicKit.getInstance().addEventListener(MusicKit.Events.nowPlayingItemDidChange, () => {
-            if (MusicKitInterop.filterTrack(MusicKitInterop.getAttributes(), false, true)) {
-                global.ipcRenderer.send('nowPlayingItemDidChange', MusicKitInterop.getAttributes());
             }
-        });
+        );
 
-        MusicKit.getInstance().addEventListener(MusicKit.Events.authorizationStatusDidChange, () => {
+        MusicKit.getInstance().addEventListener(
-            global.ipcRenderer.send('authorizationStatusDidChange', MusicKit.getInstance().authorizationStatus)
+            MusicKit.Events.nowPlayingItemDidChange,
-        })
+            () => {
+                if (
+                    MusicKitInterop.filterTrack(
+                        MusicKitInterop.getAttributes(),
+                        false,
+                        true
+                    )
+                ) {
+                    global.ipcRenderer.send(
+                        'nowPlayingItemDidChange',
+                        MusicKitInterop.getAttributes()
+                    );
+                }
+            }
+        );
 
-        MusicKit.getInstance().addEventListener(MusicKit.Events.mediaPlaybackError, (e) => {
+        MusicKit.getInstance().addEventListener(
+            MusicKit.Events.authorizationStatusDidChange,
+            () => {
+                global.ipcRenderer.send(
+                    'authorizationStatusDidChange',
+                    MusicKit.getInstance().authorizationStatus
+                );
+            }
+        );
+
+        MusicKit.getInstance().addEventListener(
+            MusicKit.Events.mediaPlaybackError,
+            (e) => {
                 console.warn(`[mediaPlaybackError] ${e}`);
-        })
+            }
+        );
     },
 
     getAttributes: function () {
         const nowPlayingItem = MusicKit.getInstance().nowPlayingItem;
         const isPlayingExport = MusicKit.getInstance().isPlaying;
-        const remainingTimeExport = MusicKit.getInstance().currentPlaybackTimeRemaining;
+        const remainingTimeExport =
-        const attributes = (nowPlayingItem != null ? nowPlayingItem.attributes : {});
+            MusicKit.getInstance().currentPlaybackTimeRemaining;
+        const attributes =
+            nowPlayingItem != null ? nowPlayingItem.attributes : {};
 
         attributes.status = isPlayingExport ? isPlayingExport : false;
         attributes.name = attributes.name ? attributes.name : 'No Title Found';
-        attributes.artwork = attributes.artwork ? attributes.artwork : {url: ''};
+        attributes.artwork = attributes.artwork
-        attributes.artwork.url = attributes.artwork.url ? attributes.artwork.url : '';
+            ? attributes.artwork
-        attributes.playParams = attributes.playParams ? attributes.playParams : {id: 'no-id-found'};
+            : { url: '' };
-        attributes.playParams.id = attributes.playParams.id ? attributes.playParams.id : 'no-id-found';
+        attributes.artwork.url = attributes.artwork.url
+            ? attributes.artwork.url
+            : '';
+        attributes.playParams = attributes.playParams
+            ? attributes.playParams
+            : { id: 'no-id-found' };
+        attributes.playParams.id = attributes.playParams.id
+            ? attributes.playParams.id
+            : 'no-id-found';
         attributes.albumName = attributes.albumName ? attributes.albumName : '';
-        attributes.artistName = attributes.artistName ? attributes.artistName : '';
+        attributes.artistName = attributes.artistName
-        attributes.genreNames = attributes.genreNames ? attributes.genreNames : [];
+            ? attributes.artistName
-        attributes.remainingTime = remainingTimeExport ? (remainingTimeExport * 1000) : 0;
+            : '';
-        attributes.durationInMillis = attributes.durationInMillis ? attributes.durationInMillis : 0;
+        attributes.genreNames = attributes.genreNames
+            ? attributes.genreNames
+            : [];
+        attributes.remainingTime = remainingTimeExport
+            ? remainingTimeExport * 1000
+            : 0;
+        attributes.durationInMillis = attributes.durationInMillis
+            ? attributes.durationInMillis
+            : 0;
         attributes.startTime = Date.now();
-        attributes.endTime = Math.round((attributes.playParams.id === cache.playParams.id ? (Date.now() + attributes.remainingTime) : (attributes.startTime + attributes.durationInMillis)));
+        attributes.endTime = Math.round(
-        attributes.endTime = attributes.endTime ? attributes.endTime : Date.now();
+            attributes.playParams.id === cache.playParams.id
-        return attributes
+                ? Date.now() + attributes.remainingTime
+                : attributes.startTime + attributes.durationInMillis
+        );
+        attributes.endTime = attributes.endTime
+            ? attributes.endTime
+            : Date.now();
+        return attributes;
     },
 
     filterTrack: function (a, playbackCheck, mediaCheck) {
-        if (a.title === "No Title Found" || a.playParams.id === "no-id-found") {
+        if (a.title === 'No Title Found' || a.playParams.id === 'no-id-found') {
             return;
         } else if (mediaCheck && a.playParams.id === cache.playParams.id) {
             return;
         } else if (playbackCheck && a.status === playbackCache.status) {
             return;
-        } else if (playbackCheck && !a.status && a.remainingTime === playbackCache.time) { /* Pretty much have to do this to prevent multiple runs when a song starts playing */
+        } else if (
+            playbackCheck &&
+            !a.status &&
+            a.remainingTime === playbackCache.time
+        ) {
+            /* Pretty much have to do this to prevent multiple runs when a song starts playing */
             return;
         }
         cache = a;
-        if (playbackCheck) playbackCache = {status: a.status, time: a.remainingTime};
+        if (playbackCheck)
+            playbackCache = { status: a.status, time: a.remainingTime };
         return true;
     },
 
@@ -74,23 +137,31 @@ const MusicKitInterop = {
         if (MusicKit.getInstance().isPlaying) {
             MusicKit.getInstance().pause();
         } else if (MusicKit.getInstance().nowPlayingItem != null) {
-            MusicKit.getInstance().play().then(r => console.log(`[MusicKitInterop] Playing ${r}`));
+            MusicKit.getInstance()
+                .play()
+                .then((r) => console.log(`[MusicKitInterop] Playing ${r}`));
         }
     },
 
     nextTrack: function () {
-        MusicKit.getInstance().skipToNextItem().then(r => console.log(`[MusicKitInterop] Skipping to Next ${r}`));
+        MusicKit.getInstance()
+            .skipToNextItem()
+            .then((r) =>
+                console.log(`[MusicKitInterop] Skipping to Next ${r}`)
+            );
     },
 
     previousTrack: function () {
-        MusicKit.getInstance().skipToPreviousItem().then(r => console.log(`[MusicKitInterop] Skipping to Previous ${r}`));
+        MusicKit.getInstance()
+            .skipToPreviousItem()
+            .then((r) =>
+                console.log(`[MusicKitInterop] Skipping to Previous ${r}`)
+            );
     }
-
+};
-}
-
 
 process.once('loaded', () => {
-    console.log("Setting ipcRenderer")
+    console.log('Setting ipcRenderer');
     global.ipcRenderer = electron.ipcRenderer;
     global.MusicKitInterop = MusicKitInterop;
 });

src/renderer/index_old.html

@@ -33,7 +33,8 @@
                     <div class="app-chrome-item">
                         <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
                             @click="mk.shuffleMode = 1"></button>
-                    <button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
+                        <button class="playback-button--small shuffle active" v-else
+                            @click="mk.shuffleMode = 0"></button>
                     </div>
                     <div class="app-chrome-item">
                         <button class="playback-button previous" @click="mk.skipToPreviousItem()"></button>
@@ -70,8 +71,7 @@
                                     <div class="song-progress">
                                         <input type="range" step="0.01" min="0"
                                             @change="mk.seekToTime($event.target.value)"
-                                           :max="mk.currentPlaybackDuration"
+                                            :max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
-                                           :value="playerLCD.playbackDuration">
                                     </div>
                                 </div>
                                 <div class="actions">❤️</div>
@@ -100,13 +100,13 @@
                     </div>
                     <div class="app-chrome-item generic">
                         <button class="playback-button--small lyrics"
-                            @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"
+                            @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
-                    ></button>
                     </div>
                     <div class="app-chrome-item full-height">
                         <div class="window-controls">
                             <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-                        <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div>
+                            <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')">
+                            </div>
                             <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
                             <div class="close" @click="ipcRenderer.send('close')"></div>
                         </div>
@@ -118,12 +118,8 @@
                     <div class="app-sidebar-header">
                         <div class="search-input-container">
                             <div class="search-input--icon"></div>
-                        <input type="search"
+                            <input type="search" spellcheck="false" @click="showSearch()"
-                               spellcheck="false"
+                                @change="showSearch();searchQuery()" placeholder="Search..." v-model="search.term"
-                               @click="showSearch()"
-                               @change="showSearch();searchQuery()"
-                               placeholder="Search..."
-                               v-model="search.term"
                                 class="search-input">
                         </div>
                     </div>
@@ -144,7 +140,8 @@
                         <div class="app-sidebar-header-text">
                             Playlists
                         </div>
-                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href"
+                        <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
+                            :href="item.href"
                             @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
                             {{ item.attributes.name }}
                         </button>
@@ -174,14 +171,13 @@
                             @click="chrome.menuOpened = !chrome.menuOpened">
                             <template v-if="chrome.userinfo.attributes">
                                 <img class="sidebar-user-icon" loading="lazy"
-
+                                    :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)" />
-                                 :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"
-                            />
                             </template>
 
                             <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
                                 <template v-if="chrome.userinfo.attributes">
-                                <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div>
+                                    <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
+                                    </div>
                                     <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
                                         }}
                                     </div>
@@ -224,7 +220,8 @@
                                 <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
                                     MusicKit
                                 </button>
-                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">
+                                <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
+                                    @click="unauthorize()">
                                     Stop
                                     MusicKit
                                 </button>
@@ -239,7 +236,8 @@
                                 </div>
                                 <h1 class="header-text">Browse</h1>
                                 <p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
+                                    tincidunt
                                     consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
                                 </p>
                                 <div class="media-item--small">
@@ -297,16 +295,11 @@
                                 <h1 class="header-text">Songs</h1>
                                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                                     <div class="search-input--icon"></div>
-                                <input type="search"
+                                    <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                                       style="width:100%;"
+                                        @input="searchLibrarySongs" v-model="library.songs.search" class="search-input">
-                                       spellcheck="false"
-                                       placeholder="Search..."
-                                       @input="searchLibrarySongs"
-                                       v-model="library.songs.search"
-                                       class="search-input">
                                 </div>
-                            <mediaitem-list-item :item="item"
+                                <mediaitem-list-item :item="item" v-for="item in library.songs.displayListing">
-                                                 v-for="item in library.songs.displayListing"></mediaitem-list-item>
+                                </mediaitem-list-item>
                             </div>
                         </template>
                     </transition>
@@ -317,29 +310,25 @@
                                 <h1 class="header-text">Albums</h1>
                                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                                     <div class="search-input--icon"></div>
-                                <input type="search"
+                                    <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                                       style="width:100%;"
-                                       spellcheck="false"
-                                       placeholder="Search..."
                                         class="search-input">
                                 </div>
-                            <mediaitem-square-large :item="item"
+                                <mediaitem-square-large :item="item" v-for="item in library.albums.listing">
-                                                    v-for="item in library.albums.listing"></mediaitem-square-large>
+                                </mediaitem-square-large>
                             </div>
                         </template>
                     </transition>
                 </div>
                 <transition name="drawertransition">
                     <div class="app-drawer" v-if="drawertest">
-                    <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
+                        <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
+                        </lyrics-view>
                     </div>
                 </transition>
             </div>
         </div>
         <transition name="wpfade">
-        <img v-show="chrome.artworkReady"
+            <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
-             @load="chrome.artworkReady = true"
-             class="bg-artwork"
                 :src="getNowPlayingArtworkBG(32)">
         </transition>
         <transition name="wpfade">

src/renderer/todo.js

@@ -15,142 +15,177 @@
 //  &types=artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells
 //  &l=en-gb&platform=web
 
-await app.mk.api.personalRecommendations("",
+await app.mk.api.personalRecommendations(
+    '',
     {
-            name: "listen-now",
+        name: 'listen-now',
-            with: "friendsMix,library,social",
+        with: 'friendsMix,library,social',
-            "art[social-profiles:url]":"c",
+        'art[social-profiles:url]': 'c',
-            "art[url]": "c,f",
+        'art[url]': 'c,f',
-            "omit[resource]": "autos",
+        'omit[resource]': 'autos',
-            "relate[editorial-items]": "contents",
+        'relate[editorial-items]': 'contents',
-            extend: ["editorialCard", "editorialVideo"],
+        extend: ['editorialCard', 'editorialVideo'],
-            "extend[albums]": ["artistUrl"],
+        'extend[albums]': ['artistUrl'],
-            "extend[library-albums]": ["artistUrl"],
+        'extend[library-albums]': ['artistUrl'],
-            "extend[playlists]": ["artistNames", "editorialArtwork"],
+        'extend[playlists]': ['artistNames', 'editorialArtwork'],
-            "extend[library-playlists]": ["artistNames", "editorialArtwork"],
+        'extend[library-playlists]': ['artistNames', 'editorialArtwork'],
-            "extend[social-profiles]": "topGenreNames",
+        'extend[social-profiles]': 'topGenreNames',
-            "include[albums]": "artists",
+        'include[albums]': 'artists',
-            "include[songs]": "artists",
+        'include[songs]': 'artists',
-            "include[music-videos]": "artists",
+        'include[music-videos]': 'artists',
-            "fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
+        'fields[albums]': [
-            "fields[artists]": ["name", "url"],
+            'artistName',
-            "extend[stations]": ["airDate", "supportsAirTimeUpdates"],
+            'artistUrl',
-            "meta[stations]": "inflectionPoints",
+            'artwork',
-            types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
+            'contentRating',
-            l:"en-gb",
+            'editorialArtwork',
-            platform:"web"
+            'editorialVideo',
+            'name',
+            'playParams',
+            'releaseDate',
+            'url'
+        ],
+        'fields[artists]': ['name', 'url'],
+        'extend[stations]': ['airDate', 'supportsAirTimeUpdates'],
+        'meta[stations]': 'inflectionPoints',
+        types: 'artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells',
+        l: 'en-gb',
+        platform: 'web'
     },
     {
         includeResponseMeta: !0,
         reload: !0
-        });
+    }
+);
 
 // Browse page
-await app.mk.api.groupings("",
+await app.mk.api.groupings('', {
-       {
+    platform: 'web',
-            platform: "web",
+    name: 'music',
-            name: "music",
+    l: 'en-gb',
-            l: "en-gb",
+    'omit[resource:artists]': 'relationships',
-            "omit[resource:artists]": "relationships",
+    'include[albums]': 'artists',
-            "include[albums]": "artists",
+    'include[songs]': 'artists',
-            "include[songs]": "artists",
+    'include[music-videos]': 'artists',
-            "include[music-videos]": "artists",
+    extend: 'editorialArtwork,artistUrl',
-            extend: "editorialArtwork,artistUrl",
+    'fields[artists]':
-            "fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
+        'name,url,artwork,editorialArtwork,genreNames,editorialNotes',
-            "art[url]": "f"
+    'art[url]': 'f'
 });
 
 // Radio page
-await app.mk.api.recentRadioStations("",
+await app.mk.api.recentRadioStations('', {
-            {l: "en-gb",
+    l: 'en-gb',
-                "platform": "web",
+    platform: 'web',
-                "art[url]": "f"});
+    'art[url]': 'f'
+});
 
 // Recently Added
-await app.mk.api.library.recentlyAdded({
+await app.mk.api.library.recentlyAdded(
-    "platform": "web",
+    {
+        platform: 'web',
         include: {
-        "library-albums": ["artists"],
+            'library-albums': ['artists'],
-        "library-artists": ["catalog"]
+            'library-artists': ['catalog']
         },
         fields: {
-        artists: ["url"],
+            artists: ['url'],
-        albums: "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url"
+            albums: 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url'
         },
-    includeOnly: ["catalog", "artists"],
+        includeOnly: ['catalog', 'artists'],
         limit: 25
-}, {
+    },
+    {
         reload: !0,
         includePagination: !0
-})
+    }
+);
 
 // Songs
 await app.mk.api.library.songs({ limit: 100 }).then((data) => {
-    console.log(data)
+    console.log(data);
-})
+});
 
 // Artists
 await app.mk.api.library.artists({ limit: 100 }).then((data) => {
-    console.log(data)
+    console.log(data);
-})
+});
 
 // Artists
 await app.mk.api.library.albums({ limit: 100 }).then((data) => {
-    console.log(data)
+    console.log(data);
-})
+});
 
 // Albums
 // does not like limit = 100 for some reason
 await app.mk.api.library.albums({ limit: 50 }).then((data) => {
-    console.log(data)
+    console.log(data);
-})
+});
 
 // Made For You
-app.mk.api.recommendations("",{extend: "editorialArtwork,artistUrl"})
+app.mk.api.recommendations('', { extend: 'editorialArtwork,artistUrl' });
 
 // Library with library length
-await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((data)=>{
+await app.mk.api.library
-    console.log(data)
+    .songs('', { limit: 100 }, { includeResponseMeta: !0 })
-})
+    .then((data) => {
+        console.log(data);
+    });
 
 // Artist View Top Songs
-app.mk.api.artistView("325096253", "top-songs", {}, {view: "top-songs", includeResponseMeta: !0})
+app.mk.api.artistView(
+    '325096253',
+    'top-songs',
+    {},
+    { view: 'top-songs', includeResponseMeta: !0 }
+);
 
 // Artist Page Data
-app.mkapi("artists", false, "412778295", {
+app.mkapi(
-	"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
+    'artists',
-	"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
+    false,
-	"extend[playlists]": "trackCount",
+    '412778295',
-	"omit[resource:songs]": "relationships",
+    {
-	"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
+        views: 'featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see',
-	"limit[artists:top-songs]": 20,
+        extend: 'artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero',
-	"art[url]": "f"
+        'extend[playlists]': 'trackCount',
-}, {includeResponseMeta: !0}).then((data)=>{
+        'omit[resource:songs]': 'relationships',
-    console.log(data)
+        'fields[albums]':
-})
+            'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount',
+        'limit[artists:top-songs]': 20,
+        'art[url]': 'f'
+    },
+    { includeResponseMeta: !0 }
+).then((data) => {
+    console.log(data);
+});
 
 // download entire library
-var library = []
+var library = [];
 var downloaded = null;
 function downloadChunk() {
     if (downloaded == null) {
-        app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{
+        app.mk.api.library
-            processChunk(response)
+            .songs('', { limit: 100 }, { includeResponseMeta: !0 })
-        })
+            .then((response) => {
+                processChunk(response);
+            });
     } else {
-        downloaded.next("", {limit: 100}, {includeResponseMeta: !0}).then((response)=>{
+        downloaded
-            processChunk(response)
+            .next('', { limit: 100 }, { includeResponseMeta: !0 })
-        })
+            .then((response) => {
+                processChunk(response);
+            });
     }
 }
 function processChunk(response) {
-    downloaded = response
+    downloaded = response;
-    library = library.concat(downloaded.data)
+    library = library.concat(downloaded.data);
     if (downloaded.meta.total > library.length) {
-        console.log(`downloading next chunk - ${library.length} songs so far`)
+        console.log(`downloading next chunk - ${library.length} songs so far`);
-        downloadChunk()
+        downloadChunk();
     } else {
-        console.log(library)
+        console.log(library);
     }
 }
 
@@ -158,23 +193,26 @@ function processChunk (response) {
 // recentPlayed() -> recently played songs ?
 
 // create Artist / Song/ Album stations:
-app.mk.setStationQueue({artist:"1258279972"})
+app.mk.setStationQueue({ artist: '1258279972' });
-app.mk.setStationQueue({song:"1437308307"}) // yes the song id here can be the albumId, but just keep using the song:
+app.mk.setStationQueue({ song: '1437308307' }); // yes the song id here can be the albumId, but just keep using the song:
 
 // Sorting Playlists, send an array of tracks in the format below
 // playlist must be fully recursively downloaded first before sorting
 
-app.mk.api.library.putPlaylistTracklisting(app.showingPlaylist.attributes.playParams.id, [
+app.mk.api.library.putPlaylistTracklisting(
+    app.showingPlaylist.attributes.playParams.id,
+    [
         {
-        "id": relationships.tracks.data[X].id,
+            id: relationships.tracks.data[X].id,
-        "type": relationships.tracks.data[X].type
+            type: relationships.tracks.data[X].type
         },
         {
-        "id": relationships.tracks.data[X].id,
+            id: relationships.tracks.data[X].id,
-        "type": relationships.tracks.data[X].type
+            type: relationships.tracks.data[X].type
         },
         {
-        "id": relationships.tracks.data[X].id,
+            id: relationships.tracks.data[X].id,
-        "type": relationships.tracks.data[X].type
+            type: relationships.tracks.data[X].type
-    },
+        }
-])
+    ]
+);

src/renderer/views/components/libraryartist-item.ejs

@@ -71,18 +71,21 @@
             async select(e) {
                 let u = this.item
                 let u1 = await app.mk.api.library.artistRelationship(u.id, "albums",
-               {platform: "web",
+                    {
+                        platform: "web",
                         "include[library-albums]": "artists,tracks",
                         "include[library-artists]": "catalog",
                         "fields[artists]": "url",
-                "includeOnly": "catalog,artists"}
+                        "includeOnly": "catalog,artists"
+                    }
                 )
                 app.showCollection({ data: Object.assign({}, u1) }, u.attributes.name ?? '', '');
             },
             getArtwork() {
                 let u = ""
                 try {
-                u = this.item.relationships.catalog.data[0].attributes.artwork.url}
+                    u = this.item.relationships.catalog.data[0].attributes.artwork.url
+                }
                 catch (e) { };
                 return u;
             },

src/renderer/views/main.ejs

@@ -17,7 +17,7 @@
     <title>Cider</title>
     <link rel="stylesheet/less" type="text/css" href="style.less" />
     <script src="less.js"></script>
-    <script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script>
+    <script src="<%- (env.dev ? 'vue.js' : 'vue.dev.js') %>"></script>
     <script src="vuex.min.js"></script>
     <script src="sortable.min.js"></script>
     <script src="vue-observe-visibility.min.js"></script>
@@ -90,10 +90,12 @@
                                         </div>
 
                                         <div class="song-progress">
-                                        <div class="song-duration" style="justify-content: space-between; height: 1px;"
+                                            <div class="song-duration"
+                                                style="justify-content: space-between; height: 1px;"
                                                 :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
                                                 <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
-                                            <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}</p>
+                                                <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
+                                                </p>
                                             </div>
 
                                             <input type="range" step="0.01" min="0" :style="progressBarStyle()"
@@ -118,8 +120,8 @@
                     <div class="app-chrome--right">
                         <div class="app-chrome-item volume display--large">
                             <div class="app-chrome-item volume-icon"></div>
-                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
+                            <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
-                               v-if="typeof mk.volume != 'undefined'">
+                                v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
                         </div>
                         <div class="app-chrome-item generic" v-if="false">
                             <button class="playback-button--small">
@@ -137,7 +139,8 @@
                         <div class="app-chrome-item full-height">
                             <div class="window-controls">
                                 <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-                            <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')">
+                                <div class="minmax restore" v-if="chrome.maximized"
+                                    @click="ipcRenderer.send('maximize')">
                                 </div>
                                 <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
                                 <div class="close" @click="ipcRenderer.send('close')"></div>
@@ -153,11 +156,9 @@
                                 <input type="search" spellcheck="false" @click="showSearch()"
                                     @focus="search.showHints = true"
                                     @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                                   v-on:keyup.enter="searchQuery();search.showHints = false"
+                                    v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
-                                   @change="showSearch();" @input="getSearchHints()" placeholder="Search..."
+                                    @input="getSearchHints()" placeholder="Search..." v-model="search.term"
-                                   v-model="search.term"
+                                    ref="searchInput" class="search-input">
-                                   ref="searchInput"
-                                   class="search-input">
                             </div>
                         </div>
                         <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
@@ -172,21 +173,30 @@
                             <div class="app-sidebar-header-text">
                                 Apple Music
                             </div>
-                        <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item>
+                            <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home">
-                        <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item>
+                            </sidebar-library-item>
-                        <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item>
+                            <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
-                        <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item>
+                                page="listen_now"></sidebar-library-item>
+                            <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse">
+                            </sidebar-library-item>
+                            <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio">
+                            </sidebar-library-item>
                             <div class="app-sidebar-header-text">
                                 Library
                             </div>
-                        <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item>
+                            <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
-                        <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item>
+                                page="library-recentlyadded"></sidebar-library-item>
-                        <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item>
+                            <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
-                        <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item>
+                                page="library-songs"></sidebar-library-item>
+                            <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg"
+                                page="library-albums"></sidebar-library-item>
+                            <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
+                                page="library-artists"></sidebar-library-item>
                             <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                                 Playlists
                             </div>
-                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"></sidebar-playlist>
+                            <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
+                            </sidebar-playlist>
                         </div>
                         <transition name="wpfade">
                             <div class="usermenu-container" v-if="chrome.menuOpened">
@@ -211,7 +221,8 @@
                                             </div>
                                         </div>
                                     </button>
-                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial" @click="modals.spatialProperties = true">
+                                    <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
+                                        @click="modals.spatialProperties = true">
                                         Spatialized Audio Settings
                                     </button>
                                     <button class="usermenu-item">
@@ -231,10 +242,8 @@
                         </transition>
                         <div class="app-sidebar-footer">
                             <input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
-                               v-model="mk.volume" @wheel="volumeWheel"
+                                v-model="mk.volume" @wheel="volumeWheel" v-if="typeof mk.volume != 'undefined'">
-                               v-if="typeof mk.volume != 'undefined'">
+                            <button class="app-sidebar-button" style="width:100%" :class="{active: chrome.menuOpened}"
-                        <button class="app-sidebar-button" style="width:100%"
-                                :class="{active: chrome.menuOpened}"
                                 @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
                                 @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
 
@@ -243,9 +252,11 @@
 
                                 <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
                                     <template v-if="chrome.userinfo.id">
-                                    <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
+                                        <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name
+                                            }}
                                         </div>
-                                    <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
+                                        <div class="handle-text text-overflow-elipsis">@{{
+                                            chrome.userinfo.attributes.handle
                                             }}
                                         </div>
                                     </template>
@@ -272,9 +283,12 @@
                     </div>
                     <div id="app-content">
                         <div id="navigation-bar">
-                        <button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
+                            <button class="nav-item" @click="navigateBack()">
-                        <button class="nav-item"
+                                <%- include('svg/chevron-left.svg') %>
-                                @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
+                            </button>
+                            <button class="nav-item" @click="navigateForward()">
+                                <%- include('svg/chevron-right.svg') %>
+                            </button>
                         </div>
                         <!-- Artist Page -->
                         <transition name="wpfade">
@@ -457,7 +471,8 @@
                             <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
                                 :richlyrics="richlyrics"></lyrics-view>
                             <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
-                                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? "Default View":'Fullscreen View'}}</button> 
+                                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
+                                    "Default View":'Fullscreen View'}}</button>
                             </div>
                             <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                         </div>
@@ -467,15 +482,15 @@
         </transition>
         <transition name="fsModeSwitch">
             <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
+                <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                    :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
             </div>
         </transition>
         <transition name="wpfade">
-        <div class="bg-artwork-container" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
+            <div class="bg-artwork-container"
-            <img @load="chrome.artworkReady = true" class="bg-artwork a "
+                :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
-            >
+                <img @load="chrome.artworkReady = true" class="bg-artwork a ">
-            <img class="bg-artwork b"
+                <img class="bg-artwork b">
-            >
             </div>
         </transition>
         <transition name="wpfade">
@@ -499,9 +514,11 @@
                 </div>
                 <div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
                     lyrics[currentLyricsLine].line ) ?
-                lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? ((lyrics.length
+                    lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
+                    ((lyrics.length
                     > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
-                (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "") :
+                    (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
+                    :
                     '')}}
                 </div>
                 <div id="player-pip"
@@ -578,43 +595,63 @@
                                                                     <!-- Queue Item -->
                                                                     <%- include('components/queue-item') %>
                                                                         <!-- Horizontal MediaItem Scroller -->
-<%- include('components/mediaitem-scroller-horizontal') %>
+                                                                        <%- include('components/mediaitem-scroller-horizontal')
+                                                                            %>
                                                                             <!-- Horizontal MediaItem Scroller (Large) -->
-<%- include('components/mediaitem-scroller-horizontal-large') %>
+                                                                            <%- include('components/mediaitem-scroller-horizontal-large')
+                                                                                %>
                                                                                 <!-- Horizontal MediaItem Scroller (SP : Special) -->
-<%- include('components/mediaitem-scroller-horizontal-sp') %>
+                                                                                <%- include('components/mediaitem-scroller-horizontal-sp')
+                                                                                    %>
                                                                                     <!-- Horizontal MediaItem Scroller (MV) -->
-<%- include('components/mediaitem-scroller-horizontal-mvview') %>
+                                                                                    <%- include('components/mediaitem-scroller-horizontal-mvview')
+                                                                                        %>
                                                                                         <!-- MediaItem List Item -->
-<%- include('components/mediaitem-list-item') %>
+                                                                                        <%- include('components/mediaitem-list-item')
+                                                                                            %>
                                                                                             <!-- MediaItem Horizontal Rectangle -->
-<%- include('components/mediaitem-hrect') %>
+                                                                                            <%- include('components/mediaitem-hrect')
+                                                                                                %>
                                                                                                 <!-- MediaItem Square -->
-<%- include('components/mediaitem-square') %>
+                                                                                                <%- include('components/mediaitem-square')
+                                                                                                    %>
                                                                                                     <!-- MediaItem Square SP -->
-<%- include('components/mediaitem-square-sp') %>
+                                                                                                    <%- include('components/mediaitem-square-sp')
+                                                                                                        %>
                                                                                                         <!-- MediaItem MusicVideo -->
-<%- include('components/mediaitem-mvview') %>
+                                                                                                        <%- include('components/mediaitem-mvview')
+                                                                                                            %>
                                                                                                             <!-- MediaItem MusicVideo -->
-<%- include('components/libraryartist-item') %>
+                                                                                                            <%- include('components/libraryartist-item')
-<%- include('components/listennow-child') %>
+                                                                                                                %>
+                                                                                                                <%- include('components/listennow-child')
+                                                                                                                    %>
                                                                                                                     <!-- MediaItem MusicVideo SP -->
-<%- include('components/mediaitem-mvview-sp') %>
+                                                                                                                    <%- include('components/mediaitem-mvview-sp')
+                                                                                                                        %>
                                                                                                                         <!-- Animated Artwork View -->
-<%- include('components/animatedartwork-view') %>
+                                                                                                                        <%- include('components/animatedartwork-view')
+                                                                                                                            %>
                                                                                                                             <!-- Lyrics View -->
-<%- include('components/lyrics-view') %>
+                                                                                                                            <%- include('components/lyrics-view')
+                                                                                                                                %>
                                                                                                                                 <!-- Fullscreen View -->
-<%- include('components/fullscreen') %>
+                                                                                                                                <%- include('components/fullscreen')
+                                                                                                                                    %>
 
-<script src="musickit.js?v=1"></script>
+                                                                                                                                    <script
+                                                                                                                                        src="musickit.js?v=1"></script>
                                                                                                                                     <script>
                                                                                                                                         if (typeof MusicKit == 'undefined') {
                                                                                                                                             document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));
                                                                                                                                         }
                                                                                                                                     </script>
-<script src="index.js?v=1"></script>
+                                                                                                                                    <script
-<script src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
+                                                                                                                                        src="index.js?v=1"></script>
-<script src="/audio/audio.js?v=1"></script>
+                                                                                                                                    <script
+                                                                                                                                        src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
+                                                                                                                                    <script
+                                                                                                                                        src="/audio/audio.js?v=1"></script>
 </body>
+
 </html>

src/renderer/views/pages/about.ejs

@@ -1,7 +1,6 @@
 Major thanks to the Cider Development Team and all of our contributors.
 
-<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
+<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link" target="_blank"
-                                       target="_blank"
         rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
     All Rights
     Reserved.</p>
@@ -14,6 +13,5 @@ vapormusic - Developer - https://github.com/vapormusic
 Void - Social Communications Team - https://twitter.com/MoonyVoid
 NoseySG - Social Communications Team - https://twitter.com/noah_grose
 
-<img class="md-contributors"
+<img class="md-contributors" onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
-     onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
     src="https://contrib.rocks/image?repo=ciderapp/Cider" />

src/renderer/views/pages/library-albums.ejs

@@ -5,19 +5,18 @@
                 <h1 class="header-text">Albums</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)"
+                    class="reload-btn">
+                    <%- include('../svg/redo.svg') %>
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col" style="padding:0px;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                     <div class="search-input--icon"></div>
-                    <input type="search"
+                    <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                           style="width:100%;"
+                        @input="searchLibraryAlbums" v-model="library.albums.search" class="search-input">
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibraryAlbums"
-                           v-model="library.albums.search" class="search-input">
                 </div>
             </div>
             <div class="col-auto flex-center">
@@ -25,12 +24,14 @@
                     <div class="col">
                         <select class="md-select" v-model="library.albums.sorting[1]" @change="searchLibraryAlbums(1)">
                             <optgroup label="Sort By">
-                                <option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
+                                <option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}
+                                </option>
                             </optgroup>
                         </select>
                     </div>
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.sortOrder[1]" @change="searchLibraryAlbums(1)">
+                        <select class="md-select" v-model="library.albums.sortOrder[1]"
+                            @change="searchLibraryAlbums(1)">
                             <optgroup label="Sort Order">
                                 <option value="asc">Ascending</option>
                                 <option value="desc">Descending</option>
@@ -51,11 +52,13 @@
         <div class="well">
             <div class="albums-square-container">
                 <div>
-                    <mediaitem-square v-if="library.albums.viewAs == 'covers'" :size="'150'" :item="item" v-for="item in library.albums.displayListing">
+                    <mediaitem-square v-if="library.albums.viewAs == 'covers'" :size="'150'" :item="item"
+                        v-for="item in library.albums.displayListing">
                     </mediaitem-square>
                 </div>
             </div>
-            <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
+            <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true"
+                :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
             </mediaitem-list-item>
         </div>
     </div>

src/renderer/views/pages/library-artists.ejs

@@ -9,12 +9,8 @@
         <div class="col" style="padding:0px;">
             <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                 <div class="search-input--icon"></div>
-                    <input type="search"
+                <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                           style="width:100%;"
+                    @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibraryArtists"
-                           v-model="library.artists.search" class="search-input">
             </div>
         </div>
         <div class="col-auto flex-center">
@@ -48,7 +44,8 @@
     <div class="well">
         <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
             </mediaitem-square> -->
-            <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
+        <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item"
+            v-for="item in library.artists.displayListing">
         </libraryartist-item>
     </div>
 </div>

src/renderer/views/pages/library-recentlyadded.ejs

@@ -6,19 +6,17 @@
             </div>
             <div class="col-auto">
                 <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
-                        class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                    class="reload-btn">
+                    <%- include('../svg/redo.svg') %>
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col" style="padding:0px;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                     <div class="search-input--icon"></div>
-                    <input type="search"
+                    <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                           style="width:100%;"
+                        @input="searchLibraryAlbums" v-model="library.albums.search" class="search-input">
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibraryAlbums"
-                           v-model="library.albums.search" class="search-input">
                 </div>
             </div>
             <div class="col-auto flex-center">
@@ -48,8 +46,7 @@
                 v-for="item in library.albums.displayListing">
             </mediaitem-square>
             <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true"
-                                 :show-library-status="false" :item="item"
+                :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
-                                 v-for="item in library.albums.displayListing">
             </mediaitem-list-item>
         </div>
     </div>

src/renderer/views/pages/library-songs.ejs

@@ -5,19 +5,17 @@
                 <h1 class="header-text">Songs</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn">
+                    <%- include('../svg/redo.svg') %>
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col" style="padding:0px;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                     <div class="search-input--icon"></div>
-                    <input type="search"
+                    <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
-                           style="width:100%;"
+                        @input="searchLibrarySongs" v-model="library.songs.search" class="search-input">
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibrarySongs"
-                           v-model="library.songs.search" class="search-input">
                 </div>
             </div>
             <div class="col-auto flex-center">
@@ -25,7 +23,8 @@
                     <div class="col">
                         <select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
                             <optgroup label="Sort By">
-                                <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
+                                <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}
+                                </option>
                             </optgroup>
                         </select>
                     </div>
@@ -41,6 +40,7 @@
             </div>
         </div>
         <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
-        <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true"
+            :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
     </div>
 </template>

src/renderer/views/pages/settings.ejs

@@ -577,9 +577,11 @@
                 if (app.cfg.advanced.AudioContext) {
                     CiderAudio.init();
                     if (app.cfg.audio.normalization) {
-                    CiderAudio.normalizerOn()}
+                        CiderAudio.normalizerOn()
+                    }
                     if (app.cfg.audio.spatial) {
-                    CiderAudio.spatialOn()} 
+                        CiderAudio.spatialOn()
+                    }
                 } else {
                     CiderAudio.off();
                 }

workbox-config.js

@@ -2,7 +2,8 @@ module.exports = {
     globDirectory: 'src/renderer/',
     swDest: 'src/renderer/sw.js',
     // Define runtime caching rules.
-    runtimeCaching: [{
+    runtimeCaching: [
+        {
             // Match any request that ends with .png, .jpg, .jpeg or .svg.
             urlPattern: /\.(?:png|jpg|jpeg|svg|webp)$/,
 
@@ -11,11 +12,10 @@ module.exports = {
 
             options: {
                 // Use a custom cache name.
-            cacheName: 'imageinternet',
+                cacheName: 'imageinternet'
 
                 // Only cache 10 images.
-
+            }
-        },
         },
         {
             urlPattern: /https:\/\/amp-api.music.apple.com\/v1\//,
@@ -23,18 +23,19 @@ module.exports = {
             options: {
                 cacheName: 'amp-api',
                 cacheableResponse: {
-                    statuses: [0, 200],
+                    statuses: [0, 200]
-                },
+                }
-            },
+            }
         },
         {
             urlPattern: /https:\/\/is[0-9]-ssl\.mzstatic\.com\/image+/,
-            handler: "CacheFirst",
+            handler: 'CacheFirst'
         },
         {
-            urlPattern: /^https:\/\/store-\d{3}\.blobstore\.apple\.com\/.{65}\/image+/,
+            urlPattern:
-            handler: "CacheFirst",
+                /^https:\/\/store-\d{3}\.blobstore\.apple\.com\/.{65}\/image+/,
-        },
+            handler: 'CacheFirst'
+        }
     ],
     ignoreURLParametersMatching: [
         /^utm_/,
@@ -44,6 +45,6 @@ module.exports = {
         /^X-Amz-SignedHeaders/,
         /^X-Amz-Expires/,
         /^X-Amz-Credential/,
-        /^X-Amz-Signature/,
+        /^X-Amz-Signature/
     ]
 };