From bef0d1dec43fdb33687b19026fc344203a5a14b1 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Sun, 23 Oct 2022 07:41:38 +0000
Subject: [PATCH] WIP Rewrite queue

---
 front/package.json                            |   1 +
 front/src/components/Queue.vue                |  21 +--
 front/src/components/QueueItem.vue            |  12 +-
 front/src/components/audio/Player.vue         |  62 +++------
 front/src/composables/audio/player.ts         |   5 +-
 front/src/composables/audio/queue.ts          | 125 ++++++++++++++----
 front/src/composables/audio/tracks.ts         |  60 ++++-----
 front/src/composables/audio/usePlayOptions.ts |  47 +++----
 front/src/types.ts                            |   6 +-
 front/yarn.lock                               |  12 ++
 10 files changed, 188 insertions(+), 163 deletions(-)

diff --git a/front/package.json b/front/package.json
index 3d719468c..002f87de9 100644
--- a/front/package.json
+++ b/front/package.json
@@ -33,6 +33,7 @@
     "focus-trap": "7.0.0",
     "fomantic-ui-css": "2.8.8",
     "howler": "2.2.3",
+    "idb-keyval": "^6.2.0",
     "js-logger": "1.6.1",
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 3d2001710..204ffd918 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { Track, QueueItemSource } from '~/types'
+import type { QueueItemSource } from '~/types'
 
 import { useStore } from '~/store'
 import { nextTick, ref, computed, watchEffect, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import time from '~/utils/time'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
@@ -16,6 +15,8 @@ import usePlayer from '~/composables/audio/usePlayer'
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
 
+import { queue } from '~/composables/audio/queue'
+
 const queueModal = ref()
 const { activate, deactivate } = useFocusTrap(queueModal, { allowOutsideClick: true, preventScroll: true })
 
@@ -114,24 +115,14 @@ const play = (index: unknown) => {
   resume()
 }
 
-const getCover = (track: Track) => {
-  return store.getters['instance/absoluteUrl'](
-    track.cover?.urls.medium_square_crop
-        ?? track.album?.cover?.urls.medium_square_crop
-        ?? new URL('../assets/audio/default-cover.png', import.meta.url).href
-  )
-}
-
-const queueItems = computed(() => tracks.value.map((track, index) => ({
+const queueItems = computed(() => queue.value.map((track, index) => ({
+  ...track,
   id: `${index}-${track.id}`,
-  track,
-  coverUrl: getCover(track),
   labels: {
     remove: $pgettext('*/*/*', 'Remove'),
     selectTrack: $pgettext('*/*/*', 'Select track'),
     favorite: $pgettext('*/*/*', 'Favorite track')
-  },
-  duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
+  }
 }) as QueueItemSource))
 
 const reorderTracks = async (from: number, to: number) => {
diff --git a/front/src/components/QueueItem.vue b/front/src/components/QueueItem.vue
index 1a8121ec1..22002699a 100644
--- a/front/src/components/QueueItem.vue
+++ b/front/src/components/QueueItem.vue
@@ -36,17 +36,17 @@ defineProps<Props>()
     <div @click="$emit('play', index)">
       <button
         class="title reset ellipsis"
-        :title="source.track.title"
+        :title="source.title"
         :aria-label="source.labels.selectTrack"
       >
-        <strong>{{ source.track.title }}</strong><br>
+        <strong>{{ source.title }}</strong><br>
         <span>
-          {{ source.track.artist?.name }}
+          {{ source.artistName }}
         </span>
       </button>
     </div>
     <div class="duration-cell">
-      <template v-if="source.track.uploads.length > 0">
+      <template v-if="source.sources.length > 0">
         {{ source.duration }}
       </template>
     </div>
@@ -55,10 +55,10 @@ defineProps<Props>()
         :aria-label="source.labels.favorite"
         :title="source.labels.favorite"
         class="ui really basic circular icon button"
-        @click.stop="$store.dispatch('favorites/toggle', source.track.id)"
+        @click.stop="$store.dispatch('favorites/toggle', source.id)"
       >
         <i
-          :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : ''"
+          :class="$store.getters['favorites/isFavorite'](source.id) ? 'pink' : ''"
           class="heart icon"
         />
       </button>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index a9ea489e7..3a93cc27e 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -21,7 +21,7 @@ import {
   playPrevious,
   hasNext,
   playNext,
-  tracks,
+  queue,
   currentIndex,
   currentTrack,
   shuffle
@@ -35,8 +35,8 @@ import { useStore } from '~/store'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import time from '~/utils/time'
 
-import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
+// import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+// import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import VolumeControl from './VolumeControl.vue'
 
 const store = useStore()
@@ -152,21 +152,9 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
             @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
           >
             <img
-              v-if="currentTrack.cover && currentTrack.cover.urls.original"
               ref="cover"
               alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)"
-            >
-            <img
-              v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original"
-              ref="cover"
-              alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)"
-            >
-            <img
-              v-else
-              alt=""
-              src="../../assets/audio/default-cover.png"
+              :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
             >
           </div>
           <div
@@ -185,19 +173,19 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
             <div class="meta">
               <router-link
                 class="discrete link"
-                :to="{name: 'library.artists.detail', params: {id: currentTrack.artist?.id }}"
+                :to="{name: 'library.artists.detail', params: {id: currentTrack.artistId }}"
                 @click.stop.prevent=""
               >
-                {{ currentTrack.artist?.name }}
+                {{ currentTrack.artistName }}
               </router-link>
-              <template v-if="currentTrack.album">
+              <template v-if="currentTrack.albumId !== -1">
                 /
                 <router-link
                   class="discrete link"
-                  :to="{name: 'library.albums.detail', params: {id: currentTrack.album.id }}"
+                  :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
                   @click.stop.prevent=""
                 >
-                  {{ currentTrack.album.title }}
+                  {{ currentTrack.albumTitle }}
                 </router-link>
               </template>
             </div>
@@ -206,21 +194,9 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
         <div class="controls track-controls queue-not-focused desktop-and-below">
           <div class="ui tiny image">
             <img
-              v-if="currentTrack.cover && currentTrack.cover.urls.original"
               ref="cover"
               alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)"
-            >
-            <img
-              v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls.original"
-              ref="cover"
-              alt=""
-              :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)"
-            >
-            <img
-              v-else
-              alt=""
-              src="../../assets/audio/default-cover.png"
+              :src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
             >
           </div>
           <div class="middle aligned content ellipsis">
@@ -228,8 +204,9 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
               {{ currentTrack.title }}
             </strong>
             <div class="meta">
-              {{ currentTrack.artist?.name }}<template v-if="currentTrack.album">
-                / {{ currentTrack.album.title }}
+              {{ currentTrack.artistName }}
+              <template v-if="currentTrack.albumId !== -1">
+                / {{ currentTrack.albumTitle }}
               </template>
             </div>
           </div>
@@ -238,7 +215,8 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
           v-if="$store.state.auth.authenticated"
           class="controls desktop-and-up fluid align-right"
         >
-          <track-favorite-icon
+          <!-- TODO (wvffle): Uncomment -->
+          <!-- <track-favorite-icon
             class="control white"
             :track="currentTrack"
           />
@@ -253,7 +231,7 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
             @click="$store.dispatch('moderation/hide', {type: 'artist', target: currentTrack.artist})"
           >
             <i :class="['eye slash outline', 'basic', 'icon']" />
-          </button>
+          </button> -->
         </div>
         <div class="player-controls controls queue-not-focused">
           <button
@@ -332,12 +310,12 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
 
             <button
               class="circular control button"
-              :disabled="tracks.length === 0"
+              :disabled="queue.length === 0"
               :title="labels.shuffle"
               :aria-label="labels.shuffle"
               @click.prevent.stop="shuffle()"
             >
-              <i :class="['ui', 'random', {'disabled': tracks.length === 0}, 'icon']" />
+              <i :class="['ui', 'random', {'disabled': queue.length === 0}, 'icon']" />
             </button>
           </div>
           <div class="group">
@@ -350,7 +328,7 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
                 <i class="stream icon" />
                 <translate
                   translate-context="Sidebar/Queue/Text"
-                  :translate-params="{index: currentIndex + 1, length: tracks.length}"
+                  :translate-params="{index: currentIndex + 1, length: queue.length}"
                 >
                   %{ index } of %{ length }
                 </translate>
@@ -362,7 +340,7 @@ const currentTimeFormatted = computed(() => time.parse(Math.round(currentTime.va
                 <i class="stream icon" />
                 <translate
                   translate-context="Sidebar/Queue/Text"
-                  :translate-params="{index: currentIndex + 1, length: tracks.length}"
+                  :translate-params="{index: currentIndex + 1, length: queue.length}"
                 >
                   %{ index } of %{ length }
                 </translate>
diff --git a/front/src/composables/audio/player.ts b/front/src/composables/audio/player.ts
index fa61e6566..5571990fe 100644
--- a/front/src/composables/audio/player.ts
+++ b/front/src/composables/audio/player.ts
@@ -1,4 +1,5 @@
 import { tryOnMounted, useIntervalFn, useRafFn, useStorage, whenever } from '@vueuse/core'
+import { currentTrack, currentIndex } from '~/composables/audio/queue'
 import { currentSound, createTrack } from '~/composables/audio/tracks'
 import { computed, ref, watch, watchEffect, type Ref } from 'vue'
 import { setGain } from './audio-api'
@@ -6,10 +7,6 @@ import { setGain } from './audio-api'
 import store from '~/store'
 import axios from 'axios'
 
-import useQueue from '~/composables/audio/useQueue'
-
-const { currentIndex, currentTrack } = useQueue()
-
 export const isPlaying = ref(false)
 
 watch(isPlaying, (playing) => {
diff --git a/front/src/composables/audio/queue.ts b/front/src/composables/audio/queue.ts
index 74dae77f5..b5662869e 100644
--- a/front/src/composables/audio/queue.ts
+++ b/front/src/composables/audio/queue.ts
@@ -1,46 +1,110 @@
-import type { Track } from '~/types'
+import type { Track, Upload } 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 { computedAsync, useStorage } from '@vueuse/core'
+import { shuffle as shuffleArray, uniq } from 'lodash-es'
+import { getMany, setMany } from 'idb-keyval'
 import { useClamp } from '@vueuse/math'
 import { computed } from 'vue'
 
+import axios from 'axios'
+
 // 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>)
+export interface QueueTrackSource {
+  uuid: string
+  mimetype: string
+  bitrate?: number
+  url: string
+  duration?: number
+}
 
-    return shuffledIds.value.map(id => tracksById[id])
+export interface QueueTrack {
+  id: number
+  title: string
+  artistName: string
+  albumTitle: string
+
+  // TODO: Add urls for those
+  coverUrl: string
+  artistId: number
+  albumId: number
+
+  sources: QueueTrackSource[]
+}
+
+// Queue
+export const tracks = useStorage('queue:tracks', [] as number[])
+const tracksById = computedAsync(async () => {
+  const trackObjects = await getMany(uniq(tracks.value))
+  return trackObjects.reduce((acc, track) => {
+    acc[track.id] = track
+    return acc
+  }, {}) as Record<number, QueueTrack>
+}, {})
+
+export const queue = computed(() => {
+  const indexedTracks = tracksById.value
+
+  if (isShuffled.value) {
+    return shuffledIds.value.map(id => indexedTracks[id]).filter(i => i)
   }
 
-  return tracks
+  return tracks.value.map(id => indexedTracks[id]).filter(i => i)
 })
 
-export const enqueue = (...newTracks: Track[]) => {
-  tracks.push(...newTracks)
+const createQueueTrack = async (track: Track): Promise<QueueTrack> => {
+  if (track.uploads.length === 0) {
+    // we don't have any information for this track, we need to fetch it
+    const { uploads } = await axios.get(`tracks/${track.id}/`)
+      .then(response => response.data as Track, () => ({ uploads: [] as Upload[] }))
+
+    track.uploads = uploads
+  }
+
+  return {
+    id: track.id,
+    title: track.title,
+    // TODO (wvffle): i18n
+    artistName: track.artist?.name ?? 'Unknown artist',
+    // TODO (wvffle): i18n
+    albumTitle: track.album?.title ?? 'Unknown album',
+    artistId: track.artist?.id ?? -1,
+    albumId: track.album?.id ?? -1,
+    coverUrl: (track.cover?.urls ?? track.album?.cover?.urls ?? track.artist?.cover?.urls)?.original
+      ?? new URL('~/assets/audio/default-cover.png', import.meta.url).href,
+    sources: track.uploads.map(upload => ({
+      uuid: upload.uuid,
+      mimetype: upload.mimetype,
+      bitrate: upload.bitrate,
+      url: upload.listen_url
+    }))
+  }
+}
+
+export const enqueue = async (...newTracks: Track[]) => {
+  const queueTracks = await Promise.all(newTracks.map(createQueueTrack))
+  await setMany(queueTracks.map(track => [track.id, track]))
+
+  const ids = queueTracks.map(track => track.id)
+  tracks.value.push(...ids)
 
   // Shuffle new tracks
   if (isShuffled.value) {
-    shuffledIds.value.push(...shuffleIds(newTracks))
+    shuffledIds.value.push(...shuffleArray(ids))
   }
 }
 
 // Current Index
-export const currentIndex = useClamp(useStorage('queue:index', 0), 0, () => tracks.length)
-export const currentTrack = computed(() => tracks[currentIndex.value])
+export const currentIndex = useClamp(useStorage('queue:index', 0), 0, () => tracks.value.length)
+export const currentTrack = computed(() => queue.value[currentIndex.value])
 
 // Play track
 export const playTrack = async (trackIndex: number, force = false) => {
+  const { currentSound } = await import('~/composables/audio/tracks')
+  const { isPlaying } = await import('~/composables/audio/player')
+
   if (isPlaying.value) currentSound.value?.pause()
 
   if (force && currentIndex.value === trackIndex) {
@@ -54,25 +118,29 @@ export const playTrack = async (trackIndex: number, force = false) => {
 }
 
 // Previous track
-export const hasPrevious = computed(() => looping.value === LoopingMode.LoopQueue || currentIndex.value !== 0)
+export const hasPrevious = computed(() => /* looping.value === LoopingMode.LoopQueue || */ currentIndex.value !== 0)
 export const playPrevious = async () => {
+  const { looping, LoopingMode } = await import('~/composables/audio/player')
+
   // Loop entire queue / change track to the next one
   if (looping.value === LoopingMode.LoopQueue && currentIndex.value === 0) {
     // Loop track programmatically if it is the only track in the queue
-    if (tracks.length === 1) return playTrack(currentIndex.value, true)
-    return playTrack(tracks.length - 1)
+    if (tracks.value.length === 1) return playTrack(currentIndex.value, true)
+    return playTrack(tracks.value.length - 1)
   }
 
   return playTrack(currentIndex.value - 1)
 }
 
 // Next track
-export const hasNext = computed(() => looping.value === LoopingMode.LoopQueue || currentIndex.value !== tracks.length - 1)
+export const hasNext = computed(() => /* looping.value === LoopingMode.LoopQueue || */ currentIndex.value !== tracks.value.length - 1)
 export const playNext = async () => {
+  const { looping, LoopingMode } = await import('~/composables/audio/player')
+
   // Loop entire queue / change track to the next one
-  if (looping.value === LoopingMode.LoopQueue && currentIndex.value === tracks.length - 1) {
+  if (looping.value === LoopingMode.LoopQueue && currentIndex.value === tracks.value.length - 1) {
     // Loop track programmatically if it is the only track in the queue
-    if (tracks.length === 1) return playTrack(currentIndex.value, true)
+    if (tracks.value.length === 1) return playTrack(currentIndex.value, true)
     return playTrack(0)
   }
 
@@ -80,8 +148,7 @@ export const playNext = async () => {
 }
 
 // Shuffle
-const shuffleIds = (tracks: Track[]) => shuffleArray(tracks.map(track => track.id))
-const shuffledIds = useStorage('queue:shuffled-ids', [] as number[])
+const shuffledIds = useStorage('queue:tracks:shuffled', [] as number[])
 export const isShuffled = computed(() => shuffledIds.value.length !== 0)
 export const shuffle = () => {
   if (isShuffled.value) {
@@ -89,5 +156,5 @@ export const shuffle = () => {
     return
   }
 
-  shuffledIds.value = shuffleIds(tracks)
+  shuffledIds.value = shuffleArray(tracks.value)
 }
diff --git a/front/src/composables/audio/tracks.ts b/front/src/composables/audio/tracks.ts
index 49247f371..32b7fc378 100644
--- a/front/src/composables/audio/tracks.ts
+++ b/front/src/composables/audio/tracks.ts
@@ -1,14 +1,13 @@
-import type { Sound, SoundSource } from '~/api/player'
-import type { Track, Upload } from '~/types'
+import type { QueueTrack, QueueTrackSource } from '~/composables/audio/queue'
+import type { Sound } from '~/api/player'
 
-import { connectAudioSource } from '~/composables/audio/audio-api'
-import { isPlaying } from '~/composables/audio/player'
 import { soundImplementation } from '~/api/player'
 import { computed, shallowReactive } from 'vue'
-import { playNext, tracks, currentIndex } from '~/composables/audio/queue'
 
+import { playNext, queue, currentTrack, currentIndex } from '~/composables/audio/queue'
+import { connectAudioSource } from '~/composables/audio/audio-api'
+import { isPlaying } from '~/composables/audio/player'
 import store from '~/store'
-import axios from 'axios'
 
 const ALLOWED_PLAY_TYPES: (CanPlayTypeResult | undefined)[] = ['maybe', 'probably']
 const AUDIO_ELEMENT = document.createElement('audio')
@@ -16,42 +15,31 @@ const AUDIO_ELEMENT = document.createElement('audio')
 const soundPromises = new Map<number, Promise<Sound>>()
 const soundCache = shallowReactive(new Map<number, Sound>())
 
-const getUploadSources = (uploads: Upload[]): SoundSource[] => {
-  const sources = uploads
+const getTrackSources = (track: QueueTrack): QueueTrackSource[] => {
+  const sources: QueueTrackSource[] = track.sources
     // NOTE: Filter out repeating and unplayable media types
-    .filter(({ mimetype }, index, array) => array.findIndex((upload) => upload.mimetype === mimetype) === index)
+    .filter(({ mimetype, bitrate }, index, array) => array.findIndex((upload) => upload.mimetype + upload.bitrate === mimetype + bitrate) === index)
     .filter(({ mimetype }) => ALLOWED_PLAY_TYPES.includes(AUDIO_ELEMENT.canPlayType(`${mimetype}`)))
-    .map((upload): SoundSource => ({
-      ...upload,
-      url: store.getters['instance/absoluteUrl'](upload.listen_url) as string
+    .map((source) => ({
+      ...source,
+      url: store.getters['instance/absoluteUrl'](source.url) as string
     }))
 
   // NOTE: Add a transcoded MP3 src at the end for browsers
   //       that do not support other codecs to be able to play it :)
-  if (sources.length > 0 && !sources.some(({ mimetype }) => mimetype === 'audio/mpeg')) {
-    const url = new URL(sources[0].url)
+  if (sources.length > 0) {
+    const original = sources[0]
+    const url = new URL(original.url)
     url.searchParams.set('to', 'mp3')
-    sources.push({ uuid: 'transcoded', mimetype: 'audio/mpeg', url: url.toString() })
+
+    const bitrate = Math.min(320000, original.bitrate ?? Infinity)
+    sources.push({ uuid: 'transcoded', mimetype: 'audio/mpeg', url: url.toString(), bitrate })
   }
 
   return sources
 }
 
-const getTrackSources = async (track: Track): Promise<SoundSource[]> => {
-  if (track === undefined) return []
-
-  if (track.uploads.length === 0) {
-    // we don't have any information for this track, we need to fetch it
-    const { uploads } = await axios.get(`tracks/${track.id}/`)
-      .then(response => response.data as Track, () => ({ uploads: [] as Upload[] } as Track))
-
-    track.uploads = uploads
-  }
-
-  return getUploadSources(track.uploads)
-}
-
-export const createSound = async (track: Track): Promise<Sound> => {
+export const createSound = async (track: QueueTrack): Promise<Sound> => {
   if (soundCache.has(track.id)) {
     return soundCache.get(track.id) as Sound
   }
@@ -61,7 +49,7 @@ export const createSound = async (track: Track): Promise<Sound> => {
   }
 
   const createSoundPromise = async () => {
-    const sources = await getTrackSources(track)
+    const sources = getTrackSources(track)
 
     const SoundImplementation = soundImplementation.value
     const sound = new SoundImplementation(sources)
@@ -85,10 +73,10 @@ export const createSound = async (track: Track): Promise<Sound> => {
 
 // Create track from queue
 export const createTrack = async (index: number) => {
-  if (tracks.length <= index || index === -1) return
+  if (queue.value.length <= index || index === -1) return
   console.log('LOADING TRACK')
 
-  const track = tracks[index]
+  const track = queue.value[index]
   if (!soundPromises.has(track.id) && !soundCache.has(track.id)) {
     // TODO (wvffle): Resolve race condition - is it still here after adding soundPromises?
     console.log('NO TRACK IN CACHE, CREATING')
@@ -105,12 +93,12 @@ export const createTrack = async (index: number) => {
   }
 
   // NOTE: Preload next track
-  if (index === currentIndex.value && index + 1 < tracks.length) {
+  if (index === currentIndex.value && index + 1 < queue.value.length) {
     setTimeout(async () => {
-      const sound = await createSound(tracks[index + 1])
+      const sound = await createSound(queue.value[index + 1])
       await sound.preload()
     }, 100)
   }
 }
 
-export const currentSound = computed(() => soundCache.get(tracks[currentIndex.value]?.id ?? -1))
+export const currentSound = computed(() => soundCache.get(currentTrack.value?.id ?? -1))
diff --git a/front/src/composables/audio/usePlayOptions.ts b/front/src/composables/audio/usePlayOptions.ts
index 3e0cadf46..018e53db3 100644
--- a/front/src/composables/audio/usePlayOptions.ts
+++ b/front/src/composables/audio/usePlayOptions.ts
@@ -1,15 +1,17 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { ContentFilter } from '~/store/moderation'
 
-import { useStore } from '~/store'
-import { useGettext } from 'vue3-gettext'
-import { computed, markRaw, ref } from 'vue'
-import axios from 'axios'
-import usePlayer from '~/composables/audio/usePlayer'
-import useQueue from '~/composables/audio/useQueue'
 import { useCurrentElement } from '@vueuse/core'
+import { computed, markRaw, ref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+
+import axios from 'axios'
 import jQuery from 'jquery'
 
+import { enqueue as addToQueue, currentTrack } from '~/composables/audio/queue'
+import { isPlaying } from '~/composables/audio/player'
+
 export interface PlayOptionsProps {
   isPlayable?: boolean
   tracks?: Track[]
@@ -24,8 +26,6 @@ export interface PlayOptionsProps {
 
 export default (props: PlayOptionsProps) => {
   const store = useStore()
-  const { resume, pause, playing } = usePlayer()
-  const { currentTrack } = useQueue()
 
   const playable = computed(() => {
     if (props.isPlayable) {
@@ -134,7 +134,7 @@ export default (props: PlayOptionsProps) => {
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
     const tracks = await getPlayableTracks()
-    await store.dispatch('queue/appendMany', { tracks })
+    await addToQueue(...tracks)
     addMessage(tracks)
   }
 
@@ -148,40 +148,33 @@ export default (props: PlayOptionsProps) => {
 
     if (next && !wasEmpty) {
       await store.dispatch('queue/next')
-      resume()
+      isPlaying.value = true
     }
 
     addMessage(tracks)
   }
 
   const replacePlay = async () => {
-    store.dispatch('queue/clean')
+    const { tracks, playTrack } = await import('~/composables/audio/queue')
+    tracks.value.length = 0
 
     jQuery(el.value).find('.ui.dropdown').dropdown('hide')
 
-    const tracks = await getPlayableTracks()
-    await store.dispatch('queue/appendMany', { tracks })
+    const tracksToPlay = await getPlayableTracks()
+    await addToQueue(...tracksToPlay)
 
-    if (props.track && props.tracks?.length) {
-      // set queue position to selected track
-      const trackIndex = props.tracks.findIndex(track => track.id === props.track?.id && track.position === props.track?.position)
-      store.dispatch('queue/currentIndex', trackIndex)
-    } else {
-      store.dispatch('queue/currentIndex', 0)
-    }
+    const trackIndex = props.tracks?.findIndex(track => track.id === props.track?.id && track.position === props.track?.position) ?? 0
+    await playTrack(trackIndex)
 
-    resume()
-    addMessage(tracks)
+    isPlaying.value = true
+    playTrack(0, true)
+    addMessage(tracksToPlay)
   }
 
   const activateTrack = (track: Track, index: number) => {
     // TODO (wvffle): Check if position checking did not break anything
     if (track.id === currentTrack.value?.id && track.position === currentTrack.value?.position) {
-      if (playing.value) {
-        return pause()
-      }
-
-      return resume()
+      isPlaying.value = true
     }
 
     replacePlay()
diff --git a/front/src/types.ts b/front/src/types.ts
index 2f76aaf22..98afa8a50 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -6,6 +6,7 @@ import type { RootState } from '~/store'
 
 // eslint-disable-next-line
 import type { ComponentPublicInstance } from '@vue/runtime-core'
+import type { QueueTrack } from './composables/audio/queue'
 
 export type FunctionRef = Element | ComponentPublicInstance | null
 
@@ -18,11 +19,8 @@ export interface InitModuleContext {
 
 export type InitModule = (ctx: InitModuleContext) => void | Promise<void>
 
-export interface QueueItemSource {
+export interface QueueItemSource extends Omit<QueueTrack, 'id'> {
   id: string
-  track: Track
-  duration: string
-  coverUrl: string
 
   labels: {
     remove: string
diff --git a/front/yarn.lock b/front/yarn.lock
index e59af5bdf..e4b5b351a 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -3621,6 +3621,13 @@ iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+idb-keyval@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.0.tgz#3af94a3cc0689d6ee0bc9e045d2a3340ea897173"
+  integrity sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==
+  dependencies:
+    safari-14-idb-fix "^3.0.0"
+
 idb@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.0.tgz#2cc886be57738419e57f9aab58f647e5e2160270"
@@ -4780,6 +4787,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+safari-14-idb-fix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz#450fc049b996ec7f3fd9ca2f89d32e0761583440"
+  integrity sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==
+
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"