Merge branch 'main' of https://github.com/ThinLiquid/buffer

ThinLiquid · May 12, 2024 · 6a15733 · 6a15733
2 parents 588b3fa + bd1caea
commit 6a15733
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 93 deletions.
diff --git 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 += ('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
+    document.body.innerHTML += ('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
+  })();
 }
 
 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
@@ -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
@@ -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
@@ -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<void> {
-    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
@@ -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()
   ]
 })