added library results in search
This commit is contained in:
booploops
parent
a57c1d61fb
commit
4a6e99c922
3 changed files with 106 additions and 59 deletions
|
|
@ -117,6 +117,13 @@
|
||||||
|
|
||||||
// Search Page
|
// Search Page
|
||||||
&.search-page {
|
&.search-page {
|
||||||
|
|
||||||
|
.searchToggle {
|
||||||
|
float:right;
|
||||||
|
>button {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.cd-mediaitem-square.mediaitem-brick {
|
.cd-mediaitem-square.mediaitem-brick {
|
||||||
width: 530px !important;
|
width: 530px !important;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ const app = new Vue({
|
||||||
showHints: false,
|
showHints: false,
|
||||||
results: {},
|
results: {},
|
||||||
resultsSocial: {},
|
resultsSocial: {},
|
||||||
|
resultsLibrary: {},
|
||||||
limit: 10
|
limit: 10
|
||||||
},
|
},
|
||||||
fullscreenLyrics: false,
|
fullscreenLyrics: false,
|
||||||
|
|
@ -3533,6 +3534,18 @@ const app = new Vue({
|
||||||
friendlyTypes(type) {
|
friendlyTypes(type) {
|
||||||
// use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
|
// use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
|
||||||
switch (type) {
|
switch (type) {
|
||||||
|
case "library-songs":
|
||||||
|
return app.getLz('term.songs')
|
||||||
|
break;
|
||||||
|
case "library-artists":
|
||||||
|
return app.getLz('term.artists')
|
||||||
|
break;
|
||||||
|
case "library-albums":
|
||||||
|
return app.getLz('term.albums')
|
||||||
|
break;
|
||||||
|
case "library-playlists":
|
||||||
|
return app.getLz('term.playlists')
|
||||||
|
break;
|
||||||
case "song":
|
case "song":
|
||||||
return app.getLz('term.songs')
|
return app.getLz('term.songs')
|
||||||
break;
|
break;
|
||||||
|
|
@ -3615,6 +3628,9 @@ const app = new Vue({
|
||||||
results.data.results["meta"] = results.data.meta
|
results.data.results["meta"] = results.data.meta
|
||||||
self.search.resultsSocial = results.data.results
|
self.search.resultsSocial = results.data.results
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.search.resultsLibrary = await app.mk.api.library.search(app.search.term, { types: 'library-songs,library-albums,library-playlists,library-artists', limit: 25, offset: 0 })
|
||||||
|
|
||||||
},
|
},
|
||||||
async inLibrary(items = []) {
|
async inLibrary(items = []) {
|
||||||
let types = []
|
let types = []
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,105 @@
|
||||||
<script type="text/x-template" id="cider-search">
|
<script type="text/x-template" id="cider-search">
|
||||||
<div class="content-inner search-page">
|
<div class="content-inner search-page">
|
||||||
|
<div class="btn-group searchToggle">
|
||||||
|
<button
|
||||||
|
@click="searchType = 'catalog'"
|
||||||
|
class="md-btn md-btn-small" :class="{'md-btn-primary': searchType == 'catalog'}">{{ $root.getLz("term.appleMusic") }}</button>
|
||||||
|
<button
|
||||||
|
@click="searchType = 'library';"
|
||||||
|
class="md-btn md-btn-small" :class="{'md-btn-primary': searchType == 'library'}">{{ $root.getLz("term.library") }}</button>
|
||||||
|
</div>
|
||||||
<div v-if="search != null && search != [] && search.term != ''">
|
<div v-if="search != null && search != [] && search.term != ''">
|
||||||
<h3>{{app.getLz('term.topResult')}}</h3>
|
<template v-if="searchType == 'catalog'">
|
||||||
<mediaitem-scroller-horizontal
|
<h3>{{app.getLz('term.topResult')}}</h3>
|
||||||
:items="search.results[search.results.meta.results.order[0]]['data']"></mediaitem-scroller-horizontal>
|
<mediaitem-scroller-horizontal
|
||||||
<div class="row">
|
:items="search.results[search.results.meta.results.order[0]]['data']"></mediaitem-scroller-horizontal>
|
||||||
<div v-else style="text-align: center">
|
<div class="row">
|
||||||
<h3>{{app.getLz('error.noResults')}}</h3>
|
<div v-else style="text-align: center">
|
||||||
<p>{{app.getLz('error.noResults.description')}}</p>
|
<h3>{{app.getLz('error.noResults')}}</h3>
|
||||||
</div>
|
<p>{{app.getLz('error.noResults.description')}}</p>
|
||||||
<div class="col" v-if="search.results.song">
|
</div>
|
||||||
<div class="row">
|
<div class="col" v-if="search.results.song">
|
||||||
<div class="col">
|
<div class="row">
|
||||||
<h3>{{app.getLz('term.songs')}}</h3>
|
<div class="col">
|
||||||
|
<h3>{{app.getLz('term.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 >= 12">
|
||||||
|
<button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto flex-center"
|
<div class="mediaitem-list-item__grid">
|
||||||
@click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
|
<listitem-horizontal :items="search.results.song.data.limit(12)">
|
||||||
v-if="search.results.song.data.length >= 12">
|
</listitem-horizontal>
|
||||||
<button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mediaitem-list-item__grid">
|
|
||||||
<listitem-horizontal :items="search.results.song.data.limit(12)">
|
|
||||||
</listitem-horizontal>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="search.results['meta'] != null">
|
<template v-if="search.results['meta'] != null">
|
||||||
<template
|
<template
|
||||||
v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
|
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))">{{app.getLz('term.seeAll')}}
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<mediaitem-scroller-horizontal-mvview
|
||||||
|
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-if="search.resultsSocial.playlist">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h3>{{ app.friendlyTypes(section) }}</h3>
|
<h3>{{app.getLz('term.sharedPlaylists')}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
|
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
|
||||||
<button class="cd-btn-seeall"
|
<button class="cd-btn-seeall"
|
||||||
@click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">{{app.getLz('term.seeAll')}}
|
@click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">{{app.getLz('term.seeAll')}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="!app.friendlyTypes(section).includes('Video')">
|
<mediaitem-scroller-horizontal-large
|
||||||
<mediaitem-scroller-horizontal-large
|
:items="search.resultsSocial.playlist.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
|
</template>
|
||||||
</template>
|
<template v-if="search.resultsSocial.profile">
|
||||||
<template v-else>
|
<div class="row">
|
||||||
<mediaitem-scroller-horizontal-mvview
|
<div class="col">
|
||||||
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
<h3>{{app.getLz('term.people')}}</h3>
|
||||||
</template>
|
</div>
|
||||||
|
<div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.length >= 10">
|
||||||
|
<button class="cd-btn-seeall"
|
||||||
|
@click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">{{app.getLz('term.seeAll')}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<mediaitem-scroller-horizontal-large
|
||||||
|
:items="search.resultsSocial.profile.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="search.resultsSocial.playlist">
|
<template v-else>
|
||||||
<div class="row">
|
<h1>{{ $root.getLz("term.library") }}</h1>
|
||||||
<div class="col">
|
<div v-for="(section, key) in $root.search.resultsLibrary">
|
||||||
<h3>{{app.getLz('term.sharedPlaylists')}}</h3>
|
<h3>{{app.friendlyTypes(key)}}</h3>
|
||||||
|
<div class="mediaitem-list-item__grid" v-if="key.includes('songs')">
|
||||||
|
<listitem-horizontal :items="section.data"></listitem-horizontal>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
|
<div class="well" v-else>
|
||||||
<button class="cd-btn-seeall"
|
<mediaitem-scroller-horizontal-large
|
||||||
@click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">{{app.getLz('term.seeAll')}}
|
:items="section.data"></mediaitem-scroller-horizontal-large>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mediaitem-scroller-horizontal-large
|
|
||||||
:items="search.resultsSocial.playlist.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
|
||||||
</template>
|
|
||||||
<template v-if="search.resultsSocial.profile">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<h3>{{app.getLz('term.people')}}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.length >= 10">
|
|
||||||
<button class="cd-btn-seeall"
|
|
||||||
@click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">{{app.getLz('term.seeAll')}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<mediaitem-scroller-horizontal-large
|
|
||||||
:items="search.resultsSocial.profile.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
|
|
@ -111,6 +134,7 @@
|
||||||
recentlyPlayed: [],
|
recentlyPlayed: [],
|
||||||
categoriesView: [],
|
categoriesView: [],
|
||||||
categoriesReady: false,
|
categoriesReady: false,
|
||||||
|
searchType: "catalog",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue