unauth button, playlists being generated from user store
This commit is contained in:
parent
2d6ac28227
commit
76da41b460
2 changed files with 43 additions and 4 deletions
|
@ -140,7 +140,9 @@
|
|||
<div class="app-sidebar-header-text">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="i in 32">Playist</button>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.items" :key="item.id" href="">
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-sidebar-footer">
|
||||
<input type="range" class="display--small">
|
||||
|
@ -155,7 +157,8 @@
|
|||
<div id="app-content">
|
||||
<!-- Browse -->
|
||||
<template v-if="page == 'browse'">
|
||||
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
|
||||
<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()">Stop MusicKit</button>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
|
|
|
@ -43,6 +43,9 @@ const app = new Vue({
|
|||
playerLCD: {
|
||||
playbackDuration: 0
|
||||
},
|
||||
playlists: {
|
||||
items: []
|
||||
},
|
||||
page: "browse"
|
||||
},
|
||||
methods: {
|
||||
|
@ -54,6 +57,15 @@ const app = new Vue({
|
|||
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
|
||||
})
|
||||
},
|
||||
unauthorize() {
|
||||
this.mk.unauthorize()
|
||||
},
|
||||
showSearch() {
|
||||
this.page = "search"
|
||||
|
@ -100,6 +112,30 @@ const app = new Vue({
|
|||
}, 1000)
|
||||
})
|
||||
})
|
||||
},
|
||||
apiCall(url, callback) {
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
|
||||
xmlHttp.onreadystatechange = (e) => {
|
||||
if (xmlHttp.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (xmlHttp.status === 200) {
|
||||
console.log('SUCCESS', xmlHttp.responseText);
|
||||
callback(JSON.parse(xmlHttp.responseText));
|
||||
} else {
|
||||
console.warn('request_error');
|
||||
}
|
||||
};
|
||||
|
||||
xmlHttp.open("GET", url);
|
||||
xmlHttp.setRequestHeader("Authorization", "Bearer " + MusicKit.getInstance().developerToken);
|
||||
xmlHttp.setRequestHeader("Music-User-Token", "" + MusicKit.getInstance().musicUserToken);
|
||||
xmlHttp.setRequestHeader("Accept", "application/json");
|
||||
xmlHttp.setRequestHeader("Content-Type", "application/json");
|
||||
xmlHttp.responseType = "text";
|
||||
xmlHttp.send();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue