search improvements, fix for artist pages without color palettes
This commit is contained in:
booploops
parent
98bc2d60e9
commit
5508f43aad
4 changed files with 115 additions and 92 deletions
|
|
@ -11,20 +11,6 @@ Vue.component('lyrics-view', {
|
|||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Vue.component('cider-listen-now', {
|
||||
template: "#cider-listen-now",
|
||||
props: ["data"]
|
||||
|
|
@ -246,6 +232,19 @@ const app = new Vue({
|
|||
this.artistPage.data = artistData.data[0]
|
||||
this.page = "artist-page"
|
||||
},
|
||||
getArtistPalette(artist){
|
||||
if(artist["attributes"]["artwork"]) {
|
||||
return {
|
||||
"background": "#" + artist["attributes"]["artwork"]["bgColor"],
|
||||
"color": "#" + artist["attributes"]["artwork"]["textColor1"],
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
"background": "#000000",
|
||||
"color": "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
routeView (item){
|
||||
let self = this
|
||||
app.showingPlaylist = [];
|
||||
|
|
@ -762,12 +761,44 @@ const app = new Vue({
|
|||
})
|
||||
}
|
||||
},
|
||||
friendlyTypes(type) {
|
||||
// use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
|
||||
switch (type) {
|
||||
case "songs":
|
||||
return "Songs"
|
||||
break;
|
||||
case "artists":
|
||||
return "Artists"
|
||||
break;
|
||||
case "albums":
|
||||
return "Albums"
|
||||
break;
|
||||
case "playlists":
|
||||
return "Playlists"
|
||||
break;
|
||||
case "music-videos":
|
||||
return "Music Videos"
|
||||
break;
|
||||
case "stations":
|
||||
return "Stations"
|
||||
break;
|
||||
case "apple-curators":
|
||||
return "Apple Curators"
|
||||
break;
|
||||
case "curators":
|
||||
return "Curators"
|
||||
break;
|
||||
default:
|
||||
return type
|
||||
break;
|
||||
}
|
||||
},
|
||||
searchQuery() {
|
||||
let self = this
|
||||
this.mk.api.search(this.search.term,
|
||||
{
|
||||
types: "songs,artists,albums,playlists",
|
||||
limit: self.search.limit
|
||||
types: "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators",
|
||||
limit: 25
|
||||
}).then(function (results) {
|
||||
self.search.results = results
|
||||
})
|
||||
|
|
|
|||
|
|
@ -333,10 +333,12 @@
|
|||
fill-rule="nonzero" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()" title="Picture-in-Picture">
|
||||
<div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
|
||||
title="Picture-in-Picture">
|
||||
<%- include("svg/fullscreen.svg") %>
|
||||
</div>
|
||||
<div id="player-fullscreen" @click="document.querySelector('video').requestFullscreen()" title="Fullscreen">
|
||||
<div id="player-fullscreen" @click="document.querySelector('video').requestFullscreen()"
|
||||
title="Fullscreen">
|
||||
<%- include("svg/fullscreen.svg") %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -386,71 +388,7 @@
|
|||
<%- include('pages/cider-playlist') %>
|
||||
|
||||
<!-- Search -->
|
||||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template>
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square-large :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.songs">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="search.results['meta']">
|
||||
<template v-if="search.results.albums">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Albums</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.albums.data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
<template v-if="search.results.artists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Artists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.artists.data.length >= 5">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
|
||||
</template>
|
||||
<template v-if="search.results.playlists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Playlists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.playlists.data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
<%- include('pages/search') %>
|
||||
|
||||
<script type="text/x-template" id="am-musiccovershelf">
|
||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||
<div class="content-inner artist-page">
|
||||
<div class="artist-header" :style="{
|
||||
'background': '#' + artistPage.data.attributes.artwork.bgColor,
|
||||
'color': '#' + artistPage.data.attributes.artwork.textColor1
|
||||
}">
|
||||
<div class="artist-header" :style="getArtistPalette(artistPage.data)">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;">
|
||||
<div class="artist-image">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template>
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square-large :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.songs">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in search.results.songs.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">
|
||||
<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">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal-large
|
||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue