See #224: updated front-end with new music API

api/funkwhale_api/music/filters.py

@@ -32,6 +32,33 @@ class ArtistFilter(ListenableMixin):
         }
 
 
+class TrackFilter(filters.FilterSet):
+    q = fields.SearchFilter(search_fields=[
+        'title',
+        'album__title',
+        'artist__name',
+    ])
+    listenable = filters.BooleanFilter(name='_', method='filter_listenable')
+
+    class Meta:
+        model = models.Track
+        fields = {
+            'title': ['exact', 'iexact', 'startswith', 'icontains'],
+            'listenable': ['exact'],
+            'artist': ['exact'],
+            'album': ['exact'],
+        }
+
+    def filter_listenable(self, queryset, name, value):
+        queryset = queryset.annotate(
+            files_count=Count('files')
+        )
+        if value:
+            return queryset.filter(files_count__gt=0)
+        else:
+            return queryset.filter(files_count=0)
+
+
 class ImportBatchFilter(filters.FilterSet):
     q = fields.SearchFilter(search_fields=[
         'submitted_by__username',
@@ -67,7 +94,12 @@ class ImportJobFilter(filters.FilterSet):
 
 class AlbumFilter(ListenableMixin):
     listenable = filters.BooleanFilter(name='_', method='filter_listenable')
+    q = fields.SearchFilter(search_fields=[
+        'title',
+        'artist__name'
+        'source',
+    ])
 
     class Meta:
         model = models.Album
-        fields = ['listenable']
+        fields = ['listenable', 'q', 'artist']

api/funkwhale_api/music/models.py

@@ -319,11 +319,8 @@ class Lyrics(models.Model):
 class TrackQuerySet(models.QuerySet):
     def for_nested_serialization(self):
         return (self.select_related()
-                    .select_related('album__artist')
+                    .select_related('album__artist', 'artist')
-                    .prefetch_related(
+                    .prefetch_related('files'))
-                        'tags',
-                        'files',
-                        'artist__albums__tracks__tags'))
 
 
 class Track(APIModelMixin):

api/funkwhale_api/music/serializers.py

@@ -122,7 +122,10 @@ class AlbumSerializer(serializers.ModelSerializer):
         )
 
     def get_tracks(self, o):
-        ordered_tracks = sorted(o.tracks.all(), key=lambda v: v.position)
+        ordered_tracks = sorted(
+            o.tracks.all(),
+            key=lambda v: (v.position, v.title) if v.position else (99999, v.title)
+        )
         return AlbumTrackSerializer(ordered_tracks, many=True).data
 
 

api/funkwhale_api/music/views.py

@@ -46,17 +46,6 @@ from . import utils
 logger = logging.getLogger(__name__)
 
 
-class SearchMixin(object):
-    search_fields = []
-
-    @list_route(methods=['get'])
-    def search(self, request, *args, **kwargs):
-        query = utils.get_query(request.GET['query'], self.search_fields)
-        queryset = self.get_queryset().filter(query)
-        serializer = self.serializer_class(queryset, many=True)
-        return Response(serializer.data)
-
-
 class TagViewSetMixin(object):
 
     def get_queryset(self):
@@ -67,26 +56,25 @@ class TagViewSetMixin(object):
         return queryset
 
 
-class ArtistViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
+class ArtistViewSet(viewsets.ReadOnlyModelViewSet):
     queryset = models.Artist.objects.with_albums()
     serializer_class = serializers.ArtistWithAlbumsSerializer
     permission_classes = [ConditionalAuthentication]
-    search_fields = ['name__unaccent']
     filter_class = filters.ArtistFilter
     ordering_fields = ('id', 'name', 'creation_date')
 
 
-class AlbumViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
+class AlbumViewSet(viewsets.ReadOnlyModelViewSet):
     queryset = (
         models.Album.objects.all()
-                            .order_by('-creation_date')
+                            .order_by('artist', 'release_date')
                             .select_related()
-                            .prefetch_related('tracks__tags',
+                            .prefetch_related(
-                                              'tracks__files'))
+                                'tracks__artist',
+                                'tracks__files'))
     serializer_class = serializers.AlbumSerializer
     permission_classes = [ConditionalAuthentication]
-    search_fields = ['title__unaccent']
+    ordering_fields = ('creation_date', 'release_date', 'title')
-    ordering_fields = ('creation_date',)
     filter_class = filters.AlbumFilter
 
 
@@ -155,19 +143,20 @@ class ImportJobViewSet(
         )
 
 
-class TrackViewSet(
+class TrackViewSet(TagViewSetMixin, viewsets.ReadOnlyModelViewSet):
-        TagViewSetMixin, SearchMixin, viewsets.ReadOnlyModelViewSet):
     """
     A simple ViewSet for viewing and editing accounts.
     """
     queryset = (models.Track.objects.all().for_nested_serialization())
     serializer_class = serializers.TrackSerializer
     permission_classes = [ConditionalAuthentication]
