Add queue shuffling

front/src/components/audio/Player.vue

@@ -24,7 +24,6 @@ import {
   tracks,
   currentIndex,
   currentTrack,
-  isShuffling,
   shuffle
 } from '~/composables/audio/queue'
 
@@ -338,14 +337,7 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
               :aria-label="labels.shuffle"
               @click.prevent.stop="shuffle()"
             >
-              <div
+              <i :class="['ui', 'random', {'disabled': tracks.length === 0}, 'icon']" />
-                v-if="isShuffling"
-                class="ui inline shuffling inverted tiny active loader"
-              />
-              <i
-                v-else
-                :class="['ui', 'random', {'disabled': tracks.length === 0}, 'icon']"
-              />
             </button>
           </div>
           <div class="group">

front/src/composables/audio/queue.ts

@@ -3,11 +3,37 @@ import type { Track } from '~/types'
 import { isPlaying, looping, LoopingMode } from '~/composables/audio/player'
 import { currentSound } from '~/composables/audio/tracks'
 import { toReactive, useStorage } from '@vueuse/core'
+import { shuffle as shuffleArray } from 'lodash-es'
 import { useClamp } from '@vueuse/math'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+
+// import useWebWorker from '~/composables/useWebWorker'
+
+// const { post, onMessageReceived } = useWebWorker('queue')
 
 // Queue
 export const tracks = toReactive(useStorage('queue:tracks', [] as Track[]))
+export const queue = computed(() => {
+  if (isShuffled.value) {
+    const tracksById = tracks.reduce((acc, track) => {
+      acc[track.id] = track
+      return acc
+    }, {} as Record<number, Track>)
+
+    return shuffledIds.value.map(id => tracksById[id])
+  }
+
+  return tracks
+})
+
+export const enqueue = (...newTracks: Track[]) => {
+  tracks.push(...newTracks)
+
+  // Shuffle new tracks
+  if (isShuffled.value) {
+    shuffledIds.value.push(...shuffleIds(newTracks))
+  }
+}
 
 // Current Index
 export const currentIndex = useClamp(useStorage('queue:index', 0), 0, () => tracks.length)
@@ -54,6 +80,14 @@ export const playNext = async () => {
 }
 
 // Shuffle
-export const isShuffling = ref(false)
+const shuffleIds = (tracks: Track[]) => shuffleArray(tracks.map(track => track.id))
-// TODO: Shuffle
+const shuffledIds = useStorage('queue:shuffled-ids', [] as number[])
-export const shuffle = () => undefined
+export const isShuffled = computed(() => shuffledIds.value.length !== 0)
+export const shuffle = () => {
+  if (isShuffled.value) {
+    shuffledIds.value.length = 0
+    return
+  }
+
+  shuffledIds.value = shuffleIds(tracks)
+}