Fall back to memory if indexedDB is unavailable

.gitignore

@@ -86,7 +86,7 @@ front/tests/e2e/reports
 front/selenium-debug.log
 docs/_build
 
-data/
+/data/
 .env
 
 po/*.po
@@ -95,4 +95,4 @@ _build
 front/src/translations.json
 front/src/translations/*.json
 front/locales/en_US/LC_MESSAGES/app.po
-*.prof
+*.prof

front/src/composables/audio/queue.ts

@@ -3,9 +3,9 @@ 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 { delMany, getMany, setMany } from 'idb-keyval'
 import { useClamp } from '@vueuse/math'
 
+import { delMany, getMany, setMany } from '~/composables/data/indexedDB'
 import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
 import { useStore } from '~/store'
 
@@ -106,6 +106,7 @@ export const useQueue = createGlobalState(() => {
 
   const createQueueTrack = async (track: Track): Promise<QueueTrack> => {
     const { $pgettext } = gettext
+    const { default: store } = await import('~/store')
 
     if (track.uploads.length === 0) {
       // we don't have any information for this track, we need to fetch it
@@ -124,13 +125,13 @@ export const useQueue = createGlobalState(() => {
       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,
+        ?? new URL('../../assets/audio/default-cover.png', import.meta.url).href,
       sources: track.uploads.map(upload => ({
         uuid: upload.uuid,
         duration: upload.duration,
         mimetype: upload.mimetype,
         bitrate: upload.bitrate,
-        url: upload.listen_url
+        url: store.getters['instance/absoluteUrl'](upload.listen_url)
       }))
     }
   }

front/src/composables/audio/tracks.ts

@@ -9,7 +9,7 @@ import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { soundImplementation } from '~/api/player'
 
-import useLRUCache from '~/composables/useLRUCache'
+import useLRUCache from '~/composables/data/useLRUCache'
 import store from '~/store'
 
 const ALLOWED_PLAY_TYPES: (CanPlayTypeResult | undefined)[] = ['maybe', 'probably']

front/src/composables/data/indexedDB.ts

@@ -0,0 +1,42 @@
+import {
+  setMany as idbSetMany,
+  getMany as idbGetMany,
+  delMany as idbDelMany
+} from 'idb-keyval'
+
+const inMemoryKeyValueStore = new Map<IDBValidKey, any>()
+const canUseIndexedDB = new Promise<boolean>(resolve => {
+  if (!window.indexedDB) return resolve(false)
+
+  const request = indexedDB.open('indexed-db-available', 3)
+  request.onsuccess = () => resolve(true)
+  request.onerror = () => resolve(false)
+})
+
+export const setMany = async (entries: [IDBValidKey, any][]) => {
+  if (await canUseIndexedDB) {
+    return idbSetMany(entries)
+  }
+
+  for (const entry of entries) {
+    inMemoryKeyValueStore.set(...entry)
+  }
+}
+
+export const getMany = async (keys: IDBValidKey[]) => {
+  if (await canUseIndexedDB) {
+    return idbGetMany(keys)
+  }
+
+  return keys.map(key => inMemoryKeyValueStore.get(key))
+}
+
+export const delMany = async (keys: IDBValidKey[]) => {
+  if (await canUseIndexedDB) {
+    return idbDelMany(keys)
+  }
+
+  for (const key of keys) {
+    inMemoryKeyValueStore.delete(key)
+  }
+}