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