130 lines
No EOL
6.4 KiB
Text
130 lines
No EOL
6.4 KiB
Text
<script type="text/x-template" id="cider-search">
|
|
<div class="content-inner">
|
|
<div v-if="search != null && search != [] && search.term != ''">
|
|
<div class="row">
|
|
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
|
<template>
|
|
<h3>Top Result</h3>
|
|
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
|
</template>
|
|
</div>
|
|
<div v-else style="text-align: center">
|
|
<h3>No Results</h3>
|
|
<p>Try a new search.</p>
|
|
</div>
|
|
<div class="col" v-if="search.results.song">
|
|
<div class="row">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="search.results['meta'] != null">
|
|
<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>
|
|
</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="col">
|
|
<h3>Shared Playlists</h3>
|
|
</div>
|
|
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
|
|
<button class="cd-btn-seeall"
|
|
@click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">See All
|
|
</button>
|
|
</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>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')">See All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<mediaitem-scroller-horizontal-large
|
|
:items="search.resultsSocial.profile.data.limit(10)"></mediaitem-scroller-horizontal-large>
|
|
</template>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="categoriesReady || getCategories()">
|
|
<div>
|
|
<div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
|
|
<h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
|
|
</div>
|
|
<mediaitem-square :kind="'385'" size="600"
|
|
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
|
|
:imagesize="800"
|
|
v-for="item in categoriesView[1].relationships.contents.data.filter(item => item.type != 'editorial-items')">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('cider-search', {
|
|
template: "#cider-search",
|
|
props: ['search'],
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
categoriesView : [],
|
|
categoriesReady : false,
|
|
}
|
|
},
|
|
methods: {
|
|
getTopResult() {
|
|
try {
|
|
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
|
} catch( error ) {
|
|
return false
|
|
}
|
|
},
|
|
async getCategories() {
|
|
if(this.categoriesView != [] && this.categoriesView.length > 0) {this.categoriesReady = true; return await true;} else {
|
|
let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities`);
|
|
this.categoriesView = response.data.data;
|
|
this.categoriesReady = true;
|
|
return await true;}
|
|
}
|
|
}
|
|
})
|
|
</script> |