diff --git a/changes/changelog.d/100.bugfix b/changes/changelog.d/100.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..cad193d5266afe4f4bca985999836a453e02265c --- /dev/null +++ b/changes/changelog.d/100.bugfix @@ -0,0 +1 @@ +Added some feedback on the play button (#100) diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue index 451cdcf0188a9e213e4d7cb785e9dd926ff23147..679f8b795f01cf83031998d2a5078e7cfca5350d 100644 --- a/front/src/components/audio/PlayButton.vue +++ b/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')