okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add charts page (groupings)

Browse source
This commit is contained in:
vapormusic 2022-06-04 08:26:43 +07:00
parent 60159617b8
commit 8f0558ab5b
5 changed files with 149 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/renderer/views/pages/charts.ejs Normal file
View file

@ -0,0 +1,133 @@
<script type="text/x-template" id="cider-charts">
<div class="content-inner">
<h1 class="header-text">{{$root.getLz("term.charts")}}</h1>
<template v-if="songs != []">
<div class="row">
<div class="col">
<h3>{{ songs.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="songs.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((songs ?? []), songs.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<div class="mediaitem-list-item__grid">
<listitem-horizontal :items="(songs?.data ?? []).limit(12)">
</listitem-horizontal>
</div>
</template>
<template v-if="albums != []">
<div class="row">
<div class="col">
<h3>{{ albums.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="songs.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((albums ?? []), albums.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="(albums?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="playlists != []">
<div class="row">
<div class="col">
<h3>{{ playlists.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="playlists.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((playlists ?? []), playlists.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="(playlists?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="musicvideos != []">
<div class="row">
<div class="col">
<h3>{{ musicvideos.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="musicvideos.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((musicvideos ?? []), musicvideos.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="(musicvideos?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="globalcharts != []">
<div class="row">
<div class="col">
<h3>{{ globalcharts.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="globalcharts.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((globalcharts ?? []), globalcharts.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="(globalcharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="citycharts != []">
<div class="row">
<div class="col">
<h3>{{ citycharts.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="citycharts.data.length > 12">
<button class="cd-btn-seeall" @click="app.showCollection((citycharts ?? []), citycharts.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="(citycharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</div>
</script>
<script>
Vue.component('cider-charts', {
template: "#cider-charts",
data: function () {
return {
app: this.$root,
songs: [],
albums: [],
playlists: [],
musicvideos: [],
citycharts: [],
globalcharts: [],
categories: [],
}
},
mounted() {
this.getData();
},
methods: {
getData() {
let self = this;
app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/charts`, {
types: 'albums,songs,music-videos,playlists',
l: 'en-gb',
platform: 'auto',
limit: '50',
genre: '34',
include: 'tracks',
with: 'cityCharts,dailyGlobalTopCharts',
extend: 'artistUrl',
'fields[albums]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url',
'fields[playlists]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,curatorName'
}).then(res => {
let page = res.data?.results ?? [];
self.songs = page.songs[0] ?? [];
self.albums = page.albums[0] ?? [];
self.playlists = page.playlists[0] ?? [];
self.musicvideos = page['music-videos'][0] ?? [];
self.citycharts = page.cityCharts[0] ?? [];
self.globalcharts = page.dailyGlobalTopCharts[0] ?? [];
})
// let self = this;
// app.mk.api.music(`/v1/catalog/${app.mk.storefrontId}/charts?types=songs%2Calbums%2Cplaylists&limit=36`).then(res => {
// let page = res.data?.results ?? [];
// self.songs = page.songs[0] ?? [];
// self.albums = page.albums[0] ?? [];
// self.playlists = page.playlists[0] ?? [];
// })
}
}
})
</script>