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: {}
|
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', {
|
Vue.component('cider-listen-now', {
|
||||||
template: "#cider-listen-now",
|
template: "#cider-listen-now",
|
||||||
props: ["data"]
|
props: ["data"]
|
||||||
|
|
@ -246,6 +232,19 @@ const app = new Vue({
|
||||||
this.artistPage.data = artistData.data[0]
|
this.artistPage.data = artistData.data[0]
|
||||||
this.page = "artist-page"
|
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){
|
routeView (item){
|
||||||
let self = this
|
let self = this
|
||||||
app.showingPlaylist = [];
|
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() {
|
searchQuery() {
|
||||||
let self = this
|
let self = this
|
||||||
this.mk.api.search(this.search.term,
|
this.mk.api.search(this.search.term,
|
||||||
{
|
{
|
||||||
types: "songs,artists,albums,playlists",
|
types: "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators",
|
||||||
limit: self.search.limit
|
limit: 25
|
||||||
}).then(function (results) {
|
}).then(function (results) {
|
||||||
self.search.results = results
|
self.search.results = results
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -333,10 +333,12 @@
|
||||||
fill-rule="nonzero" />
|
fill-rule="nonzero" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</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") %>
|
<%- include("svg/fullscreen.svg") %>
|
||||||
</div>
|
</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") %>
|
<%- include("svg/fullscreen.svg") %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -347,8 +349,8 @@
|
||||||
<%- include("components/mediaitem-artwork"); %>
|
<%- include("components/mediaitem-artwork"); %>
|
||||||
|
|
||||||
<!-- Generic Collection of MediaItems -->
|
<!-- Generic Collection of MediaItems -->
|
||||||
<script type="text/x-template" id="collection-view-generic">
|
<script type="text/x-template" id="collection-view-generic">
|
||||||
<template>
|
<template>
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -356,8 +358,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Listen Now -->
|
<!-- Listen Now -->
|
||||||
<script type="text/x-template" id="cider-listen-now">
|
<script type="text/x-template" id="cider-listen-now">
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
<h1 class="header-text">Listen Now</h1>
|
<h1 class="header-text">Listen Now</h1>
|
||||||
<template v-for="recom in data.data">
|
<template v-for="recom in data.data">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -386,75 +388,11 @@
|
||||||
<%- include('pages/cider-playlist') %>
|
<%- include('pages/cider-playlist') %>
|
||||||
|
|
||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<script type="text/x-template" id="cider-search">
|
<%- include('pages/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>
|
|
||||||
|
|
||||||
<script type="text/x-template" id="am-musiccovershelf">
|
<script type="text/x-template" id="am-musiccovershelf">
|
||||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Sidebar Item -->
|
<!-- Sidebar Item -->
|
||||||
<script type="text/x-template" id="sidebar-library-item">
|
<script type="text/x-template" id="sidebar-library-item">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
||||||
<div class="content-inner artist-page">
|
<div class="content-inner artist-page">
|
||||||
<div class="artist-header" :style="{
|
<div class="artist-header" :style="getArtistPalette(artistPage.data)">
|
||||||
'background': '#' + artistPage.data.attributes.artwork.bgColor,
|
|
||||||
'color': '#' + artistPage.data.attributes.artwork.textColor1
|
|
||||||
}">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm" style="width: auto;">
|
<div class="col-sm" style="width: auto;">
|
||||||
<div class="artist-image">
|
<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