antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Begin normalizing list stores

Browse source
This commit is contained in:
jeffvli 2023-03-05 18:28:26 -08:00
parent 918b77eebb
commit ae292e3a5f
22 changed files with 1057 additions and 764 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/renderer/features/songs/components/jellyfin-song-filters.tsx
View file

@ -1,17 +1,23 @@
import { ChangeEvent, useMemo } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
import { MultiSelect, NumberInput, Switch, Text } from '/@/renderer/components';
import { SongListFilter, useSetSongFilters, useSongListStore } from '/@/renderer/store';
import { SongListFilter, useListStoreActions, useSongListFilter } from '/@/renderer/store';
import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres';
interface JellyfinSongFiltersProps {
handleFilterChange: (filters: SongListFilter) => void;
id?: string;
pageKey: string;
}
export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersProps) => {
const { filter } = useSongListStore();
const setFilters = useSetSongFilters();
export const JellyfinSongFilters = ({
id,
pageKey,
handleFilterChange,
}: JellyfinSongFiltersProps) => {
const { setFilter } = useListStoreActions();
const filter = useSongListFilter({ id, key: pageKey });
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList(null);
@ -32,13 +38,16 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
{
label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
isFavorite: e.currentTarget.checked ? true : undefined,
const updatedFilters = setFilter({
data: {
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
isFavorite: e.currentTarget.checked ? true : undefined,
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
},
value: filter.jfParams?.isFavorite,
@ -47,37 +56,46 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
const handleMinYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
minYear: e === '' ? undefined : (e as number),
const updatedFilters = setFilter({
data: {
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
minYear: e === '' ? undefined : (e as number),
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, 500);
const handleMaxYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
maxYear: e === '' ? undefined : (e as number),
const updatedFilters = setFilter({
data: {
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
maxYear: e === '' ? undefined : (e as number),
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, 500);
const handleGenresFilter = debounce((e: string[] | undefined) => {
const genreFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
genreIds: genreFilterString,
includeItemTypes: 'Audio',
const updatedFilters = setFilter({
data: {
jfParams: {
...filter.jfParams,
genreIds: genreFilterString,
includeItemTypes: 'Audio',
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, 250);

51
src/renderer/features/songs/components/navidrome-song-filters.tsx
View file

@ -1,17 +1,23 @@
import { ChangeEvent, useMemo } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
import { NumberInput, Select, Switch, Text } from '/@/renderer/components';
import { SongListFilter, useSetSongFilters, useSongListStore } from '/@/renderer/store';
import { SongListFilter, useListStoreActions, useSongListFilter } from '/@/renderer/store';
import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres';
interface NavidromeSongFiltersProps {
handleFilterChange: (filters: SongListFilter) => void;
id?: string;
pageKey: string;
}
export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFiltersProps) => {
const { filter } = useSongListStore();
const setFilters = useSetSongFilters();
export const NavidromeSongFilters = ({
handleFilterChange,
pageKey,
id,
}: NavidromeSongFiltersProps) => {
const { setFilter } = useListStoreActions();
const filter = useSongListFilter({ id, key: pageKey });
const genreListQuery = useGenreList(null);
@ -24,12 +30,15 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
}, [genreListQuery.data]);
const handleGenresFilter = debounce((e: string | null) => {
const updatedFilters = setFilters({
ndParams: {
...filter.ndParams,
genre_id: e || undefined,
const updatedFilters = setFilter({
data: {
ndParams: {
...filter.ndParams,
genre_id: e || undefined,
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, 250);
@ -37,9 +46,14 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
{
label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
});
const updatedFilters = setFilter({
data: {
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
},
key: pageKey,
}) as SongListFilter;
console.log('updatedFilters :>> ', updatedFilters);
handleFilterChange(updatedFilters);
},
value: filter.ndParams?.starred,
@ -47,12 +61,15 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
];
const handleYearFilter = debounce((e: number | string) => {
const updatedFilters = setFilters({
ndParams: {
...filter.ndParams,
year: e === '' ? undefined : (e as number),
const updatedFilters = setFilter({
data: {
ndParams: {
...filter.ndParams,
year: e === '' ? undefined : (e as number),
},
},
});
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, 500);

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

@ -19,12 +19,10 @@ import {
VirtualTable,
} from '/@/renderer/components';
import {
SongListFilter,
useCurrentServer,
useSetSongTable,
useSetSongTablePagination,
useListStoreActions,
useSongListFilter,
useSongListStore,
useSongTablePagination,
} from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion';
@ -34,30 +32,28 @@ import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/conte
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
interface SongListContentProps {
customFilters?: Partial<SongListFilter>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const SongListContent = ({ customFilters, itemCount, tableRef }: SongListContentProps) => {
export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = useSongListStore();
const pagination = useSongTablePagination();
const setPagination = useSetSongTablePagination();
const setTable = useSetSongTable();
const { display, table } = useSongListStore();
const { id, pageKey } = useSongListContext();
const filter = useSongListFilter({ id, key: pageKey });
const { setTable, setTablePagination } = useListStoreActions();
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
const onGridReady = useCallback(
(params: GridReadyEvent) => {
@ -69,8 +65,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
const query: SongListQuery = {
limit,
startIndex,
...page.filter,
...customFilters,
...filter,
};
const queryKey = queryKeys.songs.list(server?.id || '', query);
@ -93,11 +88,9 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
};
params.api.setDatasource(dataSource);
if (!customFilters) {
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
}
params.api.ensureIndexVisible(table.scrollOffset, 'top');
},
[customFilters, page.filter, page.table.scrollOffset, queryClient, server],
[filter, table.scrollOffset, queryClient, server],
);
const onPaginationChanged = useCallback(
@ -106,22 +99,31 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
const currentPageStartIndex = table.pagination.currentPage * table.pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setPagination({
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
setTablePagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
key: pageKey,
});
},
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
[
isPaginationEnabled,
pageKey,
setTablePagination,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
);
const handleGridSizeChange = () => {
if (page.table.autoFit) {
if (table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
@ -132,7 +134,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
if (!columnsOrder) return;
const columnsInSettings = page.table.columns;
const columnsInSettings = table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
@ -140,22 +142,22 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
...(!table.autoFit && {
width: column.getActualWidth(),
}),
});
}
}
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
setTable({ data: { columns: updatedColumns }, key: pageKey });
}, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => {
if (customFilters) return;
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
if (id) return;
const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
setTable({ data: { scrollOffset }, key: pageKey });
};
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
@ -177,23 +179,20 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
<VirtualTable
// 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}`}
key={`table-${display}-${table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={page.table.autoFit}
autoFitColumns={table.autoFit}
blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={1}
columnDefs={columnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
paginationPageSize={table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowHeight={table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onBodyScrollEnd={handleScroll}
@ -211,10 +210,11 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
{display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pagination={pagination}
setPagination={setPagination}
pageKey={pageKey}
pagination={table.pagination}
setPagination={setTablePagination}
tableRef={tableRef}
/>
)}

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

@ -34,15 +34,14 @@ import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import {
useCurrentServer,
useSongListStore,
useSetSongStore,
useSetSongFilters,
useSetSongTable,
useSetSongTablePagination,
SongListFilter,
useCurrentServer,
useListStoreActions,
useSongListFilter,
useSongListStore,
} from '/@/renderer/store';
import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
const FILTERS = {
jellyfin: [
@ -93,11 +92,11 @@ export const SongListHeaderFilters = ({
tableRef,
}: SongListHeaderFiltersProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
const setFilter = useSetSongFilters();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const { id, pageKey } = useSongListContext();
const { display, table } = useSongListStore();
const { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions();
const filter = useSongListFilter({ id, key: pageKey });
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
@ -106,11 +105,11 @@ export const SongListHeaderFilters = ({
const sortByLabel =
(server?.type &&
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
(f) => f.value === page.filter.sortBy,
(f) => f.value === filter.sortBy,
)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
const sortOrderLabel = ORDER.find((s) => s.value === filter.sortOrder)?.name;
const handleFilterChange = useCallback(
async (filters?: SongListFilter) => {
@ -119,7 +118,7 @@ export const SongListHeaderFilters = ({
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const pageFilters = filters || page.filter;
const pageFilters = filters || filter;
const query: SongListQuery = {
limit,
@ -149,9 +148,9 @@ export const SongListHeaderFilters = ({
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
},
[customFilters, page.filter, server, setPagination, tableRef],
[customFilters, filter, pageKey, server, setTablePagination, tableRef],
);
const handleSetSortBy = useCallback(
@ -163,13 +162,16 @@ export const SongListHeaderFilters = ({
)?.defaultOrder;
const updatedFilters = setFilter({
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
data: {
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
},
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
},
[handleFilterChange, server?.type, setFilter],
[handleFilterChange, pageKey, server?.type, setFilter],
);
const handleSetMusicFolder = useCallback(
@ -177,45 +179,60 @@ export const SongListHeaderFilters = ({
if (!e.currentTarget?.value) return;
let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
updatedFilters = setFilter({ musicFolderId: undefined });
if (e.currentTarget.value === String(filter.musicFolderId)) {
updatedFilters = setFilter({
data: { musicFolderId: undefined },
key: pageKey,
}) as SongListFilter;
} else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
updatedFilters = setFilter({
data: { musicFolderId: e.currentTarget.value },
key: pageKey,
}) as SongListFilter;
}
handleFilterChange(updatedFilters);
},
[handleFilterChange, page.filter.musicFolderId, setFilter],
[filter.musicFolderId, handleFilterChange, setFilter, pageKey],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({ sortOrder: newSortOrder });
const newSortOrder = filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({
data: { sortOrder: newSortOrder },
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters);
}, [page.filter.sortOrder, handleFilterChange, setFilter]);
}, [filter.sortOrder, handleFilterChange, pageKey, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
const display = e.currentTarget.value as ListDisplayType;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
setDisplayType({
data: e.currentTarget.value as ListDisplayType,
key: pageKey,
});
if (display === ListDisplayType.TABLE) {
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
setPagination({ currentPage: 0 });
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} else if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
}
},
[page, setPage, setPagination, tableRef],
[pageKey, setDisplayType, setTablePagination, tableRef],
);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
const existingColumns = table.columns;
if (values.length === 0) {
return setTable({
columns: [],
data: {
columns: [],
},
key: pageKey,
});
}
@ -223,18 +240,18 @@ export const SongListHeaderFilters = ({
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
return setTable({ columns: [...existingColumns, newColumn] });
return setTable({ data: { columns: [...existingColumns, newColumn] }, key: pageKey });
}
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
return setTable({ columns: newColumns });
return setTable({ data: { columns: newColumns }, key: pageKey });
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
setTable({ data: { autoFit: e.currentTarget.checked }, key: pageKey });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
@ -242,17 +259,17 @@ export const SongListHeaderFilters = ({
};
const handleRowHeight = (e: number) => {
setTable({ rowHeight: e });
setTable({ data: { rowHeight: e }, key: pageKey });
};
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
handleFilterChange(page.filter);
handleFilterChange(filter);
};
const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter, ...customFilters };
const query: SongListQuery = { startIndex: 0, ...filter, ...customFilters };
handlePlayQueueAdd?.({
byItemType: {
@ -268,9 +285,17 @@ export const SongListHeaderFilters = ({
children: (
<>
{server?.type === ServerType.NAVIDROME ? (
<NavidromeSongFilters handleFilterChange={handleFilterChange} />
<NavidromeSongFilters
handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/>
) : (
<JellyfinSongFilters handleFilterChange={handleFilterChange} />
<JellyfinSongFilters
handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/>
)}
</>
),
@ -281,18 +306,18 @@ export const SongListHeaderFilters = ({
const isFilterApplied = useMemo(() => {
const isNavidromeFilterApplied =
server?.type === ServerType.NAVIDROME &&
page.filter.ndParams &&
Object.values(page.filter.ndParams).some((value) => value !== undefined);
filter.ndParams &&
Object.values(filter.ndParams).some((value) => value !== undefined);
const isJellyfinFilterApplied =
server?.type === ServerType.JELLYFIN &&
page.filter.jfParams &&
Object.values(page.filter.jfParams)
filter.jfParams &&
Object.values(filter.jfParams)
.filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
.some((value) => value !== undefined);
return isNavidromeFilterApplied || isJellyfinFilterApplied;
}, [page.filter.jfParams, page.filter.ndParams, server?.type]);
}, [filter.jfParams, filter.ndParams, server?.type]);
return (
<Flex justify="space-between">
@ -313,14 +338,14 @@ export const SongListHeaderFilters = ({
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
{FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === page.filter.sortBy}
value={filter.value}
key={`filter-${f.name}`}
$isActive={f.value === filter.sortBy}
value={f.value}
onClick={handleSetSortBy}
>
{filter.name}
{f.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
@ -336,7 +361,7 @@ export const SongListHeaderFilters = ({
sortOrderLabel
) : (
<>
{page.filter.sortOrder === SortOrder.ASC ? (
{filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size="1.3rem" />
) : (
<RiSortDesc size="1.3rem" />
@ -360,7 +385,7 @@ export const SongListHeaderFilters = ({
{musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={page.filter.musicFolderId === folder.id}
$isActive={filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
@ -437,14 +462,14 @@ export const SongListHeaderFilters = ({
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
$isActive={display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
$isActive={display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
@ -454,7 +479,7 @@ export const SongListHeaderFilters = ({
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight || 0}
defaultValue={table.rowHeight || 0}
label={null}
max={100}
min={25}
@ -471,14 +496,14 @@ export const SongListHeaderFilters = ({
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
defaultValue={table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
defaultChecked={table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>

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

@ -10,13 +10,13 @@ import { PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/compone
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query';
import {
SongListFilter,
useCurrentServer,
useSetSongFilters,
useSetSongTablePagination,
useListStoreActions,
useSongListStore,
} from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
@ -36,9 +36,9 @@ export const SongListHeader = ({
tableRef,
}: SongListHeaderProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setFilter = useSetSongFilters();
const setPagination = useSetSongTablePagination();
const { pageKey } = useSongListContext();
const { filter } = useSongListStore();
const { setFilter, setTablePagination } = useListStoreActions();
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
@ -49,7 +49,7 @@ export const SongListHeader = ({
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const pageFilters = filters || page.filter;
const pageFilters = filters || filter;
const query: SongListQuery = {
limit,
@ -79,15 +79,15 @@ export const SongListHeader = ({
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
},
[customFilters, page.filter, server, setPagination, tableRef],
[customFilters, filter, pageKey, server, setTablePagination, tableRef],
);
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const previousSearchTerm = page.filter.searchTerm;
const previousSearchTerm = filter.searchTerm;
const searchTerm = e.target.value === '' ? undefined : e.target.value;
const updatedFilters = setFilter({ searchTerm });
const updatedFilters = setFilter({ data: { searchTerm }, key: pageKey }) as SongListFilter;
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
}, 500);
@ -95,7 +95,7 @@ export const SongListHeader = ({
const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter, ...customFilters };
const query: SongListQuery = { startIndex: 0, ...filter, ...customFilters };
handlePlayQueueAdd?.({
byItemType: {
@ -130,7 +130,7 @@ export const SongListHeader = ({
</LibraryHeaderBar>
<Group>
<SearchInput
defaultValue={page.filter.searchTerm}
defaultValue={filter.searchTerm}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={handleSearch}
/>

16
src/renderer/features/songs/context/song-list-context.tsx Normal file
View file

@ -0,0 +1,16 @@
import { createContext, useContext } from 'react';
import { ListKey } from '/@/renderer/store';
interface SongListContextProps {
id?: string;
pageKey: ListKey;
}
export const SongListContext = createContext<SongListContextProps>({
pageKey: 'song',
});
export const useSongListContext = () => {
const ctxValue = useContext(SongListContext);
return ctxValue;
};

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

@ -1,44 +1,33 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SongListQuery } from '/@/renderer/api/types';
import { useParams, useSearchParams } from 'react-router-dom';
import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
import { SongListContext } from '/@/renderer/features/songs/context/song-list-context';
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
import { useSongListFilters } from '/@/renderer/store';
import { generatePageKey, useCurrentServer, useSongListFilter } from '/@/renderer/store';
const TrackListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const filters = useSongListFilters();
const server = useCurrentServer();
const [searchParams] = useSearchParams();
const { albumArtistId } = useParams();
const pageKey = generatePageKey(
'song',
albumArtistId ? `${albumArtistId}_${server?.id}` : undefined,
);
const customFilters: Partial<SongListQuery> | undefined = searchParams.get('artistId')
? {
artistIds: [searchParams.get('artistId') as string],
}
: undefined;
const songListFilter = useSongListFilter({ id: albumArtistId, key: pageKey });
const itemCountCheck = useSongList(
{
limit: 1,
startIndex: 0,
...filters,
...customFilters,
jfParams: {
...customFilters?.jfParams,
...filters.jfParams,
includeItemTypes: 'Audio',
},
ndParams: {
...customFilters?.ndParams,
...filters.ndParams,
},
...songListFilter,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
cacheTime: 1000 * 60,
staleTime: 1000 * 60,
},
);
@ -49,17 +38,17 @@ const TrackListRoute = () => {
return (
<AnimatedPage>
<SongListHeader
customFilters={customFilters}
itemCount={itemCount}
tableRef={tableRef}
title={searchParams.get('artistName') || undefined}
/>
<SongListContent
customFilters={customFilters}
itemCount={itemCount}
tableRef={tableRef}
/>
<SongListContext.Provider value={{ id: albumArtistId, pageKey }}>
<SongListHeader
itemCount={itemCount}
tableRef={tableRef}
title={searchParams.get('artistName') || undefined}
/>
<SongListContent
itemCount={itemCount}
tableRef={tableRef}
/>
</SongListContext.Provider>
</AnimatedPage>
);
};