okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added sidebar-library-item component

Browse source
This commit is contained in:
booploops 2021-12-03 12:41:31 -08:00
parent 90670206ba
commit f88477f18f
2 changed files with 55 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

23
resources/cider-ui-tests/index.html
View file

@ -124,19 +124,16 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<button class="app-sidebar-item"> <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
<div></div> <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
<div>Listen Now</div> <sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
</button>
<button class="app-sidebar-item active">Browse</button>
<button class="app-sidebar-item">Radio</button>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
<button class="app-sidebar-item">Songs</button> <sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
<button class="app-sidebar-item">Albums</button> <sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
<button class="app-sidebar-item">Artists</button> <sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
<button class="app-sidebar-item">Made For You</button> <sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Playlists Playlists
</div> </div>
@ -221,6 +218,12 @@
<div class="bg-artwork"></div> <div class="bg-artwork"></div>
</div> </div>
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)"
@click="$parent.page = page">{{ name }}</button>
</script>
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="$parent.playMediaItemById(item.id, item.type)"

74
resources/cider-ui-tests/index.js
View file

@ -1,22 +1,25 @@
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: ['name', 'page'],
methods: {}
});
Vue.component('mediaitem-square', { Vue.component('mediaitem-square', {
template: '#mediaitem-square', template: '#mediaitem-square',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
Vue.component('mediaitem-hrect', { Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect', template: '#mediaitem-hrect',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
Vue.component('mediaitem-list-item', { Vue.component('mediaitem-list-item', {
template: '#mediaitem-list-item', template: '#mediaitem-list-item',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
const MusicKitTools = { const MusicKitTools = {
@ -56,7 +59,7 @@ const app = new Vue({
this.mk.authorize() this.mk.authorize()
this.$forceUpdate() this.$forceUpdate()
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{ this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime) self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
}) })
@ -64,6 +67,13 @@ const app = new Vue({
self.playlists.listing = res.data self.playlists.listing = res.data
}) })
}, },
getSidebarItemClass(page) {
if (this.page == page) {
return ["active"]
} else {
return []
}
},
unauthorize() { unauthorize() {
this.mk.unauthorize() this.mk.unauthorize()
}, },
@ -71,7 +81,7 @@ const app = new Vue({
this.page = "search" this.page = "search"
}, },
playMediaItemById(id, kind) { playMediaItemById(id, kind) {
this.mk.setQueue({ [kind]: [id] }).then(function (queue) { this.mk.setQueue({[kind]: [id]}).then(function (queue) {
MusicKit.getInstance().play() MusicKit.getInstance().play()
}) })
}, },
@ -81,14 +91,14 @@ const app = new Vue({
{ {
types: "songs,artists,albums,playlists", types: "songs,artists,albums,playlists",
limit: 32 limit: 32
}).then(function(results) { }).then(function (results) {
self.search.results = results self.search.results = results
}) })
}, },
mkReady() { mkReady() {
if (this.mk["nowPlayingItem"]) { if (this.mk["nowPlayingItem"]) {
return true return true
} else{ } else {
return false return false
} }
}, },
@ -104,10 +114,10 @@ const app = new Vue({
}, },
quickPlay(query) { quickPlay(query) {
let self = this let self = this
MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) { MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {
MusicKit.getInstance().setQueue({ song: data["songs"]['data'][0]["id"] }).then(function (queue) { MusicKit.getInstance().setQueue({song: data["songs"]['data'][0]["id"]}).then(function (queue) {
MusicKit.getInstance().play() MusicKit.getInstance().play()
setTimeout(()=>{ setTimeout(() => {
self.$forceUpdate() self.$forceUpdate()
}, 1000) }, 1000)
}) })
@ -148,26 +158,26 @@ const app = new Vue({
} }
}) })
document.addEventListener('musickitloaded', function() { document.addEventListener('musickitloaded', function () {
// MusicKit global is now defined // MusicKit global is now defined
fetch("https://beta.music.apple.com/") fetch("https://beta.music.apple.com/")
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
var el = document.createElement("html"); var el = document.createElement("html");
el.innerHTML = data; el.innerHTML = data;
var u = el.querySelector(`[name="desktop-music-app/config/environment"]`) var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content"))); var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
console.log(amwebCFG.MEDIA_API.token) console.log(amwebCFG.MEDIA_API.token)
MusicKit.configure({ MusicKit.configure({
developerToken: amwebCFG.MEDIA_API.token, developerToken: amwebCFG.MEDIA_API.token,
app: { app: {
name: 'My Cool Web App', name: 'My Cool Web App',
build: '1978.4.1' build: '1978.4.1'
} }
});
setTimeout(() => {
app.init()
}, 1000)
}); });
setTimeout(()=>{
app.init()
}, 1000)
});
}); });