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() ] })