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 @@