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/utils/componentHelpers/miniPlayerHelpers.ts

@@ -58,6 +58,7 @@ export function initialSnapshot(): MiniSyncPayload {
       track: s.currentTrack ? toMini(s.currentTrack) : null,
       queue: (s.queue ?? []).map(toMini),
       queueIndex: s.queueIndex ?? 0,
+      queueServerId: s.queueServerId ?? null,
       isPlaying: s.isPlaying,
       volume: s.volume ?? 1,
       gaplessEnabled: false,
@@ -67,7 +68,7 @@ export function initialSnapshot(): MiniSyncPayload {
     };
   } catch {
     return {
-      track: null, queue: [], queueIndex: 0, isPlaying: false,
+      track: null, queue: [], queueIndex: 0, queueServerId: null, isPlaying: false,
       volume: 1, gaplessEnabled: false, crossfadeEnabled: false,
       infiniteQueueEnabled: false, isMobile: false,
     };

src/utils/miniPlayerBridge.ts

@@ -25,6 +25,7 @@ export interface MiniSyncPayload {
   track: MiniTrackInfo | null;
   queue: MiniTrackInfo[];
   queueIndex: number;
+  queueServerId: string | null;
   isPlaying: boolean;
   volume: number;
   gaplessEnabled: boolean;
@@ -62,6 +63,7 @@ function snapshot(): MiniSyncPayload {
     track: s.currentTrack ? toMini(s.currentTrack) : null,
     queue: (s.queue ?? []).map(toMini),
     queueIndex: s.queueIndex ?? 0,
+    queueServerId: s.queueServerId ?? null,
     isPlaying: s.isPlaying,
     volume: s.volume,
     gaplessEnabled: !!a.gaplessEnabled,
@@ -93,6 +95,7 @@ export function initMiniPlayerBridgeOnMain(): () => void {
       payload.track?.starred ?? '',
       (payload.track?.artists ?? []).map((a: SubsonicOpenArtistRef) => a.id ?? a.name).join('|'),
       payload.queueIndex,
+      payload.queueServerId ?? '',
       payload.volume,
       payload.gaplessEnabled,
       payload.crossfadeEnabled,
@@ -110,6 +113,7 @@ export function initMiniPlayerBridgeOnMain(): () => void {
       || state.currentTrack?.starred !== prev.currentTrack?.starred
       || state.queueIndex !== prev.queueIndex
       || state.queue !== prev.queue
+      || state.queueServerId !== prev.queueServerId
       || state.volume !== prev.volume) {
       push();
     }

src/utils/playback/playbackServer.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { useAuthStore } from '../../store/authStore';
+import { usePlayerStore } from '../../store/playerStore';
+import {
+  bindQueueServerForPlayback,
+  clearQueueServerForPlayback,
+  ensurePlaybackServerActive,
+  getPlaybackServerId,
+  playbackCoverArtForId,
+  playbackServerDiffersFromActive,
+  shouldBindQueueServerForPlay,
+} from './playbackServer';
+import { vi } from 'vitest';
+
+vi.mock('../server/switchActiveServer', () => ({
+  switchActiveServer: vi.fn(async () => true),
+}));
+
+describe('playbackServer', () => {
+  beforeEach(() => {
+    useAuthStore.setState({
+      servers: [
+        { id: 'a', name: 'A', url: 'http://a.test', username: 'u', password: 'p' },
+        { id: 'b', name: 'B', url: 'http://b.test', username: 'u', password: 'p' },
+      ],
+      activeServerId: 'a',
+      isLoggedIn: true,
+    });
+    usePlayerStore.setState({
+      queue: [{ id: 't1', title: 'T', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 }],
+      queueServerId: 'a',
+      queueIndex: 0,
+    });
+  });
+
+  it('getPlaybackServerId returns queue server while queue is non-empty', () => {
+    useAuthStore.setState({ activeServerId: 'b' });
+    expect(getPlaybackServerId()).toBe('a');
+  });
+
+  it('getPlaybackServerId falls back to active when queue is empty', () => {
+    clearQueueServerForPlayback();
+    usePlayerStore.setState({ queue: [] });
+    useAuthStore.setState({ activeServerId: 'b' });
+    expect(getPlaybackServerId()).toBe('b');
+  });
+
+  it('bindQueueServerForPlayback pins active server', () => {
+    useAuthStore.setState({ activeServerId: 'b' });
+    bindQueueServerForPlayback();
+    expect(usePlayerStore.getState().queueServerId).toBe('b');
+  });
+
+  it('playbackServerDiffersFromActive when queue server != active', () => {
+    useAuthStore.setState({ activeServerId: 'b' });
+    expect(playbackServerDiffersFromActive()).toBe(true);
+    usePlayerStore.setState({ queue: [] });
+    expect(playbackServerDiffersFromActive()).toBe(false);
+  });
+
+  it('ensurePlaybackServerActive calls switch when servers differ', async () => {
+    const { switchActiveServer } = await import('../server/switchActiveServer');
+    useAuthStore.setState({ activeServerId: 'b' });
+    await ensurePlaybackServerActive();
+    expect(switchActiveServer).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'a' }),
+    );
+  });
+
+  it('playbackCoverArtForId uses queue server credentials when browsing another server', () => {
+    useAuthStore.setState({ activeServerId: 'b' });
+    const { src, cacheKey } = playbackCoverArtForId('cov1', 128);
+    expect(src).toContain('a.test');
+    expect(cacheKey).toBe('a:cover:cov1:128');
+  });
+
+  it('shouldBindQueueServerForPlay detects queue replacement', () => {
+    const prev = [{ id: 't1', title: 'T', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 }];
+    const next = [
+      { id: 't1', title: 'T', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 },
+      { id: 't2', title: 'T2', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 },
+    ];
+    expect(shouldBindQueueServerForPlay(prev, next, next)).toBe(true);
+    expect(shouldBindQueueServerForPlay(prev, prev, undefined)).toBe(false);
+  });
+});

src/utils/playback/playbackServer.ts

@@ -0,0 +1,75 @@
+import {
+  buildCoverArtUrl,
+  buildCoverArtUrlForServer,
+  coverArtCacheKey,
+  coverArtCacheKeyForServer,
+} from '../../api/subsonicStreamUrl';
+import { useAuthStore } from '../../store/authStore';
+import { usePlayerStore } from '../../store/playerStore';
+import { switchActiveServer } from '../server/switchActiveServer';
+import { sameQueueTrackId } from './queueIdentity';
+import type { Track } from '../../store/playerStoreTypes';
+
+/** Server that owns the current queue / stream URLs (may differ from the browsed server). */
+export function getPlaybackServerId(): string {
+  const { queueServerId, queue } = usePlayerStore.getState();
+  if ((queue?.length ?? 0) > 0 && queueServerId) return queueServerId;
+  return useAuthStore.getState().activeServerId ?? '';
+}
+
+export function bindQueueServerForPlayback(): void {
+  const sid = useAuthStore.getState().activeServerId;
+  if (!sid) return;
+  usePlayerStore.setState({ queueServerId: sid });
+}
+
+export function clearQueueServerForPlayback(): void {
+  usePlayerStore.setState({ queueServerId: null });
+}
+
+export function playbackServerDiffersFromActive(): boolean {
+  const { queueServerId, queue } = usePlayerStore.getState();
+  if ((queue?.length ?? 0) === 0 || !queueServerId) return false;
+  const activeSid = useAuthStore.getState().activeServerId;
+  return !!activeSid && queueServerId !== activeSid;
+}
+
+/** Switch the browsed server to the queue server when they differ (e.g. artist/album links). */
+export async function ensurePlaybackServerActive(): Promise<boolean> {
+  if (!playbackServerDiffersFromActive()) return true;
+  const playbackSid = getPlaybackServerId();
+  const server = useAuthStore.getState().servers.find(s => s.id === playbackSid);
+  if (!server) return false;
+  return switchActiveServer(server);
+}
+
+/** Cover URLs for queue / player UI when playback uses a non-active saved server. */
+export function playbackCoverArtForId(coverId: string, size: number): { src: string; cacheKey: string } {
+  const playbackSid = getPlaybackServerId();
+  const activeSid = useAuthStore.getState().activeServerId;
+  if (playbackSid && activeSid && playbackSid !== activeSid) {
+    const server = useAuthStore.getState().servers.find(s => s.id === playbackSid);
+    if (server) {
+      return {
+        src: buildCoverArtUrlForServer(server.url, server.username, server.password, coverId, size),
+        cacheKey: coverArtCacheKeyForServer(server.id, coverId, size),
+      };
+    }
+  }
+  return {
+    src: buildCoverArtUrl(coverId, size),
+    cacheKey: coverArtCacheKey(coverId, size),
+  };
+}
+
+export function shouldBindQueueServerForPlay(
+  prevQueue: Track[],
+  newQueue: Track[],
+  explicitQueueArg: Track[] | undefined,
+): boolean {
+  if (newQueue.length === 0) return false;
+  if (prevQueue.length === 0) return true;
+  if (explicitQueueArg === undefined) return false;
+  if (explicitQueueArg.length !== prevQueue.length) return true;
+  return !explicitQueueArg.every((t, i) => sameQueueTrackId(prevQueue[i]?.id, t.id));
+}

src/utils/playback/resolvePlaybackUrl.ts

@@ -1,6 +1,7 @@
-import { buildStreamUrl } from '../../api/subsonicStreamUrl';
+import { buildStreamUrlForServer } from '../../api/subsonicStreamUrl';
 import { useOfflineStore } from '../../store/offlineStore';
 import { useHotCacheStore } from '../../store/hotCacheStore';
+import { getPlaybackServerId } from './playbackServer';
 
 /** Same resolution order as {@link resolvePlaybackUrl} — for UI hints only. */
 export type PlaybackSourceKind = 'offline' | 'hot' | 'stream';
@@ -54,10 +55,11 @@ export function getPlaybackSourceKind(
 }
 
 /** Offline library → hot playback cache → HTTP stream. */
-export function resolvePlaybackUrl(trackId: string, serverId: string): string {
-  const offline = useOfflineStore.getState().getLocalUrl(trackId, serverId);
+export function resolvePlaybackUrl(trackId: string, serverId?: string): string {
+  const sid = serverId && serverId.length > 0 ? serverId : getPlaybackServerId();
+  const offline = useOfflineStore.getState().getLocalUrl(trackId, sid);
   if (offline) return offline;
-  const hot = useHotCacheStore.getState().getLocalUrl(trackId, serverId);
+  const hot = useHotCacheStore.getState().getLocalUrl(trackId, sid);
   if (hot) return hot;
-  return buildStreamUrl(trackId);
+  return buildStreamUrlForServer(sid, trackId);
 }