Resolve "Hide an artist in the UI"

front/src/components/audio/PlayButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :title="title" :class="['ui', {'tiny': discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
+  <span :class="['ui', {'tiny': discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
     <button
       v-if="!dropdownOnly"
       :title="labels.playNow"
@@ -9,8 +9,8 @@
       <i :class="[playIconClass, 'icon']"></i>
       <template v-if="!discrete && !iconOnly"><slot><translate :translate-context="'*/Queue/Button/Label/Short, Verb'">Play</translate></slot></template>
     </button>
-    <div v-if="!discrete && !iconOnly" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
-      <i :class="dropdownIconClasses.concat(['icon'])"></i>
+    <div v-if="!discrete && !iconOnly" :class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
+      <i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i>
       <div class="menu">
         <button class="item basic" ref="add" data-ref="add" :disabled="!playable" @click.stop.prevent="add" :title="labels.addToQueue">
           <i class="plus icon"></i><translate :translate-context="'*/Queue/Dropdown/Button/Label/Short'">Add to queue</translate>
@@ -24,6 +24,9 @@
         <button v-if="track" class="item basic" :disabled="!playable" @click.stop.prevent="$store.dispatch('radios/start', {type: 'similar', objectId: track.id})" :title="labels.startRadio">
           <i class="feed icon"></i><translate :translate-context="'*/Queue/Dropdown/Button/Label/Short'">Start radio</translate>
         </button>
+        <button v-if="filterableArtist" class="item basic" :disabled="!filterableArtist" @click.stop.prevent="filterArtist" :title="labels.hideArtist">
+          <i class="eye slash outline icon"></i><translate :translate-context="'*/Queue/Dropdown/Button/Label/Short'">Hide content from this artist</translate>
+        </button>
       </div>
     </div>
   </span>
@@ -45,13 +48,13 @@ export default {
     discrete: {type: Boolean, default: false},
     dropdownOnly: {type: Boolean, default: false},
     iconOnly: {type: Boolean, default: false},
-    artist: {type: Number, required: false},
-    album: {type: Number, required: false},
+    artist: {type: Object, required: false},
+    album: {type: Object, required: false},
     isPlayable: {type: Boolean, required: false, default: null}
   },
   data () {
     return {
-      isLoading: false
+      isLoading: false,
     }
   },
   mounted () {
@@ -91,7 +94,7 @@ export default {
       if (this.track) {
         return this.track.uploads && this.track.uploads.length > 0
       } else if (this.artist) {
-        return this.albums.filter((a) => {
+        return this.artist.albums.filter((a) => {
           return a.is_playable === true
         }).length > 0
       } else if (this.tracks) {
@@ -100,9 +103,24 @@ export default {
         }).length > 0
       }
       return false
+    },
+    filterableArtist () {
+      if (this.track) {
+        return this.track.artist
+      }
+      if (this.album) {
+        return this.album.artist
+      }
+      if (this.artist) {
+        return this.artist
+      }
     }
   },
   methods: {
+
+    filterArtist () {
+      this.$store.dispatch('moderation/hide', {type: 'artist', target: this.filterableArtist})
+    },
     getTracksPage (page, params, resolve, tracks) {
       if (page > 10) {
         // it's 10 * 100 tracks already, let's stop here
@@ -113,6 +131,7 @@ export default {
       let self = this
       params['page_size'] = 100
       params['page'] = page
+      params['hidden'] = ''
       tracks = tracks || []
       axios.get('tracks/', {params: params}).then((response) => {
         response.data.results.forEach(t => {
@@ -143,15 +162,27 @@ export default {
         } else if (self.playlist) {
           let url = 'playlists/' + self.playlist.id + '/'
           axios.get(url + 'tracks/').then((response) => {
-            resolve(response.data.results.map(plt => {
+            let artistIds = self.$store.getters['moderation/artistFilters']().map((f) => {
+              return f.target.id
+            })
+            let tracks = response.data.results.map(plt => {
               return plt.track
-            }))
+            })
+            if (artistIds.length > 0) {
+              // skip tracks from hidden artists
+              tracks = tracks.filter((t) => {
+                let matchArtist = artistIds.indexOf(t.artist.id) > -1
+                return !(matchArtist || t.album && artistIds.indexOf(t.album.artist.id) > -1)
+              })
+            }
+
+            resolve(tracks)
           })
         } else if (self.artist) {
-          let params = {'artist': self.artist, 'ordering': 'album__release_date,position'}
+          let params = {'artist': self.artist.id, 'ordering': 'album__release_date,position'}
           self.getTracksPage(1, params, resolve)
         } else if (self.album) {
-          let params = {'album': self.album, 'ordering': 'position'}
+          let params = {'album': self.album.id, 'ordering': 'position'}
           self.getTracksPage(1, params, resolve)
         }
       })
@@ -192,7 +223,7 @@ export default {
         content: this.$gettextInterpolate(msg, {count: tracks.length}),
         date: new Date()
       })
-    }
+    },
   }
 }
 </script>