fix: freeze equalizer animation when player is paused

Separate isActiveTrack (current track) from isPlaying (actively playing)
so the equalizer bars freeze via animation-play-state when paused instead
of always animating. Show Play icon on hover when paused, Pause when playing.
Also fix AlbumDetailView which was missing the isPlaybackActive check.

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 @@
 
 <div
   class="track-row"
-  class:playing={isPlaying}
+  class:playing={isActiveTrack || isPlaying}
-  class:hovered={isHovered && !isPlaying && !isBlacklisted}
+  class:hovered={isHovered && !isActiveTrack && !isPlaying && !isBlacklisted}
   class:compact
   class:blacklisted={isBlacklisted}
   class:selected
@@ -196,13 +198,19 @@
       <span class="unavailable-icon" title={unavailableTooltip}>
         <AlertCircle size={16} />
       </span>
-    {:else if isPlaying}
+    {:else if isActiveTrack || isPlaying}
       {#if isHovered}
-        <button class="pause-btn" type="button" onclick={handlePauseClick} aria-label="Pause">
+        {#if isPlaying}
-          <Pause size={16} class="pause-icon" />
+          <button class="pause-btn" type="button" onclick={handlePauseClick} aria-label="Pause">
-        </button>
+            <Pause size={16} class="pause-icon" />
+          </button>
+        {:else}
+          <button class="pause-btn" type="button" onclick={handlePauseClick} aria-label="Resume">
+            <Play size={16} class="play-icon" fill="white" />
+          </button>
+        {/if}
       {:else}
-        <div class="playing-indicator">
+        <div class="playing-indicator" class:paused={!isPlaying}>
           <div class="bar"></div>
           <div class="bar"></div>
           <div class="bar"></div>
@@ -230,7 +238,7 @@
   <!-- Track Info -->
   <div class="track-info">
     <div class="track-title-row">
-      <span class="track-title" class:active={isPlaying}>{title}</span>
+      <span class="track-title" class:active={isActiveTrack || isPlaying}>{title}</span>
       {#if explicit}
         <span class="explicit-badge" title="Explicit"></span>
       {/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) {

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}

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)}

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)}

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)}

src/lib/components/views/HomeView.svelte

@@ -1327,7 +1327,7 @@
           </div>
           <div class="track-list compact">
             {#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}

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}

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}

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)}

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)}