From 90670206ba3ef923ab5f84cb2d81f7168cc72ece Mon Sep 17 00:00:00 2001
From: Core <64542347+coredev-uk@users.noreply.github.com>
Date: Fri, 3 Dec 2021 20:36:08 +0000
Subject: [PATCH] cleaned up a bit, added fetch playlist function

---
 resources/cider-ui-tests/index.html |  2 +-
 resources/cider-ui-tests/index.js   | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 81fe02f4..ab006be9 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -140,7 +140,7 @@
                     <div class="app-sidebar-header-text">
                         Playlists
                     </div>
-                    <button class="app-sidebar-item" v-for="item in playlists.items" :key="item.id" href="">
+                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href">
                         {{ item.attributes.name }}
                     </button>
                 </div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index c84b75a8..83b8f927 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -44,7 +44,8 @@ const app = new Vue({
             playbackDuration: 0
         },
         playlists: {
-          items: []
+            listing: [],
+            details: {}
         },
         page: "browse"
     },
@@ -54,14 +55,13 @@ const app = new Vue({
             this.mk = MusicKit.getInstance()
             this.mk.authorize()
             this.$forceUpdate()
+
             this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
             })
 
             this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
-                console.log(res.data)
-                console.log(res.data.length)
-                self.playlists.items = res.data
+                self.playlists.listing = res.data
             })
         },
         unauthorize() {
@@ -136,6 +136,14 @@ const app = new Vue({
             xmlHttp.setRequestHeader("Content-Type", "application/json");
             xmlHttp.responseType = "text";
             xmlHttp.send();
+        },
+        fetchPlaylist(id, callback) {
+            // id can be found in playlist.attributes.playParams.globalId
+            this.mk.api.playlist(id).then(res => {
+                callback(res)
+            })
+
+            // tracks are found in relationship.data
         }
     }
 })