auto follow current song in queue

src/renderer/features/now-playing/components/play-queue.tsx

@@ -1,9 +1,10 @@
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useMergedRef } from '@mantine/hooks';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 
 import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
+import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import {
     useIsPlayerFetching,
     usePlayerContext,
@@ -28,6 +29,8 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
 
     const queue = usePlayerQueue();
     const isFetching = useIsPlayerFetching();
+    const tableRef = useRef<ItemListHandle>(null);
+    const mergedRef = useMergedRef(ref, tableRef);
 
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 200);
 
@@ -41,6 +44,26 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
 
     const isEmpty = data.length === 0;
 
+    usePlayerEvents(
+        {
+            onCurrentSongChange: (properties) => {
+                const currentSong = properties.song;
+                if (!currentSong || !tableRef.current) {
+                    return;
+                }
+
+                const songIndex = data.findIndex(
+                    (song) => song._uniqueId === currentSong._uniqueId,
+                );
+
+                if (songIndex !== -1) {
+                    tableRef.current.scrollToIndex(songIndex);
+                }
+            },
+        },
+        [data],
+    );
+
     return (
         <Box className="play-queue" pos="relative" style={{ flex: 1, minHeight: 0 }} w="100%">
             <LoadingOverlay pos="absolute" visible={isFetching} />
@@ -63,7 +86,7 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
                     type: 'offset',
                 }}
                 itemType={LibraryItem.QUEUE_SONG}
-                ref={ref}
+                ref={mergedRef}
                 size={table.size}
             />
             {isEmpty && <EmptyQueueDropZone />}