-    search_fields = ['title', 'artist__name']
+    filter_class = filters.TrackFilter
     ordering_fields = (
         'creation_date',
         'title__unaccent',
         'album__title__unaccent',
+        'album__release_date',
+        'position',
         'artist__name__unaccent',
     )
 

api/funkwhale_api/radios/filters.py

@@ -144,8 +144,8 @@ class ArtistFilter(RadioFilter):
             'name': 'ids',
             'type': 'list',
             'subtype': 'number',
-            'autocomplete': reverse_lazy('api:v1:artists-search'),
+            'autocomplete': reverse_lazy('api:v1:artists-list'),
-            'autocomplete_qs': 'query={query}',
+            'autocomplete_qs': 'q={query}',
             'autocomplete_fields': {'name': 'name', 'value': 'id'},
             'label': 'Artist',
             'placeholder': 'Select artists'

api/funkwhale_api/requests/views.py

@@ -3,15 +3,12 @@ from rest_framework import status
 from rest_framework.response import Response
 from rest_framework.decorators import detail_route
 
-from funkwhale_api.music.views import SearchMixin
-
 from . import filters
 from . import models
 from . import serializers
 
 
 class ImportRequestViewSet(
-        SearchMixin,
         mixins.CreateModelMixin,
         mixins.RetrieveModelMixin,
         mixins.ListModelMixin,
@@ -22,7 +19,6 @@ class ImportRequestViewSet(
         models.ImportRequest.objects.all()
               .select_related()
               .order_by('-creation_date'))
-    search_fields = ['artist_name', 'album_name', 'comment']
     filter_class = filters.ImportRequestFilter
     ordering_fields = ('id', 'artist_name', 'creation_date', 'status')
 

front/src/components/audio/PlayButton.vue

@@ -21,7 +21,6 @@
 
 <script>
 import axios from 'axios'
-import logger from '@/logging'
 import jQuery from 'jquery'
 
 export default {
@@ -30,18 +29,15 @@ export default {
     tracks: {type: Array, required: false},
     track: {type: Object, required: false},
     playlist: {type: Object, required: false},
-    discrete: {type: Boolean, default: false}
+    discrete: {type: Boolean, default: false},
+    artist: {type: Number, required: false},
+    album: {type: Number, required: false}
   },
   data () {
     return {
       isLoading: false
     }
   },
-  created () {
-    if (!this.playlist && !this.track && !this.tracks) {
-      logger.default.error('You have to provide either a track playlist or tracks property')
-    }
-  },
   mounted () {
     jQuery(this.$el).find('.ui.dropdown').dropdown()
   },
@@ -62,6 +58,10 @@ export default {
         return this.tracks.length > 0
       } else if (this.playlist) {
         return true
+      } else if (this.artist) {
+        return true
+      } else if (this.album) {
+        return true
       }
       return false
     }
@@ -81,6 +81,20 @@ export default {
               return plt.track
             }))
           })
+        } else if (self.artist) {
+          let params = {
+            params: {'artist': self.artist, 'ordering': 'album__release_date,position'}
+          }
+          axios.get('tracks', params).then((response) => {
+            resolve(response.data.results)
+          })
+        } else if (self.album) {
+          let params = {
+            params: {'album': self.album, 'ordering': 'position'}
+          }
+          axios.get('tracks', params).then((response) => {
+            resolve(response.data.results)
+          })
         }
       })
       return getTracks.then((tracks) => {

front/src/components/audio/artist/Card.vue

@@ -18,10 +18,10 @@
                   <router-link class="discrete link":to="{name: 'library.albums.detail', params: {id: album.id }}">
                     <strong>{{ album.title }}</strong>
                   </router-link><br />
-                  {{ album.tracks.length }} tracks
+                  {{ album.tracks_count }} tracks
                 </td>
                 <td>
-                  <play-button class="right floated basic icon" :discrete="true" :tracks="album.tracks"></play-button>
+                  <play-button class="right floated basic icon" :discrete="true" :album="album.id"></play-button>
                 </td>
               </tr>
             </tbody>
@@ -45,7 +45,7 @@
             {{ artist.albums.length }}
           </i18next>
         </span>
-        <play-button class="mini basic orange right floated" :tracks="allTracks">
+        <play-button class="mini basic orange right floated" :artist="artist.id">
           <i18next path="Play all"/>
         </play-button>
       </div>
@@ -74,15 +74,6 @@ export default {
         return this.artist.albums
       }
       return this.artist.albums.slice(0, this.initialAlbums)
-    },
-    allTracks () {
-      let tracks = []
-      this.artist.albums.forEach(album => {
-        album.tracks.forEach(track => {
-          tracks.push(track)
-        })
-      })
-      return tracks
     }
   }
 }

front/src/components/library/Artist.vue

