diff --git a/src/lib/components/TrackRow.svelte b/src/lib/components/TrackRow.svelte index cd659d316..4dc05954f 100644 --- a/src/lib/components/TrackRow.svelte +++ b/src/lib/components/TrackRow.svelte @@ -24,6 +24,7 @@ duration: string; quality?: string; isPlaying?: boolean; + isActiveTrack?: boolean; isLocal?: boolean; // Whether this is a local library track localSource?: 'local' | 'plex'; isUnavailable?: boolean; // Track removed from Qobuz or otherwise unavailable @@ -80,6 +81,7 @@ duration, quality, isPlaying = false, + isActiveTrack = false, isLocal = false, localSource = 'local', isUnavailable = false, @@ -155,8 +157,8 @@
- {:else if isPlaying} + {:else if isActiveTrack || isPlaying} {#if isHovered} - + {#if isPlaying} + + {:else} + + {/if} {:else} -
+
@@ -230,7 +238,7 @@
- {title} + {title} {#if explicit} {/if} @@ -491,6 +499,11 @@ border-radius: 9999px; transform-origin: bottom; animation: equalize 1s ease-in-out infinite; + animation-play-state: running; + } + + .playing-indicator.paused .bar { + animation-play-state: paused; } .playing-indicator .bar:nth-child(1) { diff --git a/src/lib/components/VirtualizedTrackList.svelte b/src/lib/components/VirtualizedTrackList.svelte index 2308fc687..9655326b4 100644 --- a/src/lib/components/VirtualizedTrackList.svelte +++ b/src/lib/components/VirtualizedTrackList.svelte @@ -345,6 +345,7 @@ duration={formatDuration(getTrackDuration(item.track))} quality={getQualityBadge(item.track)} isPlaying={isPlaybackActive && activeTrackId === trackId} + isActiveTrack={activeTrackId === trackId} isBlacklisted={trackBlacklisted} selectable={selectable} selected={selectedIds?.has(trackId) ?? false} diff --git a/src/lib/components/views/AlbumDetailView.svelte b/src/lib/components/views/AlbumDetailView.svelte index f9c36faae..5792f336b 100644 --- a/src/lib/components/views/AlbumDetailView.svelte +++ b/src/lib/components/views/AlbumDetailView.svelte @@ -643,7 +643,8 @@ duration={track.duration} quality={track.quality} explicit={track.parental_warning === true} - isPlaying={activeTrackId === track.id} + isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isBlacklisted={trackBlacklisted} selectable={multiSelectMode} selected={multiSelectedIds.has(track.id)} diff --git a/src/lib/components/views/DynamicSuggestView.svelte b/src/lib/components/views/DynamicSuggestView.svelte index 5ca58360c..f5ed0fdab 100644 --- a/src/lib/components/views/DynamicSuggestView.svelte +++ b/src/lib/components/views/DynamicSuggestView.svelte @@ -546,6 +546,7 @@ showArtwork={true} artworkUrl={getQobuzImage(track.album?.image)} isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isBlacklisted={trackBlacklisted} selectable={multiSelectMode} selected={multiSelectedIds.has(track.id)} diff --git a/src/lib/components/views/FavQView.svelte b/src/lib/components/views/FavQView.svelte index a2560c381..e374280a5 100644 --- a/src/lib/components/views/FavQView.svelte +++ b/src/lib/components/views/FavQView.svelte @@ -498,6 +498,7 @@ showArtwork={true} artworkUrl={getQobuzImage(track.album?.image)} isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isBlacklisted={trackBlacklisted} selectable={multiSelectMode} selected={multiSelectedIds.has(track.id)} diff --git a/src/lib/components/views/HomeView.svelte b/src/lib/components/views/HomeView.svelte index da236af55..3f4b8c270 100644 --- a/src/lib/components/views/HomeView.svelte +++ b/src/lib/components/views/HomeView.svelte @@ -1327,7 +1327,7 @@
{#each continueTracks as track, index (track.id)} - {@const isActiveTrack = isPlaybackActive && activeTrackId === track.id} + {@const isThisActiveTrack = activeTrackId === track.id} {@const cacheStatus = getTrackOfflineCacheStatus?.(track.id) ?? { status: 'none' as const, progress: 0 }} {@const isTrackDownloaded = cacheStatus.status === 'ready'} {@const trackBlacklisted = track.artistId ? isArtistBlacklisted(track.artistId) : false} @@ -1339,7 +1339,8 @@ album={track.album} duration={track.duration} quality={getTrackQuality(track)} - isPlaying={isActiveTrack} + isPlaying={isPlaybackActive && isThisActiveTrack} + isActiveTrack={isThisActiveTrack} isBlacklisted={trackBlacklisted} compact={true} hideDownload={trackBlacklisted} diff --git a/src/lib/components/views/LocalLibraryView.svelte b/src/lib/components/views/LocalLibraryView.svelte index 78aca208a..3ca6ed1e1 100644 --- a/src/lib/components/views/LocalLibraryView.svelte +++ b/src/lib/components/views/LocalLibraryView.svelte @@ -3256,6 +3256,7 @@ duration={formatDuration(track.duration_secs)} quality={getQualityBadge(track)} isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isLocal={true} localSource={track.source === 'plex' ? 'plex' : 'local'} hideDownload={true} diff --git a/src/lib/components/views/PlaylistDetailView.svelte b/src/lib/components/views/PlaylistDetailView.svelte index bc983b732..34667c6cf 100644 --- a/src/lib/components/views/PlaylistDetailView.svelte +++ b/src/lib/components/views/PlaylistDetailView.svelte @@ -2347,6 +2347,7 @@ ? 'Hi-Res' : '-'} isPlaying={isTrackPlaying} + isActiveTrack={isActiveTrack} isLocal={track.isLocal} isUnavailable={removedFromQobuz && isOwnPlaylist} unavailableTooltip={removedFromQobuz ? $t('player.trackUnavailable') : undefined} diff --git a/src/lib/components/views/TopQView.svelte b/src/lib/components/views/TopQView.svelte index b2f62cf4d..cffac2718 100644 --- a/src/lib/components/views/TopQView.svelte +++ b/src/lib/components/views/TopQView.svelte @@ -611,6 +611,7 @@ showArtwork={true} artworkUrl={getQobuzImage(track.album?.image)} isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isBlacklisted={trackBlacklisted} selectable={multiSelectMode} selected={multiSelectedIds.has(track.id)} diff --git a/src/lib/components/views/WeeklySuggestView.svelte b/src/lib/components/views/WeeklySuggestView.svelte index d7572b34c..225222159 100644 --- a/src/lib/components/views/WeeklySuggestView.svelte +++ b/src/lib/components/views/WeeklySuggestView.svelte @@ -541,6 +541,7 @@ showArtwork={true} artworkUrl={getQobuzImage(track.album?.image)} isPlaying={isPlaybackActive && activeTrackId === track.id} + isActiveTrack={activeTrackId === track.id} isBlacklisted={trackBlacklisted} selectable={multiSelectMode} selected={multiSelectedIds.has(track.id)}