Broke the queue

src/lib/components/media/mediaCard.svelte

@@ -28,7 +28,7 @@
             <IconButton
                 halo={true}
                 on:click={() => {
-                    if (mediaItem.type === 'song') $queue.push(mediaItem)
+                    if (mediaItem.type === 'song') $queue.enqueue(mediaItem)
                 }}
             >
                 <i slot="icon" class="fa-solid fa-play text-xl" />

src/lib/components/media/mediaPlayer.svelte

@@ -5,8 +5,7 @@
     // import { FastAverageColor } from 'fast-average-color'
     import Slider from '$lib/components/util/slider.svelte'
 
-    let queuePosition = 0
+    $: console.log(`Queue is now: ${$queue}`)
-    $: currentlyPlaying = $queue[queuePosition]
 
     let paused = true,
         shuffle = false,
@@ -49,7 +48,8 @@
     $: if (!seeking && durationTimestamp) durationTimestamp.innerText = formatTime(duration)
 </script>
 
-{#if currentlyPlaying}
+{#if $queue.queue.length > 0}
+    {@const currentlyPlaying = $queue.getCurrent()}
     <main transition:slide class="relative m-4 grid h-20 grid-cols-[minmax(auto,_20rem)_auto_minmax(auto,_20rem)] gap-4 overflow-clip rounded-xl bg-neutral-925 text-white transition-colors duration-1000">
         <section class="flex gap-3">
             <div class="relative h-full w-20 min-w-20">
@@ -108,11 +108,11 @@
                     <Slider bind:value={volume} max={1} />
                 </div>
             </div>
-            <button class="aspect-square h-8" on:click={() => ($queue = [])}>
+            <button class="aspect-square h-8" on:click={() => console.log('close')}>
                 <i class="fa-solid fa-xmark" />
             </button>
         </section>
-        <audio bind:paused bind:volume bind:currentTime bind:duration on:ended={() => queuePosition++} src="/api/audio?connection={currentlyPlaying.connection}&id={currentlyPlaying.id}" />
+        <audio autoplay bind:paused bind:volume bind:currentTime bind:duration on:ended={() => console.log('next')} src="/api/audio?connection={currentlyPlaying.connection}&id={currentlyPlaying.id}" />
     </main>
 {/if}
 

src/lib/stores.ts

@@ -1,11 +1,51 @@
-import { writable, type Writable } from 'svelte/store'
+import { writable, readable, type Writable, type Readable } from 'svelte/store'
 import type { AlertType } from '$lib/components/util/alert.svelte'
 
 export const pageWidth: Writable<number> = writable()
 
 export const newestAlert: Writable<[AlertType, string]> = writable()
 
-export const queue: Writable<Song[]> = writable()
-
 const youtubeMusicBackground: string = 'https://www.gstatic.com/youtube/media/ytm/images/sbg/wsbg@4000x2250.png' // Default Youtube music background
 export const backgroundImage: Writable<string> = writable(youtubeMusicBackground)
+
+class Queue {
+    public currentPos: number
+    public queue: Song[]
+
+    constructor() {
+        this.queue = []
+        this.currentPos = 0
+    }
+
+    public enqueue = (...songs: Song[]): void => {
+        this.queue.push(...songs)
+    }
+
+    public getStart = (): Song | undefined => {
+        return this.queue[0]
+    }
+
+    public getCurrent = (): Song => {
+        return this.queue[this.currentPos]
+    }
+
+    public next = (): Song | undefined => {
+        if (this.queue.length > this.currentPos + 1) {
+            this.currentPos += 1
+            return this.queue[this.currentPos]
+        }
+
+        return undefined
+    }
+
+    public previous = (): Song | undefined => {
+        if (this.currentPos > 0) {
+            this.currentPos -= 1
+            return this.queue[this.currentPos]
+        }
+
+        return undefined
+    }
+}
+
+export const queue: Readable<Queue> = readable(new Queue())

src/routes/api/remoteImage/+server.ts

@@ -6,7 +6,7 @@ export const GET: RequestHandler = async ({ url }) => {
     const imageUrl = url.searchParams.get('url')
     if (!imageUrl || !URL.canParse(imageUrl)) return new Response('Missing or invalid url parameter', { status: 400 })
 
-    const fetchImage = async (): Promise<ArrayBuffer> => {
+    const fetchImage = async (): Promise<Response> => {
         const MAX_TRIES = 3
         let tries = 0
         while (tries < MAX_TRIES) {
@@ -20,11 +20,11 @@ export const GET: RequestHandler = async ({ url }) => {
             const contentType = response.headers.get('content-type')
             if (!contentType || !contentType.startsWith('image')) throw new Error(`Url ${imageUrl} does not link to an image`)
 
-            return await response.arrayBuffer()
+            return response
         }
 
         throw new Error('Exceed Max Retires')
     }
 
-    return new Response(await fetchImage())
+    return await fetchImage()
 }