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;