diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx index 31189ea4..98a8516b 100644 --- a/src/renderer/features/now-playing/components/play-queue.tsx +++ b/src/renderer/features/now-playing/components/play-queue.tsx @@ -60,6 +60,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref) => { const { play } = usePlayerControls(); const volume = useVolume(); const isFocused = useAppFocus(); + const isFocusedRef = useRef(isFocused); useEffect(() => { if (tableRef.current) { @@ -211,7 +212,29 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref) => { } } } - }, [currentSong, previousSong, tableConfig.followCurrentSong, status, isFocused]); + }, [currentSong, previousSong, tableConfig.followCurrentSong, status]); + + // As a separate rule, update the current row when focus changes. This is + // to prevent queue scrolling when the application loses and then gains focus. + // The body should only fire when focus changes, even though it depends on current song + useEffect(() => { + if (isFocused !== isFocusedRef.current && tableRef?.current) { + const { api, columnApi } = tableRef.current; + if (api == null || columnApi == null) { + return; + } + + const currentNode = currentSong?.uniqueId + ? api.getRowNode(currentSong.uniqueId) + : undefined; + + if (currentNode) { + api.redrawRows({ rowNodes: [currentNode] }); + } + + isFocusedRef.current = isFocused; + } + }, [currentSong, isFocused]); const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, QUEUE_CONTEXT_MENU_ITEMS);