diff --git a/src/components/QueuePanel.tsx b/src/components/QueuePanel.tsx index 97140f32..b0249dd3 100644 --- a/src/components/QueuePanel.tsx +++ b/src/components/QueuePanel.tsx @@ -297,6 +297,12 @@ function QueuePanelHostOrSolo() { const enqueueAt = usePlayerStore(s => s.enqueueAt); const contextMenu = usePlayerStore(s => s.contextMenu); + // When the user picks a track *from* the queue list, suppress the + // upcoming auto-scroll so their click target stays in view instead of + // the list rebasing onto the next track. Auto-advance (natural playback) + // never sets this flag, so it keeps its original "show what's next" behavior. + const suppressNextAutoScrollRef = useRef(false); + const playbackSource = usePlayerStore(s => s.currentPlaybackSource); const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled); @@ -407,6 +413,10 @@ function QueuePanelHostOrSolo() { }, [enqueueAt]); useEffect(function queueAutoScroll() { + if (suppressNextAutoScrollRef.current) { + suppressNextAutoScrollRef.current = false; + return; + } if (!queueListRef.current || queueIndex < 0) return; if (activeTab !== 'queue') return; const songs = queueListRef.current!.querySelectorAll('[data-queue-idx]'); @@ -741,7 +751,10 @@ function QueuePanelHostOrSolo() {
playTrack(track, queue)} + onClick={() => { + suppressNextAutoScrollRef.current = true; + playTrack(track, queue); + }} onContextMenu={(e) => { e.preventDefault(); usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);