diff --git a/src/assets/illos/jedmund-listening-downbeat.svg b/src/assets/illos/jedmund-listening-downbeat.svg new file mode 100644 index 0000000..f724486 --- /dev/null +++ b/src/assets/illos/jedmund-listening-downbeat.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/illos/jedmund-listening.svg b/src/assets/illos/jedmund-listening.svg new file mode 100644 index 0000000..ab5d166 --- /dev/null +++ b/src/assets/illos/jedmund-listening.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/illos/jedmund-signing-downbeat.svg b/src/assets/illos/jedmund-signing-downbeat.svg new file mode 100644 index 0000000..c32bb69 --- /dev/null +++ b/src/assets/illos/jedmund-signing-downbeat.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/illos/jedmund-singing.svg b/src/assets/illos/jedmund-singing.svg new file mode 100644 index 0000000..3bb3000 --- /dev/null +++ b/src/assets/illos/jedmund-singing.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte index 3844195..dce15b3 100644 --- a/src/lib/components/Album.svelte +++ b/src/lib/components/Album.svelte @@ -13,14 +13,14 @@ let isHovering = $state(false) let audio: HTMLAudioElement | null = $state(null) - + // Create a unique ID for this album const albumId = $derived(album ? `${album.artist.name}-${album.name}` : '') - + // Subscribe to the store to know if this album is playing let isPlaying = $state(false) $effect(() => { - const unsubscribe = audioPreview.subscribe(state => { + const unsubscribe = audioPreview.subscribe((state) => { isPlaying = state.currentAlbumId === albumId && state.isPlaying }) return unsubscribe @@ -42,14 +42,14 @@ async function togglePreview(e: Event) { e.preventDefault() e.stopPropagation() - + if (!audio && album?.appleMusicData?.previewUrl) { audio = new Audio(album.appleMusicData.previewUrl) audio.addEventListener('ended', () => { audioPreview.stop() }) } - + if (audio) { if (isPlaying) { audioPreview.stop() @@ -81,13 +81,13 @@ ) const hasPreview = $derived(!!album?.appleMusicData?.previewUrl) - + // Subscribe to real-time now playing updates let realtimeNowPlaying = $state<{ isNowPlaying: boolean; nowPlayingTrack?: string } | null>(null) - + $effect(() => { if (album) { - const unsubscribe = nowPlayingStream.isAlbumPlaying.subscribe(checkAlbum => { + const unsubscribe = nowPlayingStream.isAlbumPlaying.subscribe((checkAlbum) => { const status = checkAlbum(album.artist.name, album.name) if (status !== null) { realtimeNowPlaying = status @@ -96,7 +96,7 @@ return unsubscribe } }) - + // Combine initial state with real-time updates const isNowPlaying = $derived(realtimeNowPlaying?.isNowPlaying ?? album?.isNowPlaying ?? false) const nowPlayingTrack = $derived(realtimeNowPlaying?.nowPlayingTrack ?? album?.nowPlayingTrack) diff --git a/src/lib/components/NowPlaying.svelte b/src/lib/components/NowPlaying.svelte index 09da267..425a148 100644 --- a/src/lib/components/NowPlaying.svelte +++ b/src/lib/components/NowPlaying.svelte @@ -76,7 +76,8 @@ } @keyframes dance { - 0%, 100% { + 0%, + 100% { transform: scaleY(1); } 50% { @@ -102,4 +103,4 @@ display: none; } } - \ No newline at end of file + diff --git a/src/lib/components/StreamStatus.svelte b/src/lib/components/StreamStatus.svelte index 47451b7..3f9ca8e 100644 --- a/src/lib/components/StreamStatus.svelte +++ b/src/lib/components/StreamStatus.svelte @@ -1,10 +1,10 @@