handle empty library better. fixes #4

This commit is contained in:
Thomas Amland 2020-08-11 18:16:01 +02:00
parent 8e0cc715ab
commit d18f4f592e
2 changed files with 24 additions and 19 deletions

View File

@ -3,8 +3,10 @@
<Spinner v-if="loading" /> <Spinner v-if="loading" />
<template v-else> <template v-else>
<div v-for="section in sections" :key="section.key" class="mb-4"> <div v-for="section in sections" :key="section.key" class="mb-4">
<template v-if="$data[section.key].length > 0">
<h1>{{ section.name }}</h1> <h1>{{ section.name }}</h1>
<AlbumList :items="$data[section.key]" /> <AlbumList :items="$data[section.key]" />
</template>
</div> </div>
</template> </template>
</div> </div>
@ -19,12 +21,6 @@
}, },
data() { data() {
return { return {
sections: [
{ name: 'Recently played', key: 'recent' },
{ name: 'Recently added', key: 'newest' },
{ name: 'Most played', key: 'frequent' },
{ name: 'Random', key: 'random' },
],
loading: true as boolean, loading: true as boolean,
recent: [], recent: [],
newest: [], newest: [],
@ -32,6 +28,16 @@
random: [], random: [],
} }
}, },
computed: {
sections(): any[] {
return [
{ name: 'Recently played', key: 'recent' },
{ name: 'Recently added', key: 'newest' },
{ name: 'Most played', key: 'frequent' },
{ name: 'Random', key: 'random' },
]
}
},
created() { created() {
const size = 10 const size = 10
this.$api.getAlbums('recent', size).then(result => { this.$api.getAlbums('recent', size).then(result => {

View File

@ -67,13 +67,13 @@ export class API {
const response = await this.get('rest/getSongsByGenre', params) const response = await this.get('rest/getSongsByGenre', params)
return { return {
name: id, name: id,
tracks: this.normalizeTrackList(response.songsByGenre.song), tracks: this.normalizeTrackList(response.songsByGenre?.song || []),
} }
} }
async getArtists() { async getArtists() {
const data = await this.get('rest/getArtists') const response = await this.get('rest/getArtists')
return data.artists.index.flatMap((index: any) => index.artist.map((artist: any) => ({ return (response.artists?.index || []).flatMap((index: any) => index.artist.map((artist: any) => ({
id: artist.id, id: artist.id,
name: artist.name, name: artist.name,
...artist ...artist
@ -86,8 +86,8 @@ export class API {
offset: '0', offset: '0',
size: size, size: size,
} }
const data = await this.get('rest/getAlbumList2', params) const response = await this.get('rest/getAlbumList2', params)
return data.albumList2.album.map((item: any) => ({ return (response.albumList2?.album || []).map((item: any) => ({
...item, ...item,
image: item.coverArt ? this.getCoverArtUrl(item) : undefined, image: item.coverArt ? this.getCoverArtUrl(item) : undefined,
})) }))
@ -135,7 +135,7 @@ export class API {
async getPlaylists() { async getPlaylists() {
const response = await this.get('rest/getPlaylists') const response = await this.get('rest/getPlaylists')
return response.playlists.playlist.map((playlist: any) => ({ return (response.playlists?.playlist || []).map((playlist: any) => ({
...playlist, ...playlist,
name: playlist.name || '(Unnamed)', name: playlist.name || '(Unnamed)',
image: playlist.songCount > 0 ? this.getCoverArtUrl(playlist) : undefined, image: playlist.songCount > 0 ? this.getCoverArtUrl(playlist) : undefined,
@ -187,14 +187,13 @@ export class API {
const params = { const params = {
size: 200, size: 200,
} }
const data = await this.get('rest/getRandomSongs', params) const response = await this.get('rest/getRandomSongs', params)
return this.normalizeTrackList(data.randomSongs.song) return this.normalizeTrackList(response.randomSongs?.song || [])
} }
async getStarred() { async getStarred() {
return this const response = await this.get('rest/getStarred2')
.get('rest/getStarred2') return this.normalizeTrackList(response.starred2?.song || [])
.then(r => this.normalizeTrackList(r.starred2.song))
} }
async star(type: 'track' | 'album' | 'artist', id: string) { async star(type: 'track' | 'album' | 'artist', id: string) {