@@ -10,7 +10,7 @@
             <i class="circular inverted users violet icon"></i>
             <div class="content">
               {{ artist.name }}
-              <div class="sub header">
+              <div class="sub header" v-if="albums">
                 {{ $t('{% track_count %} tracks in {% album_count %} albums', {track_count: totalTracks, album_count: albums.length})}}
               </div>
             </div>
@@ -18,7 +18,7 @@
           <div class="ui hidden divider"></div>
           <radio-button type="artist" :object-id="artist.id"></radio-button>
           </button>
-          <play-button class="orange" :tracks="allTracks"><i18next path="Play all albums"/></play-button>
+          <play-button class="orange" :artist="artist.id"><i18next path="Play all albums"/></play-button>
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
@@ -30,10 +30,13 @@
           </a>
         </div>
       </div>
-      <div class="ui vertical stripe segment">
+      <div v-if="isLoadingAlbums" class="ui vertical stripe segment">
+        <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
+      </div>
+      <div v-else-if="albums" class="ui vertical stripe segment">
         <h2><i18next path="Albums by this artist"/></h2>
         <div class="ui stackable doubling three column grid">
-          <div class="column" :key="album.id" v-for="album in sortedAlbums">
+          <div class="column" :key="album.id" v-for="album in albums">
             <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
           </div>
         </div>
@@ -43,7 +46,6 @@
 </template>
 
 <script>
-import _ from 'lodash'
 import axios from 'axios'
 import logger from '@/logging'
 import backend from '@/audio/backend'
@@ -63,6 +65,7 @@ export default {
   data () {
     return {
       isLoading: true,
+      isLoadingAlbums: true,
       artist: null,
       albums: null
     }
@@ -78,18 +81,19 @@ export default {
       logger.default.debug('Fetching artist "' + this.id + '"')
       axios.get(url).then((response) => {
         self.artist = response.data
-        self.albums = JSON.parse(JSON.stringify(self.artist.albums)).map((album) => {
-          return backend.Album.clean(album)
-        })
         self.isLoading = false
+        self.isLoadingAlbums = true
+        axios.get('albums/', {params: {artist: this.id, ordering: '-release_date'}}).then((response) => {
+          self.albums = JSON.parse(JSON.stringify(response.data.results)).map((album) => {
+            return backend.Album.clean(album)
+          })
+
+          self.isLoadingAlbums = false
+        })
       })
     }
   },
   computed: {
-    sortedAlbums () {
-      let a = this.albums || []
-      return _.orderBy(a, ['release_date'], ['asc'])
-    },
     totalTracks () {
       return this.albums.map((album) => {
         return album.tracks.length

front/src/components/library/Artists.vue

@@ -69,7 +69,6 @@ import axios from 'axios'
 import _ from 'lodash'
 import $ from 'jquery'
 
-import backend from '@/audio/backend'
 import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering'
@@ -135,13 +134,6 @@ export default {
       logger.default.debug('Fetching artists')
       axios.get(url, {params: params}).then((response) => {
         self.result = response.data
-        self.result.results.map((artist) => {
-          var albums = JSON.parse(JSON.stringify(artist.albums)).map((album) => {
-            return backend.Album.clean(album)
-          })
-          artist.albums = albums
-          return artist
-        })
         self.isLoading = false
       })
     }, 500),

front/src/components/library/Home.vue

@@ -30,7 +30,6 @@
 <script>
 import axios from 'axios'
 import Search from '@/components/audio/Search'
-import backend from '@/audio/backend'
 import logger from '@/logging'
 import ArtistCard from '@/components/audio/artist/Card'
 import RadioCard from '@/components/radios/Card'
@@ -66,13 +65,6 @@ export default {
       logger.default.time('Loading latest artists')
       axios.get(url, {params: params}).then((response) => {
         self.artists = response.data.results
-        self.artists.map((artist) => {
-          var albums = JSON.parse(JSON.stringify(artist.albums)).map((album) => {
-            return backend.Album.clean(album)
-          })
-          artist.albums = albums
-          return artist
-        })
         logger.default.timeEnd('Loading latest artists')
         self.isLoadingArtists = false
       })

front/src/components/library/radios/Builder.vue

@@ -14,7 +14,7 @@
               <input id="public" type="checkbox" v-model="isPublic" />
               <i18next tag="label" for="public" path="Display publicly"/>
             </div>
-            <button :disabled="!canSave" @click="save" class="ui green button"><i18ext path="Save"/></button>
+            <button :disabled="!canSave" @click="save" class="ui green button"><i18next path="Save"/></button>
             <radio-button v-if="id" type="custom" :custom-radio-id="id"></radio-button>
           </div>
         </div>

front/src/components/library/radios/Filter.vue

@@ -123,7 +123,7 @@ export default {
             if (settings.fields.remoteValues) {
               return initialResponse
             }
-            return {results: initialResponse}
+            return {results: initialResponse.results}
           }
         }
       }