initial browse page
This commit is contained in:
vapormusic
parent
1b3bd3163d
commit
80c8b3abaa
5 changed files with 79 additions and 11 deletions
|
|
@ -68,6 +68,7 @@ const app = new Vue({
|
|||
desiredDuration: 0,
|
||||
userInteraction: false
|
||||
},
|
||||
browsepage: [],
|
||||
listennow: [],
|
||||
radio: {
|
||||
personal: []
|
||||
|
|
@ -262,7 +263,9 @@ const app = new Vue({
|
|||
|
||||
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
|
||||
this.currentSongInfo = a
|
||||
a = a.item.attributes;
|
||||
try{
|
||||
a = a.item.attributes;
|
||||
} catch(_){}
|
||||
|
||||
let type = (self.mk.nowPlayingItem != null) ? self.mk.nowPlayingItem["type"] ?? '' : '';
|
||||
|
||||
|
|
@ -279,6 +282,7 @@ const app = new Vue({
|
|||
app.getNowPlayingArtworkBG(32);
|
||||
app.loadLyrics()
|
||||
|
||||
try{
|
||||
// Playback Notifications
|
||||
if ((app.platform === "darwin" || app.platform === "linux") && !document.hasFocus()) {
|
||||
if (this.notification) {
|
||||
|
|
@ -290,6 +294,7 @@ const app = new Vue({
|
|||
silent: true
|
||||
})
|
||||
}
|
||||
} catch (_){}
|
||||
})
|
||||
|
||||
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
|
||||
|
|
@ -453,12 +458,10 @@ const app = new Vue({
|
|||
{kind = "recordLabel"}
|
||||
else {kind = "curator"}
|
||||
app.page = (kind) + "_" + (id);
|
||||
console.log("oks");
|
||||
app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo",include: 'grouping,playlists', views: 'top-releases,latest-releases,top-artists'});
|
||||
}
|
||||
else if (!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo")) {
|
||||
app.page = (kind) + "_" + (id);
|
||||
console.log("oks");
|
||||
app.getTypeFromID((kind), (id), (isLibrary), {extend: "editorialVideo"});
|
||||
} else {
|
||||
app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
|
||||
|
|
@ -1003,6 +1006,30 @@ const app = new Vue({
|
|||
this.getListenNow(attempt + 1)
|
||||
}
|
||||
},
|
||||
async getBrowsePage(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
var browse = await this.mk.api.groupings("",
|
||||
{
|
||||
platform: "web",
|
||||
name: "music",
|
||||
"omit[resource:artists]": "relationships",
|
||||
"include[albums]": "artists",
|
||||
"include[songs]": "artists",
|
||||
"include[music-videos]": "artists",
|
||||
extend: "editorialArtwork,artistUrl",
|
||||
"fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
|
||||
"art[url]": "f"
|
||||
});
|
||||
this.browsepage = browse[0];
|
||||
console.log(this.browsepage)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.getBrowsePage(attempt + 1)
|
||||
}
|
||||
},
|
||||
async getRadioStations(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
|
||||
size="300"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
:size="imagesize ?? 300"
|
||||
></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
|
||||
<div class="button" style="
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<script>
|
||||
Vue.component('mediaitem-mvview', {
|
||||
template: '#mediaitem-mvview',
|
||||
props: ['item'],
|
||||
props: ['item', "imagesize"],
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-mvview :item="item"
|
||||
<mediaitem-mvview :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
|
||||
v-for="item in items"></mediaitem-mvview>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
Vue.component('mediaitem-scroller-horizontal-mvview', {
|
||||
template: '#mediaitem-scroller-horizontal-mvview',
|
||||
props: ['items'],
|
||||
props: ['items',"imagesize"],
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -269,9 +269,9 @@
|
|||
</template>
|
||||
</transition>
|
||||
<!-- Browse -->
|
||||
<transition name="wpfade">
|
||||
<transition v-on:enter="app.getBrowsePage(); console.log('browse')" name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<div class="content-inner">
|
||||
<!-- <div class="content-inner">
|
||||
|
||||
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
|
||||
MusicKit
|
||||
|
|
@ -319,7 +319,8 @@
|
|||
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
|
||||
<button class="md-btn">Button</button>
|
||||
<button class="md-btn md-btn-primary">Button</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<cider-browse :data="browsepage"></cider-browse>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Listen Now -->
|
||||
|
|
@ -407,6 +408,9 @@
|
|||
</template>
|
||||
</script>
|
||||
|
||||
<!-- Browse -->
|
||||
<%- include('pages/browse') %>
|
||||
|
||||
<!-- Listen Now -->
|
||||
<%- include('pages/listen_now') %>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<script type="text/x-template" id="cider-browse">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<template v-if="data.relationships && data.relationships.tabs">
|
||||
<template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
|
||||
<div class="row">
|
||||
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
|
||||
<h3>{{ recom.attributes.name ?? ""}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
|
||||
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
|
||||
<template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
|
||||
<mediaitem-scroller-horizontal-mvview :imagesize="800"
|
||||
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
||||
</template>
|
||||
<template v-else-if="recom.attributes.name == 'Chart Set'">
|
||||
<!-- ignored -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-browse', {
|
||||
template: "#cider-browse",
|
||||
props: ["data"]
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue