[web] Add followed artists to the Spotify music page #1538

web-src/src/i18n/de.json

@@ -266,6 +266,7 @@
     "spotify": {
       "music": {
         "featured-playlists": "Ausgezeichnete Playlisten",
+        "followed-artists": "Verfolgte Künstler",
         "new-releases": "Neuvorstellung"
       }
     }

web-src/src/i18n/en.json

@@ -266,6 +266,7 @@
     "spotify": {
       "music": {
         "featured-playlists": "Featured Playlists",
+        "followed-artists": "Followed Artists",
         "new-releases": "New Releases"
       }
     }

web-src/src/i18n/fr.json

@@ -266,6 +266,7 @@
     "spotify": {
       "music": {
         "featured-playlists": "Listes de lecture en vedette",
+        "followed-artists": "Artistes suivis",
         "new-releases": "Nouvelle sorties"
       }
     }

web-src/src/i18n/zh-CN.json

@@ -266,6 +266,7 @@
     "spotify": {
       "music": {
         "featured-playlists": "特色列表",
+        "followed-artists": "关注的艺人",
         "new-releases": "最新发行"
       }
     }

web-src/src/i18n/zh-TW.json

@@ -266,6 +266,7 @@
     "spotify": {
       "music": {
         "featured-playlists": "特色列表",
+        "followed-artists": "關注的藝人",
         "new-releases": "最新發行"
       }
     }

web-src/src/pages/PageMusicSpotify.vue

@@ -34,11 +34,30 @@
       </router-link>
     </template>
   </content-with-heading>
+  <content-with-heading>
+    <template #heading>
+      <pane-title
+        :content="{ title: $t('page.spotify.music.followed-artists') }"
+      />
+    </template>
+    <template #content>
+      <list-artists-spotify :items="artists" />
+    </template>
+    <template #footer>
+      <router-link
+        :to="{ name: 'music-spotify-followed-artists' }"
+        class="button is-small is-rounded"
+      >
+        {{ $t('actions.show-more') }}
+      </router-link>
+    </template>
+  </content-with-heading>
 </template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
+import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue'
 import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
 import PaneTitle from '@/components/PaneTitle.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -49,6 +68,7 @@ export default {
   components: {
     ContentWithHeading,
     ListAlbumsSpotify,
+    ListArtistsSpotify,
     ListPlaylistsSpotify,
     PaneTitle,
     TabsMusic
@@ -57,6 +77,7 @@ export default {
     services.spotify().then(({ api, configuration }) => {
       Promise.all([
         api.browse.getNewReleases(configuration.webapi_country, 3),
+        api.currentUser.followedArtists(null, 3),
         api.browse.getFeaturedPlaylists(
           configuration.webapi_country,
           null,
@@ -66,7 +87,8 @@ export default {
       ]).then((response) => {
         next((vm) => {
           vm.albums = response[0].albums.items
-          vm.playlists = response[1].playlists.items
+          vm.artists = response[1].artists.items
+          vm.playlists = response[2].playlists.items
         })
       })
     })
@@ -74,6 +96,7 @@ export default {
   data() {
     return {
       albums: [],
+      artists: [],
       playlists: []
     }
   }

web-src/src/pages/PageMusicSpotifyFollowedArtists.vue

@@ -0,0 +1,48 @@
+<template>
+  <tabs-music />
+  <content-with-heading>
+    <template #heading>
+      <pane-title :content="heading" />
+    </template>
+    <template #content>
+      <list-artists-spotify :items="artists" />
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue'
+import PaneTitle from '@/components/PaneTitle.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
+import services from '@/api/services'
+
+export default {
+  name: 'PageMusicSpotifyFeaturedPlaylists',
+  components: {
+    ContentWithHeading,
+    ListArtistsSpotify,
+    PaneTitle,
+    TabsMusic
+  },
+  beforeRouteEnter(to, from, next) {
+    services.spotify().then(({ api }) => {
+      api.currentUser.followedArtists(null, 50).then((response) => {
+        next((vm) => {
+          vm.artists = response.artists.items
+        })
+      })
+    })
+  },
+  data() {
+    return {
+      artists: []
+    }
+  },
+  computed: {
+    heading() {
+      return { title: this.$t('page.spotify.music.followed-artists') }
+    }
+  }
+}
+</script>

web-src/src/router/index.js

@@ -24,6 +24,7 @@ import PageMusicRecentlyAdded from '@/pages/PageMusicRecentlyAdded.vue'
 import PageMusicRecentlyPlayed from '@/pages/PageMusicRecentlyPlayed.vue'
 import PageMusicSpotify from '@/pages/PageMusicSpotify.vue'
 import PageMusicSpotifyFeaturedPlaylists from '@/pages/PageMusicSpotifyFeaturedPlaylists.vue'
+import PageMusicSpotifyFollowedArtists from '@/pages/PageMusicSpotifyFollowedArtists.vue'
 import PageMusicSpotifyNewReleases from '@/pages/PageMusicSpotifyNewReleases.vue'
 import PagePlayer from '@/pages/PagePlayer.vue'
 import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue'
@@ -138,6 +139,11 @@ export const router = createRouter({
       name: 'music-spotify-featured-playlists',
       path: '/music/spotify/featured-playlists'
     },
+    {
+      component: PageMusicSpotifyFollowedArtists,
+      name: 'music-spotify-followed-artists',
+      path: '/music/spotify/followed-artists'
+    },
     {
       component: PageMusicSpotifyNewReleases,
       name: 'music-spotify-new-releases',