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/api/subsonicClient.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import md5 from 'md5';
 import { version } from '../../package.json';
 import { useAuthStore } from '../store/authStore';
+import type { ServerProfile } from '../store/authStoreTypes';
 
 export const SUBSONIC_CLIENT = `psysonic/${version}`;
 
@@ -51,6 +52,22 @@ export function getClient() {
   return { baseUrl: `${baseUrl}/rest`, params };
 }
 
+export function getServerById(serverId: string): ServerProfile | undefined {
+  return useAuthStore.getState().servers.find(s => s.id === serverId);
+}
+
+/** Subsonic REST call against an explicit saved server (not necessarily the active one). */
+export async function apiForServer<T>(
+  serverId: string,
+  endpoint: string,
+  extra: Record<string, unknown> = {},
+  timeout = 15000,
+): Promise<T> {
+  const server = getServerById(serverId);
+  if (!server) throw new Error(`Unknown server: ${serverId}`);
+  return apiWithCredentials(server.url, server.username, server.password, endpoint, extra, timeout);
+}
+
 export async function api<T>(endpoint: string, extra: Record<string, unknown> = {}, timeout = 15000): Promise<T> {
   const { baseUrl, params } = getClient();
   const resp = await axios.get(`${baseUrl}/${endpoint}`, {

src/api/subsonicPlayQueue.ts

@@ -1,4 +1,4 @@
-import { api } from './subsonicClient';
+import { api, apiForServer } from './subsonicClient';
 import type { SubsonicSong } from './subsonicTypes';
 
 export async function getPlayQueue(): Promise<{ current?: string; position?: number; songs: SubsonicSong[] }> {
@@ -11,10 +11,16 @@ export async function getPlayQueue(): Promise<{ current?: string; position?: num
   }
 }
 
-export async function savePlayQueue(songIds: string[], current?: string, position?: number): Promise<void> {
+export async function savePlayQueue(
+  songIds: string[],
+  current: string | undefined,
+  position: number | undefined,
+  serverId: string,
+): Promise<void> {
+  if (!serverId) return;
   const params: Record<string, unknown> = {};
   if (songIds.length > 0) params.id = songIds;
   if (current !== undefined) params.current = current;
   if (position !== undefined) params.position = position;
-  await api('savePlayQueue.view', params);
+  await apiForServer(serverId, 'savePlayQueue.view', params);
 }

src/api/subsonicScrobble.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
+import { scrobbleSong } from './subsonicScrobble';
+
+const { apiForServerMock } = vi.hoisted(() => ({
+  apiForServerMock: vi.fn(async () => ({})),
+}));
+
+vi.mock('./subsonicClient', () => ({
+  api: vi.fn(),
+  apiForServer: apiForServerMock,
+}));
+
+describe('subsonicScrobble', () => {
+  beforeEach(() => {
+    apiForServerMock.mockClear();
+    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: 'b',
+      isLoggedIn: true,
+    });
+    usePlayerStore.setState({
+      queue: [{ id: 't1', title: 'T', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 }],
+      queueServerId: 'a',
+      queueIndex: 0,
+    });
+  });
+
+  it('scrobbleSong targets the queue server when active server differs', async () => {
+    await scrobbleSong('t1', 1_700_000_000_000, 'a');
+    expect(apiForServerMock).toHaveBeenCalledWith(
+      'a',
+      'scrobble.view',
+      expect.objectContaining({ id: 't1', submission: true, time: 1_700_000_000_000 }),
+    );
+  });
+});

src/api/subsonicScrobble.ts

@@ -1,17 +1,30 @@
-import { api } from './subsonicClient';
+import { api, apiForServer } from './subsonicClient';
 import type { SubsonicNowPlaying } from './subsonicTypes';
 
-export async function scrobbleSong(id: string, time: number): Promise<void> {
+async function scrobbleOnServer(
+  serverId: string,
+  id: string,
+  submission: boolean,
+  time?: number,
+): Promise<void> {
+  const params: Record<string, unknown> = { id, submission };
+  if (time !== undefined) params.time = time;
+  await apiForServer(serverId, 'scrobble.view', params);
+}
+
+export async function scrobbleSong(id: string, time: number, serverId: string): Promise<void> {
+  if (!serverId) return;
   try {
-    await api('scrobble.view', { id, time, submission: true });
+    await scrobbleOnServer(serverId, id, true, time);
   } catch {
     // best effort
   }
 }
 
-export async function reportNowPlaying(id: string): Promise<void> {
+export async function reportNowPlaying(id: string, serverId: string): Promise<void> {
+  if (!serverId) return;
   try {
-    await api('scrobble.view', { id, submission: false });
+    await scrobbleOnServer(serverId, id, false);
   } catch {
     // best effort
   }

src/api/subsonicStreamUrl.ts

@@ -17,18 +17,39 @@ function coverArtQueryParams(username: string, password: string, id: string, siz
   });
 }
 
+function streamUrlFromProfile(
+  serverUrl: string,
+  username: string,
+  password: string,
+  id: string,
+): string {
+  const baseUrl = restBaseFromUrl(serverUrl);
+  const salt = secureRandomSalt();
+  const token = md5(password + salt);
+  const p = new URLSearchParams({
+    id,
+    u: username,
+    t: token,
+    s: salt,
+    v: '1.16.1',
+    c: SUBSONIC_CLIENT,
+    f: 'json',
+  });
+  return `${baseUrl}/stream.view?${p.toString()}`;
+}
+
+export function buildStreamUrlForServer(serverId: string, id: string): string {
+  const server = useAuthStore.getState().servers.find(s => s.id === serverId);
+  if (!server) return buildStreamUrl(id);
+  return streamUrlFromProfile(server.url, server.username, server.password, id);
+}
+
 export function buildStreamUrl(id: string): string {
   const { getBaseUrl, getActiveServer } = useAuthStore.getState();
   const server = getActiveServer();
   const baseUrl = getBaseUrl();
-  const salt = secureRandomSalt();
-  const token = md5((server?.password ?? '') + salt);
-  const p = new URLSearchParams({
-    id,
-    u: server?.username ?? '',
-    t: token, s: salt, v: '1.16.1', c: SUBSONIC_CLIENT, f: 'json',
-  });
-  return `${baseUrl}/rest/stream.view?${p.toString()}`;
+  if (!server || !baseUrl) return streamUrlFromProfile('', '', '', id);
+  return streamUrlFromProfile(server.url, server.username, server.password, id);
 }
 
 /** Stable cache key for cover art — does not include ephemeral auth params. */