Cleanup indexedDB when queue clears and when instance changes

front/src/composables/audio/queue.ts

@@ -3,7 +3,7 @@ import type { Track, Upload } from '~/types'
 import { createGlobalState, useNow, useStorage, useTimeAgo, whenever } from '@vueuse/core'
 import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { computed, ref, shallowReactive, watchEffect } from 'vue'
-import { getMany, setMany } from 'idb-keyval'
+import { delMany, getMany, setMany } from 'idb-keyval'
 import { useClamp } from '@vueuse/math'
 
 import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
@@ -277,8 +277,12 @@ export const useQueue = createGlobalState(() => {
     currentSound.value?.pause()
     currentSound.value?.seekTo(0)
     currentSound.value?.dispose()
+
     clearRadio.value = true
+
+    const lastTracks = [...tracks.value]
     tracks.value.length = 0
+    await delMany(lastTracks)
   }
 
   // Radio queue populating

front/src/store/instance.ts

@@ -4,6 +4,7 @@ import type { RootState } from '~/store/index'
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import useLogger from '~/composables/useLogger'
+import { useQueue } from '~/composables/audio/queue'
 
 export interface State {
   frontSettings: FrontendSettings
@@ -162,6 +163,9 @@ const store: Module<State, RootState> = {
       modules.forEach(m => {
         commit(`${m}/reset`, null, { root: true })
       })
+
+      const { clear } = useQueue()
+      return clear()
     },
     async fetchSettings ({ commit }) {
       const response = await axios.get('instance/settings/')