see all on search now functional
This commit is contained in:
booploops
parent
e8c85e6fdc
commit
e9ae1cbe2f
4 changed files with 91 additions and 20 deletions
|
|
@ -155,7 +155,8 @@ const app = new Vue({
|
|||
},
|
||||
collectionList: {
|
||||
response: {},
|
||||
title: ""
|
||||
title: "",
|
||||
type: ""
|
||||
},
|
||||
page: "artist-page",
|
||||
pageHistory: [],
|
||||
|
|
@ -280,15 +281,51 @@ const app = new Vue({
|
|||
})
|
||||
document.body.removeAttribute("loading")
|
||||
},
|
||||
async showCollection (response, title) {
|
||||
async showCollection (response, title, type) {
|
||||
let self = this
|
||||
this.collectionList.response = response
|
||||
this.collectionList.title = title
|
||||
this.collectionList.type = type
|
||||
this.page = "collection-list"
|
||||
},
|
||||
async showArtistView (artist, title, view) {
|
||||
let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0})
|
||||
await this.showCollection(response, title)
|
||||
await this.showCollection(response, title, "artists")
|
||||
},
|
||||
async showSearchView(term, group, title) {
|
||||
let response = await this.mk.api.search(term, {
|
||||
platform: "web",
|
||||
groups: group,
|
||||
types: "activities,albums,apple-curators,artists,curators,editorial-items,music-movies,music-videos,playlists,songs,stations,tv-episodes,uploaded-videos,record-labels",
|
||||
limit: 25,
|
||||
relate: {
|
||||
editorialItems: ["contents"]
|
||||
},
|
||||
include: {
|
||||
albums: ["artists"],
|
||||
songs: ["artists"],
|
||||
"music-videos": ["artists"]
|
||||
},
|
||||
extend: "artistUrl",
|
||||
fields: {
|
||||
artists: "url,name,artwork,hero",
|
||||
albums: "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url"
|
||||
},
|
||||
with: "serverBubbles,lyricHighlights",
|
||||
art: {
|
||||
"url": "cf"
|
||||
},
|
||||
omit: {
|
||||
resource: ["autos"]
|
||||
}
|
||||
}, {groups: group, includeResponseMeta: !0})
|
||||
console.log(response)
|
||||
let responseFormat = {
|
||||
data: response[group].data.data,
|
||||
next: response[group].next,
|
||||
groups: group
|
||||
}
|
||||
await this.showCollection(responseFormat, title, "search")
|
||||
},
|
||||
async getPlaylistFromID(id) {
|
||||
const params = {include: "tracks",
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@
|
|||
<!-- Collection List -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'collection-list'">
|
||||
<cider-collection-list :data="collectionList.response" :title="collectionList.title"></cider-collection-list>
|
||||
<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Playlist / Album page-->
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<mediaitem-square-large v-else :item="item"></mediaitem-square-large>
|
||||
</template>
|
||||
</template>
|
||||
<button v-if="triggerEnabled" style="opacity:0;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
|
||||
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -22,7 +22,21 @@
|
|||
<script>
|
||||
Vue.component('cider-collection-list', {
|
||||
template: "#cider-collection-list",
|
||||
props: ["data", "title"],
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "artists"
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
triggerEnabled: true,
|
||||
|
|
@ -32,18 +46,38 @@
|
|||
methods: {
|
||||
getNext() {
|
||||
// if this.data.next is not null, then we can run this.data.next() and concat to this.data.data to get the next page
|
||||
if (this.data.next && this.triggerEnabled) {
|
||||
this.triggerEnabled = false;
|
||||
this.data.next().then(data => {
|
||||
console.log(data);
|
||||
this.data.next = data.next;
|
||||
this.data.data = this.data.data.concat(data.data);
|
||||
this.triggerEnabled = true;
|
||||
});
|
||||
}else{
|
||||
console.log("No next page");
|
||||
this.triggerEnabled = false;
|
||||
switch(this.type) {
|
||||
default:
|
||||
case "artists":
|
||||
if (this.data.next && this.triggerEnabled) {
|
||||
this.triggerEnabled = false;
|
||||
this.data.next().then(data => {
|
||||
console.log(data);
|
||||
this.data.next = data.next;
|
||||
this.data.data = this.data.data.concat(data.data);
|
||||
this.triggerEnabled = true;
|
||||
});
|
||||
}else{
|
||||
console.log("No next page");
|
||||
this.triggerEnabled = false;
|
||||
}
|
||||
break;
|
||||
case "search":
|
||||
if (this.data.next && this.triggerEnabled) {
|
||||
this.triggerEnabled = false;
|
||||
this.data.next().then(data => {
|
||||
console.log(data);
|
||||
this.data.next = data[this.data.groups].next;
|
||||
this.data.data = this.data.data.concat(data[this.data.groups].data.data);
|
||||
this.triggerEnabled = true;
|
||||
});
|
||||
}else{
|
||||
console.log("No next page");
|
||||
this.triggerEnabled = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
if(isVisible) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template>
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square-large :item="getTopResult()"></mediaitem-square>
|
||||
<mediaitem-square-large :item="getTopResult()"></mediaitem-square-large>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.song">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" 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>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<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">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')">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue