-
-
- {album.name}
-
-
-
+
{:else}
- {album.artist.name} -
-No album provided
{/if} @@ -57,6 +157,14 @@ width: 100%; height: 100%; + .album-wrapper { + display: flex; + flex-direction: column; + gap: $unit; + width: 100%; + height: 100%; + } + a { display: flex; flex-direction: column; @@ -66,6 +174,12 @@ width: 100%; height: 100%; + .artwork-container { + position: relative; + width: 100%; + overflow: hidden; + } + img { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: $unit; @@ -75,6 +189,34 @@ object-fit: cover; } + .preview-button { + position: absolute; + bottom: $unit; + right: $unit; + width: 40px; + height: 40px; + background: rgba(0, 0, 0, 0.8); + color: white; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + transition: all 0.2s ease; + backdrop-filter: blur(10px); + + &:hover { + background: rgba(0, 0, 0, 0.9); + transform: scale(1.1); + } + + &.playing { + background: $accent-color; + } + } + .info { display: flex; flex-direction: column; @@ -103,5 +245,9 @@ } } } + + .preview-container { + margin-top: $unit; + } } diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte index 48ef29c..7bb0395 100644 --- a/src/lib/components/Avatar.svelte +++ b/src/lib/components/Avatar.svelte @@ -3,9 +3,11 @@ // We can do a thought bubble-y thing with the album art that takes you to the album section of the page import { onMount, onDestroy } from 'svelte' import { spring } from 'svelte/motion' + import { nowPlayingStream } from '$lib/stores/now-playing-stream' - let isHovering = false - let isBlinking = false + let isHovering = $state(false) + let isBlinking = $state(false) + let isPlayingMusic = $state(false) const scale = spring(1, { stiffness: 0.1, @@ -55,10 +57,17 @@ } }, 4000) + // Subscribe to now playing updates + const unsubscribe = nowPlayingStream.subscribe((state) => { + // Check if any album is currently playing + isPlayingMusic = Array.from(state.updates.values()).some((update) => update.isNowPlaying) + }) + return () => { if (blinkInterval) { clearInterval(blinkInterval) } + unsubscribe() } }) @@ -356,6 +365,75 @@ + + + {#if isPlayingMusic} +
+
+
+ {/if}