[web] Add filter for Spotify content on "Artist Tracks" and "Artist Album" pages. Partially answer #1650

This commit is contained in:
Alain Nussbaumer 2023-12-17 18:37:35 +01:00
parent f657780a42
commit 04feda45c9
10 changed files with 155 additions and 77 deletions

View File

@ -262,8 +262,8 @@
"hide-spotify-help": "Nach Aktivierung werden keine Alben angezeigt, die nur in der Spotify-Bibliothek enthalten sind.",
"hide-spotify": "Verbirgt Spotify-Alben",
"title": "Alben",
"sort-by": {
"title": "Sortieren nach",
"sort": {
"title": "Sortieren",
"name": "Name",
"recently-added": "Kürzlich hinzugefügt",
"recently-released": "Kürzlich erschienen"
@ -271,10 +271,13 @@
},
"artist": {
"album-count": "{count} Album|{count} Album|{count} Alben",
"filter": "Filter",
"hide-spotify-help": "Nach Aktivierung wird kein Inhalt angezeigt, der nur in der Spotify-Bibliothek enthalten ist.",
"hide-spotify": "Verbirgt Spotify-Inhalt",
"shuffle": "Zufallswiedergabe",
"track-count": "{count} Track|{count} Track|{count} Tracks",
"sort-by": {
"title": "Sortieren nach",
"sort": {
"title": "Sortieren",
"name": "Name",
"rating": "Bewertung",
"release-date": "Erscheinungsdatum"
@ -283,8 +286,8 @@
"artists": {
"count": "{count} Künstler",
"filter": "Filter",
"sort-by": {
"title": "Sortieren nach",
"sort": {
"title": "Sortieren",
"name": "Namen",
"recently-added": "Kürzlich hinzugefügt"
},
@ -321,8 +324,8 @@
"album-count": "{count} Album|{count} Album|{count} Alben",
"shuffle": "Zufallswiedergabe",
"track-count": "{count} Track|{count} Track|{count} Tracks",
"sort-by": {
"title": "Sortieren nach",
"sort": {
"title": "Sortieren",
"name": "Name",
"rating": "Bewertung"
}
@ -339,8 +342,8 @@
"album-count": "{count} Album|{count} Album|{count} Alben",
"shuffle": "Zufallswiedergabe",
"track-count": "{count} Track|{count} Track|{count} Tracks",
"sort-by": {
"title": "Sortieren nach",
"sort": {
"title": "Sortieren",
"name": "Name",
"rating": "Bewertung"
}

View File

@ -262,8 +262,8 @@
"hide-spotify-help": "If active, hides albums that only appear in your Spotify library.",
"hide-spotify": "Hide albums from Spotify",
"title": "Albums",
"sort-by": {
"title": "Sort by",
"sort": {
"title": "Sort",
"name": "Name",
"recently-added": "Recently added",
"recently-released": "Recently released"
@ -271,10 +271,13 @@
},
"artist": {
"album-count": "{count} album|{count} album|{count} albums",
"filter": "Filter",
"hide-spotify-help": "If active, hides the content only appearing in your Spotify library.",
"hide-spotify": "Hide the content from Spotify",
"shuffle": "Shuffle",
"track-count": "{count} track|{count} track|{count} tracks",
"sort-by": {
"title": "Sort by",
"sort": {
"title": "Sort",
"name": "Name",
"rating": "Rating",
"release-date": "Release date"
@ -283,8 +286,8 @@
"artists": {
"count": "{count} artist|{count} artist|{count} artists",
"filter": "Filter",
"sort-by": {
"title": "Sort by",
"sort": {
"title": "Sort",
"name": "Name",
"recently-added": "Recently added"
},
@ -321,8 +324,8 @@
"album-count": "{count} album|{count} album|{count} albums",
"shuffle": "Shuffle",
"track-count": "{count} track|{count} track|{count} tracks",
"sort-by": {
"title": "Sort by",
"sort": {
"title": "Sort",
"name": "Name",
"rating": "Rating"
}
@ -339,8 +342,8 @@
"album-count": "{count} album|{count} album|{count} albums",
"shuffle": "Shuffle",
"track-count": "{count} track|{count} track|{count} tracks",
"sort-by": {
"title": "Sort by",
"sort": {
"title": "Sort",
"name": "Name",
"rating": "Rating"
}

View File

@ -256,14 +256,14 @@
},
"albums": {
"count": "{count} album|{count} album|{count} albums",
"filter": "Filtre",
"filter": "Filtrer",
"hide-singles-help": "Si actif, masque les singles et les albums dont les pistes napparaissent que dans les listes de lecture.",
"hide-singles": "Masquer les singles",
"hide-spotify-help": "Si actif, masque les albums qui napparaissent que dans votre bibliothèque Spotify.",
"hide-spotify": "Masquer les albums de Spotify",
"title": "Albums",
"sort-by": {
"title": "Trier par",
"sort": {
"title": "Trier",
"name": "Nom",
"recently-added": "Ajouts récents",
"recently-released": "Sorties récentes"
@ -271,10 +271,13 @@
},
"artist": {
"album-count": "{count} album|{count} album|{count} albums",
"filter": "Filtrer",
"hide-spotify-help": "Si actif, masque le contenu qui napparaît que dans votre bibliothèque Spotify.",
"hide-spotify": "Masquer le contenu de Spotify",
"shuffle": "Lecture aléatoire",
"track-count": "{count} piste|{count} piste|{count} pistes",
"sort-by": {
"title": "Trier par",
"sort": {
"title": "Trier",
"name": "Nom",
"rating": "Classement",
"release-date": "Date de sortie"
@ -282,9 +285,9 @@
},
"artists": {
"count": "{count} artiste|{count} artiste|{count} artistes",
"filter": "Filtre",
"sort-by": {
"title": "Trier par",
"filter": "Filtrer",
"sort": {
"title": "Trier",
"name": "Nom",
"recently-added": "Ajouts récents"
},
@ -321,8 +324,8 @@
"album-count": "{count} album|{count} album|{count} albums",
"shuffle": "Lecture aléatoire",
"track-count": "{count} piste|{count} piste|{count} pistes",
"sort-by": {
"title": "Trier par",
"sort": {
"title": "Trier",
"name": "Nom",
"rating": "Classement"
}
@ -339,8 +342,8 @@
"album-count": "{count} album|{count} album|{count} albums",
"shuffle": "Lecture aléatoire",
"track-count": "{count} piste|{count} piste|{count} pistes",
"sort-by": {
"title": "Trier par",
"sort": {
"title": "Trier",
"name": "Nom",
"rating": "Classement"
}

View File

@ -262,8 +262,8 @@
"hide-spotify-help": "如果激活将隐藏仅在Spotify资料库出现的专辑",
"hide-spotify": "隐藏来自Spotify的专辑",
"title": "专辑",
"sort-by": {
"title": "排序方式",
"sort": {
"title": "分类",
"name": "名称",
"recently-added": "最近添加",
"recently-released": "最近发行"
@ -271,10 +271,13 @@
},
"artist": {
"album-count": "{count} 张专辑|{count} 张专辑",
"filter": "筛选",
"hide-spotify-help": "如果激活将隐藏只出现在Spotify库中的内容",
"hide-spotify": "隐藏来自Spotify的内容",
"shuffle": "随机播放",
"track-count": "{count} 只曲目|{count} 只曲目",
"sort-by": {
"title": "排序方式",
"sort": {
"title": "分类",
"name": "名称",
"rating": "评级",
"release-date": "发行日期"
@ -283,8 +286,8 @@
"artists": {
"count": "{count} 位艺人|{count} 位艺人",
"filter": "筛选",
"sort-by": {
"title": "排序方式",
"sort": {
"title": "分类",
"name": "名称",
"recently-added": "最近添加"
},
@ -321,8 +324,8 @@
"album-count": "{count} 张专辑|{count} 张专辑",
"shuffle": "随机播放",
"track-count": "{count} 只曲目|{count} 只曲目",
"sort-by": {
"title": "排序方式",
"sort": {
"title": "分类",
"name": "名称",
"rating": "评级"
}
@ -339,8 +342,8 @@
"album-count": "{count} 张专辑|{count} 张专辑",
"shuffle": "随机播放",
"track-count": "{count} 只曲目|{count} 只曲目",
"sort-by": {
"title": "排序方式",
"sort": {
"title": "分类",
"name": "名称",
"rating": "评级"
}

View File

@ -39,7 +39,7 @@
</div>
</div>
<div class="column">
<p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -116,19 +116,19 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.albums.sort-by.name'),
name: this.$t('page.albums.sort.name'),
options: byName('name_sort', true)
},
{
id: 2,
name: this.$t('page.albums.sort-by.recently-added'),
name: this.$t('page.albums.sort.recently-added'),
options: byYear('time_added', {
direction: 'desc'
})
},
{
id: 3,
name: this.$t('page.albums.sort-by.recently-released'),
name: this.$t('page.albums.sort.recently-released'),
options: byYear('date_released', {
direction: 'desc'
})

View File

@ -4,7 +4,25 @@
<template #options>
<div class="columns">
<div class="column">
<p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.artist.filter')" />
<div v-if="spotify_enabled" class="field">
<div class="control">
<input
id="switchHideSpotify"
v-model="hide_spotify"
type="checkbox"
class="switch is-rounded"
/>
<label
for="switchHideSpotify"
v-text="$t('page.artist.hide-spotify')"
/>
</div>
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
</div>
</div>
<div class="column">
<p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -32,17 +50,13 @@
<template #content>
<p class="heading has-text-centered-mobile">
<span
v-text="
$t('page.artist.album-count', { count: artist.album_count })
"
v-text="$t('page.artist.album-count', { count: albums.count })"
/>
<span>&nbsp;|&nbsp;</span>
<a
class="has-text-link"
@click="open_tracks"
v-text="
$t('page.artist.track-count', { count: artist.track_count })
"
v-text="$t('page.artist.track-count', { count: track_count })"
/>
</p>
<list-albums :albums="albums" :hide_group_title="true" />
@ -108,12 +122,12 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.artist.sort-by.name'),
name: this.$t('page.artist.sort.name'),
options: byName('name_sort', true)
},
{
id: 2,
name: this.$t('page.artist.sort-by.release-date'),
name: this.$t('page.artist.sort.release-date'),
options: byYear('date_released', {
direction: 'asc'
})
@ -128,11 +142,19 @@ export default {
const groupBy = this.groupby_options.find(
(o) => o.id === this.selected_groupby_option_id
)
this.albums_list.group(groupBy.options)
this.albums_list.group(groupBy.options, [
(album) => !this.hide_spotify || album.data_kind !== 'spotify'
])
return this.albums_list
},
hide_spotify: {
get() {
return this.$store.state.hide_spotify
},
set(value) {
this.$store.commit(types.HIDE_SPOTIFY, value)
}
},
selected_groupby_option_id: {
get() {
return this.$store.state.artist_albums_sort
@ -140,6 +162,16 @@ export default {
set(value) {
this.$store.commit(types.ARTIST_ALBUMS_SORT, value)
}
},
spotify_enabled() {
return this.$store.state.spotify.webapi_token_valid
},
track_count() {
// The count of tracks is incorrect when albums have Spotify tracks.
return [...this.albums].reduce(
(total, album) => total + (album.isItem ? album.item.track_count : 0),
0
)
}
},

View File

@ -5,7 +5,25 @@
<index-button-list :index="tracks.indexList" />
<div class="columns">
<div class="column">
<p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.artist.filter')" />
<div v-if="spotify_enabled" class="field">
<div class="control">
<input
id="switchHideSpotify"
v-model="hide_spotify"
type="checkbox"
class="switch is-rounded"
/>
<label
for="switchHideSpotify"
v-text="$t('page.artist.hide-spotify')"
/>
</div>
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
</div>
</div>
<div class="column">
<p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -35,15 +53,11 @@
<a
class="has-text-link"
@click="open_artist"
v-text="
$t('page.artist.album-count', { count: artist.album_count })
"
v-text="$t('page.artist.album-count', { count: album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="
$t('page.artist.track-count', { count: artist.track_count })
"
v-text="$t('page.artist.track-count', { count: tracks.count })"
/>
</p>
<list-tracks :tracks="tracks" :uris="track_uris" />
@ -110,12 +124,12 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.artist.sort-by.name'),
name: this.$t('page.artist.sort.name'),
options: byName('title_sort')
},
{
id: 2,
name: this.$t('page.artist.sort-by.rating'),
name: this.$t('page.artist.sort.rating'),
options: byRating('rating', {
direction: 'desc'
})
@ -127,6 +141,21 @@ export default {
},
computed: {
album_count() {
return new Set(
[...this.tracks]
.filter((track) => track.isItem)
.map((track) => track.item.album_id)
).size
},
hide_spotify: {
get() {
return this.$store.state.hide_spotify
},
set(value) {
this.$store.commit(types.HIDE_SPOTIFY, value)
}
},
selected_groupby_option_id: {
get() {
return this.$store.state.artist_tracks_sort
@ -135,11 +164,16 @@ export default {
this.$store.commit(types.ARTIST_TRACKS_SORT, value)
}
},
spotify_enabled() {
return this.$store.state.spotify.webapi_token_valid
},
tracks() {
const groupBy = this.groupby_options.find(
(o) => o.id === this.selected_groupby_option_id
)
this.tracks_list.group(groupBy.options)
this.tracks_list.group(groupBy.options, [
(track) => !this.hide_spotify || track.data_kind !== 'spotify'
])
return this.tracks_list
},
track_uris() {

View File

@ -39,7 +39,7 @@
</div>
</div>
<div class="column">
<p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -116,12 +116,12 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.artists.sort-by.name'),
name: this.$t('page.artists.sort.name'),
options: byName('name_sort', true)
},
{
id: 2,
name: this.$t('page.artists.sort-by.recently-added'),
name: this.$t('page.artists.sort.recently-added'),
options: byYear('time_added', {
direction: 'desc'
})

View File

@ -5,7 +5,7 @@
<index-button-list :index="tracks.indexList" />
<div class="columns">
<div class="column">
<p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -112,12 +112,12 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.composer.sort-by.name'),
name: this.$t('page.composer.sort.name'),
options: byName('title_sort')
},
{
id: 2,
name: this.$t('page.composer.sort-by.rating'),
name: this.$t('page.composer.sort.rating'),
options: byRating('rating', {
direction: 'desc'
})

View File

@ -5,7 +5,7 @@
<index-button-list :index="tracks.indexList" />
<div class="columns">
<div class="column">
<p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
<p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
<control-dropdown
v-model:value="selected_groupby_option_id"
:options="groupby_options"
@ -111,12 +111,12 @@ export default {
groupby_options: [
{
id: 1,
name: this.$t('page.genre.sort-by.name'),
name: this.$t('page.genre.sort.name'),
options: byName('title_sort')
},
{
id: 2,
name: this.$t('page.genre.sort-by.rating'),
name: this.$t('page.genre.sort.rating'),
options: byRating('rating', {
direction: 'desc'
})