working on adding social people and playlists in search, testing home page in dev mode
This commit is contained in:
booploops
parent
df6ba93242
commit
3c17e15b08
8 changed files with 293 additions and 47 deletions
|
|
@ -46,7 +46,8 @@
|
|||
triggerEnabled: true,
|
||||
canSeeTrigger: false,
|
||||
showFab: false,
|
||||
commonKind: "song"
|
||||
commonKind: "song",
|
||||
api: this.$root.mk.api
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -72,12 +73,18 @@
|
|||
case "artists":
|
||||
if (this.data.next && this.triggerEnabled) {
|
||||
this.triggerEnabled = false;
|
||||
this.data.next().then(data => {
|
||||
|
||||
let nextFn = (data => {
|
||||
console.log(data);
|
||||
this.data.next = data.next;
|
||||
this.data.data = this.data.data.concat(data.data);
|
||||
this.triggerEnabled = true;
|
||||
});
|
||||
if(typeof this.data.next == "function") {
|
||||
this.data.next().then(data => next);
|
||||
}else{
|
||||
this.api.v3.music(this.data.next).then(data => nextFn);
|
||||
}
|
||||
}else{
|
||||
console.log("No next page");
|
||||
this.triggerEnabled = false;
|
||||
|
|
|
|||
124
src/renderer/views/pages/home.ejs
Normal file
124
src/renderer/views/pages/home.ejs
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<script type="text/x-template" id="cider-home">
|
||||
<div class="content-inner home-page">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Home</h3>
|
||||
<div class="well profile-well">
|
||||
<div class="user-icon">
|
||||
<mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url" size="300"></mediaitem-artwork>
|
||||
</div>
|
||||
<h3>{{ profile.attributes.name }}</h3>
|
||||
<h4>@{{ profile.attributes.handle }}</h4>
|
||||
<button class="md-btn">Share</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Recently Played</h3>
|
||||
<div class="well">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Made For You</h3>
|
||||
<div class="well">
|
||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Your Artist Feed</h3>
|
||||
<div class="well">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Friends Listening To</h3>
|
||||
<div class="well">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-home', {
|
||||
template: '#cider-home',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
madeForYou: [],
|
||||
recentlyPlayed: [],
|
||||
friendsListeningTo: [],
|
||||
profile: {},
|
||||
modify: 0
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let self = this
|
||||
this.getListenNowData()
|
||||
},
|
||||
methods: {
|
||||
getRecentlyPlayed() {
|
||||
|
||||
},
|
||||
async getListenNowData() {
|
||||
let self = this
|
||||
this.app.mk.api.personalRecommendations("",
|
||||
{
|
||||
name: "listen-now",
|
||||
with: "friendsMix,library,social",
|
||||
"art[social-profiles:url]": "c",
|
||||
"art[url]": "c,f",
|
||||
"omit[resource]": "autos",
|
||||
"relate[editorial-items]": "contents",
|
||||
extend: ["editorialCard", "editorialVideo"],
|
||||
"extend[albums]": ["artistUrl"],
|
||||
"extend[library-albums]": ["artistUrl", "editorialVideo"],
|
||||
"extend[playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
|
||||
"extend[library-playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
|
||||
"extend[social-profiles]": "topGenreNames",
|
||||
"include[albums]": "artists",
|
||||
"include[songs]": "artists",
|
||||
"include[music-videos]": "artists",
|
||||
"fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
|
||||
"fields[artists]": ["name", "url"],
|
||||
"extend[stations]": ["airDate", "supportsAirTimeUpdates"],
|
||||
"meta[stations]": "inflectionPoints",
|
||||
types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
|
||||
platform: "web"
|
||||
},
|
||||
{
|
||||
includeResponseMeta: !0,
|
||||
reload: !0
|
||||
}
|
||||
).then((data) => {
|
||||
console.log(data.data[1])
|
||||
self.recentlyPlayed = data.data[1].relationships.contents.data
|
||||
self.friendsListeningTo = data.data.filter(section => {
|
||||
if (section.meta.metrics.moduleType == "11") {
|
||||
return section
|
||||
}
|
||||
;
|
||||
})[0].relationships.contents.data
|
||||
self.madeForYou = data.data.filter(section => {
|
||||
if (section.meta.metrics.moduleType == "6") {
|
||||
return section
|
||||
}
|
||||
;
|
||||
})[0].relationships.contents.data
|
||||
});
|
||||
|
||||
app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {
|
||||
self.profile = response.data.data[0]
|
||||
console.log("!!!")
|
||||
console.log(response.data.data[0])
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -12,37 +12,70 @@
|
|||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))" v-if="search.results.song.data.length >= 6">
|
||||
<div class="col-auto flex-center"
|
||||
@click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
|
||||
v-if="search.results.song.data.length >= 6">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-list-item :item="item" :index="index"
|
||||
v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
|
||||
v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="search.results['meta']">
|
||||
<template
|
||||
v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
|
||||
<template
|
||||
v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ app.friendlyTypes(section) }}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
|
||||
<button class="cd-btn-seeall" @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See All</button>
|
||||
<button class="cd-btn-seeall"
|
||||
@click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See
|
||||
All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="!app.friendlyTypes(section).includes('Video')">
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-scroller-horizontal-mvview
|
||||
<mediaitem-scroller-horizontal-mvview
|
||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="search.resultsSocial.playlist">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Shared Playlists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.data.length >= 10">
|
||||
<button class="cd-btn-seeall"
|
||||
@click="app.showCollection(search.resultsSocial.playlist.data, 'Shared Playlists', 'default')">See All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.resultsSocial.playlist.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<template v-if="search.resultsSocial.profile">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>People</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.data.length >= 10">
|
||||
<button class="cd-btn-seeall"
|
||||
@click="app.showCollection(search.resultsSocial.profile.data, 'People', 'default')">See All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.resultsSocial.profile.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -51,7 +84,7 @@
|
|||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue