playlist / library search in remote

src/main/base/wsapi.ts

@@ -186,7 +186,7 @@ export class wsapi {
                         response.message = "Previous";
                         break;
                     case "musickit-api":
-                        this._win.webContents.executeJavaScript(`wsapi.musickitApi(\`${data.method}\`, \`${data.id}\`, ${JSON.stringify(data.params)})`);
+                        this._win.webContents.executeJavaScript(`wsapi.musickitApi(\`${data.method}\`, \`${data.id}\`, ${JSON.stringify(data.params)} , ${data.library})`);
                         break;
                     case "musickit-library-api":
                         break;
@@ -218,7 +218,7 @@ export class wsapi {
                         this._win.hide()
                         break;
                     case "play-mediaitem":
-                        this._win.webContents.executeJavaScript(`wsapi.playTrackById(${data.id}, \`${data.kind}\`)`);
+                        this._win.webContents.executeJavaScript(`wsapi.playTrackById("${data.id}", \`${data.kind}\`)`);
                         response.message = "Playing track";
                         break;
                     case "get-status":

src/renderer/js/WSAPI_Interop.js

@@ -2,12 +2,12 @@ const wsapi = {
     cache: {playParams: {id: 0}, status: null, remainingTime: 0},
     playbackCache: {status: null, time: Date.now()},
     search(term, limit) {
-        MusicKit.getInstance().api.search(term, {limit: limit, types: 'songs,artists,albums'}).then((results)=>{
+        MusicKit.getInstance().api.search(term, {limit: limit, types: 'songs,artists,albums,playlists'}).then((results)=>{
             ipcRenderer.send('wsapi-returnSearch', JSON.stringify(results))
         })
     },
     searchLibrary(term, limit) {
-        MusicKit.getInstance().api.library.search(term, {limit: limit, types: 'library-songs,library-artists,library-albums'}).then((results)=>{
+        MusicKit.getInstance().api.library.search(term, {limit: limit, types: 'library-songs,library-artists,library-albums,library-playlists'}).then((results)=>{
             ipcRenderer.send('wsapi-returnSearchLibrary', JSON.stringify(results))
         })
     },
@@ -47,10 +47,16 @@ const wsapi = {
     returnDynamic(data, type) {
         ipcRenderer.send('wsapi-returnDynamic', JSON.stringify(data), type)
     },
-    musickitApi(method, id, params) {
+    musickitApi(method, id, params, library = false) {
+        if (library) {
+        MusicKit.getInstance().api.library[method](id, params).then((results)=>{
+            ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method)
+        })
+        } else {
         MusicKit.getInstance().api[method](id, params).then((results)=>{
             ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method)
         }) 
+        }
     },
     getPlaybackState () {
         ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());

src/web-remote/index.js

@@ -1,3 +1,4 @@
+
 var socket;
 
 Vue.component('footer-player', {
@@ -56,13 +57,14 @@ var app = new Vue({
         searchScroll(e) {
             this.search.lastY = e.target.scrollTop;
         },
-        musicKitAPI(method, id, params) {
+        musicKitAPI(method, id, params, library = false) {
             socket.send(
                 JSON.stringify({
                     action: "musickit-api",
                     method: method,
                     id: id,
-                    params: params
+                    params: params,
+                    library : library 
                 })
             )
         },
@@ -361,15 +363,20 @@ var app = new Vue({
         showArtistByName(name) {
             this.musicKitAPI("search", name, { types: "artists" })
         },
-        showAlbum(id) {
+        showAlbum(id,library = false) {
             this.search.lastPage = "album"
             this.screen = "album-page"
-            this.musicKitAPI("album", id, {})
+            this.musicKitAPI("album", id, {}, library)
         },
-        showArtist(id) {
+        showPlaylist(id, library = false) {
+            this.search.lastPage = "album"
+            this.screen = "album-page"
+            this.musicKitAPI("playlist", id, {}, library)
+        },
+        showArtist(id, library = false) {
             this.search.lastPage = "artist"
             this.screen = "artist-page"
-            this.musicKitAPI("artist", id, { include: "songs,playlists,albums" })
+            this.musicKitAPI("artist", id, { include: "songs,playlists,albums" }, library)
         },
         showQueue() {
             this.queue.temp = this.player["queue"]["_queueItems"]
@@ -425,6 +432,14 @@ var app = new Vue({
             }
             this.playMediaItemById(id, 'album');
         },
+        playCustom(id, kind, shuffle = false) {
+            if (shuffle) {
+                this.setShuffle(true)
+            } else {
+                this.setShuffle(false)
+            }
+            this.playMediaItemById(id, kind);
+        },
         getLyrics() {
             socket.send(JSON.stringify({
                 action: "get-lyrics",
@@ -512,6 +527,7 @@ var app = new Vue({
                     case "musickitapi.search":
                             self.showArtist(response.data["artists"][0]["id"]);
                         break;
+                    case "musickitapi.playlist":    
                     case "musickitapi.album":
                             if (self.screen == "album-page") {
                                 self.albumPage.data = response.data