From f12708779181c6c83f72e727e5e61b913db5cd67 Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Mon, 5 Feb 2024 12:27:46 -0500
Subject: [PATCH] Re-working the media cards

---
 src/lib/components/media/mediaCard.svelte     |  37 ++++++++++--------
 src/lib/server/users.db                       | Bin 24576 -> 24576 bytes
 .../(app)/details/{ => song}/+page.svelte     |   0
 3 files changed, 21 insertions(+), 16 deletions(-)
 rename src/routes/(app)/details/{ => song}/+page.svelte (100%)

diff --git a/src/lib/components/media/mediaCard.svelte b/src/lib/components/media/mediaCard.svelte
index 916bd32..6c3e1bb 100644
--- a/src/lib/components/media/mediaCard.svelte
+++ b/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">
-        {#if mediaItem.thumbnail}
-            <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
-        {:else}
-            <div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
-                <i class="fa-solid fa-compact-disc text-7xl" />
-            </div>
-        {/if}
-        <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">
-            <span class="relative h-12">
-                <IconButton halo={true}>
-                    <i slot="icon" class="fa-solid fa-play text-xl" />
-                </IconButton>
-            </span>
-        </div>
+    <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">
+        <button on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}&connection=${mediaItem.connectionId}`)}>
+            {#if mediaItem.thumbnail}
+                <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
+            {:else}
+                <div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
+                    <i class="fa-solid fa-compact-disc text-7xl" />
+                </div>
+            {/if}
+            <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" />
+        </button>
+        <span id="play-button" class="h-12 absolute opacity-0 transition-opacity duration-200 ease-out">
+            <IconButton halo={true}>
+                <i slot="icon" class="fa-solid fa-play text-xl" />
+            </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>
diff --git a/src/lib/server/users.db b/src/lib/server/users.db
index 391c615ab59212095235c275f2f8d734ead00c6d..cda8afc4bfb4eef8d212ac7117bf274808d640ee 100644
GIT binary patch
delta 319
zcma*hF;2rU6o6qx>dpZ`YKN?@{GJ^<9#J}^6(mxps1x>kjsj|%mMp;3BY;?#xdEJ@
z2jMUvPLK=y-+wwMr*rapnM~fUie&P2mrpy(8MeqlXh0G=Mi4GKC0yRxppEe?Rdr8Y
zzx6|kJ_VWH^z-VeJ07Za93F<};xOE<9^<AdU$T6;sO@!sEQ@YeuM93X`x=_HZ+73a
zpNn)1_9>?&=fVH^T9C9#Xv<0jhh9Ld&`>a$Q#_{iUe+HoAds2WWYMz*X9F1`69WV`
Lgxvn0jS+tV$H`nz

delta 319
zcma*hKTg9i6o7H%1T5XC)DBrK{OlM1nS<06QQ859Zur@L3R0!Cg`%+a2p|?_ZU86f
zK{yPE6XXKl?>nA~<EeN(FGg?Ux)^=kyGffZFl01B0R(~8vmjO^JS81%U_&9_JjAx!
zgvU~a5@eZswKZKcC$}Q-hr4;xSBrz1UDfN&WxL0;etN#{;6>lAE?QGB_Pbs#zo$QE
z<q+&sP8wDS#>FhO*Ipo^5~O7kku^i&zp0dmwBDQL$CNqyD7`dH9*w3zHlcJ5*;c4i
J^?x=*`~{n1UK0QS

diff --git a/src/routes/(app)/details/+page.svelte b/src/routes/(app)/details/song/+page.svelte
similarity index 100%
rename from src/routes/(app)/details/+page.svelte
rename to src/routes/(app)/details/song/+page.svelte