From 40e125519971f22a1dfbfaa20135961e1216bbea Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 5 Mar 2018 21:51:40 +0100
Subject: [PATCH] Fix #100: Added some feedback on the play button
---
changes/changelog.d/100.bugfix | 1 +
front/src/components/audio/PlayButton.vue | 19 ++++++++++++++++++-
2 files changed, 19 insertions(+), 1 deletion(-)
create mode 100644 changes/changelog.d/100.bugfix
diff --git a/changes/changelog.d/100.bugfix b/changes/changelog.d/100.bugfix
new file mode 100644
index 000000000..cad193d52
--- /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 451cdcf01..679f8b795 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')
--
GitLab