New queue implementation && YouTubeMusic.getConnectionInfo() will garuntteed return db data

src/lib/components/media/mediaPlayer.svelte

@@ -5,7 +5,7 @@
     // import { FastAverageColor } from 'fast-average-color'
     import Slider from '$lib/components/util/slider.svelte'
 
-    $: console.log(`Queue is now: ${$queue}`)
+    $: currentlyPlaying = $queue.current()
 
     let paused = true,
         shuffle = false,
@@ -48,8 +48,7 @@
     $: if (!seeking && durationTimestamp) durationTimestamp.innerText = formatTime(duration)
 </script>
 
-{#if $queue.queue.length > 0}
-    {@const currentlyPlaying = $queue.getCurrent()}
+{#if currentlyPlaying}
     <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">
@@ -112,7 +111,7 @@
                 <i class="fa-solid fa-xmark" />
             </button>
         </section>
-        <audio autoplay bind:paused bind:volume bind:currentTime bind:duration on:ended={() => console.log('next')} src="/api/audio?connection={currentlyPlaying.connection}&id={currentlyPlaying.id}" />
+        <audio autoplay bind:paused bind:volume bind:currentTime bind:duration on:ended={() => $queue.next()} src="/api/audio?connection={currentlyPlaying.connection}&id={currentlyPlaying.id}" />
     </main>
 {/if}