fix(playback): previous button now seeks to 0 when track is listened over 3 seconds

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2305>

front/src/components/audio/PlayerControls.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue'
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 
-const { hasPrevious, playPrevious, hasNext, playNext, currentTrack } = useQueue()
+const { playPrevious, hasNext, playNext, currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
 
 const { t } = useI18n()
@@ -22,11 +22,10 @@ const labels = computed(() => ({
     <button
       :title="labels.previous"
       :aria-label="labels.previous"
-      :disabled="!hasPrevious"
       class="circular button control tablet-and-up"
       @click.prevent.stop="playPrevious()"
     >
-      <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" />
+      <i :class="['ui', 'large', 'backward step', 'icon']" />
     </button>
     <button
       v-if="!isPlaying"

front/src/composables/audio/queue.ts

@@ -6,7 +6,7 @@ import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { useClamp } from '@vueuse/math'
 import { useStore } from '~/store'
 
-import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
+import { looping, LoopingMode, isPlaying, usePlayer } from '~/composables/audio/player'
 import { delMany, getMany, setMany } from '~/composables/data/indexedDB'
 import { setGain } from '~/composables/audio/audio-api'
 import { useTracks } from '~/composables/audio/tracks'
@@ -199,8 +199,13 @@ export const useQueue = createGlobalState(() => {
   }
 
   // Previous track
-  const hasPrevious = computed(() => looping.value === LoopingMode.LoopQueue || currentIndex.value !== 0)
   const playPrevious = async (force = false) => {
+    // If we're only 3 seconds into track, we seek to the beginning
+    const { currentTime } = usePlayer()
+    if (currentTime.value >= 3) {
+      return playTrack(currentIndex.value, true)
+    }
+
     // Loop entire queue / change track to the next one
     if (looping.value === LoopingMode.LoopQueue && currentIndex.value === 0 && force !== true) {
       // Loop track programmatically if it is the only track in the queue
@@ -208,6 +213,10 @@ export const useQueue = createGlobalState(() => {
       return playTrack(tracks.value.length - 1)
     }
 
+    if (currentIndex.value === 0) {
+      return playTrack(currentIndex.value, true)
+    }
+
     return playTrack(currentIndex.value - 1)
   }
 
@@ -369,7 +378,6 @@ export const useQueue = createGlobalState(() => {
     currentIndex,
     currentTrack,
     playTrack,
-    hasPrevious,
     hasNext,
     playPrevious,
     playNext,