fix(playback): pin queue playback to source server when browsing another library (#717)

* fix(playback): pin queue streams, cover art, and library links to queue server

When the active server changes while a queue from another server is playing,
keep streams and UI on queueServerId; switch back for artist/album links and
queue or player-bar context menus.

* fix(playback): switch to queue server when opening Now Playing

Ensure active server matches queueServerId before Subsonic fetches on the
Now Playing page, mobile player route, and queue info panel; scope caches
by server id.

* docs(credits): mention Now Playing in PR #717 contribution line

* fix(playback): route scrobble and queue sync to queue server

Address PR review: apiForServer for scrobble/now-playing/savePlayQueue,
clear queueServerId on server removal, mini-player queueServerId sync,
block cross-server enqueue with toast, and regression tests.

src/hooks/useEnsurePlaybackServerOnMount.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
+import {
+  ensurePlaybackServerActive,
+  playbackServerDiffersFromActive,
+} from '../utils/playback/playbackServer';
+
+/**
+ * On Now Playing surfaces, switch the browsed server to {@link queueServerId}
+ * before Subsonic fetches run. Returns false while a switch is in flight.
+ */
+export function useEnsurePlaybackServerOnMount(): boolean {
+  const queueServerId = usePlayerStore(s => s.queueServerId);
+  const queueLength = usePlayerStore(s => s.queue.length);
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const [ready, setReady] = useState(() => !playbackServerDiffersFromActive());
+
+  useEffect(() => {
+    if (!playbackServerDiffersFromActive()) {
+      setReady(true);
+      return;
+    }
+    let cancelled = false;
+    setReady(false);
+    void ensurePlaybackServerActive().then(ok => {
+      if (!cancelled) setReady(ok);
+    });
+    return () => { cancelled = true; };
+  }, [queueServerId, queueLength, activeServerId]);
+
+  return ready;
+}

src/hooks/useNowPlayingFetchers.ts

@@ -28,6 +28,10 @@ export interface NowPlayingFetchersDeps {
   audiomuseNavidromeEnabled: boolean;
   lastfmUsername: string;
   currentTrack: { artist: string; title: string } | null;
+  /** Subsonic server for API calls — must match the playing queue server. */
+  subsonicServerId: string;
+  /** False while switching active server to the queue server. */
+  fetchEnabled?: boolean;
 }
 
 export interface NowPlayingFetchersResult {
@@ -42,64 +46,80 @@ export interface NowPlayingFetchersResult {
   lfmArtist: LastfmArtistStats | null;
 }
 
+function subsonicCacheKey(serverId: string, id: string): string {
+  return serverId ? `${serverId}:${id}` : id;
+}
+
 export function useNowPlayingFetchers(deps: NowPlayingFetchersDeps): NowPlayingFetchersResult {
-  const { songId, artistId, albumId, artistName, enableBandsintown, audiomuseNavidromeEnabled, lastfmUsername, currentTrack } = deps;
+  const {
+    songId, artistId, albumId, artistName, enableBandsintown, audiomuseNavidromeEnabled,
+    lastfmUsername, currentTrack, subsonicServerId, fetchEnabled = true,
+  } = deps;
 
   // Entity state, seeded from TTL cache so same-artist song switches are instant
-  const [songMeta,   setSongMeta]   = useState<SubsonicSong | null>(() => songId ? songMetaCache.get(songId) ?? null : null);
-  const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(() => artistId ? artistInfoCache.get(artistId) ?? null : null);
-  const [albumData,  setAlbumData]  = useState<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>(() => albumId ? albumCache.get(albumId) ?? null : null);
-  const [topSongs,   setTopSongs]   = useState<SubsonicSong[]>(() => artistName ? topSongsCache.get(artistName) ?? [] : []);
+  const [songMeta,   setSongMeta]   = useState<SubsonicSong | null>(() =>
+    songId && subsonicServerId ? songMetaCache.get(subsonicCacheKey(subsonicServerId, songId)) ?? null : null);
+  const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(() =>
+    artistId && subsonicServerId ? artistInfoCache.get(subsonicCacheKey(subsonicServerId, artistId)) ?? null : null);
+  const [albumData,  setAlbumData]  = useState<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>(() =>
+    albumId && subsonicServerId ? albumCache.get(subsonicCacheKey(subsonicServerId, albumId)) ?? null : null);
+  const [topSongs,   setTopSongs]   = useState<SubsonicSong[]>(() =>
+    artistName && subsonicServerId ? topSongsCache.get(subsonicCacheKey(subsonicServerId, artistName)) ?? [] : []);
   const [tourEvents, setTourEvents] = useState<BandsintownEvent[]>(() => artistName ? tourCache.get(artistName) ?? [] : []);
   const [tourLoading, setTourLoading] = useState(false);
-  const [discography, setDiscography] = useState<SubsonicAlbum[]>(() => artistId ? discographyCache.get(artistId) ?? [] : []);
+  const [discography, setDiscography] = useState<SubsonicAlbum[]>(() =>
+    artistId && subsonicServerId ? discographyCache.get(subsonicCacheKey(subsonicServerId, artistId)) ?? [] : []);
   const [lfmTrack,   setLfmTrack]   = useState<LastfmTrackInfo | null>(null);
   const [lfmArtist,  setLfmArtist]  = useState<LastfmArtistStats | null>(null);
 
   // Fetch batch per entity change (not per song switch — same-artist songs share artist/top/tour fetches)
   useEffect(() => {
-    if (!songId) { setSongMeta(null); return; }
-    const cached = songMetaCache.get(songId);
+    if (!fetchEnabled || !subsonicServerId || !songId) { setSongMeta(null); return; }
+    const cacheKey = subsonicCacheKey(subsonicServerId, songId);
+    const cached = songMetaCache.get(cacheKey);
     if (cached !== undefined) { setSongMeta(cached); return; }
     let cancelled = false;
     getSong(songId)
-      .then(v => { if (!cancelled) { songMetaCache.set(songId, v ?? null); setSongMeta(v ?? null); } })
-      .catch(() => { if (!cancelled) { songMetaCache.set(songId, null); setSongMeta(null); } });
+      .then(v => { if (!cancelled) { songMetaCache.set(cacheKey, v ?? null); setSongMeta(v ?? null); } })
+      .catch(() => { if (!cancelled) { songMetaCache.set(cacheKey, null); setSongMeta(null); } });
     return () => { cancelled = true; };
-  }, [songId]);
+  }, [fetchEnabled, subsonicServerId, songId]);
 
   useEffect(() => {
-    if (!artistId) { setArtistInfo(null); return; }
-    const cached = artistInfoCache.get(artistId);
+    if (!fetchEnabled || !subsonicServerId || !artistId) { setArtistInfo(null); return; }
+    const cacheKey = subsonicCacheKey(subsonicServerId, artistId);
+    const cached = artistInfoCache.get(cacheKey);
     if (cached !== undefined) { setArtistInfo(cached); return; }
     let cancelled = false;
     getArtistInfo(artistId, { similarArtistCount: audiomuseNavidromeEnabled ? 24 : undefined })
-      .then(v => { if (!cancelled) { artistInfoCache.set(artistId, v ?? null); setArtistInfo(v ?? null); } })
-      .catch(() => { if (!cancelled) { artistInfoCache.set(artistId, null); setArtistInfo(null); } });
+      .then(v => { if (!cancelled) { artistInfoCache.set(cacheKey, v ?? null); setArtistInfo(v ?? null); } })
+      .catch(() => { if (!cancelled) { artistInfoCache.set(cacheKey, null); setArtistInfo(null); } });
     return () => { cancelled = true; };
-  }, [artistId, audiomuseNavidromeEnabled]);
+  }, [fetchEnabled, subsonicServerId, artistId, audiomuseNavidromeEnabled]);
 
   useEffect(() => {
-    if (!albumId) { setAlbumData(null); return; }
-    const cached = albumCache.get(albumId);
+    if (!fetchEnabled || !subsonicServerId || !albumId) { setAlbumData(null); return; }
+    const cacheKey = subsonicCacheKey(subsonicServerId, albumId);
+    const cached = albumCache.get(cacheKey);
     if (cached !== undefined) { setAlbumData(cached); return; }
     let cancelled = false;
     getAlbum(albumId)
-      .then(v => { if (!cancelled) { albumCache.set(albumId, v); setAlbumData(v); } })
-      .catch(() => { if (!cancelled) { albumCache.set(albumId, null); setAlbumData(null); } });
+      .then(v => { if (!cancelled) { albumCache.set(cacheKey, v); setAlbumData(v); } })
+      .catch(() => { if (!cancelled) { albumCache.set(cacheKey, null); setAlbumData(null); } });
     return () => { cancelled = true; };
-  }, [albumId]);
+  }, [fetchEnabled, subsonicServerId, albumId]);
 
   useEffect(() => {
-    if (!artistName) { setTopSongs([]); return; }
-    const cached = topSongsCache.get(artistName);
+    if (!fetchEnabled || !subsonicServerId || !artistName) { setTopSongs([]); return; }
+    const cacheKey = subsonicCacheKey(subsonicServerId, artistName);
+    const cached = topSongsCache.get(cacheKey);
     if (cached !== undefined) { setTopSongs(cached); return; }
     let cancelled = false;
     getTopSongs(artistName)
-      .then(v => { if (!cancelled) { topSongsCache.set(artistName, v); setTopSongs(v); } })
-      .catch(() => { if (!cancelled) { topSongsCache.set(artistName, []); setTopSongs([]); } });
+      .then(v => { if (!cancelled) { topSongsCache.set(cacheKey, v); setTopSongs(v); } })
+      .catch(() => { if (!cancelled) { topSongsCache.set(cacheKey, []); setTopSongs([]); } });
     return () => { cancelled = true; };
-  }, [artistName]);
+  }, [fetchEnabled, subsonicServerId, artistName]);
 
   useEffect(() => {
     if (!enableBandsintown || !artistName) { setTourEvents([]); return; }
@@ -115,15 +135,16 @@ export function useNowPlayingFetchers(deps: NowPlayingFetchersDeps): NowPlayingF
 
   // Discography via getArtist
   useEffect(() => {
-    if (!artistId) { setDiscography([]); return; }
-    const cached = discographyCache.get(artistId);
+    if (!fetchEnabled || !subsonicServerId || !artistId) { setDiscography([]); return; }
+    const cacheKey = subsonicCacheKey(subsonicServerId, artistId);
+    const cached = discographyCache.get(cacheKey);
     if (cached !== undefined) { setDiscography(cached); return; }
     let cancelled = false;
     getArtist(artistId)
-      .then(v => { if (!cancelled) { discographyCache.set(artistId, v.albums); setDiscography(v.albums); } })
-      .catch(() => { if (!cancelled) { discographyCache.set(artistId, []); setDiscography([]); } });
+      .then(v => { if (!cancelled) { discographyCache.set(cacheKey, v.albums); setDiscography(v.albums); } })
+      .catch(() => { if (!cancelled) { discographyCache.set(cacheKey, []); setDiscography([]); } });
     return () => { cancelled = true; };
-  }, [artistId]);
+  }, [fetchEnabled, subsonicServerId, artistId]);
 
   // Last.fm track info (per-track)
   const lfmTrackKey = currentTrack ? `${currentTrack.artist} ${currentTrack.title} ${lastfmUsername}` : '';

src/hooks/usePlaybackCoverArt.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
+import { playbackCoverArtForId } from '../utils/playback/playbackServer';
+
+/** Cover art for the playing queue — uses {@link queueServerId} when it differs from the browsed server. */
+export function usePlaybackCoverArt(coverId: string | undefined, size: number) {
+  const queueServerId = usePlayerStore(s => s.queueServerId);
+  const queueLength = usePlayerStore(s => s.queue.length);
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const servers = useAuthStore(s => s.servers);
+
+  return useMemo(() => {
+    if (!coverId) return { src: '', cacheKey: '' };
+    return playbackCoverArtForId(coverId, size);
+  }, [coverId, size, queueServerId, queueLength, activeServerId, servers]);
+}

src/hooks/usePlaybackLibraryNavigate.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ensurePlaybackServerActive } from '../utils/playback/playbackServer';
+
+/** Navigate to library routes for the playing queue — switches to {@link queueServerId} when needed. */
+export function usePlaybackLibraryNavigate() {
+  const navigate = useNavigate();
+  return useCallback(async (path: string) => {
+    await ensurePlaybackServerActive();
+    navigate(path);
+  }, [navigate]);
+}