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

web-src/src/locales/de.json

@@ -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": {
+      "sort": {
-        "title": "Sortieren nach",
+        "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": {
+      "sort": {
-        "title": "Sortieren nach",
+        "title": "Sortieren",
         "name": "Name",
         "rating": "Bewertung",
         "release-date": "Erscheinungsdatum"
@@ -283,8 +286,8 @@
     "artists": {
       "count": "{count} Künstler",
       "filter": "Filter",
-      "sort-by": {
+      "sort": {
-        "title": "Sortieren nach",
+        "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": {
+      "sort": {
-        "title": "Sortieren nach",
+        "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": {
+      "sort": {
-        "title": "Sortieren nach",
+        "title": "Sortieren",
         "name": "Name",
         "rating": "Bewertung"
       }

web-src/src/locales/en.json

@@ -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": {
+      "sort": {
-        "title": "Sort by",
+        "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": {
+      "sort": {
-        "title": "Sort by",
+        "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": {
+      "sort": {
-        "title": "Sort by",
+        "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": {
+      "sort": {
-        "title": "Sort by",
+        "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": {
+      "sort": {
-        "title": "Sort by",
+        "title": "Sort",
         "name": "Name",
         "rating": "Rating"
       }

web-src/src/locales/fr.json

@@ -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 n’apparaissent que dans les listes de lecture.",
       "hide-singles": "Masquer les singles",
       "hide-spotify-help": "Si actif, masque les albums qui n’apparaissent que dans votre bibliothèque Spotify.",
       "hide-spotify": "Masquer les albums de Spotify",
       "title": "Albums",
-      "sort-by": {
+      "sort": {
-        "title": "Trier par",
+        "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 n’apparaî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": {
+      "sort": {
-        "title": "Trier par",
+        "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",
+      "filter": "Filtrer",
-      "sort-by": {
+      "sort": {
-        "title": "Trier par",
+        "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": {
+      "sort": {
-        "title": "Trier par",
+        "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": {
+      "sort": {
-        "title": "Trier par",
+        "title": "Trier",
         "name": "Nom",
         "rating": "Classement"
       }

web-src/src/locales/zh.json

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

web-src/src/pages/PageAlbums.vue

@@ -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'
           })

web-src/src/pages/PageArtist.vue

@@ -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="
+            v-text="$t('page.artist.album-count', { count: albums.count })"
-              $t('page.artist.album-count', { count: artist.album_count })
-            "
           />
           <span>&nbsp;|&nbsp;</span>
           <a
             class="has-text-link"
             @click="open_tracks"
-            v-text="
+            v-text="$t('page.artist.track-count', { count: track_count })"
-              $t('page.artist.track-count', { count: artist.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
+      )
     }
   },
 

web-src/src/pages/PageArtistTracks.vue

@@ -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="
+            v-text="$t('page.artist.album-count', { count: album_count })"
-              $t('page.artist.album-count', { count: artist.album_count })
-            "
           />
           <span>&nbsp;|&nbsp;</span>
           <span
-            v-text="
+            v-text="$t('page.artist.track-count', { count: tracks.count })"
-              $t('page.artist.track-count', { count: artist.track_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() {

web-src/src/pages/PageArtists.vue

@@ -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'
           })

web-src/src/pages/PageComposerTracks.vue

@@ -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'
           })

web-src/src/pages/PageGenreTracks.vue

@@ -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'
           })