Add grid view for tracks (#128)

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

@@ -439,7 +439,9 @@ const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
     }
 
     return {
-        items: res.body.Items.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+        items: res.body.Items.map((item) =>
+            jfNormalize.song(item, apiClientProps.server, '', query.imageSize),
+        ),
         startIndex: query.startIndex,
         totalRecordCount: res.body.TotalRecordCount,
     };

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

@@ -267,7 +267,9 @@ const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
     }
 
     return {
-        items: res.body.data.map((song) => ndNormalize.song(song, apiClientProps.server, '')),
+        items: res.body.data.map((song) =>
+            ndNormalize.song(song, apiClientProps.server, '', query.imageSize),
+        ),
         startIndex: query?.startIndex || 0,
         totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
     };

src/renderer/api/types.ts

@@ -481,6 +481,7 @@ export type SongListQuery = {
     };
     albumIds?: string[];
     artistIds?: string[];
+    imageSize?: number;
     limit?: number;
     musicFolderId?: string;
     searchTerm?: string;

src/renderer/components/card/card-rows.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { Album, AlbumArtist, Artist, Playlist } from '/@/renderer/api/types';
+import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
 import { CardRow } from '/@/renderer/types';
@@ -183,6 +183,60 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
     },
 };
 
+export const SONG_CARD_ROWS: { [key: string]: CardRow<Song> } = {
+    album: {
+        property: 'album',
+        route: {
+            route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+            slugs: [{ idProperty: 'albumId', slugProperty: 'albumId' }],
+        },
+    },
+    albumArtists: {
+        arrayProperty: 'name',
+        property: 'albumArtists',
+        route: {
+            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+        },
+    },
+    artists: {
+        arrayProperty: 'name',
+        property: 'artists',
+        route: {
+            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+        },
+    },
+    createdAt: {
+        property: 'createdAt',
+    },
+    duration: {
+        property: 'duration',
+    },
+    lastPlayedAt: {
+        property: 'lastPlayedAt',
+    },
+    name: {
+        property: 'name',
+        route: {
+            route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+            slugs: [{ idProperty: 'albumId', slugProperty: 'albumId' }],
+        },
+    },
+    playCount: {
+        property: 'playCount',
+    },
+    rating: {
+        property: 'userRating',
+    },
+    releaseDate: {
+        property: 'releaseDate',
+    },
+    releaseYear: {
+        property: 'releaseYear',
+    },
+};
+
 export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
     albumCount: {
         property: 'albumCount',

src/renderer/features/songs/components/song-list-content.tsx

@@ -4,6 +4,7 @@ import { Spinner } from '/@/renderer/components';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useListStoreByKey } from '/@/renderer/store';
 import { ListDisplayType } from '/@/renderer/types';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 
 const SongListTableView = lazy(() =>
     import('/@/renderer/features/songs/components/song-list-table-view').then((module) => ({
@@ -11,12 +12,19 @@ const SongListTableView = lazy(() =>
     })),
 );
 
+const SongListGridView = lazy(() =>
+    import('/@/renderer/features/songs/components/song-list-grid-view').then((module) => ({
+        default: module.SongListGridView,
+    })),
+);
+
 interface SongListContentProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
+export const SongListContent = ({ itemCount, gridRef, tableRef }: SongListContentProps) => {
     const { pageKey } = useListContext();
     const { display } = useListStoreByKey({ key: pageKey });
 
@@ -25,7 +33,10 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <></>
+                <SongListGridView
+                    gridRef={gridRef}
+                    itemCount={itemCount}
+                />
             ) : (
                 <SongListTableView
                     itemCount={itemCount}

src/renderer/features/songs/components/song-list-grid-view.tsx

@@ -0,0 +1,226 @@
+import { QueryKey, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
+import { ListOnScrollProps } from 'react-window';
+import { controller } from '/@/renderer/api/controller';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import {
+    LibraryItem,
+    Song,
+    SongListQuery,
+    SongListResponse,
+    SongListSort,
+} from '/@/renderer/api/types';
+import { SONG_CARD_ROWS } from '/@/renderer/components';
+import {
+    VirtualGridAutoSizerContainer,
+    VirtualInfiniteGrid,
+} from '/@/renderer/components/virtual-grid';
+import { useListContext } from '/@/renderer/context/list-context';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
+import { CardRow, ListDisplayType } from '/@/renderer/types';
+
+export const SongListGridView = ({ gridRef, itemCount }: any) => {
+    const queryClient = useQueryClient();
+    const server = useCurrentServer();
+    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { pageKey, customFilters, id } = useListContext();
+    const { grid, display, filter } = useListStoreByKey({ key: pageKey });
+    const { setGrid } = useListStoreActions();
+
+    const [searchParams, setSearchParams] = useSearchParams();
+    const scrollOffset = searchParams.get('scrollOffset');
+    const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
+
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
+
+    const handleFavorite = (options: {
+        id: string[];
+        isFavorite: boolean;
+        itemType: LibraryItem;
+    }) => {
+        const { id, itemType, isFavorite } = options;
+        if (isFavorite) {
+            deleteFavoriteMutation.mutate({
+                query: {
+                    id,
+                    type: itemType,
+                },
+                serverId: server?.id,
+            });
+        } else {
+            createFavoriteMutation.mutate({
+                query: {
+                    id,
+                    type: itemType,
+                },
+                serverId: server?.id,
+            });
+        }
+    };
+
+    const cardRows = useMemo(() => {
+        const rows: CardRow<Song>[] = [
+            SONG_CARD_ROWS.name,
+            SONG_CARD_ROWS.album,
+            SONG_CARD_ROWS.albumArtists,
+        ];
+
+        switch (filter.sortBy) {
+            case SongListSort.ALBUM:
+                break;
+            case SongListSort.ARTIST:
+                break;
+            case SongListSort.DURATION:
+                rows.push(SONG_CARD_ROWS.duration);
+                break;
+            case SongListSort.FAVORITED:
+                break;
+            case SongListSort.NAME:
+                break;
+            case SongListSort.PLAY_COUNT:
+                rows.push(SONG_CARD_ROWS.playCount);
+                break;
+            case SongListSort.RANDOM:
+                break;
+            case SongListSort.RATING:
+                rows.push(SONG_CARD_ROWS.rating);
+                break;
+            case SongListSort.RECENTLY_ADDED:
+                rows.push(SONG_CARD_ROWS.createdAt);
+                break;
+            case SongListSort.RECENTLY_PLAYED:
+                rows.push(SONG_CARD_ROWS.lastPlayedAt);
+                break;
+            case SongListSort.YEAR:
+                rows.push(SONG_CARD_ROWS.releaseYear);
+                break;
+            case SongListSort.RELEASE_DATE:
+                rows.push(SONG_CARD_ROWS.releaseDate);
+        }
+
+        return rows;
+    }, [filter.sortBy]);
+
+    const handleGridScroll = useCallback(
+        (e: ListOnScrollProps) => {
+            if (id) {
+                setSearchParams(
+                    (params) => {
+                        params.set('scrollOffset', String(e.scrollOffset));
+                        return params;
+                    },
+                    { replace: true },
+                );
+            } else {
+                setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
+            }
+        },
+        [id, pageKey, setGrid, setSearchParams],
+    );
+
+    const fetchInitialData = useCallback(() => {
+        const query: SongListQuery = {
+            ...filter,
+            ...customFilters,
+        };
+
+        const queryKey = queryKeys.songs.list(server?.id || '', query, id);
+
+        const queriesFromCache: [QueryKey, SongListResponse][] = queryClient.getQueriesData({
+            exact: false,
+            fetchStatus: 'idle',
+            queryKey,
+            stale: false,
+        });
+
+        const itemData = [];
+
+        for (const [, data] of queriesFromCache) {
+            const { items, startIndex } = data || {};
+
+            if (items && items.length !== 1 && startIndex !== undefined) {
+                let itemIndex = 0;
+                for (
+                    let rowIndex = startIndex;
+                    rowIndex < startIndex + items.length;
+                    rowIndex += 1
+                ) {
+                    itemData[rowIndex] = items[itemIndex];
+                    itemIndex += 1;
+                }
+            }
+        }
+
+        return itemData;
+    }, [customFilters, filter, id, queryClient, server?.id]);
+
+    const fetch = useCallback(
+        async ({ skip, take }: { skip: number; take: number }) => {
+            if (!server) {
+                return [];
+            }
+
+            const query: SongListQuery = {
+                imageSize: 250,
+                limit: take,
+                startIndex: skip,
+                ...filter,
+                ...customFilters,
+            };
+
+            const queryKey = queryKeys.songs.list(server?.id || '', query, id);
+
+            const songs = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+                controller.getSongList({
+                    apiClientProps: {
+                        server,
+                        signal,
+                    },
+                    query,
+                }),
+            );
+
+            return songs;
+        },
+        [customFilters, filter, id, queryClient, server],
+    );
+
+    return (
+        <VirtualGridAutoSizerContainer>
+            <AutoSizer>
+                {({ height, width }: Size) => (
+                    <VirtualInfiniteGrid
+                        key={`song-list-${server?.id}-${display}`}
+                        ref={gridRef}
+                        cardRows={cardRows}
+                        display={display || ListDisplayType.CARD}
+                        fetchFn={fetch}
+                        fetchInitialData={fetchInitialData}
+                        handleFavorite={handleFavorite}
+                        handlePlayQueueAdd={handlePlayQueueAdd}
+                        height={height}
+                        initialScrollOffset={initialScrollOffset}
+                        itemCount={itemCount || 0}
+                        itemGap={grid?.itemGap ?? 10}
+                        itemSize={grid?.itemSize || 200}
+                        itemType={LibraryItem.SONG}
+                        loading={itemCount === undefined || itemCount === null}
+                        minimumBatchSize={40}
+                        route={{
+                            route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                            slugs: [{ idProperty: 'albumId', slugProperty: 'albumId' }],
+                        }}
+                        width={width}
+                        onScroll={handleGridScroll}
+                    />
+                )}
+            </AutoSizer>
+        </VirtualGridAutoSizerContainer>
+    );
+};

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

@@ -1,7 +1,7 @@
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { openModal } from '@mantine/modals';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import {
     RiAddBoxFill,
     RiAddCircleFill,
@@ -16,6 +16,7 @@ import { useListStoreByKey } from '../../../store/list.store';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { LibraryItem, SongListSort, SortOrder } from '/@/renderer/api/types';
 import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
 import { useListContext } from '/@/renderer/context/list-context';
 import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
@@ -72,16 +73,21 @@ const FILTERS = {
 };
 
 interface SongListHeaderFiltersProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps) => {
+export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFiltersProps) => {
     const server = useCurrentServer();
     const { pageKey, handlePlay, customFilters } = useListContext();
-    const { display, table, filter } = useListStoreByKey({ filter: customFilters, key: pageKey });
+    const { display, table, filter, grid } = useListStoreByKey({
-    const { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions();
+        filter: customFilters,
+        key: pageKey,
+    });
+    const { setFilter, setGrid, setTable, setTablePagination, setDisplayType } =
+        useListStoreActions();
 
-    const { handleRefreshTable } = useListFilterRefresh({
+    const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
         itemType: LibraryItem.SONG,
         server,
     });
@@ -97,10 +103,11 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
             ).find((f) => f.value === filter.sortBy)?.name) ||
         'Unknown';
 
+    const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
+
     const handleSetSortBy = useCallback(
         (e: MouseEvent<HTMLButtonElement>) => {
             if (!e.currentTarget?.value || !server?.type) return;
-
             const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
                 (f) => f.value === e.currentTarget.value,
             )?.defaultOrder;
@@ -115,9 +122,23 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
                 key: pageKey,
             }) as SongListFilter;
 
-            handleRefreshTable(tableRef, updatedFilters);
+            if (isGrid) {
+                handleRefreshGrid(gridRef, updatedFilters);
+            } else {
+                handleRefreshTable(tableRef, updatedFilters);
+            }
         },
