pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add grid view for tracks (#128)

Browse source
This commit is contained in:
jeffvli 2023-09-23 15:36:57 -07:00
parent d3503af12c
commit 0b62bee3a6
9 changed files with 429 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/api/jellyfin/jellyfin-controller.ts
View file

@ -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,
};

4
src/renderer/api/navidrome/navidrome-controller.ts
View file

@ -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),
};

1
src/renderer/api/types.ts
View file

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

56
src/renderer/components/card/card-rows.tsx
View file

@ -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',

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

@ -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}

226
src/renderer/features/songs/components/song-list-grid-view.tsx Normal file
View file

@ -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>
);
};

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

@ -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 { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions();
const { display, table, filter, grid } = useListStoreByKey({
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;
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;
}
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;
if (isGrid) {
handleRefreshGrid(gridRef, updatedFilters);
} else {
handleRefreshTable(tableRef, updatedFilters);
}, [customFilters, filter.sortOrder, handleRefreshTable, pageKey, setFilter, tableRef]);
}
}, [
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) => {
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 || ''));
if (isGrid) {
handleRefreshGrid(gridRef, filter);
} else {
handleRefreshTable(tableRef, filter);
}
};
const onFilterChange = (filter: SongListFilter) => {
if (isGrid) {
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}
label={null}
max={100}
min={25}
onChangeEnd={handleRowHeight}
defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
max={isGrid ? 300 : 100}
min={isGrid ? 150 : 25}
onChangeEnd={handleItemSize}
/>
</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}

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

@ -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>
);

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

@ -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}
/>