Merge branch 'previous-button' into 'develop'

Reset player position before playing previous track

Closes #146

See merge request funkwhale/funkwhale!120

changes/changelog.d/146.feature

+Previous Track button restart playback after 3 seconds (#146)

front/src/components/audio/Player.vue

@@ -59,8 +59,8 @@
         <div
           title="Previous track"
           class="two wide column control"
-          :disabled="!hasPrevious">
-            <i @click="previous" :class="['ui', {'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" ></i>
+          :disabled="emptyQueue">
+            <i @click="previous" :class="['ui', 'backward', {'disabled': emptyQueue}, 'big', 'icon']"></i>
         </div>
         <div
           v-if="!playing"
@@ -205,7 +205,7 @@ export default {
     ...mapGetters({
       currentTrack: 'queue/currentTrack',
       hasNext: 'queue/hasNext',
-      hasPrevious: 'queue/hasPrevious',
+      emptyQueue: 'queue/isEmpty',
       durationFormatted: 'player/durationFormatted',
       currentTimeFormatted: 'player/currentTimeFormatted',
       progress: 'player/progress'

front/src/components/audio/Track.vue

@@ -31,7 +31,8 @@ export default {
   },
   data () {
     return {
-      sourceErrors: 0
+      sourceErrors: 0,
+      isUpdatingTime: false
     }
   },
   computed: {
@@ -99,6 +100,7 @@ export default {
       }
     },
     updateProgress: _.throttle(function () {
+      this.isUpdatingTime = true
       if (this.$refs.audio) {
         this.$store.dispatch('player/updateProgress', this.$refs.audio.currentTime)
       }
@@ -130,6 +132,12 @@ export default {
     },
     volume: function (newValue) {
       this.$refs.audio.volume = newValue
+    },
+    currentTime (newValue) {
+      if (!this.isUpdatingTime) {
+        this.setCurrentTime(newValue)
+      }
+      this.isUpdatingTime = false
     }
   }
 }

front/src/store/queue.js

@@ -49,9 +49,7 @@ export default {
     hasNext: state => {
       return state.currentIndex < state.tracks.length - 1
     },
-    hasPrevious: state => {
-      return state.currentIndex > 0
-    }
+    isEmpty: state => state.tracks.length === 0
   },
   actions: {
     append ({commit, state, dispatch}, {track, index, skipPlay}) {
@@ -103,9 +101,11 @@ export default {
         dispatch('next')
       }
     },
-    previous ({state, dispatch}) {
-      if (state.currentIndex > 0) {
+    previous ({state, dispatch, rootState}) {
+      if (state.currentIndex > 0 && rootState.player.currentTime < 3) {
         dispatch('currentIndex', state.currentIndex - 1)
+      } else {
+        dispatch('currentIndex', state.currentIndex)
       }
     },
     next ({state, dispatch, commit, rootState}) {

front/test/unit/specs/store/queue.spec.js

@@ -81,14 +81,6 @@ describe('store/queue', () => {
       const state = { tracks: [1, 2, 3], currentIndex: 2 }
       expect(store.getters['hasNext'](state)).to.equal(false)
     })
-    it('hasPrevious true', () => {
-      const state = { currentIndex: 1 }
-      expect(store.getters['hasPrevious'](state)).to.equal(true)
-    })
-    it('hasPrevious false', () => {
-      const state = { currentIndex: 0 }
-      expect(store.getters['hasPrevious'](state)).to.equal(false)
-    })
   })
   describe('actions', () => {
     it('append at end', (done) => {
@@ -212,22 +204,33 @@ describe('store/queue', () => {
         expectedActions: []
       }, done)
     })
-    it('previous when at beginning does nothing', (done) => {
+    it('previous when at beginning', (done) => {
       testAction({
         action: store.actions.previous,
         params: {state: {currentIndex: 0}},
-        expectedActions: []
+        expectedActions: [
+          { type: 'currentIndex', payload: 0 }
+        ]
       }, done)
     })
-    it('previous', (done) => {
+    it('previous after less than 3 seconds of playback', (done) => {
       testAction({
         action: store.actions.previous,
-        params: {state: {currentIndex: 1}},
+        params: {state: {currentIndex: 1}, rootState: {player: {currentTime: 1}}},
         expectedActions: [
           { type: 'currentIndex', payload: 0 }
         ]
       }, done)
     })
+    it('previous after more than 3 seconds of playback', (done) => {
+      testAction({
+        action: store.actions.previous,
+        params: {state: {currentIndex: 1}, rootState: {player: {currentTime: 3}}},
+        expectedActions: [
+          { type: 'currentIndex', payload: 1 }
+        ]
+      }, done)
+    })
     it('next on last track when looping on queue', (done) => {
       testAction({
         action: store.actions.next,