Support subsonic song filters

src/renderer/api/subsonic/subsonic-controller.ts

@@ -219,7 +219,7 @@ export const SubsonicController: ControllerEndpoint = {
         );
 
         let results = artists.map((artist) =>
-            subsonicNormalize.albumArtist(artist, apiClientProps.server),
+            subsonicNormalize.albumArtist(artist, apiClientProps.server, 300),
         );
 
         if (query.searchTerm) {
@@ -880,11 +880,39 @@ export const SubsonicController: ControllerEndpoint = {
         const artistDetailPromises = [];
         let results: any[] = [];
 
-        if (query.genreId) {
+        if (query.searchTerm) {
+            const res = await subsonicApiClient(apiClientProps).search3({
+                query: {
+                    albumCount: 0,
+                    albumOffset: 0,
+                    artistCount: 0,
+                    artistOffset: 0,
+                    query: query.searchTerm || '""',
+                    songCount: query.limit,
+                    songOffset: query.startIndex,
+                },
+            });
+
+            if (res.status !== 200) {
+                fsLog.error('Failed to get song list');
+                throw new Error('Failed to get song list');
+            }
+
+            return {
+                items:
+                    res.body['subsonic-response'].searchResult3?.song?.map((song) =>
+                        subsonicNormalize.song(song, apiClientProps.server, ''),
+                    ) || [],
+                startIndex: query.startIndex,
+                totalRecordCount: null,
+            };
+        }
+
+        if (query.genre) {
             const res = await subsonicApiClient(apiClientProps).getSongsByGenre({
                 query: {
                     count: query.limit,
-                    genre: query.genreId,
+                    genre: query.genre,
                     musicFolderId: query.musicFolderId,
                     offset: query.startIndex,
                 },
@@ -896,14 +924,39 @@ export const SubsonicController: ControllerEndpoint = {
             }
 
             return {
-                items: res.body['subsonic-response'].songsByGenre.song.map((song) =>
+                items:
-                    subsonicNormalize.song(song, apiClientProps.server, ''),
+                    res.body['subsonic-response'].songsByGenre.song?.map((song) =>
-                ),
+                        subsonicNormalize.song(song, apiClientProps.server, ''),
+                    ) || [],
                 startIndex: 0,
                 totalRecordCount: null,
             };
         }
 
+        if (query.isFavorite) {
+            const res = await subsonicApiClient(apiClientProps).getStarred({
+                query: {
+                    musicFolderId: query.musicFolderId,
+                },
+            });
+
+            if (res.status !== 200) {
+                fsLog.error('Failed to get song list');
+                throw new Error('Failed to get song list');
+            }
+
+            const results =
+                res.body['subsonic-response'].starred.song?.map((song) =>
+                    subsonicNormalize.song(song, apiClientProps.server, ''),
+                ) || [];
+
+            return {
+                items: sortSongList(results, query.sortBy, query.sortOrder),
+                startIndex: 0,
+                totalRecordCount: res.body['subsonic-response'].starred.song?.length || 0,
+            };
+        }
+
         if (query.albumIds || query.artistIds) {
             if (query.albumIds) {
                 for (const albumId of query.albumIds) {
@@ -1009,13 +1062,48 @@ export const SubsonicController: ControllerEndpoint = {
         let fetchNextSection = true;
         let sectionIndex = 0;
 
-        if (query.genreId) {
+        if (query.searchTerm) {
+            let fetchNextPage = true;
+            let startIndex = 0;
+            let totalRecordCount = 0;
+
+            while (fetchNextPage) {
+                const res = await subsonicApiClient(apiClientProps).search3({
+                    query: {
+                        albumCount: 0,
+                        albumOffset: 0,
+                        artistCount: 0,
+                        artistOffset: 0,
+                        query: query.searchTerm || '""',
+                        songCount: 500,
+                        songOffset: startIndex,
+                    },
+                });
+
+                if (res.status !== 200) {
+                    fsLog.error('Failed to get song list count');
+                    throw new Error('Failed to get song list count');
+                }
+
+                const songCount = res.body['subsonic-response'].searchResult3.song?.length;
+
+                totalRecordCount += songCount;
+                startIndex += songCount;
+
+                // The max limit size for Subsonic is 500
+                fetchNextPage = songCount === 500;
+            }
+
+            return totalRecordCount;
+        }
+
+        if (query.genre) {
             let totalRecordCount = 0;
             while (fetchNextSection) {
                 const res = await subsonicApiClient(apiClientProps).getSongsByGenre({
                     query: {
                         count: 1,
-                        genre: query.genreId,
+                        genre: query.genre,
                         musicFolderId: query.musicFolderId,
                         offset: sectionIndex,
                     },
@@ -1042,7 +1130,7 @@ export const SubsonicController: ControllerEndpoint = {
                 const res = await subsonicApiClient(apiClientProps).getSongsByGenre({
                     query: {
                         count: 500,
-                        genre: query.genreId,
+                        genre: query.genre,
                         musicFolderId: query.musicFolderId,
                         offset: startIndex,
                     },
@@ -1065,6 +1153,21 @@ export const SubsonicController: ControllerEndpoint = {
             return totalRecordCount;
         }
 
+        if (query.isFavorite) {
+            const res = await subsonicApiClient(apiClientProps).getStarred({
+                query: {
+                    musicFolderId: query.musicFolderId,
+                },
+            });
+
+            if (res.status !== 200) {
+                fsLog.error('Failed to get song list');
+                throw new Error('Failed to get song list');
+            }
+
+            return res.body['subsonic-response'].starred.song?.length || 0;
+        }
+
         let totalRecordCount = 0;
 
         while (fetchNextSection) {

src/renderer/api/subsonic/subsonic-normalize.ts

@@ -38,13 +38,14 @@ const normalizeSong = (
     item: z.infer<typeof SubsonicApi._baseTypes.song>,
     server: ServerListItem | null,
     deviceId: string,
+    size?: number,
 ): QueueSong => {
     const imageUrl =
         getCoverArtUrl({
             baseUrl: server?.url,
             coverArtId: item.coverArt,
             credential: server?.credential,
-            size: 100,
+            size: size || 300,
         }) || null;
 
     const streamUrl = `${server?.url}/rest/stream.view?id=${item.id}&v=1.13.0&c=feishin_${deviceId}&${server?.credential}`;

src/renderer/api/types.ts

@@ -492,8 +492,10 @@ export type SongListQuery = {
     };
     albumIds?: string[];
     artistIds?: string[];
+    genre?: string;
     genreId?: string;
     imageSize?: number;
+    isFavorite?: boolean;
     limit?: number;
     maxYear?: number;
     minYear?: number;

src/renderer/components/virtual-table/hooks/use-virtual-table.ts

@@ -34,6 +34,7 @@ interface UseAgGridProps<TFilter> {
     columnType?: 'albumDetail' | 'generic';
     contextMenu: SetContextMenuItems;
     customFilters?: Partial<TFilter>;
+    isClientSide?: boolean;
     isClientSideSort?: boolean;
     isSearchParams?: boolean;
     itemCount?: number;
@@ -43,6 +44,8 @@ interface UseAgGridProps<TFilter> {
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
+const BLOCK_SIZE = 500;
+
 export const useVirtualTable = <TFilter>({
     server,
     tableRef,
@@ -52,6 +55,7 @@ export const useVirtualTable = <TFilter>({
     itemCount,
     customFilters,
     isSearchParams,
+    isClientSide,
     isClientSideSort,
     columnType,
 }: UseAgGridProps<TFilter>) => {
@@ -183,7 +187,7 @@ export const useVirtualTable = <TFilter>({
                     }
 
                     if (results.totalRecordCount === null) {
-                        const hasMoreRows = results?.items?.length === properties.filter.limit;
+                        const hasMoreRows = results?.items?.length === BLOCK_SIZE;
                         const lastRowIndex = hasMoreRows
                             ? undefined
                             : (properties.filter.offset || 0) + results.items.length;
@@ -334,6 +338,7 @@ export const useVirtualTable = <TFilter>({
             alwaysShowHorizontalScroll: true,
             autoFitColumns: properties.table.autoFit,
             blockLoadDebounceMillis: 200,
+            cacheBlockSize: 500,
             getRowId: (data: GetRowIdParams<any>) => data.data.id,
             infiniteInitialRowCount: itemCount || 100,
             pagination: isPaginationEnabled,
@@ -348,10 +353,11 @@ export const useVirtualTable = <TFilter>({
                 : undefined,
             rowBuffer: 20,
             rowHeight: properties.table.rowHeight || 40,
-            rowModelType: 'infinite' as RowModelType,
+            rowModelType: isClientSide ? 'clientSide' : ('infinite' as RowModelType),
             suppressRowDrag: true,
         };
     }, [
+        isClientSide,
         isPaginationEnabled,
         isSearchParams,
         itemCount,

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -29,6 +29,7 @@ import { queryClient } from '/@/renderer/lib/react-query';
 import { SongListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { ListDisplayType, Play, ServerType, TableColumn } from '/@/renderer/types';
 import i18n from '/@/i18n/i18n';
+import { SubsonicSongFilters } from '/@/renderer/features/songs/components/subsonic-song-filters';
 
 const FILTERS = {
     jellyfin: [
@@ -400,25 +401,34 @@ export const SongListHeaderFilters = ({
     };
 
     const handleOpenFiltersModal = () => {
+        let FilterComponent;
+
+        switch (server?.type) {
+            case ServerType.NAVIDROME:
+                FilterComponent = NavidromeSongFilters;
+                break;
+            case ServerType.JELLYFIN:
+                FilterComponent = JellyfinSongFilters;
+                break;
+            case ServerType.SUBSONIC:
+                FilterComponent = SubsonicSongFilters;
+                break;
+            default:
+                break;
+        }
+
+        if (!FilterComponent) {
+            return;
+        }
+
         openModal({
             children: (
-                <>
+                <FilterComponent
-                    {server?.type === ServerType.NAVIDROME ? (
+                    customFilters={customFilters}
-                        <NavidromeSongFilters
+                    pageKey={pageKey}
-                            customFilters={customFilters}
+                    serverId={server?.id}
-                            pageKey={pageKey}
+                    onFilterChange={onFilterChange}
-                            serverId={server?.id}
+                />
-                            onFilterChange={onFilterChange}
-                        />
-                    ) : (
-                        <JellyfinSongFilters
-                            customFilters={customFilters}
-                            pageKey={pageKey}
-                            serverId={server?.id}
-                            onFilterChange={onFilterChange}
-                        />
-                    )}
-                </>
             ),
             title: 'Song Filters',
         });
@@ -437,8 +447,17 @@ export const SongListHeaderFilters = ({
                 .filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
                 .some((value) => value !== undefined);
 
-        return isNavidromeFilterApplied || isJellyfinFilterApplied;
+        const isSubsonicFilterApplied =
-    }, [filter?._custom?.jellyfin, filter?._custom?.navidrome, server?.type]);
+            server?.type === ServerType.SUBSONIC && (filter?.isFavorite || filter?.genre);
+
+        return isNavidromeFilterApplied || isJellyfinFilterApplied || isSubsonicFilterApplied;
+    }, [
+        filter._custom?.jellyfin,
+        filter._custom?.navidrome,
+        filter?.genre,
+        filter?.isFavorite,
+        server?.type,
+    ]);
 
     const isFolderFilterApplied = useMemo(() => {
         return filter.musicFolderId !== undefined;
@@ -475,11 +494,15 @@ export const SongListHeaderFilters = ({
                         ))}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
-                <Divider orientation="vertical" />
+                {server?.type !== ServerType.SUBSONIC && (
-                <OrderToggleButton
+                    <>
-                    sortOrder={filter.sortOrder}
+                        <Divider orientation="vertical" />
-                    onToggle={handleToggleSortOrder}
+                        <OrderToggleButton
-                />
+                            sortOrder={filter.sortOrder}
+                            onToggle={handleToggleSortOrder}
+                        />
+                    </>
+                )}
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />

src/renderer/features/songs/components/subsonic-song-filters.tsx

@@ -0,0 +1,109 @@
+import { ChangeEvent, useMemo } from 'react';
+import { Divider, Group, Stack } from '@mantine/core';
+import debounce from 'lodash/debounce';
+import { GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
+import { Select, Switch, Text } from '/@/renderer/components';
+import { useGenreList } from '/@/renderer/features/genres';
+import { SongListFilter, useListFilterByKey, useListStoreActions } from '/@/renderer/store';
+import { useTranslation } from 'react-i18next';
+
+interface SubsonicSongFiltersProps {
+    customFilters?: Partial<SongListFilter>;
+    onFilterChange: (filters: SongListFilter) => void;
+    pageKey: string;
+    serverId?: string;
+}
+
+export const SubsonicSongFilters = ({
+    customFilters,
+    onFilterChange,
+    pageKey,
+    serverId,
+}: SubsonicSongFiltersProps) => {
+    const { t } = useTranslation();
+    const { setFilter } = useListStoreActions();
+    const filter = useListFilterByKey({ key: pageKey });
+
+    const isGenrePage = customFilters?._custom?.navidrome?.genre_id !== undefined;
+
+    const genreListQuery = useGenreList({
+        query: {
+            sortBy: GenreListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId,
+    });
+
+    const genreList = useMemo(() => {
+        if (!genreListQuery?.data) return [];
+        return genreListQuery.data.items.map((genre) => ({
+            label: genre.name,
+            value: genre.id,
+        }));
+    }, [genreListQuery.data]);
+
+    const handleGenresFilter = debounce((e: string | null) => {
+        const updatedFilters = setFilter({
+            customFilters,
+            data: {
+                genre: e || undefined,
+            },
+            itemType: LibraryItem.SONG,
+            key: pageKey,
+        }) as SongListFilter;
+
+        onFilterChange(updatedFilters);
+    }, 250);
+
+    const toggleFilters = [
+        {
+            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
+            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+                const updatedFilters = setFilter({
+                    customFilters,
+                    data: {
+                        isFavorite: e.target.checked,
+                    },
+                    itemType: LibraryItem.SONG,
+                    key: pageKey,
+                }) as SongListFilter;
+
+                onFilterChange(updatedFilters);
+            },
+            value: filter.isFavorite,
+        },
+    ];
+
+    return (
+        <Stack p="0.8rem">
+            {toggleFilters.map((filter) => (
+                <Group
+                    key={`ss-filter-${filter.label}`}
+                    position="apart"
+                >
+                    <Text>{filter.label}</Text>
+                    <Switch
+                        checked={filter?.value || false}
+                        size="xs"
+                        onChange={filter.onChange}
+                    />
+                </Group>
+            ))}
+            <Divider my="0.5rem" />
+            <Group grow>
+                {!isGenrePage && (
+                    <Select
+                        clearable
+                        searchable
+                        data={genreList}
+                        defaultValue={filter.genre}
+                        label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
+                        width={150}
+                        onChange={handleGenresFilter}
+                    />
+                )}
+            </Group>
+        </Stack>
+    );
+};

src/renderer/features/songs/queries/song-list-count-query.ts

@@ -11,6 +11,8 @@ export const getSongListCountQuery = (query: SongListQuery) => {
     if (query.searchTerm) filter.searchTerm = query.searchTerm;
     if (query.genreId) filter.genreId = query.genreId;
     if (query.musicFolderId) filter.musicFolderId = query.musicFolderId;
+    if (query.isFavorite) filter.isFavorite = query.isFavorite;
+    if (query.genre) filter.genre = query.genre;
 
     if (Object.keys(filter).length === 0) return undefined;
 

src/renderer/features/songs/routes/song-list-route.tsx

@@ -36,6 +36,7 @@ const TrackListRoute = () => {
                         genre_id: genreId,
                     },
                 },
+                genre: genreId,
                 genreId,
             }),
         };

src/renderer/hooks/use-list-filter-refresh.ts

@@ -15,6 +15,8 @@ interface UseHandleListFilterChangeProps {
     server: ServerListItem | null;
 }
 
+const BLOCK_SIZE = 500;
+
 export const useListFilterRefresh = ({
     server,
     itemType,
@@ -108,7 +110,7 @@ export const useListFilterRefresh = ({
                     }
 
                     if (results.totalRecordCount === null) {
-                        const hasMoreRows = results?.items?.length === filter.limit;
+                        const hasMoreRows = results?.items?.length === BLOCK_SIZE;
                         const lastRowIndex = hasMoreRows
                             ? undefined
                             : (filter.offset || 0) + results.items.length;