Re-working the media cards

src/lib/components/media/mediaCard.svelte

@@ -3,6 +3,7 @@
 
     import Services from '$lib/services.json'
     import IconButton from '$lib/components/util/iconButton.svelte'
+    import { goto } from '$app/navigation'
 
     const iconClasses = {
         song: 'fa-solid fa-music',
@@ -34,21 +35,22 @@
 </script>
 
 <div id="card-wrapper" class="w-52 flex-shrink-0">
-    <div bind:this={card} id="card" class="relative transition-all duration-200 ease-out" on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = '')} role="menuitem" tabindex="0">
+    <div bind:this={card} id="card" class="relative transition-all duration-200 ease-out grid place-items-center" on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = '')} role="menuitem" tabindex="-1">
-        {#if mediaItem.thumbnail}
+        <button on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}&connection=${mediaItem.connectionId}`)}>
-            <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
+            {#if mediaItem.thumbnail}
-        {:else}
+                <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
-            <div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
+            {:else}
-                <i class="fa-solid fa-compact-disc text-7xl" />
+                <div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
-            </div>
+                    <i class="fa-solid fa-compact-disc text-7xl" />
-        {/if}
+                </div>
-        <div bind:this={cardGlare} id="card-glare" class="absolute top-0 grid h-full w-full place-items-center rounded-lg opacity-0 transition-opacity duration-200 ease-out">
+            {/if}
-            <span class="relative h-12">
+            <div bind:this={cardGlare} id="card-glare" class="absolute top-0 h-full w-full rounded-lg opacity-0 transition-opacity duration-200 ease-out" />
-                <IconButton halo={true}>
+        </button>
-                    <i slot="icon" class="fa-solid fa-play text-xl" />
+        <span id="play-button" class="h-12 absolute opacity-0 transition-opacity duration-200 ease-out">
-                </IconButton>
+            <IconButton halo={true}>
-            </span>
+                <i slot="icon" class="fa-solid fa-play text-xl" />
-        </div>
+            </IconButton>
+        </span>
     </div>
     <div class="p-2.5 text-sm">
         <div class="overflow-hidden text-ellipsis" title={mediaItem.name}>{mediaItem.name}</div>
@@ -90,7 +92,10 @@
     #card:hover #card-image {
         filter: brightness(50%);
     }
-    #card:hover > #card-glare {
+    #card:hover #card-glare {
+        opacity: 1;
+    }
+    #card:hover #play-button {
         opacity: 1;
     }
 </style>