Fix shuffling

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()"
             >
-              <i :class="['ui', 'random', {'disabled': queue.length === 0}, 'icon']" />
+              <i :class="['ui', 'random', { disabled: queue.length === 0, shuffling: isShuffled }, 'icon']" />
             </button>
           </div>
           <div class="group">

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 = () => {

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;