-        [customFilters, handleRefreshTable, pageKey, server?.type, setFilter, tableRef],
+        [
+            customFilters,
+            gridRef,
+            handleRefreshGrid,
+            handleRefreshTable,
+            isGrid,
+            pageKey,
+            server?.type,
+            setFilter,
+            tableRef,
+        ],
     );
 
     const handleSetMusicFolder = useCallback(
@@ -141,9 +162,23 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
                 }) as SongListFilter;
             }
 
-            handleRefreshTable(tableRef, updatedFilters);
+            if (isGrid) {
+                handleRefreshGrid(gridRef, updatedFilters);
+            } else {
+                handleRefreshTable(tableRef, updatedFilters);
+            }
         },
-        [filter.musicFolderId, handleRefreshTable, tableRef, setFilter, customFilters, pageKey],
+        [
+            filter.musicFolderId,
+            isGrid,
+            setFilter,
+            customFilters,
+            pageKey,
+            handleRefreshGrid,
+            gridRef,
+            handleRefreshTable,
+            tableRef,
+        ],
     );
 
     const handleToggleSortOrder = useCallback(() => {
@@ -154,8 +189,23 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
             itemType: LibraryItem.SONG,
             key: pageKey,
         }) as SongListFilter;
-        handleRefreshTable(tableRef, updatedFilters);
+
-    }, [customFilters, filter.sortOrder, handleRefreshTable, pageKey, setFilter, tableRef]);
+        if (isGrid) {
+            handleRefreshGrid(gridRef, updatedFilters);
+        } else {
+            handleRefreshTable(tableRef, updatedFilters);
+        }
+    }, [
+        customFilters,
+        filter.sortOrder,
+        gridRef,
+        handleRefreshGrid,
+        handleRefreshTable,
+        isGrid,
+        pageKey,
+        setFilter,
+        tableRef,
+    ]);
 
     const handleSetViewType = useCallback(
         (e: MouseEvent<HTMLButtonElement>) => {
@@ -212,19 +262,37 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
         }
     };
 
