maintain playlist order on header play (#1318)

src/renderer/context/list-context.tsx

@@ -6,8 +6,10 @@ interface ListContextProps {
     customFilters?: Record<string, unknown>;
     id?: string;
     itemCount?: number;
+    listData?: unknown[];
     pageKey: ItemListKey | string;
     setItemCount?: (itemCount: number) => void;
+    setListData?: (items: unknown[]) => void;
 }
 
 export const ListContext = createContext<ListContextProps>({

src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

@@ -12,7 +12,7 @@ import { ListSearchInput } from '/@/renderer/features/shared/components/list-sea
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
 import { Stack } from '/@/shared/components/stack/stack';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import { LibraryItem, Song } from '/@/shared/types/domain-types';
 
 interface PlaylistDetailSongListHeaderProps {
     isSmartPlaylist?: boolean;
@@ -26,7 +26,7 @@ export const PlaylistDetailSongListHeader = ({
 }: PlaylistDetailSongListHeaderProps) => {
     const { t } = useTranslation();
     const { playlistId } = useParams() as { playlistId: string };
-    const { itemCount } = useListContext();
+    const { itemCount, listData } = useListContext();
     const server = useCurrentServer();
     const location = useLocation();
 
@@ -43,8 +43,8 @@ export const PlaylistDetailSongListHeader = ({
             <PageHeader>
                 <LibraryHeaderBar ignoreMaxWidth>
                     <LibraryHeaderBar.PlayButton
-                        ids={[playlistId]}
                         itemType={LibraryItem.PLAYLIST}
+                        songs={listData as Song[]}
                     />
                     <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
                     {isSmartPlaylist && (

src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
 import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
@@ -6,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
 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 { ItemControls, ItemListTableComponentProps } from '/@/renderer/components/item-list/types';
+import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { usePlaylistSongListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-song-list-filters';
 import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
@@ -55,21 +57,24 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
 
         const { searchTerm } = useSearchTermFilter();
         const { query } = usePlaylistSongListFilters();
+        const { setListData } = useListContext();
 
-        const filterSortedSongs = useMemo(() => {
+        const songData = useMemo(() => {
             let items = data?.items || [];
 
             if (searchTerm) {
-                if (searchTerm) {
-                    items = searchLibraryItems(items, searchTerm, LibraryItem.SONG);
-                }
-
-                return sortSongList(items, query.sortBy, query.sortOrder);
+                items = searchLibraryItems(items, searchTerm, LibraryItem.SONG);
             }
 
             return sortSongList(items, query.sortBy, query.sortOrder);
         }, [data?.items, searchTerm, query.sortBy, query.sortOrder]);
 
+        useEffect(() => {
+            if (setListData) {
+                setListData(songData);
+            }
+        }, [songData, setListData]);
+
         const player = usePlayer();
 
         const currentSong = usePlayerSong();
@@ -97,7 +102,7 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
                 autoFitColumns={autoFitColumns}
                 CellComponent={ItemTableListColumn}
                 columns={columns}
-                data={filterSortedSongs}
+                data={songData}
                 enableAlternateRowColors={enableAlternateRowColors}
                 enableExpansion={false}
                 enableHorizontalBorders={enableHorizontalBorders}

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -405,16 +405,19 @@ const PlaylistDetailSongListRoute = () => {
     };
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+    const [listData, setListData] = useState<unknown[]>([]);
 
     const providerValue = useMemo(() => {
         return {
             customFilters: undefined,
             id: playlistId,
             itemCount,
+            listData,
             pageKey: ItemListKey.PLAYLIST_SONG,
             setItemCount,
+            setListData,
         };
-    }, [playlistId, itemCount]);
+    }, [playlistId, itemCount, listData]);
 
     return (
         <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>