client-side only sort for all playlists (#1125)

* initial client-side only sort for all playlists

* allow reordering jellyfin (assume it works properly) and navidrome

* on playlist page, add to queue by sort order

src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx

@@ -145,12 +145,7 @@ export const AddToPlaylistContextModal = ({
             const uniqueSongIds: string[] = [];
 
             if (values.skipDuplicates) {
-                const query = {
-                    id: playlistId,
-                    startIndex: 0,
-                };
-
-                const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, query);
+                const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId);
 
                 const playlistSongsRes = await queryClient.fetchQuery(queryKey, ({ signal }) => {
                     if (!server)
@@ -164,9 +159,6 @@ export const AddToPlaylistContextModal = ({
                         },
                         query: {
                             id: playlistId,
-                            sortBy: SongListSort.ID,
-                            sortOrder: SortOrder.ASC,
-                            startIndex: 0,
                         },
                     });
                 });

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

@@ -2,7 +2,6 @@ import type {
     BodyScrollEvent,
     ColDef,
     GridReadyEvent,
-    IDatasource,
     PaginationChangedEvent,
     RowDoubleClickedEvent,
     RowDragEvent,
@@ -27,7 +26,6 @@ import {
 } from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
-import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
 import { useAppFocus } from '/@/renderer/hooks';
 import {
     useCurrentServer,
@@ -42,13 +40,15 @@ import { PersistedTableColumn, usePlayButtonBehavior } from '/@/renderer/store/s
 import { toast } from '/@/shared/components/toast/toast';
 import {
     LibraryItem,
-    PlaylistSongListQuery,
+    PlaylistSongListQueryClientSide,
     QueueSong,
+    ServerType,
     Song,
+    SongListResponse,
     SongListSort,
     SortOrder,
 } from '/@/shared/types/domain-types';
-import { ListDisplayType, ServerType } from '/@/shared/types/types';
+import { ListDisplayType } from '/@/shared/types/types';
 
 interface PlaylistDetailContentProps {
     songs?: Song[];
@@ -63,7 +63,7 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
     const currentSong = useCurrentSong();
     const server = useCurrentServer();
     const page = usePlaylistDetailStore();
-    const filters: Partial<PlaylistSongListQuery> = useMemo(() => {
+    const filters: PlaylistSongListQueryClientSide = useMemo(() => {
         return {
             sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
             sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
@@ -88,20 +88,6 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
 
     const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
 
-    const iSClientSide = server?.type === ServerType.SUBSONIC;
-
-    const checkPlaylistList = usePlaylistSongList({
-        options: {
-            enabled: !iSClientSide,
-        },
-        query: {
-            id: playlistId,
-            limit: 1,
-            startIndex: 0,
-        },
-        serverId: server?.id,
-    });
-
     const columnDefs: ColDef[] = useMemo(
         () => getColumnDefs(page.table.columns, false, 'generic'),
         [page.table.columns],
@@ -109,51 +95,9 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
 
     const onGridReady = useCallback(
         (params: GridReadyEvent) => {
-            if (!iSClientSide) {
-                const dataSource: IDatasource = {
-                    getRows: async (params) => {
-                        const limit = params.endRow - params.startRow;
-                        const startIndex = params.startRow;
-
-                        const query: PlaylistSongListQuery = {
-                            id: playlistId,
-                            limit,
-                            startIndex,
-                            ...filters,
-                        };
-
-                        const queryKey = queryKeys.playlists.songList(
-                            server?.id || '',
-                            playlistId,
-                            query,
-                        );
-
-                        if (!server) return;
-
-                        const songsRes = await queryClient.fetchQuery(
-                            queryKey,
-                            async ({ signal }) =>
-                                api.controller.getPlaylistSongList({
-                                    apiClientProps: {
-                                        server,
-                                        signal,
-                                    },
-                                    query,
-                                }),
-                        );
-
-                        params.successCallback(
-                            songsRes?.items || [],
-                            songsRes?.totalRecordCount || 0,
-                        );
-                    },
-                    rowCount: undefined,
-                };
-                params.api.setDatasource(dataSource);
-            }
             params.api?.ensureIndexVisible(pagination.scrollOffset, 'top');
         },
-        [filters, iSClientSide, pagination.scrollOffset, playlistId, queryClient, server],
+        [pagination.scrollOffset],
     );
 
     const handleDragEnd = useCallback(
@@ -175,12 +119,32 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                         },
                     });
 
-                    setTimeout(() => {
-                        queryClient.invalidateQueries({
-                            queryKey: queryKeys.playlists.songList(server?.id || '', playlistId),
-                        });
-                        e.api.refreshInfiniteCache();
-                    }, 200);
+                    queryClient.setQueryData<SongListResponse>(
+                        queryKeys.playlists.songList(server?.id || '', playlistId),
+                        (previous) => {
+                            if (previous?.items) {
+                                const from = e.node.rowIndex!;
+                                const to = e.overIndex;
+
+                                const item = previous.items[from];
+                                const remaining = previous.items.toSpliced(from, 1);
+                                remaining.splice(to, 0, item);
+
+                                return {
+                                    error: previous.error,
+                                    items: remaining,
+                                    startIndex: previous.startIndex,
+                                    totalRecordCount: previous.totalRecordCount,
+                                };
+                            }
+
+                            return previous;
+                        },
+                    );
+
+                    // Nodes have to be redrawn, otherwise the row indexes will be wrong
+                    // Maybe it's possible to only redraw necessary rows to not be as expensive?
+                    tableRef.current?.api.redrawRows();
                 } catch (error) {
                     toast.error({
                         message: (error as Error).message,
@@ -189,7 +153,7 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                 }
             }
         },
-        [playlistId, queryClient, server],
+        [playlistId, queryClient, server, tableRef],
     );
 
     const handleGridSizeChange = () => {
@@ -286,7 +250,9 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
     const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
 
     const canDrag =
-        filters.sortBy === SongListSort.ID && !detailQuery?.data?.rules && !iSClientSide;
+        filters.sortBy === SongListSort.ID &&
+        !detailQuery?.data?.rules &&
+        server?.type !== ServerType.SUBSONIC;
 
     return (
         <>
@@ -303,9 +269,6 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                         status,
                     }}
                     getRowId={(data) => data.data.uniqueId}
-                    infiniteInitialRowCount={
-                        iSClientSide ? undefined : checkPlaylistList.data?.totalRecordCount || 100
-                    }
                     // https://github.com/ag-grid/ag-grid/issues/5284
                     // Key is used to force remount of table when display, rowHeight, or server changes
                     key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
@@ -326,7 +289,7 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                     rowData={songs}
                     rowDragEntireRow={canDrag}
                     rowHeight={page.table.rowHeight || 40}
-                    rowModelType={iSClientSide ? 'clientSide' : 'infinite'}
+                    rowModelType="clientSide"
                     shouldUpdateSong
                 />
             </VirtualGridAutoSizerContainer>

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

@@ -1,6 +1,5 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { IDatasource } from '@ag-grid-community/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
@@ -9,7 +8,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router';
 
 import i18n from '/@/i18n/i18n';
-import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
@@ -23,7 +21,6 @@ import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
     PersistedTableColumn,
-    SongListFilter,
     useCurrentServer,
     usePlaylistDetailStore,
     useSetPlaylistDetailFilters,
@@ -42,7 +39,7 @@ import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
 import {
     LibraryItem,
-    PlaylistSongListQuery,
+    PlaylistSongListQueryClientSide,
     ServerType,
     SongListSort,
     SortOrder,
@@ -155,7 +152,7 @@ const FILTERS = {
         },
         {
             defaultOrder: SortOrder.ASC,
-            name: i18n.t('filter.playCount', { postProcess: 'titleCase' }),
+            name: i18n.t('filter.genre', { postProcess: 'titleCase' }),
             value: SongListSort.GENRE,
         },
         {
@@ -240,11 +237,6 @@ const FILTERS = {
             name: i18n.t('filter.recentlyAdded', { postProcess: 'titleCase' }),
             value: SongListSort.RECENTLY_ADDED,
         },
-        {
-            defaultOrder: SortOrder.DESC,
-            name: i18n.t('filter.recentlyPlayed', { postProcess: 'titleCase' }),
-            value: SongListSort.RECENTLY_PLAYED,
-        },
         {
             defaultOrder: SortOrder.DESC,
             name: i18n.t('filter.releaseYear', { postProcess: 'titleCase' }),
@@ -270,7 +262,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
     const setPage = useSetPlaylistStore();
     const setFilter = useSetPlaylistDetailFilters();
     const page = usePlaylistDetailStore();
-    const filters: Partial<PlaylistSongListQuery> = {
+    const filters: Partial<PlaylistSongListQueryClientSide> = {
         sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
         sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
     };
@@ -297,68 +289,18 @@ export const PlaylistDetailSongListHeaderFilters = ({
 
     const debouncedHandleItemSize = debounce(handleItemSize, 20);
 
-    const handleFilterChange = useCallback(
-        async (filters: SongListFilter) => {
-            if (server?.type !== ServerType.SUBSONIC) {
-                const dataSource: IDatasource = {
-                    getRows: async (params) => {
-                        const limit = params.endRow - params.startRow;
-                        const startIndex = params.startRow;
+    const handleFilterChange = useCallback(async () => {
+        tableRef.current?.api.redrawRows();
+        tableRef.current?.api.ensureIndexVisible(0, 'top');
 
-                        const queryKey = queryKeys.playlists.songList(
-                            server?.id || '',
-                            playlistId,
-                            {
-                                id: playlistId,
-                                limit,
-                                startIndex,
-                                ...filters,
-                            },
-                        );
-
-                        const songsRes = await queryClient.fetchQuery(
-                            queryKey,
-                            async ({ signal }) =>
-                                api.controller.getPlaylistSongList({
-                                    apiClientProps: {
-                                        server,
-                                        signal,
-                                    },
-                                    query: {
-                                        id: playlistId,
-                                        limit,
-                                        startIndex,
-                                        ...filters,
-                                    },
-                                }),
-                            { cacheTime: 1000 * 60 * 1 },
-                        );
-
-                        params.successCallback(
-                            songsRes?.items || [],
-                            songsRes?.totalRecordCount || 0,
-                        );
-                    },
-                    rowCount: undefined,
-                };
-                tableRef.current?.api.setDatasource(dataSource);
-                tableRef.current?.api.purgeInfiniteCache();
-                tableRef.current?.api.ensureIndexVisible(0, 'top');
-            } else {
-                tableRef.current?.api.redrawRows();
-                tableRef.current?.api.ensureIndexVisible(0, 'top');
-            }
-
-            if (page.display === ListDisplayType.TABLE_PAGINATED) {
-                setPagination({ data: { currentPage: 0 } });
-            }
-        },
-        [tableRef, page.display, server, playlistId, queryClient, setPagination],
-    );
+        if (page.display === ListDisplayType.TABLE_PAGINATED) {
+            setPagination({ data: { currentPage: 0 } });
+        }
+    }, [tableRef, page.display, setPagination]);
 
     const handleRefresh = () => {
-        queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
-        handleFilterChange({ ...page?.table.id[playlistId].filter, ...filters });
+        queryClient.invalidateQueries(queryKeys.playlists.songList(server?.id || '', playlistId));
+        handleFilterChange();
     };
 
     const handleSetSortBy = useCallback(
@@ -369,20 +311,20 @@ export const PlaylistDetailSongListHeaderFilters = ({
                 (f) => f.value === e.currentTarget.value,
             )?.defaultOrder;
 
-            const updatedFilters = setFilter(playlistId, {
+            setFilter(playlistId, {
                 sortBy: e.currentTarget.value as SongListSort,
                 sortOrder: sortOrder || SortOrder.ASC,
             });
 
-            handleFilterChange(updatedFilters);
+            handleFilterChange();
         },
         [handleFilterChange, playlistId, server?.type, setFilter],
     );
 
     const handleToggleSortOrder = useCallback(() => {
         const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-        const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
-        handleFilterChange(updatedFilters);
+        setFilter(playlistId, { sortOrder: newSortOrder });
+        handleFilterChange();
     }, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
 
     const handleSetViewType = useCallback(
@@ -432,6 +374,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
         handlePlayQueueAdd?.({
             byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
             playType,
+            query: filters,
         });
     };
 

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

@@ -9,12 +9,17 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Badge } from '/@/shared/components/badge/badge';
 import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import {
+    LibraryItem,
+    PlaylistSongListQueryClientSide,
+    SongListSort,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 interface PlaylistDetailHeaderProps {
@@ -33,11 +38,17 @@ export const PlaylistDetailSongListHeader = ({
     const server = useCurrentServer();
     const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
     const handlePlayQueueAdd = usePlayQueueAdd();
+    const page = usePlaylistDetailStore();
+    const filters: Partial<PlaylistSongListQueryClientSide> = {
+        sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+        sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+    };
 
     const handlePlay = async (playType: Play) => {
         handlePlayQueueAdd?.({
             byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
             playType,
+            query: filters,
         });
     };