diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index f0dce6054..db9036010 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -38,6 +38,7 @@ const { queue, currentIndex, currentTrack, + isShuffled, shuffle } = useQueue() @@ -277,7 +278,7 @@ const loopingTitle = computed(() => { :aria-label="labels.shuffle" @click.prevent.stop="shuffle()" > - +
diff --git a/front/src/composables/audio/queue.ts b/front/src/composables/audio/queue.ts index 69da7e287..f7f1e44d8 100644 --- a/front/src/composables/audio/queue.ts +++ b/front/src/composables/audio/queue.ts @@ -159,8 +159,6 @@ export const useQueue = createGlobalState(() => { if (index <= currentIndex.value) { currentIndex.value -= 1 } - - // TODO (wvffle): Check if removing last element works well } // Play track @@ -227,11 +225,19 @@ export const useQueue = createGlobalState(() => { // Shuffle const shuffle = () => { if (isShuffled.value) { + const id = shuffledIds.value[currentIndex.value] shuffledIds.value.length = 0 + + // NOTE: This this looses the correct index when there are multiple tracks with the same id in the queue + // Since we shuffled the queue before, we probably do not even care for the correct index, just the order + currentIndex.value = tracks.value.indexOf(id) return } - shuffledIds.value = shuffleArray(tracks.value) + const ids = [...tracks.value] + const [first] = ids.splice(currentIndex.value, 1) + shuffledIds.value = [first, ...shuffleArray(ids)] + currentIndex.value = 0 } const reshuffleUpcomingTracks = () => { diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss index 6002c7ce6..6386a4436 100644 --- a/front/src/style/components/_player.scss +++ b/front/src/style/components/_player.scss @@ -203,8 +203,8 @@ } } } - .shuffling .loader.inline { - margin: 0; + .shuffling { + color: var(--vibrant-color); } .control.circular.button { padding: 0;