Merge branch 'play-button' into 'develop'

Play button feedback

Closes #100

See merge request funkwhale/funkwhale!76

api/funkwhale_api/common/auth.py

@@ -9,6 +9,7 @@ from rest_framework import exceptions
 from rest_framework_jwt.settings import api_settings
 from rest_framework_jwt.authentication import BaseJSONWebTokenAuthentication
 
+from funkwhale_api.users.models import User
 
 
 class TokenHeaderAuth(BaseJSONWebTokenAuthentication):
@@ -40,7 +41,7 @@ class TokenAuthMiddleware:
         auth = TokenHeaderAuth()
         try:
             user, token = auth.authenticate(scope)
-        except exceptions.AuthenticationFailed:
+        except (User.DoesNotExist, exceptions.AuthenticationFailed):
             user = AnonymousUser()
 
         scope['user'] = user

changes/changelog.d/100.bugfix

@@ -0,0 +1 @@
+Added some feedback on the play button (#100)

front/src/components/audio/PlayButton.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="['ui', {'tiny': discrete}, 'buttons']">
-    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, {disabled: playableTracks.length === 0}, 'button']">
+    <button
+      title="Add to current queue"
+      @click="add"
+      :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: playableTracks.length === 0}, 'button']">
       <i class="ui play icon"></i>
       <template v-if="!discrete"><slot>Play</slot></template>
     </button>
@@ -26,6 +29,11 @@ export default {
     track: {type: Object, required: false},
     discrete: {type: Boolean, default: false}
   },
+  data () {
+    return {
+      isLoading: false
+    }
+  },
   created () {
     if (!this.track & !this.tracks) {
       logger.default.error('You have to provide either a track or tracks property')
@@ -50,10 +58,19 @@ export default {
     }
   },
   methods: {
+    triggerLoad () {
+      let self = this
+      this.isLoading = true
+      setTimeout(() => {
+        self.isLoading = false
+      }, 500)
+    },
     add () {
+      this.triggerLoad()
       this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks})
     },
     addNext (next) {
+      this.triggerLoad()
       this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks, index: this.$store.state.queue.currentIndex + 1})
       if (next) {
         this.$store.dispatch('queue/next')