Dropped ytdl, YT audio now fetched with Android Client. Began work on YT Premium support

src/lib/components/media/mediaCard.svelte

@@ -8,10 +8,19 @@
     let queueRef = $queue // This nonsense is to prevent an bug that causes svelte to throw an error when setting a property of the queue directly
 
     let image: HTMLImageElement, captionText: HTMLDivElement
+
+    async function setQueueItems(mediaItem: Album | Playlist) {
+        const itemsResponse = await fetch(`/api/connections/${mediaItem.connection.id}/${mediaItem.type}/${mediaItem.id}/items`, {
+            credentials: 'include',
+        }).then((response) => response.json() as Promise<{ items: Song[] }>)
+
+        const items = itemsResponse.items
+        queueRef.setQueue(...items)
+    }
 </script>
 
 <div id="card-wrapper" class="flex-shrink-0">
-    <button id="thumbnail" class="relative h-52 transition-all duration-200 ease-out" on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}`)}>
+    <button id="thumbnail" class="relative h-52 transition-all duration-200 ease-out" on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}&connection=${mediaItem.connection.id}`)}>
         {#if 'thumbnailUrl' in mediaItem || 'profilePicture' in mediaItem}
             <img
                 bind:this={image}
@@ -30,7 +39,15 @@
             <IconButton
                 halo={true}
                 on:click={() => {
-                    if (mediaItem.type === 'song') queueRef.current = mediaItem
+                    switch (mediaItem.type) {
+                        case 'song':
+                            queueRef.current = mediaItem
+                            break
+                        case 'album':
+                        case 'playlist':
+                            setQueueItems(mediaItem)
+                            break
+                    }
                 }}
             >
                 <i slot="icon" class="fa-solid fa-play text-xl" />
@@ -44,10 +61,9 @@
                 {#if mediaItem.artists === 'Various Artists'}
                     <span class="text-sm">Various Artists</span>
                 {:else}
-                    {#each mediaItem.artists as artist}
-                        {@const listIndex = mediaItem.artists.indexOf(artist)}
+                    {#each mediaItem.artists as artist, index}
                         <a class="text-sm hover:underline focus:underline" href="/details/artist?id={artist.id}&connection={mediaItem.connection.id}">{artist.name}</a>
-                        {#if listIndex < mediaItem.artists.length - 1}
+                        {#if index < mediaItem.artists.length - 1}
                             <span class="mr-0.5 text-sm">,</span>
                         {/if}
                     {/each}