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.
This commit is contained in:
cucadmuh
2026-05-15 16:08:41 +03:00
committed by GitHub
parent a9b50b9244
commit 45e0e1206f
58 changed files with 701 additions and 178 deletions
+10
View File
@@ -488,6 +488,16 @@ Foundational work: faster reviews, narrower diffs, and a safety net under the pa
* Album detail **header** shows **multiple album artists** when the server sends OpenSubsonic **`albumArtists`** on the album or on child songs — each name links to its artist page instead of only the first id (issue [#552](https://github.com/Psychotoxical/psysonic/issues/552)).
* **Player bar**, **mobile now playing**, and **mini player** copy **`artists`** through **`songToTrack`** so multi-performer tracks get **per-artist** links like the album tracklist column.
### Multi-server — queue playback stays on the source server when browsing another library
**By [@cucadmuh](https://github.com/cucadmuh), PR [#717](https://github.com/Psychotoxical/psysonic/pull/717)**
* With a non-empty queue from server **A**, switching the active server to **B** no longer breaks playback: streams, hot-cache prefetch, seek/resume, and MPRIS cover art use **`queueServerId`** (persisted with the queue).
* **Cover art** in the queue panel, player bar, mini/fullscreen/mobile players, and Now Playing loads from the queue server when it differs from the browsed server.
* **Artist/album links** from the player, queue, Now Playing, and mini player switch back to the queue server before navigating; **queue** and **player-bar album** context menus pin API actions to that server as well.
* Opening **Now Playing** (sidebar, mobile route, or queue info panel) switches to the queue server before Subsonic metadata loads, with per-server fetch caches so artist/album cards do not show the wrong library.
* **Scrobble**, **now-playing report**, and **savePlayQueue** sync use the queue server as well; removing that server profile clears `queueServerId`; the mini-player bridge receives `queueServerId`; enqueue/play-next from another browsed server is blocked with a toast.
## [1.45.0] - 2026-05-04
## Added
+17
View File
@@ -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}`, {
+9 -3
View File
@@ -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);
}
+41
View File
@@ -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 }),
);
});
});
+18 -5
View File
@@ -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
}
+29 -8
View File
@@ -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. */
+5 -1
View File
@@ -1,5 +1,6 @@
import React, { Suspense, useCallback, useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { ensurePlaybackServerActive } from '../utils/playback/playbackServer';
import { invoke } from '@tauri-apps/api/core';
import { PanelRight } from 'lucide-react';
import { useTranslation } from 'react-i18next';
@@ -97,7 +98,10 @@ export function AppShell() {
useEffect(() => {
const onPsyNavigate = (e: Event) => {
const detail = (e as CustomEvent).detail;
if (detail?.to) navigate(detail.to);
if (!detail?.to) return;
void ensurePlaybackServerActive().then(ok => {
if (ok) navigate(detail.to);
});
};
window.addEventListener('psy:navigate', onPsyNavigate);
return () => window.removeEventListener('psy:navigate', onPsyNavigate);
+18 -1
View File
@@ -15,6 +15,8 @@ import {
} from '../utils/componentHelpers/contextMenuActions';
import { useContextMenuKeyboardNav } from '../hooks/useContextMenuKeyboardNav';
import { useContextMenuRating } from '../hooks/useContextMenuRating';
import { usePlaybackLibraryNavigate } from '../hooks/usePlaybackLibraryNavigate';
import { useNavigate } from 'react-router-dom';
import ContextMenuItems from './contextMenu/ContextMenuItems';
export { AddToPlaylistSubmenu };
@@ -22,6 +24,8 @@ export { AddToPlaylistSubmenu };
export default function ContextMenu() {
const { t } = useTranslation();
const navigate = useNavigate();
const navigatePlaybackLibrary = usePlaybackLibraryNavigate();
const orbitRole = useOrbitStore(s => s.role);
const { contextMenu, closeContextMenu, playTrack, enqueue, playNext, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride, openSongInfo, userRatingOverrides, setUserRatingOverride } = usePlayerStore(
useShallow(s => ({
@@ -125,7 +129,18 @@ export default function ContextMenu() {
}, [contextMenu.isOpen, closeContextMenu, cancelPlaylistSubmenuCloseTimer]);
const { type, item, queueIndex, playlistId, playlistSongIndex, shareKindOverride } = contextMenu;
const {
type,
item,
queueIndex,
playlistId,
playlistSongIndex,
shareKindOverride,
pinToPlaybackServer = false,
} = contextMenu;
const navigateLibrary = pinToPlaybackServer
? navigatePlaybackLibrary
: (path: string) => { navigate(path); };
const isStarred = (id: string, itemStarred?: string) =>
id in starredOverrides ? starredOverrides[id] : !!itemStarred;
@@ -216,6 +231,8 @@ export default function ContextMenu() {
downloadAlbum={downloadAlbum}
copyShareLink={copyShareLink}
isStarred={isStarred}
pinToPlaybackServer={pinToPlaybackServer}
navigateLibrary={navigateLibrary}
/>
</div>
</>
+12 -9
View File
@@ -1,5 +1,6 @@
import { star, unstar } from '../api/subsonicStarRating';
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
import { playbackCoverArtForId } from '../utils/playback/playbackServer';
import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
import {
SkipBack, SkipForward,
@@ -56,12 +57,13 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
const duration = currentTrack?.duration ?? 0;
// buildCoverArtUrl generates a new salt on every call — must be memoized.
// 300px for the small art box; 500px for the right-side portrait fallback.
const artUrl = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 300) : '', [currentTrack?.coverArt]);
const artKey = useMemo(() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 300) : '', [currentTrack?.coverArt]);
const coverUrl = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 500) : '', [currentTrack?.coverArt]);
const coverKey = useMemo(() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 500) : '', [currentTrack?.coverArt]);
const artCover = usePlaybackCoverArt(currentTrack?.coverArt, 300);
const artUrl = artCover.src;
const artKey = artCover.cacheKey;
const portraitCover = usePlaybackCoverArt(currentTrack?.coverArt, 500);
const coverUrl = portraitCover.src;
const coverKey = portraitCover.cacheKey;
// `false` = no fetchUrl fallback — prevents double crossfade (fetchUrl → blobUrl).
const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey, false);
@@ -86,12 +88,13 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
const idx = s.queueIndex;
return (idx >= 0 && idx + 1 < q.length) ? (q[idx + 1]?.coverArt ?? null) : null;
});
const queueServerId = usePlayerStore(s => s.queueServerId);
const activeServerId = useAuthStore(s => s.activeServerId);
useEffect(() => {
if (!nextCoverArt) return;
const url = buildCoverArtUrl(nextCoverArt, 300);
const key = coverArtCacheKey(nextCoverArt, 300);
const { src: url, cacheKey: key } = playbackCoverArtForId(nextCoverArt, 300);
getCachedBlob(url, key).catch(() => {});
}, [nextCoverArt]);
}, [nextCoverArt, queueServerId, activeServerId]);
// Lyrics settings popover state
const [lyricsMenuOpen, setLyricsMenuOpen] = useState(false);
+4 -9
View File
@@ -1,8 +1,9 @@
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
import { useEffect, useMemo, useRef, useState } from 'react';
import { emit } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/core';
import { useTranslation } from 'react-i18next';
import { usePlayerStore } from '../store/playerStore';
import { registerQueueDragHitTest } from '../contexts/DragDropContext';
import MiniContextMenu from './MiniContextMenu';
import type { MiniSyncPayload, MiniControlAction, MiniTrackInfo } from '../utils/miniPlayerBridge';
@@ -63,6 +64,7 @@ export default function MiniPlayer() {
useMiniSync({
onSync: (payload) => {
setState(payload);
usePlayerStore.setState({ queueServerId: payload.queueServerId ?? null });
if (payload.track?.duration) setDuration(payload.track.duration);
if (typeof payload.volume === 'number') setVolumeState(payload.volume);
},
@@ -138,14 +140,7 @@ export default function MiniPlayer() {
}, [queueOpen, state.queueIndex]);
const { track, isPlaying } = state;
const miniCoverSrc = useMemo(
() => (track?.coverArt ? buildCoverArtUrl(track.coverArt, 300) : ''),
[track?.coverArt],
);
const miniCoverKey = useMemo(
() => (track?.coverArt ? coverArtCacheKey(track.coverArt, 300) : ''),
[track?.coverArt],
);
const { src: miniCoverSrc, cacheKey: miniCoverKey } = usePlaybackCoverArt(track?.coverArt, 300);
const progress = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;
return (
+9 -10
View File
@@ -1,9 +1,11 @@
import { star, unstar } from '../api/subsonicStarRating';
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
import type { Track } from '../store/playerStoreTypes';
import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '../store/playbackProgress';
import React, { useState, useCallback, useMemo, useRef, useEffect, useSyncExternalStore, CSSProperties } from 'react';
import { useNavigate } from 'react-router-dom';
import { usePlaybackLibraryNavigate } from '../hooks/usePlaybackLibraryNavigate';
import { useEnsurePlaybackServerOnMount } from '../hooks/useEnsurePlaybackServerOnMount';
import { useTranslation } from 'react-i18next';
import {
ChevronDown, Play, Pause, SkipBack, SkipForward,
@@ -152,6 +154,8 @@ function LyricsDrawer({ onClose, currentTrack }: { onClose: () => void; currentT
export default function MobilePlayerView() {
const { t } = useTranslation();
const navigate = useNavigate();
const navigatePlaybackLibrary = usePlaybackLibraryNavigate();
useEnsurePlaybackServerOnMount();
// Lock body scroll while full-screen player is mounted
useEffect(() => {
@@ -185,12 +189,7 @@ export default function MobilePlayerView() {
const duration = currentTrack?.duration ?? 0;
// Cover art
const coverFetchUrl = useMemo(
() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '',
[currentTrack?.coverArt]
);
const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
const { src: coverFetchUrl, cacheKey: coverKey } = usePlaybackCoverArt(currentTrack?.coverArt, 800);
const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);
// Dynamic background color extracted from cover art
@@ -332,7 +331,7 @@ export default function MobilePlayerView() {
<OpenArtistRefInline
refs={currentTrack.artists}
fallbackName={currentTrack.artist}
onGoArtist={id => navigate(`/artist/${id}`)}
onGoArtist={id => { void navigatePlaybackLibrary(`/artist/${id}`); }}
as="none"
linkTag="span"
linkClassName="mp-artist-link"
@@ -341,12 +340,12 @@ export default function MobilePlayerView() {
<span
role={currentTrack.artistId ? 'link' : undefined}
tabIndex={currentTrack.artistId ? 0 : undefined}
onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
onClick={() => currentTrack.artistId && void navigatePlaybackLibrary(`/artist/${currentTrack.artistId}`)}
onKeyDown={e => {
if (!currentTrack.artistId) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
navigate(`/artist/${currentTrack.artistId}`);
void navigatePlaybackLibrary(`/artist/${currentTrack.artistId}`);
}
}}
style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+25 -12
View File
@@ -7,6 +7,7 @@ import { Info } from 'lucide-react';
import { open as shellOpen } from '@tauri-apps/plugin-shell';
import { usePlayerStore } from '../store/playerStore';
import { useAuthStore } from '../store/authStore';
import { useEnsurePlaybackServerOnMount } from '../hooks/useEnsurePlaybackServerOnMount';
import { fetchBandsintownEvents, type BandsintownEvent } from '../api/bandsintown';
import CachedImage from './CachedImage';
import OverlayScrollArea from './OverlayScrollArea';
@@ -72,21 +73,31 @@ function buildContributorRows(
return out;
}
function queuePanelCacheKey(serverId: string, id: string): string {
return serverId ? `${serverId}:${id}` : id;
}
export default function NowPlayingInfo() {
const { t } = useTranslation();
const currentTrack = usePlayerStore(s => s.currentTrack);
const enableBandsintown = useAuthStore(s => s.enableBandsintown);
const setEnableBandsintown = useAuthStore(s => s.setEnableBandsintown);
const subsonicReady = useEnsurePlaybackServerOnMount();
const subsonicServerId = useAuthStore(s => s.activeServerId ?? '');
const artistName = currentTrack?.artist || '';
const artistId = currentTrack?.artistId || '';
const songId = currentTrack?.id || '';
const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(
artistId ? artistInfoCache.get(artistId) ?? null : null,
artistId && subsonicServerId
? artistInfoCache.get(queuePanelCacheKey(subsonicServerId, artistId)) ?? null
: null,
);
const [songDetail, setSongDetail] = useState<SubsonicSong | null>(
songId ? songDetailCache.get(songId) ?? null : null,
songId && subsonicServerId
? songDetailCache.get(queuePanelCacheKey(subsonicServerId, songId)) ?? null
: null,
);
const [tourEvents, setTourEvents] = useState<BandsintownEvent[]>([]);
const [tourLoading, setTourLoading] = useState(false);
@@ -101,27 +112,29 @@ export default function NowPlayingInfo() {
// Artist bio + image
useEffect(() => {
if (!artistId) { setArtistInfo(null); return; }
const cached = artistInfoCache.get(artistId);
if (!subsonicReady || !subsonicServerId || !artistId) { setArtistInfo(null); return; }
const cacheKey = queuePanelCacheKey(subsonicServerId, artistId);
const cached = artistInfoCache.get(cacheKey);
if (cached !== undefined) { setArtistInfo(cached); return; }
let cancelled = false;
getArtistInfo(artistId)
.then(info => { if (!cancelled) { artistInfoCache.set(artistId, info ?? null); setArtistInfo(info ?? null); } })
.catch(() => { if (!cancelled) { artistInfoCache.set(artistId, null); setArtistInfo(null); } });
.then(info => { if (!cancelled) { artistInfoCache.set(cacheKey, info ?? null); setArtistInfo(info ?? null); } })
.catch(() => { if (!cancelled) { artistInfoCache.set(cacheKey, null); setArtistInfo(null); } });
return () => { cancelled = true; };
}, [artistId]);
}, [subsonicReady, subsonicServerId, artistId]);
// Song detail (for OpenSubsonic contributors[])
useEffect(() => {
if (!songId) { setSongDetail(null); return; }
const cached = songDetailCache.get(songId);
if (!subsonicReady || !subsonicServerId || !songId) { setSongDetail(null); return; }
const cacheKey = queuePanelCacheKey(subsonicServerId, songId);
const cached = songDetailCache.get(cacheKey);
if (cached !== undefined) { setSongDetail(cached); return; }
let cancelled = false;
getSong(songId)
.then(song => { if (!cancelled) { songDetailCache.set(songId, song ?? null); setSongDetail(song ?? null); } })
.catch(() => { if (!cancelled) { songDetailCache.set(songId, null); setSongDetail(null); } });
.then(song => { if (!cancelled) { songDetailCache.set(cacheKey, song ?? null); setSongDetail(song ?? null); } })
.catch(() => { if (!cancelled) { songDetailCache.set(cacheKey, null); setSongDetail(null); } });
return () => { cancelled = true; };
}, [songId]);
}, [subsonicReady, subsonicServerId, songId]);
// Bandsintown — only when opt-in toggle is on
useEffect(() => {
+12 -5
View File
@@ -1,5 +1,6 @@
import { star, unstar } from '../api/subsonicStarRating';
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
import type { SubsonicAlbum } from '../api/subsonicTypes';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
@@ -17,7 +18,7 @@ import WaveformSeek from './WaveformSeek';
import Equalizer from './Equalizer';
import StarRating from './StarRating';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { usePlaybackLibraryNavigate } from '../hooks/usePlaybackLibraryNavigate';
import { useLyricsStore } from '../store/lyricsStore';
import MarqueeText from './MarqueeText';
import LastfmIcon from './LastfmIcon';
@@ -40,7 +41,7 @@ import { useUtilityOverflowMenu } from '../hooks/useUtilityOverflowMenu';
export default function PlayerBar() {
const { t } = useTranslation();
const navigate = useNavigate();
const navigatePlaybackLibrary = usePlaybackLibraryNavigate();
const [eqOpen, setEqOpen] = useState(false);
const [showVolPct, setShowVolPct] = useState(false);
const [localShowRemaining, setLocalShowRemaining] = useState(() => useThemeStore.getState().showRemainingTime);
@@ -156,8 +157,14 @@ export default function PlayerBar() {
? currentTrack.artists
: undefined;
const coverSrc = useMemo(() => displayCoverArt ? buildCoverArtUrl(displayCoverArt, 128) : '', [displayCoverArt]);
const coverKey = displayCoverArt ? coverArtCacheKey(displayCoverArt, 128) : '';
const previewCover = useMemo(() => {
if (!showPreviewMeta || !previewingTrack?.coverArt) return { src: '', cacheKey: '' };
const id = previewingTrack.coverArt;
return { src: buildCoverArtUrl(id, 128), cacheKey: coverArtCacheKey(id, 128) };
}, [showPreviewMeta, previewingTrack?.coverArt]);
const queueCover = usePlaybackCoverArt(showPreviewMeta ? undefined : displayCoverArt, 128);
const coverSrc = showPreviewMeta ? previewCover.src : queueCover.src;
const coverKey = showPreviewMeta ? previewCover.cacheKey : queueCover.cacheKey;
const handleVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setVolume(parseFloat(e.target.value));
@@ -220,7 +227,7 @@ export default function PlayerBar() {
userRatingOverrides={userRatingOverrides}
setUserRatingOverride={setUserRatingOverride}
toggleFullscreen={toggleFullscreen}
navigate={navigate}
navigate={navigatePlaybackLibrary}
openContextMenu={openContextMenu}
t={t}
/>
+7 -11
View File
@@ -1,5 +1,4 @@
import { getPlaylist, updatePlaylist } from '../api/subsonicPlaylists';
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { songToTrack } from '../utils/playback/songToTrack';
import type { Track } from '../store/playerStoreTypes';
import { useState, useRef, useMemo } from 'react';
@@ -11,7 +10,7 @@ import HostApprovalQueue from './HostApprovalQueue';
import { usePlaylistStore } from '../store/playlistStore';
import { useCachedUrl } from './CachedImage';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { usePlaybackLibraryNavigate } from '../hooks/usePlaybackLibraryNavigate';
import { useAuthStore } from '../store/authStore';
import { encodeSharePayload } from '../utils/share/shareLink';
import { copyTextToClipboard } from '../utils/server/serverMagicString';
@@ -34,6 +33,7 @@ import { QueueToolbar } from './queuePanel/QueueToolbar';
import { QueueList } from './queuePanel/QueueList';
import { QueueTabBar } from './queuePanel/QueueTabBar';
import { useQueueAutoScroll } from '../hooks/useQueueAutoScroll';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
export default function QueuePanel() {
const orbitRole = useOrbitStore(s => s.role);
@@ -49,7 +49,7 @@ export default function QueuePanel() {
function QueuePanelHostOrSolo() {
const { t } = useTranslation();
const navigate = useNavigate();
const navigatePlaybackLibrary = usePlaybackLibraryNavigate();
const orbitRole = useOrbitStore(s => s.role);
const orbitState = useOrbitStore(s => s.state);
/** trackId addedBy (host username or guest username) only populated while
@@ -78,13 +78,9 @@ function QueuePanelHostOrSolo() {
const queueIndex = usePlayerStore(s => s.queueIndex);
const currentTrack = usePlayerStore(s => s.currentTrack);
const userRatingOverrides = usePlayerStore(s => s.userRatingOverrides);
const currentCoverFetchUrl = useMemo(
() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '',
[currentTrack?.coverArt]
);
const currentCoverCacheKey = useMemo(
() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '',
[currentTrack?.coverArt]
const { src: currentCoverFetchUrl, cacheKey: currentCoverCacheKey } = usePlaybackCoverArt(
currentTrack?.coverArt,
128,
);
const currentCoverSrc = useCachedUrl(currentCoverFetchUrl, currentCoverCacheKey);
const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
@@ -265,7 +261,7 @@ function QueuePanelHostOrSolo() {
currentCoverSrc={currentCoverSrc}
userRatingOverrides={userRatingOverrides}
orbitAttributionLabel={orbitAttributionLabel}
navigate={navigate}
navigate={navigatePlaybackLibrary}
playbackSource={playbackSource}
normalizationEngine={normalizationEngine}
normalizationEngineLive={normalizationEngineLive}
@@ -22,10 +22,12 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
orbitRole, entityRatingSupport, audiomuseNavidromeEnabled,
applySongRating, applyAlbumRating, applyArtistRating,
handleAction, startRadio, startInstantMix, downloadAlbum, copyShareLink, isStarred,
pinToPlaybackServer, navigateLibrary,
} = props;
const { t } = useTranslation();
const auth = useAuthStore();
const navigate = useNavigate();
const goLibrary = pinToPlaybackServer ? navigateLibrary : (path: string) => { navigate(path); };
return (
<>
@@ -34,7 +36,7 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
const albumRatingDisabled = entityRatingSupport === 'track_only';
return (
<>
<div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${album.id}`))}>
<div className="context-menu-item" onClick={() => handleAction(() => goLibrary(`/album/${album.id}`))}>
<Play size={14} /> {t('contextMenu.openAlbum')}
</div>
<div className="context-menu-item" onClick={() => handleAction(async () => {
@@ -52,7 +54,7 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
<ListPlus size={14} /> {t('contextMenu.enqueueAlbum')}
</div>
<div className="context-menu-divider" />
<div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
<div className="context-menu-item" onClick={() => handleAction(() => goLibrary(`/artist/${album.artistId}`))}>
<User size={14} /> {t('contextMenu.goToArtist')}
</div>
<div className="context-menu-item" onClick={() => handleAction(() => {
@@ -1,6 +1,5 @@
import { useTranslation } from 'react-i18next';
import { Play, Radio, Heart, ChevronRight, User, Disc3, ListMusic, Info, Sparkles, Star, Trash2, Share2 } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { star, unstar } from '../../api/subsonicStarRating';
import { lastfmLoveTrack, lastfmUnloveTrack } from '../../api/lastfm';
import type { Track } from '../../store/playerStoreTypes';
@@ -21,10 +20,10 @@ export default function QueueItemContextItems(props: ContextMenuItemsProps) {
orbitRole, entityRatingSupport, audiomuseNavidromeEnabled,
applySongRating, applyAlbumRating, applyArtistRating,
handleAction, startRadio, startInstantMix, downloadAlbum, copyShareLink, isStarred,
navigateLibrary,
} = props;
const { t } = useTranslation();
const auth = useAuthStore();
const navigate = useNavigate();
return (
<>
@@ -54,12 +53,12 @@ export default function QueueItemContextItems(props: ContextMenuItemsProps) {
</div>
<div className="context-menu-divider" />
{song.albumId && (
<div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
<div className="context-menu-item" onClick={() => handleAction(() => navigateLibrary(`/album/${song.albumId}`))}>
<Disc3 size={14} /> {t('contextMenu.openAlbum')}
</div>
)}
{song.artistId && (
<div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${song.artistId}`))}>
<div className="context-menu-item" onClick={() => handleAction(() => navigateLibrary(`/artist/${song.artistId}`))}>
<User size={14} /> {t('contextMenu.goToArtist')}
</div>
)}
@@ -51,4 +51,7 @@ export interface ContextMenuItemsProps {
downloadAlbum: (albumName: string, albumId: string) => Promise<void>;
copyShareLink: (kind: EntityShareKind, id: string) => void;
isStarred: (id: string, itemStarred?: string) => boolean;
/** When true, album/artist links switch to the queue server before routing. */
pinToPlaybackServer: boolean;
navigateLibrary: (path: string) => void | Promise<void>;
}
+2 -2
View File
@@ -35,7 +35,7 @@ interface Props {
userRatingOverrides: Record<string, number>;
setUserRatingOverride: (id: string, r: number) => void;
toggleFullscreen: () => void;
navigate: (to: string) => void;
navigate: (to: string) => void | Promise<void>;
openContextMenu: PlayerState['openContextMenu'];
t: TFunction;
}
@@ -115,7 +115,7 @@ export function PlayerTrackInfo({
songCount: 0,
duration: 0,
};
openContextMenu(e.clientX, e.clientY, album, 'album');
openContextMenu(e.clientX, e.clientY, album, 'album', undefined, undefined, undefined, undefined, true);
}
: undefined}
/>
@@ -17,7 +17,7 @@ interface Props {
currentCoverSrc: string;
userRatingOverrides: Record<string, number>;
orbitAttributionLabel: (trackId: string) => string | null;
navigate: (to: string) => void;
navigate: (to: string) => void | Promise<void>;
playbackSource: PlaybackSourceKind | null;
normalizationEngine: NormalizationEngine;
normalizationEngineLive: 'off' | 'replaygain' | 'loudness';
+1
View File
@@ -112,6 +112,7 @@ const CONTRIBUTOR_ENTRIES = [
'Internet Radio: portal add/edit station modal to document.body — fixes clipped modal on empty library (report: voidboywannabe on Psysonic Discord) (PR #699)',
'Now Playing: composite list keys on similar artists, album-card tracklist, and top songs — avoids duplicate React keys when Subsonic repeats ids (PR #703)',
'Search: share links in live/mobile search + queue preview modal (PR #716)',
'Multi-server: pin queue streams, cover art, links, context menu, and Now Playing to queue server (PR #717)',
],
},
{
@@ -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;
}
+52 -31
View File
@@ -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}` : '';
+17
View File
@@ -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]);
}
+12
View File
@@ -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]);
}
+14 -9
View File
@@ -1,4 +1,5 @@
import { buildStreamUrl } from './api/subsonicStreamUrl';
import { buildStreamUrlForServer } from './api/subsonicStreamUrl';
import { getPlaybackServerId } from './utils/playback/playbackServer';
import type { Track } from './store/playerStoreTypes';
import { invoke } from '@tauri-apps/api/core';
import { useAuthStore } from './store/authStore';
@@ -73,7 +74,8 @@ async function runWorker() {
try {
while (pendingQueue.length > 0) {
const auth = useAuthStore.getState();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !auth.activeServerId) {
const playbackSid = getPlaybackServerId();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !playbackSid) {
hotCacheFrontendDebug({
event: 'prefetch-worker-stop',
reason: 'auth-disabled-or-logged-out',
@@ -153,7 +155,7 @@ async function runWorker() {
continue;
}
const url = buildStreamUrl(job.trackId);
const url = buildStreamUrlForServer(job.serverId, job.trackId);
try {
const customDir = auth.hotCacheDownloadDir || null;
hotCacheFrontendDebug({ event: 'prefetch-invoke', trackId: job.trackId });
@@ -173,7 +175,7 @@ async function runWorker() {
fresh.queue,
fresh.queueIndex,
maxAfter,
authAfter.activeServerId ?? '',
getPlaybackServerId(),
authAfter.hotCacheDownloadDir || null,
);
} catch (e: unknown) {
@@ -188,7 +190,8 @@ async function runWorker() {
function scheduleReplan() {
const auth = useAuthStore.getState();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !auth.activeServerId) {
const playbackSid = getPlaybackServerId();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !playbackSid) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = null;
@@ -206,9 +209,10 @@ function scheduleReplan() {
async function replanNow() {
const auth = useAuthStore.getState();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !auth.activeServerId) return;
const playbackSid = getPlaybackServerId();
if (!auth.isLoggedIn || !auth.hotCacheEnabled || !playbackSid) return;
const serverId = auth.activeServerId;
const serverId = playbackSid;
const maxBytes = Math.max(0, auth.hotCacheMaxMb) * 1024 * 1024;
const customDir = auth.hotCacheDownloadDir || null;
if (maxBytes <= 0) return;
@@ -286,8 +290,9 @@ export function initHotCachePrefetch(): () => void {
if (onlyIndexMoved && i > prevIdx && prevIdx >= 0 && Array.isArray(prevQ)) {
const left = (prevQ as Track[])[prevIdx];
const a = useAuthStore.getState();
if (left && a.activeServerId) {
bumpHotCachePreviousTrackGrace(left.id, a.activeServerId, a.hotCacheDebounceSec);
const graceSid = getPlaybackServerId();
if (left && graceSid) {
bumpHotCachePreviousTrackGrace(left.id, graceSid, a.hotCacheDebounceSec);
scheduleEvictAfterPreviousGrace();
}
}
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Warteschlangen-Link kopieren',
shareQueueEmpty: 'Die Warteschlange ist leer — nichts zu teilen.',
emptyQueue: 'Die Warteschlange ist leer.',
crossServerEnqueueBlocked: 'Titel von einem anderen Server können der aktuellen Warteschlange nicht hinzugefügt werden. Beende oder leere die Warteschlange zuerst.',
trackSingular: 'Titel',
trackPlural: 'Titel',
showRemaining: 'Restzeit anzeigen',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Copy queue share link',
shareQueueEmpty: 'The queue is empty — nothing to share.',
emptyQueue: 'The queue is empty.',
crossServerEnqueueBlocked: 'Tracks from another server cannot be added to the current queue. Finish or clear the queue first.',
trackSingular: 'track',
trackPlural: 'tracks',
showRemaining: 'Show remaining time',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Copiar enlace de la cola',
shareQueueEmpty: 'La cola está vacía — no hay nada que compartir.',
emptyQueue: 'La cola está vacía.',
crossServerEnqueueBlocked: 'No se pueden añadir pistas de otro servidor a la cola actual. Termina o vacía la cola primero.',
trackSingular: 'pista',
trackPlural: 'pistas',
showRemaining: 'Mostrar tiempo restante',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Copier le lien de la file dattente',
shareQueueEmpty: 'La file dattente est vide — rien à partager.',
emptyQueue: 'La file d\'attente est vide.',
crossServerEnqueueBlocked: 'Les titres d\'un autre serveur ne peuvent pas être ajoutés à la file en cours. Terminez ou videz la file d\'abord.',
trackSingular: 'piste',
trackPlural: 'pistes',
showRemaining: 'Afficher le temps restant',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Kopiér lenke til kø',
shareQueueEmpty: 'Køen er tom — ingenting å dele.',
emptyQueue: 'Køen er tom.',
crossServerEnqueueBlocked: 'Spor fra en annen server kan ikke legges til i den nåværende køen. Tøm eller avslutt køen først.',
trackSingular: 'spor',
trackPlural: 'spor',
showRemaining: 'Vis gjenværende tid',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Wachtrij-deellink kopiëren',
shareQueueEmpty: 'De wachtrij is leeg — niets om te delen.',
emptyQueue: 'De wachtrij is leeg.',
crossServerEnqueueBlocked: 'Tracks van een andere server kunnen niet aan de huidige wachtrij worden toegevoegd. Maak de wachtrij eerst leeg of stop afspelen.',
trackSingular: 'nummer',
trackPlural: 'nummers',
showRemaining: 'Resterende tijd tonen',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Copiază link-ul distribuirii cozii',
shareQueueEmpty: 'Coada este goală — nimic de distribuit.',
emptyQueue: 'Coada este goală.',
crossServerEnqueueBlocked: 'Piesele de pe alt server nu pot fi adăugate în coada curentă. Golește sau oprește coada mai întâi.',
trackSingular: 'piesă',
trackPlural: 'piese',
showRemaining: 'Arată timpul rămas',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: 'Копировать ссылку на очередь',
shareQueueEmpty: 'Очередь пуста — нечем поделиться.',
emptyQueue: 'Очередь пуста.',
crossServerEnqueueBlocked: 'Треки с другого сервера нельзя добавить в текущую очередь. Завершите или очистите очередь.',
trackSingular: 'трек',
trackPlural: 'треков',
showRemaining: 'Осталось',
+1
View File
@@ -28,6 +28,7 @@ export const queue = {
shareQueue: '复制队列分享链接',
shareQueueEmpty: '队列为空,无法分享。',
emptyQueue: '队列为空。',
crossServerEnqueueBlocked: '无法将其他服务器的曲目加入当前播放队列。请先清空或结束当前队列。',
trackSingular: '首曲目',
trackPlural: '首曲目',
showRemaining: '显示剩余时间',
+10 -7
View File
@@ -1,7 +1,9 @@
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { usePlaybackCoverArt } from '../hooks/usePlaybackCoverArt';
import type { SubsonicArtistInfo, SubsonicSong } from '../api/subsonicTypes';
import React, { useState, useRef, useEffect, useCallback, useMemo, memo } from 'react';
import { useNavigate } from 'react-router-dom';
import { usePlaybackLibraryNavigate } from '../hooks/usePlaybackLibraryNavigate';
import { useEnsurePlaybackServerOnMount } from '../hooks/useEnsurePlaybackServerOnMount';
import { useTranslation } from 'react-i18next';
import { Music, ExternalLink, Cast, Users, Radio, Clock, SkipForward, Info, Calendar, Disc3, Play, EyeOff, LayoutGrid, RotateCcw, Eye } from 'lucide-react';
import { open as shellOpen } from '@tauri-apps/plugin-shell';
@@ -43,8 +45,9 @@ import { useNowPlayingStarLove } from '../hooks/useNowPlayingStarLove';
export default function NowPlaying() {
const { t } = useTranslation();
const navigate = useNavigate();
const stableNavigate = useCallback((path: string) => navigate(path), [navigate]);
const stableNavigate = usePlaybackLibraryNavigate();
const subsonicReady = useEnsurePlaybackServerOnMount();
const activeServerId = useAuthStore(s => s.activeServerId ?? '');
const currentTrack = usePlayerStore(s => s.currentTrack);
const currentRadio = usePlayerStore(s => s.currentRadio);
@@ -78,6 +81,8 @@ export default function NowPlaying() {
songId, artistId, albumId, artistName,
enableBandsintown, audiomuseNavidromeEnabled,
lastfmUsername, currentTrack,
subsonicServerId: activeServerId,
fetchEnabled: subsonicReady,
});
// Star + Last.fm love + their toggle callbacks
@@ -91,10 +96,8 @@ export default function NowPlaying() {
showLyrics();
}, [isQueueVisible, toggleQueue, showLyrics]);
// Cover
const coverFetchUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);
const { src: coverFetchUrl, cacheKey: coverKey } = usePlaybackCoverArt(currentTrack?.coverArt, 800);
const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);
const radioCoverFetchUrl = currentRadio?.coverArt ? buildCoverArtUrl(`ra-${currentRadio.id}`, 800) : '';
const radioCoverKey = currentRadio?.coverArt ? coverArtCacheKey(`ra-${currentRadio.id}`, 800) : '';
+4 -3
View File
@@ -1,5 +1,6 @@
import { reportNowPlaying } from '../api/subsonicScrobble';
import { invoke } from '@tauri-apps/api/core';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { getPlaybackSourceKind } from '../utils/playback/resolvePlaybackUrl';
import { useAuthStore } from './authStore';
import {
@@ -129,9 +130,9 @@ export function applyQueueHistorySnapshot(
PlayerState,
'normalizationNowDb' | 'normalizationTargetLufs' | 'normalizationEngineLive'
>);
const authSnap = useAuthStore.getState();
const playbackSid = getPlaybackServerId();
const playbackSourceUndo = nextTrack
? getPlaybackSourceKind(nextTrack.id, authSnap.activeServerId ?? '', null)
? getPlaybackSourceKind(nextTrack.id, playbackSid, null)
: null;
const playbackSourceFinal = keepPlaybackFromPrior && prior.currentPlaybackSource != null
? prior.currentPlaybackSource
@@ -186,7 +187,7 @@ export function applyQueueHistorySnapshot(
if (!keepPlaybackFromPrior) {
const { nowPlayingEnabled: npUndo } = useAuthStore.getState();
if (npUndo) reportNowPlaying(nextTrack.id);
if (npUndo) reportNowPlaying(nextTrack.id, getPlaybackServerId());
queueUndoRestoreAudioEngine({
generation: gen,
+7 -6
View File
@@ -5,6 +5,7 @@ import { lastfmGetTrackLoved, lastfmScrobble, lastfmUpdateNowPlaying } from '../
import { setDeferHotCachePrefetch } from '../utils/cache/hotCacheGate';
import { getPerfProbeFlags } from '../utils/perf/perfFlags';
import { bumpPerfCounter } from '../utils/perf/perfTelemetry';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { resolvePlaybackUrl } from '../utils/playback/resolvePlaybackUrl';
import { resolveReplayGainDb } from '../utils/audio/resolveReplayGainDb';
import { showToast } from '../utils/ui/toast';
@@ -160,7 +161,7 @@ export function handleAudioProgress(current_time: number, duration: number): voi
// Scrobble at 50%: Last.fm + Navidrome (updates play_date / recently played)
if (progress >= 0.5 && !store.scrobbled) {
usePlayerStore.setState({ scrobbled: true });
scrobbleSong(track.id, Date.now());
scrobbleSong(track.id, Date.now(), getPlaybackServerId());
const { scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
if (scrobblingEnabled && lastfmSessionKey) {
lastfmScrobble(track, Date.now(), lastfmSessionKey);
@@ -236,7 +237,7 @@ export function handleAudioProgress(current_time: number, duration: number): voi
const shouldBytePreloadForGaplessBackup =
gaplessEnabled && remaining < gaplessBackupWindowSecs && remaining > 0;
const serverId = useAuthStore.getState().activeServerId ?? '';
const serverId = getPlaybackServerId();
const nextUrl = resolvePlaybackUrl(nextTrack.id, serverId);
// Byte pre-download — runs early so bytes are cached by chain time.
@@ -322,7 +323,7 @@ export function handleAudioEnded(): void {
void (async () => {
if (repeatMode === 'one' && currentTrack) {
const authState = useAuthStore.getState();
const repeatPromoteSid = authState.activeServerId;
const repeatPromoteSid = getPlaybackServerId();
if (authState.hotCacheEnabled && repeatPromoteSid) {
// Same-track repeat never hit `playTrack`'s prev→promote path; flush
// Rust `stream_completed_cache` to disk so `resolvePlaybackUrl` uses local.
@@ -373,7 +374,7 @@ export function handleAudioTrackSwitched(_duration: number): void {
if (!nextTrack) return;
const switchServerId = useAuthStore.getState().activeServerId ?? '';
const switchServerId = getPlaybackServerId();
const switchResolvedUrl = resolvePlaybackUrl(nextTrack.id, switchServerId);
const switchPlaybackSource = playbackSourceHintForResolvedUrl(nextTrack.id, switchServerId, switchResolvedUrl);
@@ -403,7 +404,7 @@ export function handleAudioTrackSwitched(_duration: number): void {
// Report Now Playing to Navidrome + Last.fm
const { nowPlayingEnabled, scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
if (nowPlayingEnabled) reportNowPlaying(nextTrack.id);
if (nowPlayingEnabled) reportNowPlaying(nextTrack.id, getPlaybackServerId());
if (lastfmSessionKey) {
if (scrobblingEnabled) lastfmUpdateNowPlaying(nextTrack, lastfmSessionKey);
lastfmGetTrackLoved(nextTrack.title, nextTrack.artist, lastfmSessionKey).then(loved => {
@@ -415,7 +416,7 @@ export function handleAudioTrackSwitched(_duration: number): void {
});
}
syncQueueToServer(queue, nextTrack, 0);
touchHotCacheOnPlayback(nextTrack.id, useAuthStore.getState().activeServerId ?? '');
touchHotCacheOnPlayback(nextTrack.id, getPlaybackServerId());
}
export function handleAudioError(message: string): void {
+2 -2
View File
@@ -1,5 +1,5 @@
import { invoke } from '@tauri-apps/api/core';
import { buildCoverArtUrl } from '../../api/subsonicStreamUrl';
import { playbackCoverArtForId } from '../../utils/playback/playbackServer';
import { usePlayerStore } from '../playerStore';
import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '../playbackProgress';
@@ -22,7 +22,7 @@ export function setupMprisSync(): () => void {
prevTrackId = currentTrack.id;
prevRadioId = null;
const coverUrl = currentTrack.coverArt
? buildCoverArtUrl(currentTrack.coverArt, 512)
? playbackCoverArtForId(currentTrack.coverArt, 512).src
: undefined;
invoke('mpris_set_metadata', {
title: currentTrack.title,
+5
View File
@@ -1,5 +1,7 @@
import type { AuthState } from './authStoreTypes';
import { generateId } from './authStoreHelpers';
import { usePlayerStore } from './playerStore';
import { clearQueueServerForPlayback } from '../utils/playback/playbackServer';
type SetState = (
partial: Partial<AuthState> | ((state: AuthState) => Partial<AuthState>),
@@ -38,6 +40,9 @@ export function createServerProfileActions(set: SetState): Pick<
},
removeServer: (id) => {
if (usePlayerStore.getState().queueServerId === id) {
clearQueueServerForPlayback();
}
set(s => {
const newServers = s.servers.filter(srv => srv.id !== id);
const switchedAway = s.activeServerId === id;
+15
View File
@@ -12,7 +12,9 @@
*/
import { beforeEach, describe, expect, it } from 'vitest';
import { useAuthStore } from './authStore';
import { usePlayerStore } from './playerStore';
import { resetAuthStore } from '@/test/helpers/storeReset';
import { resetPlayerStore } from '@/test/helpers/storeReset';
import { makeServer } from '@/test/helpers/factories';
function addThree(): { a: string; b: string; c: string } {
@@ -24,6 +26,7 @@ function addThree(): { a: string; b: string; c: string } {
beforeEach(() => {
resetAuthStore();
resetPlayerStore();
});
describe('addServer / updateServer', () => {
@@ -122,6 +125,18 @@ describe('removeServer', () => {
useAuthStore.getState().removeServer(a);
expect(useAuthStore.getState().activeServerId).toBe(b);
});
it('clears queueServerId when the removed server owned the playback queue', () => {
const { a, b } = addThree();
useAuthStore.getState().setActiveServer(b);
usePlayerStore.setState({
queue: [{ id: 't1', title: 'T', artist: 'A', album: 'Al', albumId: 'al1', duration: 100 }],
queueServerId: a,
queueIndex: 0,
});
useAuthStore.getState().removeServer(a);
expect(usePlayerStore.getState().queueServerId).toBeNull();
});
});
describe('selectors — getBaseUrl / getActiveServer', () => {
+16 -7
View File
@@ -4,6 +4,11 @@ import { lastfmGetTrackLoved, lastfmUpdateNowPlaying } from '../api/lastfm';
import { setDeferHotCachePrefetch } from '../utils/cache/hotCacheGate';
import { orbitBulkGuard } from '../utils/orbitBulkGuard';
import { sameQueueTrackId } from '../utils/playback/queueIdentity';
import {
bindQueueServerForPlayback,
getPlaybackServerId,
shouldBindQueueServerForPlay,
} from '../utils/playback/playbackServer';
import { resolvePlaybackUrl } from '../utils/playback/resolvePlaybackUrl';
import { resolveReplayGainDb } from '../utils/audio/resolveReplayGainDb';
import { useAuthStore } from './authStore';
@@ -173,6 +178,9 @@ export function runPlayTrack(
setSeekFallbackVisualTarget(null);
}
const newQueue = queue ?? state.queue;
if (shouldBindQueueServerForPlay(state.queue, newQueue, queue)) {
bindQueueServerForPlayback();
}
// Prefer an explicit target index from the caller (next/previous/queue-row
// click already know the exact slot). `findIndex` returns the *first*
// matching id, which jumps backwards when the queue contains the same
@@ -207,18 +215,19 @@ export function runPlayTrack(
prevTrack
&& sameQueueTrackId(prevTrack.id, track.id)
&& authState.hotCacheEnabled
&& authState.activeServerId,
&& getPlaybackServerId(),
);
const runPlayTrackBody = () => {
const authStateNow = useAuthStore.getState();
const url = resolvePlaybackUrl(track.id, authStateNow.activeServerId ?? '');
const playbackSid = getPlaybackServerId();
const url = resolvePlaybackUrl(track.id, playbackSid);
recordEnginePlayUrl(track.id, url);
const preloadedTrackId = get().enginePreloadedTrackId;
const keepPreloadHint = preloadedTrackId === track.id;
const playbackSourceHint = playbackSourceHintForResolvedUrl(
track.id,
authStateNow.activeServerId ?? '',
playbackSid,
url,
);
if (import.meta.env.DEV) {
@@ -255,7 +264,7 @@ export function runPlayTrack(
&& !sameQueueTrackId(prevTrack.id, track.id)
&& authStateNow.hotCacheEnabled
) {
const prevPromoteSid = authStateNow.activeServerId;
const prevPromoteSid = getPlaybackServerId();
if (prevPromoteSid) {
void promoteCompletedStreamToHotCache(
prevTrack,
@@ -326,7 +335,7 @@ export function runPlayTrack(
// Report Now Playing to Navidrome (for Live/getNowPlaying) + Last.fm
const { nowPlayingEnabled: npEnabled, scrobblingEnabled: lfmEnabled, lastfmSessionKey: lfmKey } = useAuthStore.getState();
if (npEnabled) reportNowPlaying(track.id);
if (npEnabled) reportNowPlaying(track.id, getPlaybackServerId());
if (lfmKey) {
if (lfmEnabled) lastfmUpdateNowPlaying(track, lfmKey);
lastfmGetTrackLoved(track.title, track.artist, lfmKey).then(loved => {
@@ -338,10 +347,10 @@ export function runPlayTrack(
});
}
syncQueueToServer(newQueue, track, initialTime);
touchHotCacheOnPlayback(track.id, authStateNow.activeServerId ?? '');
touchHotCacheOnPlayback(track.id, playbackSid);
};
const hotPromoteSid = authState.activeServerId;
const hotPromoteSid = getPlaybackServerId();
if (needSameTrackHotPromote && hotPromoteSid) {
void promoteCompletedStreamToHotCache(
track,
+11
View File
@@ -44,6 +44,16 @@ vi.mock('@/api/subsonicScrobble', () => ({
reportNowPlaying: vi.fn(async () => undefined),
scrobbleSong: vi.fn(async () => undefined),
}));
vi.mock('@/utils/playback/playbackServer', () => ({
getPlaybackServerId: () => 'srv-test',
bindQueueServerForPlayback: vi.fn(),
clearQueueServerForPlayback: vi.fn(),
playbackServerDiffersFromActive: () => false,
playbackCoverArtForId: (id: string, size: number) => ({
src: `https://mock/cover/${id}?size=${size}`,
cacheKey: `mock:cover:${id}:${size}`,
}),
}));
vi.mock('@/api/subsonicStarRating', () => ({
setRating: vi.fn(async () => undefined),
probeEntityRatingSupport: vi.fn(async () => 'track_only'),
@@ -116,6 +126,7 @@ describe('flushPlayQueuePosition', () => {
[t1.id, t2.id, t3.id],
t2.id,
12345, // Math.floor(12.345 * 1000)
'srv-test',
);
});
+2
View File
@@ -36,6 +36,7 @@ export const usePlayerStore = create<PlayerState>()(
currentPlaybackSource: null,
enginePreloadedTrackId: null,
queue: [],
queueServerId: null,
queueIndex: 0,
isPlaying: false,
progress: 0,
@@ -81,6 +82,7 @@ export const usePlayerStore = create<PlayerState>()(
repeatMode: state.repeatMode,
currentTrack: state.currentTrack,
queue: state.queue,
queueServerId: state.queueServerId,
queueIndex: state.queueIndex,
isQueueVisible: state.isQueueVisible,
// currentTime is intentionally NOT persisted here.
+15 -1
View File
@@ -55,6 +55,8 @@ export interface PlayerState {
*/
enginePreloadedTrackId: string | null;
queue: Track[];
/** Saved server for stream/hot-cache/offline resolution while this queue plays. */
queueServerId: string | null;
queueIndex: number;
isPlaying: boolean;
progress: number; // 01
@@ -171,8 +173,20 @@ export interface PlayerState {
* list/grid to copy a `composer` link from the otherwise artist-typed
* context menu, so paste lands on /composer/:id instead of /artist/:id. */
shareKindOverride?: 'track' | 'album' | 'artist' | 'composer';
/** Menu actions target {@link queueServerId} (set for queue-item and player-sourced album menus). */
pinToPlaybackServer?: boolean;
};
openContextMenu: (x: number, y: number, item: any, type: 'song' | 'favorite-song' | 'album' | 'artist' | 'queue-item' | 'album-song' | 'playlist' | 'multi-album' | 'multi-artist' | 'multi-playlist', queueIndex?: number, playlistId?: string, playlistSongIndex?: number, shareKindOverride?: 'track' | 'album' | 'artist' | 'composer') => void;
openContextMenu: (
x: number,
y: number,
item: any,
type: 'song' | 'favorite-song' | 'album' | 'artist' | 'queue-item' | 'album-song' | 'playlist' | 'multi-album' | 'multi-artist' | 'multi-playlist',
queueIndex?: number,
playlistId?: string,
playlistSongIndex?: number,
shareKindOverride?: 'track' | 'album' | 'artist' | 'composer',
pinToPlaybackServer?: boolean,
) => void;
closeContextMenu: () => void;
songInfoModal: { isOpen: boolean; songId: string | null };
+4 -1
View File
@@ -13,7 +13,10 @@ const { invokeMock, setEntryMock, buildStreamUrlMock } = vi.hoisted(() => ({
}));
vi.mock('@tauri-apps/api/core', () => ({ invoke: invokeMock }));
vi.mock('../api/subsonicStreamUrl', () => ({ buildStreamUrl: buildStreamUrlMock }));
vi.mock('../api/subsonicStreamUrl', () => ({
buildStreamUrl: buildStreamUrlMock,
buildStreamUrlForServer: (_serverId: string, id: string) => buildStreamUrlMock(id),
}));
vi.mock('./hotCacheStore', () => ({
useHotCacheStore: { getState: () => ({ setEntry: setEntryMock }) },
}));
+2 -2
View File
@@ -1,4 +1,4 @@
import { buildStreamUrl } from '../api/subsonicStreamUrl';
import { buildStreamUrlForServer } from '../api/subsonicStreamUrl';
import type { Track } from './playerStoreTypes';
import { invoke } from '@tauri-apps/api/core';
import { useHotCacheStore } from './hotCacheStore';
@@ -25,7 +25,7 @@ export async function promoteCompletedStreamToHotCache(
{
trackId: track.id,
serverId,
url: buildStreamUrl(track.id),
url: buildStreamUrlForServer(serverId, track.id),
suffix: track.suffix || 'mp3',
customDir,
},
+13
View File
@@ -17,12 +17,21 @@ import {
import { clearSeekDebounce } from './seekDebounce';
import { clearSeekFallbackRetry } from './seekFallbackState';
import { clearSeekTarget } from './seekTargetState';
import i18n from '../i18n';
import { playbackServerDiffersFromActive, clearQueueServerForPlayback } from '../utils/playback/playbackServer';
import { showToast } from '../utils/ui/toast';
type SetState = (
partial: Partial<PlayerState> | ((state: PlayerState) => Partial<PlayerState>),
) => void;
type GetState = () => PlayerState;
function blockCrossServerEnqueue(): boolean {
if (!playbackServerDiffersFromActive()) return false;
showToast(i18n.t('queue.crossServerEnqueueBlocked'), 4500, 'error');
return true;
}
/**
* Eleven queue-mutation actions. Shared invariant: every action except
* `setRadioArtistId` pushes a queue-undo snapshot and calls
@@ -44,6 +53,7 @@ export function createQueueMutationActions(set: SetState, get: GetState): Pick<
> {
return {
enqueue: (tracks, _orbitConfirmed = false) => {
if (blockCrossServerEnqueue()) return;
if (!_orbitConfirmed && tracks.length > 1) {
void orbitBulkGuard(tracks.length).then(ok => {
if (ok) get().enqueue(tracks, true);
@@ -129,6 +139,7 @@ export function createQueueMutationActions(set: SetState, get: GetState): Pick<
},
enqueueAt: (tracks, insertIndex, _orbitConfirmed = false) => {
if (blockCrossServerEnqueue()) return;
if (!_orbitConfirmed && tracks.length > 1) {
void orbitBulkGuard(tracks.length).then(ok => {
if (ok) get().enqueueAt(tracks, insertIndex, true);
@@ -154,6 +165,7 @@ export function createQueueMutationActions(set: SetState, get: GetState): Pick<
playNext: (tracks) => {
if (tracks.length === 0) return;
if (blockCrossServerEnqueue()) return;
const state = get();
const tagged = tracks.map(t => ({ ...t, playNextAdded: true as const }));
if (!state.currentTrack) {
@@ -197,6 +209,7 @@ export function createQueueMutationActions(set: SetState, get: GetState): Pick<
clearSeekDebounce(); clearSeekTarget();
clearRadioSessionSeenIds();
setCurrentRadioArtistId(null);
clearQueueServerForPlayback();
set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
syncQueueToServer([], null, 0);
},
+8 -5
View File
@@ -8,7 +8,7 @@
import type { Track } from './playerStoreTypes';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
const { savePlayQueueMock, playerState, progressSnapshot } = vi.hoisted(() => ({
savePlayQueueMock: vi.fn(async (_ids: string[], _currentId: string | undefined, _pos: number) => undefined),
savePlayQueueMock: vi.fn(async (_ids: string[], _currentId: string | undefined, _pos: number, _serverId: string) => undefined),
playerState: {
queue: [] as Track[],
currentTrack: null as Track | null,
@@ -18,6 +18,9 @@ const { savePlayQueueMock, playerState, progressSnapshot } = vi.hoisted(() => ({
}));
vi.mock('../api/subsonicPlayQueue', () => ({ savePlayQueue: savePlayQueueMock }));
vi.mock('../utils/playback/playbackServer', () => ({
getPlaybackServerId: () => 'srv-a',
}));
vi.mock('./playerStore', () => ({
usePlayerStore: { getState: () => playerState },
}));
@@ -65,7 +68,7 @@ describe('syncQueueToServer (debounced)', () => {
it('fires once after 5 s with id list + current id + position in ms', () => {
syncQueueToServer(queue, queue[0], 30);
vi.advanceTimersByTime(5000);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b'], 'a', 30000);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b'], 'a', 30000, 'srv-a');
});
it('cancels the previous timer when called again before fire', () => {
@@ -74,7 +77,7 @@ describe('syncQueueToServer (debounced)', () => {
syncQueueToServer([...queue, track('c')], queue[0], 20);
vi.advanceTimersByTime(5000);
expect(savePlayQueueMock).toHaveBeenCalledTimes(1);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b', 'c'], 'a', 20000);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b', 'c'], 'a', 20000, 'srv-a');
});
it('caps the queue at 1000 ids', () => {
@@ -91,7 +94,7 @@ describe('syncQueueToServer (debounced)', () => {
describe('flushQueueSyncToServer (immediate)', () => {
it('fires synchronously with no debounce', async () => {
await flushQueueSyncToServer([track('a')], track('a'), 12);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a'], 'a', 12000);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a'], 'a', 12000, 'srv-a');
});
it('cancels a pending debounced sync first', async () => {
@@ -126,7 +129,7 @@ describe('flushPlayQueuePosition', () => {
playerState.currentTrack = playerState.queue[0];
progressSnapshot.currentTime = 42;
await flushPlayQueuePosition();
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b'], 'a', 42000);
expect(savePlayQueueMock).toHaveBeenCalledWith(['a', 'b'], 'a', 42000, 'srv-a');
});
it('is a no-op when a radio session is active', async () => {
+5 -2
View File
@@ -1,5 +1,6 @@
import { savePlayQueue } from '../api/subsonicPlayQueue';
import type { Track } from './playerStoreTypes';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { getPlaybackProgressSnapshot } from './playbackProgress';
import { usePlayerStore } from './playerStore';
/**
@@ -31,7 +32,8 @@ export function syncQueueToServer(queue: Track[], currentTrack: Track | null, cu
syncTimeout = null;
const ids = queue.slice(0, QUEUE_ID_LIMIT).map(t => t.id);
const pos = Math.floor(currentTime * 1000);
savePlayQueue(ids, currentTrack?.id, pos).catch(err => {
const serverId = getPlaybackServerId();
savePlayQueue(ids, currentTrack?.id, pos, serverId).catch(err => {
console.error('Failed to sync play queue to server', err);
});
}, SYNC_DEBOUNCE_MS);
@@ -46,7 +48,8 @@ export function flushQueueSyncToServer(queue: Track[], currentTrack: Track | nul
lastQueueHeartbeatAt = Date.now();
const ids = queue.slice(0, QUEUE_ID_LIMIT).map(t => t.id);
const pos = Math.floor(currentTime * 1000);
return savePlayQueue(ids, currentTrack.id, pos).catch(err => {
const serverId = getPlaybackServerId();
return savePlayQueue(ids, currentTrack.id, pos, serverId).catch(err => {
console.error('Failed to flush play queue to server', err);
});
}
+5 -3
View File
@@ -1,6 +1,7 @@
import type { Track } from './playerStoreTypes';
import { invoke } from '@tauri-apps/api/core';
import { setDeferHotCachePrefetch } from '../utils/cache/hotCacheGate';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { resolvePlaybackUrl } from '../utils/playback/resolvePlaybackUrl';
import { resolveReplayGainDb } from '../utils/audio/resolveReplayGainDb';
import { useAuthStore } from './authStore';
@@ -38,10 +39,11 @@ export function queueUndoRestoreAudioEngine(opts: {
isReplayGainActive(), authState.replayGainMode,
);
const replayGainPeak = isReplayGainActive() ? (track.replayGainPeak ?? null) : null;
const url = resolvePlaybackUrl(track.id, authState.activeServerId ?? '');
const playbackSid = getPlaybackServerId();
const url = resolvePlaybackUrl(track.id, playbackSid);
recordEnginePlayUrl(track.id, url);
usePlayerStore.setState({
currentPlaybackSource: playbackSourceHintForResolvedUrl(track.id, authState.activeServerId ?? '', url),
currentPlaybackSource: playbackSourceHintForResolvedUrl(track.id, playbackSid, url),
});
const keepPreloadHint = usePlayerStore.getState().enginePreloadedTrackId === track.id;
setDeferHotCachePrefetch(true);
@@ -91,5 +93,5 @@ export function queueUndoRestoreAudioEngine(opts: {
.finally(() => {
setDeferHotCachePrefetch(false);
});
touchHotCacheOnPlayback(track.id, authState.activeServerId ?? '');
touchHotCacheOnPlayback(track.id, getPlaybackServerId());
}
+5 -4
View File
@@ -2,6 +2,7 @@ import { getSong } from '../api/subsonicLibrary';
import { invoke } from '@tauri-apps/api/core';
import { estimateLivePosition } from '../api/orbit';
import { setDeferHotCachePrefetch } from '../utils/cache/hotCacheGate';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { resolvePlaybackUrl } from '../utils/playback/resolvePlaybackUrl';
import { resolveReplayGainDb } from '../utils/audio/resolveReplayGainDb';
import { songToTrack } from '../utils/playback/songToTrack';
@@ -117,7 +118,7 @@ export function runResume(set: SetState, get: GetState): void {
invoke('audio_resume').catch(console.error);
setIsAudioPaused(false);
set({ isPlaying: true });
touchHotCacheOnPlayback(currentTrack.id, useAuthStore.getState().activeServerId ?? '');
touchHotCacheOnPlayback(currentTrack.id, getPlaybackServerId());
} else {
// Engine has no loaded paused stream (app relaunch, or track ended and user
// hits play — `isAudioPaused` is false after `audio:ended`). Flush any
@@ -128,7 +129,7 @@ export function runResume(set: SetState, get: GetState): void {
void (async () => {
const authHot = useAuthStore.getState();
const resumePromoteSid = authHot.activeServerId;
const resumePromoteSid = getPlaybackServerId();
if (authHot.hotCacheEnabled && resumePromoteSid) {
await promoteCompletedStreamToHotCache(
currentTrack,
@@ -150,7 +151,7 @@ export function runResume(set: SetState, get: GetState): void {
isReplayGainActive(), authStateCold.replayGainMode,
);
const replayGainPeakCold = isReplayGainActive() ? (trackToPlay.replayGainPeak ?? null) : null;
const coldServerId = useAuthStore.getState().activeServerId ?? '';
const coldServerId = getPlaybackServerId();
setDeferHotCachePrefetch(true);
const coldUrl = resolvePlaybackUrl(trackToPlay.id, coldServerId);
set({ currentPlaybackSource: playbackSourceHintForResolvedUrl(trackToPlay.id, coldServerId, coldUrl) });
@@ -189,7 +190,7 @@ export function runResume(set: SetState, get: GetState): void {
isReplayGainActive(), authStateCold.replayGainMode,
);
const replayGainPeakCold = isReplayGainActive() ? (currentTrack.replayGainPeak ?? null) : null;
const coldServerId = useAuthStore.getState().activeServerId ?? '';
const coldServerId = getPlaybackServerId();
setDeferHotCachePrefetch(true);
const coldUrl = resolvePlaybackUrl(currentTrack.id, coldServerId);
set({ currentPlaybackSource: playbackSourceHintForResolvedUrl(currentTrack.id, coldServerId, coldUrl) });
+2 -2
View File
@@ -1,5 +1,6 @@
import { invoke } from '@tauri-apps/api/core';
import { isRecoverableSeekError } from '../utils/audio/seekErrors';
import { getPlaybackServerId } from '../utils/playback/playbackServer';
import { useAuthStore } from './authStore';
import { shouldRebindPlaybackToHotCache } from './playbackUrlRouting';
import type { PlayerState } from './playerStoreTypes';
@@ -47,8 +48,7 @@ export function runSeek(set: SetState, get: GetState, progress: number): void {
armSeekDebounce(100, () => {
const s0 = get();
if (!s0.currentTrack) return;
const authSeek = useAuthStore.getState();
const sidSeek = authSeek.activeServerId ?? '';
const sidSeek = getPlaybackServerId();
if (shouldRebindPlaybackToHotCache(s0.currentTrack.id, sidSeek)) {
setSeekFallbackVisualTarget({
trackId: s0.currentTrack.id,
+29 -4
View File
@@ -2,6 +2,10 @@ import {
persistQueueVisibility,
} from './queueVisibilityStorage';
import type { PlayerState } from './playerStoreTypes';
import {
ensurePlaybackServerActive,
playbackServerDiffersFromActive,
} from '../utils/playback/playbackServer';
type SetState = (
partial: Partial<PlayerState> | ((state: PlayerState) => Partial<PlayerState>),
@@ -41,10 +45,31 @@ export function createUiStateActions(set: SetState): Pick<
};
}),
openContextMenu: (x, y, item, type, queueIndex, playlistId, playlistSongIndex, shareKindOverride) =>
set({
contextMenu: { isOpen: true, x, y, item, type, queueIndex, playlistId, playlistSongIndex, shareKindOverride },
}),
openContextMenu: (x, y, item, type, queueIndex, playlistId, playlistSongIndex, shareKindOverride, pinToPlaybackServer) => {
const pin = pinToPlaybackServer ?? type === 'queue-item';
const open = () =>
set({
contextMenu: {
isOpen: true,
x,
y,
item,
type,
queueIndex,
playlistId,
playlistSongIndex,
shareKindOverride,
pinToPlaybackServer: pin,
},
});
if (pin && playbackServerDiffersFromActive()) {
void ensurePlaybackServerActive().then(ok => {
if (ok) open();
});
return;
}
open();
},
closeContextMenu: () =>
set(state => ({
@@ -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,
};
+4
View File
@@ -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();
}
+86
View File
@@ -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);
});
});
+75
View File
@@ -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));
}
+7 -5
View File
@@ -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);
}