-    const handleRowHeight = (e: number) => {
+    const handleItemSize = (e: number) => {
-        setTable({ data: { rowHeight: e }, key: pageKey });
+        if (isGrid) {
+            setGrid({ data: { itemSize: e }, key: pageKey });
+        } else {
+            setTable({ data: { rowHeight: e }, key: pageKey });
+        }
+    };
+
+    const handleItemGap = (e: number) => {
+        setGrid({ data: { itemGap: e }, key: pageKey });
     };
 
     const handleRefresh = () => {
         queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
-        handleRefreshTable(tableRef, filter);
+        if (isGrid) {
+            handleRefreshGrid(gridRef, filter);
+        } else {
+            handleRefreshTable(tableRef, filter);
+        }
     };
 
     const onFilterChange = (filter: SongListFilter) => {
-        handleRefreshTable(tableRef, {
+        if (isGrid) {
-            ...filter,
+            handleRefreshGrid(gridRef, {
-        });
+                ...filter,
+            });
+        } else {
+            handleRefreshTable(tableRef, {
+                ...filter,
+            });
+        }
     };
 
     const handleOpenFiltersModal = () => {
@@ -429,6 +497,20 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
                         <DropdownMenu.Label>Display type</DropdownMenu.Label>
+                        <DropdownMenu.Item
+                            $isActive={display === ListDisplayType.CARD}
+                            value={ListDisplayType.CARD}
+                            onClick={handleSetViewType}
+                        >
+                            Card
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                            $isActive={display === ListDisplayType.POSTER}
+                            value={ListDisplayType.POSTER}
+                            onClick={handleSetViewType}
+                        >
+                            Poster
+                        </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.TABLE}
                             value={ListDisplayType.TABLE}
@@ -447,13 +529,25 @@ export const SongListHeaderFilters = ({ tableRef }: SongListHeaderFiltersProps)
                         <DropdownMenu.Label>Item Size</DropdownMenu.Label>
                         <DropdownMenu.Item closeMenuOnClick={false}>
                             <Slider
-                                defaultValue={table.rowHeight || 0}
+                                defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
-                                label={null}
+                                max={isGrid ? 300 : 100}
-                                max={100}
+                                min={isGrid ? 150 : 25}
-                                min={25}
+                                onChangeEnd={handleItemSize}
-                                onChangeEnd={handleRowHeight}
                             />
                         </DropdownMenu.Item>
+                        {isGrid && (
+                            <>
+                                <DropdownMenu.Label>Item gap</DropdownMenu.Label>
+                                <DropdownMenu.Item closeMenuOnClick={false}>
+                                    <Slider
+                                        defaultValue={grid?.itemGap || 0}
+                                        max={30}
+                                        min={0}
+                                        onChangeEnd={handleItemGap}
+                                    />
+                                </DropdownMenu.Item>
+                            </>
+                        )}
                         <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
                         <DropdownMenu.Item
                             closeMenuOnClick={false}

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

@@ -13,14 +13,16 @@ import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh'
 import { SongListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { ListDisplayType } from '/@/renderer/types';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 
 interface SongListHeaderProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
     title?: string;
 }
 
-export const SongListHeader = ({ title, itemCount, tableRef }: SongListHeaderProps) => {
+export const SongListHeader = ({ gridRef, title, itemCount, tableRef }: SongListHeaderProps) => {
     const server = useCurrentServer();
     const { pageKey, handlePlay, customFilters } = useListContext();
     const { setFilter, setTablePagination } = useListStoreActions();
@@ -86,7 +88,10 @@ export const SongListHeader = ({ title, itemCount, tableRef }: SongListHeaderPro
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <SongListHeaderFilters tableRef={tableRef} />
+                <SongListHeaderFilters
+                    gridRef={gridRef}
+                    tableRef={tableRef}
+                />
             </FilterBar>
         </Stack>
     );

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

@@ -13,8 +13,10 @@ import { useSongList } from '/@/renderer/features/songs/queries/song-list-query'
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
 import { Play } from '/@/renderer/types';
 import { titleCase } from '/@/renderer/utils';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 
 const TrackListRoute = () => {
+    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const [searchParams] = useSearchParams();
@@ -134,6 +136,7 @@ const TrackListRoute = () => {
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <SongListHeader
+                    gridRef={gridRef}
                     itemCount={itemCount}
                     tableRef={tableRef}
                     title={
@@ -143,6 +146,7 @@ const TrackListRoute = () => {
                     }
                 />
                 <SongListContent
+                    gridRef={gridRef}
                     itemCount={itemCount}
                     tableRef={tableRef}
                 />