ConnectionInfo and the db ConnectionRow types are now completely seperate things. Started on audio fetching yay!

src/lib/components/media/mediaCard.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    export let mediaItem: Song | Album | Playlist
+    export let mediaItem: Song | Album | Artist | Playlist
 
     import IconButton from '$lib/components/util/iconButton.svelte'
     import { goto } from '$app/navigation'
+    import { currentlyPlaying } from '$lib/stores'
 
     let image: HTMLImageElement, captionText: HTMLDivElement
+
+    const setCurrentlyPlaying = () => {
+        if (mediaItem.type === 'song') {
+            $currentlyPlaying = mediaItem
+        }
+    }
 </script>
 
 <div id="card-wrapper" class="flex-shrink-0">
@@ -17,7 +24,7 @@
             </div>
         {/if}
         <span id="play-button" class="absolute left-1/2 top-1/2 h-12 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-200 ease-out">
-            <IconButton halo={true}>
+            <IconButton halo={true} on:click={setCurrentlyPlaying}>
                 <i slot="icon" class="fa-solid fa-play text-xl" />
             </IconButton>
         </span>
@@ -39,12 +46,6 @@
 </div>
 
 <style>
-    #thumbnail:focus-within #card-image {
-        filter: brightness(50%);
-    }
-    #thumbnail:focus-within #play-button {
-        opacity: 1;
-    }
     #thumbnail:hover {
         scale: 1.05;
     }

src/lib/components/media/mediaPlayer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let currentlyPlaying: Song
+</script>
+
+<main class="h-full w-full">
+    <div class="bg-red-300">
+        <audio controls>
+            <source src="/api/audio?id=KfmrhlGCfWk&connectionId=cae88864-e116-4ce8-b3cc-5383eae0b781&apikey=2ff052272eeb44628c97314e09f384c10ae7fb31d8a40630442d3cb417512574" type="audio/webm" />
+        </audio>
+    </div>
+    <div class="bg-green-300">{currentlyPlaying.type}</div>
+</main>
+
+<style>
+    main {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+</style>

src/lib/components/media/scrollableCardMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let header: string
-    export let cardDataList: (Song | Album | Playlist)[]
+    export let cardDataList: (Song | Album | Artist | Playlist)[]
 
     import MediaCard from '$lib/components/media/mediaCard.svelte'
     import IconButton from '$lib/components/util/iconButton.svelte'