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

src/routes/(app)/details/album/+page.server.ts

@@ -0,0 +1,23 @@
+import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = async ({ fetch, url }) => {
+    const connectionId = url.searchParams.get('connection')
+    const id = url.searchParams.get('id')
+
+    async function getAlbum(): Promise<Album> {
+        const albumResponse = (await fetch(`/api/connections/${connectionId}/album?id=${id}`, {
+            headers: { apikey: SECRET_INTERNAL_API_KEY },
+        }).then((response) => response.json())) as { album: Album }
+        return albumResponse.album
+    }
+
+    async function getAlbumItems(): Promise<Song[]> {
+        const itemsResponse = (await fetch(`/api/connections/${connectionId}/album/${id}/items`, {
+            headers: { apikey: SECRET_INTERNAL_API_KEY },
+        }).then((response) => response.json())) as { items: Song[] }
+        return itemsResponse.items
+    }
+
+    return { albumDetails: Promise.all([getAlbum(), getAlbumItems()]) }
+}

src/routes/(app)/details/album/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import Loader from '$lib/components/util/loader.svelte'
+    import type { PageData } from './$types'
+
+    export let data: PageData
+</script>
+
+<main>
+    {#await data.albumDetails}
+        <Loader />
+    {:then [album, items]}
+        <section class="flex gap-8">
+            <img class="h-60" src="/api/remoteImage?url={album.thumbnailUrl}" alt="{album.name} cover art" />
+            <div>
+                <div class="text-4xl">{album.name}</div>
+                {#if album.artists === 'Various Artists'}
+                    <div>Various Artists</div>
+                {:else}
+                    <div style="font-size: 0;">
+                        {#each album.artists as artist, index}
+                            <a class="text-sm hover:underline focus:underline" href="/details/artist?id={artist.id}&connection={album.connection.id}">{artist.name}</a>
+                            {#if index < album.artists.length - 1}
+                                <span class="mr-0.5 text-sm">,</span>
+                            {/if}
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        </section>
+        {#each items as item}
+            <div>{item.name}</div>
+        {/each}
+    {/await}
+</main>

src/routes/(app)/search/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from '$app/navigation'
     import { queue } from '$lib/stores'
     import type { PageServerData } from './$types'
 
@@ -24,7 +25,11 @@
                     <button
                         id="searchResult"
                         on:click={() => {
-                            if (searchResult.type === 'song') queueRef.current = searchResult
+                            if (searchResult.type === 'song') {
+                                queueRef.current = searchResult
+                            } else {
+                                goto(`/details/${searchResult.type}?id=${searchResult.id}&connection=${searchResult.connection.id}`)
+                            }
                         }}
                         class="grid aspect-square h-full place-items-center bg-cover bg-center bg-no-repeat"
                         style="--thumbnail: url('/api/remoteImage?url={'thumbnailUrl' in searchResult ? searchResult.thumbnailUrl : searchResult.profilePicture}')"

src/routes/(app)/user/+page.server.ts

@@ -31,7 +31,7 @@ export const actions: Actions = {
 
         const newConnectionId = DB.addConnectionInfo({ userId: locals.user.id, type: 'jellyfin', service: { userId: authData.User.Id, serverUrl: serverUrl.toString() }, tokens: { accessToken: authData.AccessToken } })
 
-        const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
+        const response = await fetch(`/api/connections?id=${newConnectionId}`, {
             method: 'GET',
             headers: { apikey: SECRET_INTERNAL_API_KEY },
         }).then((response) => {
@@ -57,7 +57,7 @@ export const actions: Actions = {
             tokens: { accessToken: tokens.access_token!, refreshToken: tokens.refresh_token!, expiry: tokens.expiry_date! },
         })
 
-        const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
+        const response = await fetch(`/api/connections?id=${newConnectionId}`, {
             method: 'GET',
             headers: { apikey: SECRET_INTERNAL_API_KEY },
         })