improvements to artist feed, now displays artists followed

src/renderer/style.less

@@ -1924,6 +1924,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &.md-btn-block {
     display: block;
+    width:100%;
+  }
+
+  &.md-btn-glyph {
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
   }
 
   &.md-btn-primary {

src/renderer/views/components/mediaitem-scroller-horizontal.ejs

@@ -1,6 +1,7 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal">
     <template>
         <div class="cd-hmedia-scroller" :class="kind">
+            <slot></slot>
             <mediaitem-square :kind="kind" :item="item"
                               v-for="item in items"></mediaitem-square>
         </div>
@@ -13,7 +14,7 @@
         props: {
             'items': {
                 type: Array,
-                required: true
+                required: false
             },
             'kind': {
                 type: String,

src/renderer/views/pages/artist-feed.ejs

@@ -1,5 +1,30 @@
 <script type="text/x-template" id="cider-artist-feed">
     <div class="content-inner">
+        <div>
+            <div class="row">
+                <div class="col">
+                    <div class="row nopadding">
+                        <div class="col nopadding">
+                            <h3>Followed Artists</h3>
+                        </div>
+                    </div>
+                    <div class="well">
+                        <mediaitem-scroller-horizontal>
+                            <div v-for="artist in artists" style="margin: 6px;">
+                                <mediaitem-square :item="artist" kind="small"></mediaitem-square>
+                                <button @click="unfollow(artist.id)" class="md-btn md-btn-glyph" style="display:flex;">
+                                    <div class="sidebar-icon">
+                                        <div class="svg-icon" :style="{'--url': 'url(./assets/feather/x-circle.svg)'}"></div>
+                                    </div> Unfollow
+                                </button>
+                            </div>
+                        </mediaitem-scroller-horizontal>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
         <div>
             <div class="row">
                 <div class="col">
@@ -30,6 +55,7 @@
                 app: this.$root,
                 followedArtists: this.$root.cfg.home.followedArtists,
                 artistFeed: [],
+                artists: []
             }
         },
         async mounted() {
@@ -37,11 +63,26 @@
             await this.getArtistFeed()
         },
         methods: {
+            unfollow(id) {
+                let index = this.followedArtists.indexOf(id)
+                if (index > -1) {
+                    this.followedArtists.splice(index, 1)
+                }
+                let artist = this.artists.find(a => a.id == id)
+                let index2 = this.artists.indexOf(artist)
+                if (index2 > -1) {
+                    this.artists.splice(index2, 1)
+                }
+                this.getArtistFeed()
+            },
             async getArtistFeed() {
                 let artists = this.followedArtists
                 let self = this
-                this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see&extend=artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero&extend[playlists]=trackCount&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=20&art[url]=f`).then(artistData => {
+                this.artists = []
+                this.artistFeed = []
+                this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=latest-release&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=2&art[url]=f`).then(artistData => {
                     artistData.data.data.forEach(item => {
+                        self.artists.push(item)
                         if (item.views["latest-release"].data.length != 0) {
                             self.artistFeed.push(item.views["latest-release"].data[0])
                         }

src/renderer/views/pages/home.ejs

@@ -145,7 +145,7 @@
             async getArtistFeed() {
                 let artists = this.followedArtists
                 let self = this
-                this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see&extend=artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero&extend[playlists]=trackCount&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=20&art[url]=f`).then(artistData => {
+                this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists?ids=${artists.toString()}&views=latest-release&include[songs]=albums&fields[albums]=artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount&limit[artists:top-songs]=2&art[url]=f`).then(artistData => {
                     artistData.data.data.forEach(item => {
                             if (item.views["latest-release"].data.length != 0) {
                                 self.artistFeed.push(item.views["latest-release"].data[0])