diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte
index cac6695..ea72e0e 100644
--- a/src/lib/components/Album.svelte
+++ b/src/lib/components/Album.svelte
@@ -2,10 +2,9 @@
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'
+ import PlayIcon from '$icons/play.svg?component'
+ import PauseIcon from '$icons/pause.svg?component'
interface AlbumProps {
album?: Album
@@ -32,8 +31,8 @@
})
const scale = new Spring(1, {
- stiffness: 0.2,
- damping: 0.12
+ stiffness: 0.3,
+ damping: 0.25
})
// Determine if this album should shrink
@@ -41,9 +40,9 @@
$effect(() => {
if (isHovering) {
- scale.target = 1.1
+ scale.target = 1.05
} else if (shouldShrink) {
- scale.target = 0.95
+ scale.target = 0.97
} else {
scale.target = 1
}
@@ -99,32 +98,17 @@
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 status = checkAlbum(album.artist.name, album.name)
- if (status !== null) {
- realtimeNowPlaying = status
- }
- })
- return unsubscribe
- }
- })
-
- // Combine initial state with real-time updates
- const isNowPlaying = $derived(realtimeNowPlaying?.isNowPlaying ?? album?.isNowPlaying ?? false)
- const nowPlayingTrack = $derived(realtimeNowPlaying?.nowPlayingTrack ?? album?.nowPlayingTrack)
-
+ // Use the album's isNowPlaying status directly - single source of truth
+ const isNowPlaying = $derived(album?.isNowPlaying ?? false)
+ const nowPlayingTrack = $derived(album?.nowPlayingTrack)
+
// Debug logging
$effect(() => {
- if (album && isNowPlaying) {
- console.log(`Album "${album.name}" is now playing:`, {
- fromRealtime: realtimeNowPlaying?.isNowPlaying,
- fromAlbum: album?.isNowPlaying,
- track: nowPlayingTrack
+ if (album && (isNowPlaying || album.isNowPlaying)) {
+ console.log(`🎵 Album component "${album.name}":`, {
+ isNowPlaying,
+ nowPlayingTrack,
+ albumData: album
})
}
})
@@ -165,9 +149,9 @@
class:playing={isPlaying}
>
{#if isPlaying}
-
+
{:else}
-
+
{/if}
{/if}
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index 6911608..d5a982d 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -1,11 +1,9 @@
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 8e86cef..e743c0b 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -3,8 +3,7 @@
import SegmentedController from './SegmentedController.svelte'
import NavDropdown from './NavDropdown.svelte'
import NowPlayingBar from './NowPlayingBar.svelte'
- import { albumStream } from '$lib/stores/album-stream'
- import { nowPlayingStream } from '$lib/stores/now-playing-stream'
+ import { musicStream } from '$lib/stores/music-stream'
import type { Album } from '$lib/types/lastfm'
let scrollY = $state(0)
@@ -18,40 +17,19 @@
let currentlyPlayingAlbum = $state(null)
let isPlayingMusic = $state(false)
- // Subscribe to album updates
+ // Subscribe to music stream updates - single source of truth
$effect(() => {
- const unsubscribe = albumStream.subscribe((state) => {
- const nowPlaying = state.albums.find((album) => album.isNowPlaying)
- currentlyPlayingAlbum = nowPlaying || null
+ const unsubscribe = musicStream.nowPlaying.subscribe((nowPlaying) => {
+ currentlyPlayingAlbum = nowPlaying?.album || null
isPlayingMusic = !!nowPlaying
// Debug logging
- if (nowPlaying) {
- console.log('Header: Now playing detected:', {
- artist: nowPlaying.artist.name,
- album: nowPlaying.name,
- track: nowPlaying.nowPlayingTrack
- })
- }
- })
-
- return unsubscribe
- })
-
- // Also check now playing stream for updates
- $effect(() => {
- const unsubscribe = nowPlayingStream.subscribe((state) => {
- const hasNowPlaying = Array.from(state.updates.values()).some((update) => update.isNowPlaying)
- console.log('Header: nowPlayingStream update:', {
- hasNowPlaying,
- updatesCount: state.updates.size
+ console.log('🎧 Header now playing update:', {
+ hasNowPlaying: !!nowPlaying,
+ album: nowPlaying?.album.name,
+ artist: nowPlaying?.album.artist.name,
+ track: nowPlaying?.track
})
- // Only clear if we explicitly know music stopped
- if (!hasNowPlaying && currentlyPlayingAlbum && state.updates.size > 0) {
- // Music stopped
- currentlyPlayingAlbum = null
- isPlayingMusic = false
- }
})
return unsubscribe
diff --git a/src/lib/components/RecentAlbums.svelte b/src/lib/components/RecentAlbums.svelte
index 715f4bb..9606961 100644
--- a/src/lib/components/RecentAlbums.svelte
+++ b/src/lib/components/RecentAlbums.svelte
@@ -1,7 +1,7 @@