diff --git a/src/main.ts b/src/main.ts
index 306fc53..c5f85c2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -35,7 +35,7 @@ window.onload = async () => { await updateSW() }
// Set localForage drivers
try {
await localforage.setDriver([
- localforage.INDEXEDDB,
+ localforage.WEBSQL,
localforage.LOCALSTORAGE
])
} catch (e) {
@@ -48,9 +48,11 @@ if (params.has('crt')) {
document.body.classList.add('crt')
}
if (params.has('debug')) {
- const eruda = await import('eruda')
- // @ts-expect-error
- eruda.init()
+ ;(function () {
+ var src = 'https://cdn.jsdelivr.net/npm/eruda';
+ document.body.innerHTML += ('');
+ document.body.innerHTML += ('eruda.init();');
+ })();
}
const auth = (): SpotifyApi => SpotifyApi.withUserAuthorization(
@@ -93,7 +95,7 @@ window.onload = async () => {
const queuePalette = new QueuePalette.default(player, queue)
const SearchPalette = await import('./searchpal')
- const palette = new SearchPalette.default(sdk, player, localforage, queue)
+ const palette = new SearchPalette.default(sdk, player, queue)
const Color = await import('./color')
const color = new Color.default()
diff --git a/src/metadata.ts b/src/metadata.ts
index 3f89ed4..b7ab30a 100644
--- a/src/metadata.ts
+++ b/src/metadata.ts
@@ -50,7 +50,8 @@ class Metadata {
) {
// Initialize the elements
this.container = new HTML('div').classOn('meta')
- this.image = new HTML('img').attr({ src: VolumeOffIcon, alt: 'Not playing' })
+ this.image = new HTML('img')
+ this.image.attr({ src: VolumeOffIcon, alt: 'Not playing' })
this.meta = new HTML('div')
this.text = new HTML('div').text('Not playing')
this.icons = new HTML('div').classOn('icons')
@@ -142,7 +143,7 @@ class Metadata {
private registerEvents (): void {
// Set the metadata when the metadata changes
this.player.on('metadatachange', () => {
- this.setMetadata().catch(console.error)
+ this.setMetadata().catch((e) => console.error(e))
})
// Check if the track is liked
@@ -156,7 +157,7 @@ class Metadata {
.then((data) => {
this.like.text((data as boolean[])[0] ? 'done' : 'add')
})
- .catch(console.error)
+ .catch((e) => console.error(e))
}
})
}
diff --git a/src/player.ts b/src/player.ts
index a83c04d..127a164 100644
--- a/src/player.ts
+++ b/src/player.ts
@@ -293,7 +293,7 @@ class Player {
this.state = 'loading'
// Check if the track is cached
- if (localforage.getItem(track.id) != null) {
+ if (await localforage.getItem(track.id) != null) {
const cached = (await localforage.getItem(track.id)) as CachedData
this.registerMetadata(track, cached.image)
await this.playFromBuffers(cached.buffers)
diff --git a/src/searchpal.ts b/src/searchpal.ts
index 53d2b30..08d043d 100644
--- a/src/searchpal.ts
+++ b/src/searchpal.ts
@@ -1,8 +1,6 @@
import HTML from '@datkat21/html'
import { Album, Playlist, SearchResults, SimplifiedAlbum, SpotifyApi, Track } from '@spotify/web-api-ts-sdk'
import Player from './player'
-import localforage from 'localforage'
-import { CachedData } from './types'
import { throttle } from 'throttle-debounce'
import Queue from './queue'
@@ -18,13 +16,11 @@ class SearchPalette {
*
* @param sdk The Spotify API instance
* @param player The player instance
- * @param localForage The localForage instance
* @param queue The queue instance
*/
constructor (
private readonly sdk: SpotifyApi | null,
private readonly player: Player,
- private readonly localForage: typeof localforage,
private readonly queue: Queue
) {
// Initialize the elements
@@ -229,59 +225,6 @@ class SearchPalette {
})
}
- /**
- * Handle a cached track
- *
- * @private
- * @param key The key of the cached track
- * @memberof SearchPalette
- */
- private async handleCachedTrack (key: string): Promise {
- const data: CachedData | null = await this.localForage.getItem(key)
- if (data == null || (data.image == null || data.track == null || data.track.name == null || data.track.artists == null)) return
-
- const item = new HTML('div').classOn('item').attr({ tabindex: '0' })
- const icon = new HTML('img').classOn('image').attr({ src: data.image, alt: `${data.track.name} by ${data.track.artists.map(artist => artist.name).join(', ')}` })
- const meta = new HTML('span').text(
- `${data.track.name}\n${data.track.artists
- .map(artist => artist.name)
- .join(', ')}`
- )
- const icons = new HTML('div').classOn('icons')
-
- const add = new HTML('button')
- .classOn('material-symbols-sharp')
- .text('playlist_add')
- .appendTo(icons)
-
- const remove = new HTML('button')
- .classOn('material-symbols-sharp')
- .text('delete')
- .appendTo(icons)
-
- remove.on('click', e => {
- e.preventDefault()
- e.stopPropagation()
- this.localForage.removeItem(key).catch(console.error)
- item.cleanup()
- })
-
- add.on('click', e => {
- e.preventDefault()
- e.stopPropagation()
- this.queue.add(data.track)
- })
-
- item.appendMany(icon, meta, icons)
- item.appendTo(this.container)
-
- item.on('click', () => {
- this.queue.load(data.track)
- this.player.start().catch(console.error)
- this.hide()
- })
- }
-
/**
* Render the search results
*
@@ -342,22 +285,6 @@ class SearchPalette {
})
}
- /**
- * Render the cached data
- *
- * @private
- * @memberof SearchPalette
- */
- private renderCached (): void {
- this.container.html('')
- this.container.append(new HTML('div').id('tracks'))
- this.localForage.keys().then(keys => {
- keys.forEach(key => {
- this.handleCachedTrack(key).catch(console.error)
- })
- }).catch(console.error)
- }
-
/**
* Register the events
*
@@ -384,7 +311,7 @@ class SearchPalette {
throttle(1000, async () => {
const query = this.input.getValue()
if (query === '') {
- this.renderCached()
+ this.container.html('')
return
}
if (this.sdk != null) {
@@ -398,18 +325,13 @@ class SearchPalette {
})
)
}
-
- opened = false
+
/**
* Show the search palette
*
* @memberof SearchPalette
*/
show (): void {
- if (!this.opened) {
- // Fill the search palette with cached data
- this.localForage.ready(() => this.renderCached()).catch(console.error)
- }
this.element.classOn('show')
}
diff --git a/vite.config.js b/vite.config.js
index d1dc764..0bb84da 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,8 +6,7 @@ import viteCompression from 'vite-plugin-compression'
export default defineConfig({
build: {
target: 'ES2022',
- sourcemap: true,
- minify: 'terser'
+ sourcemap: true
},
plugins: [
VitePWA({
@@ -18,7 +17,6 @@ export default defineConfig({
'**/*'
]
}),
- nodePolyfills(),
- viteCompression()
+ nodePolyfills()
]
})