From 188e95f597c6b5e0e770a6e2a6b5aa54aff50c22 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 14 Jun 2025 14:17:59 -0400
Subject: [PATCH] Update Album to use new Svelte 5 motion

---
 src/assets/icons/pause.svg      |  4 ++++
 src/assets/icons/play.svg       |  3 +++
 src/lib/components/Album.svelte | 37 ++++++++++++++++++---------------
 3 files changed, 27 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/icons/pause.svg
 create mode 100644 src/assets/icons/play.svg

diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
new file mode 100644
index 0000000..291714b
--- /dev/null
+++ b/src/assets/icons/pause.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <rect x="6" y="4" width="4" height="16" rx="2" />
+  <rect x="14" y="4" width="4" height="16" rx="2" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
new file mode 100644
index 0000000..def0f47
--- /dev/null
+++ b/src/assets/icons/play.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M8 5v14c0 1.1 1.2 1.8 2.2 1.2l11-7c.8-.5.8-1.9 0-2.4l-11-7C9.2 3.2 8 3.9 8 5z" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte
index e406c98..ce061a1 100644
--- a/src/lib/components/Album.svelte
+++ b/src/lib/components/Album.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion'
+	import { Spring } from 'svelte/motion'
 	import type { Album } from '$lib/types/lastfm'
 	import { audioPreview } from '$lib/stores/audio-preview'
 	import { nowPlayingStream } from '$lib/stores/now-playing-stream'
 	import NowPlaying from './NowPlaying.svelte'
+	import PlayIcon from '$icons/play.svg'
+	import PauseIcon from '$icons/pause.svg'
 
 	interface AlbumProps {
 		album?: Album
@@ -26,16 +28,16 @@
 		return unsubscribe
 	})
 
-	const scale = spring(1, {
-		stiffness: 0.2,
-		damping: 0.145
+	const scale = new Spring(1, {
+		stiffness: 0.1,
+		damping: 0.25
 	})
 
 	$effect(() => {
 		if (isHovering) {
-			scale.set(1.1)
+			scale.target = 1.1
 		} else {
-			scale.set(1)
+			scale.target = 1
 		}
 	})
 
@@ -116,7 +118,7 @@
 					<img
 						src={artworkUrl}
 						alt={album.name}
-						style="transform: scale({$scale})"
+						style="transform: scale({scale.current})"
 						loading="lazy"
 					/>
 					{#if isNowPlaying}
@@ -130,9 +132,9 @@
 							class:playing={isPlaying}
 						>
 							{#if isPlaying}
-								<span aria-hidden="true">❚❚</span>
+								<PauseIcon />
 							{:else}
-								<span aria-hidden="true">▶</span>
+								<PlayIcon />
 							{/if}
 						</button>
 					{/if}
@@ -190,11 +192,12 @@
 
 			.preview-button {
 				position: absolute;
-				bottom: $unit;
-				right: $unit;
-				width: 40px;
-				height: 40px;
-				background: rgba(0, 0, 0, 0.8);
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 60px;
+				height: 60px;
+				background: rgba(0, 0, 0, 0.4);
 				color: white;
 				border: none;
 				border-radius: 50%;
@@ -202,13 +205,13 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				font-size: 16px;
+				font-size: 24px;
 				transition: all 0.2s ease;
 				backdrop-filter: blur(10px);
 
 				&:hover {
-					background: rgba(0, 0, 0, 0.9);
-					transform: scale(1.1);
+					background: rgba(0, 0, 0, 0.5);
+					transform: translate(-50%, -50%) scale(1.1);
 				}
 
 				&.playing {