Started on media player

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

@@ -7,14 +7,15 @@ import { Jellyfin, JellyfinFetchError } from '$lib/server/jellyfin'
 import { google } from 'googleapis'
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
-    const connectionInfoResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
-        method: 'GET',
-        headers: { apikey: SECRET_INTERNAL_API_KEY },
-    }).then((response) => response.json())
+    const getConnectionInfo = async (): Promise<ConnectionInfo[]> => {
+        const connectionInfoResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
+            method: 'GET',
+            headers: { apikey: SECRET_INTERNAL_API_KEY },
+        }).then((response) => response.json())
+        return connectionInfoResponse.connections
+    }
 
-    const connections: ConnectionInfo[] = connectionInfoResponse.connections
-
-    return { connections }
+    return { connections: getConnectionInfo() }
 }
 
 export const actions: Actions = {

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

@@ -14,9 +14,13 @@
     import ConnectionProfile from './connectionProfile.svelte'
     import { enhance } from '$app/forms'
     import { PUBLIC_YOUTUBE_API_CLIENT_ID } from '$env/static/public'
+    import { onMount } from 'svelte'
 
     export let data: PageServerData & LayoutData
-    let connections = data.connections
+    let connections: ConnectionInfo[]
+    onMount(async () => {
+        connections = await data.connections
+    })
 
     const authenticateJellyfin: SubmitFunction = ({ formData, cancel }) => {
         const { serverUrl, username, password } = Object.fromEntries(formData)
@@ -79,7 +83,7 @@
         }
     }
 
-    const profileActions: SubmitFunction = ({ action, cancel }) => {
+    const profileActions: SubmitFunction = () => {
         return ({ result }) => {
             if (result.type === 'failure') {
                 return ($newestAlert = ['warning', result.data?.message])
@@ -134,9 +138,11 @@
             </div>
         </section>
         <div id="connection-profile-grid" class="grid gap-8">
-            {#each connections as connectionInfo}
-                <ConnectionProfile {connectionInfo} submitFunction={profileActions} />
-            {/each}
+            {#if connections}
+                {#each connections as connectionInfo}
+                    <ConnectionProfile {connectionInfo} submitFunction={profileActions} />
+                {/each}
+            {/if}
         </div>
         {#if newConnectionModal !== null}
             <svelte:component this={newConnectionModal} submitFunction={authenticateJellyfin} on:close={() => (newConnectionModal = null)} />
@@ -149,6 +155,6 @@
         background-image: linear-gradient(to bottom, rgb(30, 30, 30), rgb(10, 10, 10));
     }
     #connection-profile-grid {
-        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
     }
 </style>

src/routes/(app)/user/connectionProfile.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
     import Services from '$lib/services.json'
-    import IconButton from '$lib/components/util/iconButton.svelte'
     import Toggle from '$lib/components/util/toggle.svelte'
-    import type { SubmitFunction } from '@sveltejs/kit'
     import { fly } from 'svelte/transition'
+    import type { SubmitFunction } from '@sveltejs/kit'
     import { enhance } from '$app/forms'
 
     export let connectionInfo: ConnectionInfo
@@ -11,8 +10,6 @@
 
     $: serviceData = Services[connectionInfo.type]
 
-    let showModal = false
-
     const subHeaderItems: string[] = []
     if ('username' in connectionInfo) {
         subHeaderItems.push(connectionInfo.username)
@@ -22,7 +19,8 @@
     }
 </script>
 
-<section class="rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
+<section class="relative overflow-clip rounded-lg" transition:fly={{ x: 50 }}>
+    <div class="absolute -z-10 h-full w-full bg-black bg-cover bg-right bg-no-repeat brightness-[25%]" style="background-image: url({serviceData.icon}); mask-image: linear-gradient(to left, black, rgba(0, 0, 0, 0));" />
     <header class="flex h-20 items-center gap-4 p-4">
         <div class="relative aspect-square h-full p-1">
             <img src={serviceData.icon} alt="{serviceData.displayName} icon" />
@@ -31,24 +29,18 @@
             {/if}
         </div>
         <div>
-            <div>{serviceData.displayName} - {connectionInfo.id}</div>
+            <div>{serviceData.displayName}</div>
             <div class="text-sm text-neutral-500">
                 {subHeaderItems.join(' - ')}
             </div>
         </div>
-        <div class="relative ml-auto flex h-8 flex-row-reverse gap-2">
-            <IconButton halo={true} on:click={() => (showModal = !showModal)}>
-                <i slot="icon" class="fa-solid fa-ellipsis-vertical text-xl text-neutral-500" />
-            </IconButton>
-            {#if showModal}
-                <form use:enhance={submitFunction} method="post" class="absolute right-0 top-full flex flex-col items-center justify-center gap-1 rounded-md bg-neutral-900 p-2 text-xs">
-                    <button formaction="?/deleteConnection" class="whitespace-nowrap rounded-md px-3 py-2 hover:bg-neutral-800">
-                        <i class="fa-solid fa-link-slash mr-1" />
-                        Delete Connection
-                    </button>
-                    <input type="hidden" value={connectionInfo.id} name="connectionId" />
-                </form>
-            {/if}
+        <div class="relative ml-auto flex flex-row-reverse gap-2">
+            <form action="?/deleteConnection" method="post" use:enhance={submitFunction}>
+                <input type="hidden" name="connectionId" value={connectionInfo.id} />
+                <button class="aspect-square h-8 text-2xl text-neutral-500 hover:text-lazuli-primary">
+                    <i class="fa-solid fa-xmark" />
+                </button>
+            </form>
         </div>
     </header>
     <hr class="mx-2 border-t-2 border-neutral-600" />