Add song list functionality
This commit is contained in:
parent
c7f588539d
commit
8a42a1bc6c
7 changed files with 851 additions and 322 deletions
133
src/renderer/features/songs/components/jellyfin-song-filters.tsx
Normal file
133
src/renderer/features/songs/components/jellyfin-song-filters.tsx
Normal file
|
@ -0,0 +1,133 @@
|
||||||
|
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 debounce from 'lodash/debounce';
|
||||||
|
import { useGenreList } from '/@/renderer/features/genres';
|
||||||
|
|
||||||
|
interface JellyfinSongFiltersProps {
|
||||||
|
handleFilterChange: (filters: SongListFilter) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersProps) => {
|
||||||
|
const { filter } = useSongListStore();
|
||||||
|
const setFilters = useSetSongFilters();
|
||||||
|
|
||||||
|
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
|
||||||
|
const genreListQuery = useGenreList(null);
|
||||||
|
|
||||||
|
const genreList = useMemo(() => {
|
||||||
|
if (!genreListQuery?.data) return [];
|
||||||
|
return genreListQuery.data.map((genre) => ({
|
||||||
|
label: genre.name,
|
||||||
|
value: genre.id,
|
||||||
|
}));
|
||||||
|
}, [genreListQuery.data]);
|
||||||
|
|
||||||
|
const selectedGenres = useMemo(() => {
|
||||||
|
return filter.jfParams?.genreIds?.split(',');
|
||||||
|
}, [filter.jfParams?.genreIds]);
|
||||||
|
|
||||||
|
const toggleFilters = [
|
||||||
|
{
|
||||||
|
label: 'Is favorited',
|
||||||
|
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const updatedFilters = setFilters({
|
||||||
|
jfParams: {
|
||||||
|
...filter.jfParams,
|
||||||
|
includeItemTypes: 'Audio',
|
||||||
|
isFavorite: e.currentTarget.checked ? true : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
},
|
||||||
|
value: filter.jfParams?.isFavorite,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleMinYearFilter = debounce((e: number | undefined) => {
|
||||||
|
if (e && (e < 1700 || e > 2300)) return;
|
||||||
|
const updatedFilters = setFilters({
|
||||||
|
jfParams: {
|
||||||
|
...filter.jfParams,
|
||||||
|
includeItemTypes: 'Audio',
|
||||||
|
minYear: e,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
const handleMaxYearFilter = debounce((e: number | undefined) => {
|
||||||
|
if (e && (e < 1700 || e > 2300)) return;
|
||||||
|
const updatedFilters = setFilters({
|
||||||
|
jfParams: {
|
||||||
|
...filter.jfParams,
|
||||||
|
includeItemTypes: 'Audio',
|
||||||
|
maxYear: e,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
}, 250);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack p="0.8rem">
|
||||||
|
{toggleFilters.map((filter) => (
|
||||||
|
<Group
|
||||||
|
key={`nd-filter-${filter.label}`}
|
||||||
|
position="apart"
|
||||||
|
>
|
||||||
|
<Text>{filter.label}</Text>
|
||||||
|
<Switch
|
||||||
|
checked={filter?.value || false}
|
||||||
|
onChange={filter.onChange}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
))}
|
||||||
|
<Divider my="0.5rem" />
|
||||||
|
<Group position="apart">
|
||||||
|
<Text>Year range</Text>
|
||||||
|
<Group>
|
||||||
|
<NumberInput
|
||||||
|
required
|
||||||
|
max={2300}
|
||||||
|
min={1700}
|
||||||
|
value={filter.jfParams?.minYear}
|
||||||
|
width={60}
|
||||||
|
onChange={handleMinYearFilter}
|
||||||
|
/>
|
||||||
|
<NumberInput
|
||||||
|
max={2300}
|
||||||
|
min={1700}
|
||||||
|
value={filter.jfParams?.maxYear}
|
||||||
|
width={60}
|
||||||
|
onChange={handleMaxYearFilter}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
</Group>
|
||||||
|
<Divider my="0.5rem" />
|
||||||
|
<Stack>
|
||||||
|
<Text>Genres</Text>
|
||||||
|
<MultiSelect
|
||||||
|
clearable
|
||||||
|
searchable
|
||||||
|
data={genreList}
|
||||||
|
defaultValue={selectedGenres}
|
||||||
|
width={250}
|
||||||
|
onChange={handleGenresFilter}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,68 @@
|
||||||
|
import { ChangeEvent } from 'react';
|
||||||
|
import { Divider, Group, Stack } from '@mantine/core';
|
||||||
|
import { NumberInput, Switch, Text } from '/@/renderer/components';
|
||||||
|
import { SongListFilter, useSetSongFilters, useSongListStore } from '/@/renderer/store';
|
||||||
|
import debounce from 'lodash/debounce';
|
||||||
|
|
||||||
|
interface NavidromeSongFiltersProps {
|
||||||
|
handleFilterChange: (filters: SongListFilter) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFiltersProps) => {
|
||||||
|
const { filter } = useSongListStore();
|
||||||
|
const setFilters = useSetSongFilters();
|
||||||
|
|
||||||
|
const toggleFilters = [
|
||||||
|
{
|
||||||
|
label: 'Is favorited',
|
||||||
|
onChange: (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const updatedFilters = setFilters({
|
||||||
|
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
|
||||||
|
});
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
},
|
||||||
|
value: filter.ndParams?.starred,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleYearFilter = debounce((e: number | undefined) => {
|
||||||
|
const updatedFilters = setFilters({
|
||||||
|
ndParams: {
|
||||||
|
...filter.ndParams,
|
||||||
|
year: e,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack p="0.8rem">
|
||||||
|
{toggleFilters.map((filter) => (
|
||||||
|
<Group
|
||||||
|
key={`nd-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 position="apart">
|
||||||
|
<Text>Year</Text>
|
||||||
|
<NumberInput
|
||||||
|
max={5000}
|
||||||
|
min={0}
|
||||||
|
size="xs"
|
||||||
|
value={filter.ndParams?.year}
|
||||||
|
width={50}
|
||||||
|
onChange={handleYearFilter}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
207
src/renderer/features/songs/components/song-list-content.tsx
Normal file
207
src/renderer/features/songs/components/song-list-content.tsx
Normal file
|
@ -0,0 +1,207 @@
|
||||||
|
import { MutableRefObject, useCallback, useMemo } from 'react';
|
||||||
|
import type {
|
||||||
|
BodyScrollEvent,
|
||||||
|
ColDef,
|
||||||
|
GridReadyEvent,
|
||||||
|
IDatasource,
|
||||||
|
PaginationChangedEvent,
|
||||||
|
} from '@ag-grid-community/core';
|
||||||
|
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||||
|
import { Stack } from '@mantine/core';
|
||||||
|
import { useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { api } from '/@/renderer/api';
|
||||||
|
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||||
|
import {
|
||||||
|
getColumnDefs,
|
||||||
|
TablePagination,
|
||||||
|
VirtualGridAutoSizerContainer,
|
||||||
|
VirtualTable,
|
||||||
|
} from '/@/renderer/components';
|
||||||
|
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
|
||||||
|
import {
|
||||||
|
useCurrentServer,
|
||||||
|
useSetSongTable,
|
||||||
|
useSetSongTablePagination,
|
||||||
|
useSongListStore,
|
||||||
|
useSongTablePagination,
|
||||||
|
} from '/@/renderer/store';
|
||||||
|
import { ListDisplayType } from '/@/renderer/types';
|
||||||
|
import { AnimatePresence } from 'framer-motion';
|
||||||
|
import debounce from 'lodash/debounce';
|
||||||
|
|
||||||
|
interface SongListContentProps {
|
||||||
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SongListContent = ({ tableRef }: SongListContentProps) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const server = useCurrentServer();
|
||||||
|
const page = useSongListStore();
|
||||||
|
|
||||||
|
const pagination = useSongTablePagination();
|
||||||
|
const setPagination = useSetSongTablePagination();
|
||||||
|
const setTable = useSetSongTable();
|
||||||
|
|
||||||
|
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
|
||||||
|
|
||||||
|
const checkSongList = useSongList({
|
||||||
|
limit: 1,
|
||||||
|
startIndex: 0,
|
||||||
|
...page.filter,
|
||||||
|
});
|
||||||
|
|
||||||
|
const columnDefs = useMemo(() => getColumnDefs(page.table.columns), [page.table.columns]);
|
||||||
|
|
||||||
|
const defaultColumnDefs: ColDef = useMemo(() => {
|
||||||
|
return {
|
||||||
|
lockPinned: true,
|
||||||
|
lockVisible: true,
|
||||||
|
resizable: true,
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onGridReady = useCallback(
|
||||||
|
(params: GridReadyEvent) => {
|
||||||
|
const dataSource: IDatasource = {
|
||||||
|
getRows: async (params) => {
|
||||||
|
const limit = params.endRow - params.startRow;
|
||||||
|
const startIndex = params.startRow;
|
||||||
|
|
||||||
|
const queryKey = queryKeys.songs.list(server?.id || '', {
|
||||||
|
limit,
|
||||||
|
startIndex,
|
||||||
|
...page.filter,
|
||||||
|
});
|
||||||
|
|
||||||
|
const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
||||||
|
api.controller.getSongList({
|
||||||
|
query: {
|
||||||
|
limit,
|
||||||
|
startIndex,
|
||||||
|
...page.filter,
|
||||||
|
},
|
||||||
|
server,
|
||||||
|
signal,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const songs = api.normalize.songList(songsRes, server);
|
||||||
|
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
|
||||||
|
},
|
||||||
|
rowCount: undefined,
|
||||||
|
};
|
||||||
|
params.api.setDatasource(dataSource);
|
||||||
|
params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
|
||||||
|
},
|
||||||
|
[page.filter, page.table.scrollOffset, queryClient, server],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onPaginationChanged = useCallback(
|
||||||
|
(event: PaginationChangedEvent) => {
|
||||||
|
if (!isPaginationEnabled || !event.api) return;
|
||||||
|
|
||||||
|
// Scroll to top of page on pagination change
|
||||||
|
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
|
||||||
|
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
|
||||||
|
|
||||||
|
setPagination({
|
||||||
|
itemsPerPage: event.api.paginationGetPageSize(),
|
||||||
|
totalItems: event.api.paginationGetRowCount(),
|
||||||
|
totalPages: event.api.paginationGetTotalPages() + 1,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleGridSizeChange = () => {
|
||||||
|
if (page.table.autoFit) {
|
||||||
|
tableRef?.current?.api.sizeColumnsToFit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleColumnMove = useCallback(() => {
|
||||||
|
const { columnApi } = tableRef?.current || {};
|
||||||
|
const columnsOrder = columnApi?.getAllGridColumns();
|
||||||
|
|
||||||
|
if (!columnsOrder) return;
|
||||||
|
|
||||||
|
const columnsInSettings = page.table.columns;
|
||||||
|
const updatedColumns = [];
|
||||||
|
for (const column of columnsOrder) {
|
||||||
|
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
|
||||||
|
|
||||||
|
if (columnInSettings) {
|
||||||
|
updatedColumns.push({
|
||||||
|
...columnInSettings,
|
||||||
|
...(!page.table.autoFit && {
|
||||||
|
width: column.getColDef().width,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTable({ columns: updatedColumns });
|
||||||
|
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
|
||||||
|
|
||||||
|
const handleScroll = debounce((e: BodyScrollEvent) => {
|
||||||
|
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
|
||||||
|
setTable({ scrollOffset });
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
h="100%"
|
||||||
|
spacing={0}
|
||||||
|
>
|
||||||
|
<VirtualGridAutoSizerContainer>
|
||||||
|
<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}`}
|
||||||
|
ref={tableRef}
|
||||||
|
alwaysShowHorizontalScroll
|
||||||
|
animateRows
|
||||||
|
maintainColumnOrder
|
||||||
|
suppressCopyRowsToClipboard
|
||||||
|
suppressMoveWhenRowDragging
|
||||||
|
suppressPaginationPanel
|
||||||
|
suppressRowDrag
|
||||||
|
suppressScrollOnNewData
|
||||||
|
blockLoadDebounceMillis={200}
|
||||||
|
cacheBlockSize={500}
|
||||||
|
cacheOverflowSize={1}
|
||||||
|
columnDefs={columnDefs}
|
||||||
|
defaultColDef={defaultColumnDefs}
|
||||||
|
enableCellChangeFlash={false}
|
||||||
|
getRowId={(data) => data.data.uniqueId}
|
||||||
|
infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 10}
|
||||||
|
pagination={isPaginationEnabled}
|
||||||
|
paginationAutoPageSize={isPaginationEnabled}
|
||||||
|
rowBuffer={20}
|
||||||
|
rowHeight={page.table.rowHeight || 40}
|
||||||
|
rowModelType="infinite"
|
||||||
|
rowSelection="multiple"
|
||||||
|
// onBodyScroll={handleScroll}
|
||||||
|
onBodyScrollEnd={handleScroll}
|
||||||
|
onCellContextMenu={(e) => console.log('context', e)}
|
||||||
|
onColumnMoved={handleColumnMove}
|
||||||
|
onGridReady={onGridReady}
|
||||||
|
onGridSizeChanged={handleGridSizeChange}
|
||||||
|
onPaginationChanged={onPaginationChanged}
|
||||||
|
/>
|
||||||
|
</VirtualGridAutoSizerContainer>
|
||||||
|
<AnimatePresence
|
||||||
|
presenceAffectsLayout
|
||||||
|
mode="wait"
|
||||||
|
>
|
||||||
|
{page.display === ListDisplayType.TABLE_PAGINATED && (
|
||||||
|
<TablePagination
|
||||||
|
pagination={pagination}
|
||||||
|
setPagination={setPagination}
|
||||||
|
tableRef={tableRef}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,40 +1,76 @@
|
||||||
import type { MouseEvent } from 'react';
|
import type { IDatasource } from '@ag-grid-community/core';
|
||||||
import { useCallback } from 'react';
|
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||||
import { Group } from '@mantine/core';
|
import { Flex, Group } from '@mantine/core';
|
||||||
import { Button, Slider, PageHeader, DropdownMenu } from '/@/renderer/components';
|
import debounce from 'lodash/debounce';
|
||||||
import throttle from 'lodash/throttle';
|
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
|
||||||
import { RiArrowDownSLine } from 'react-icons/ri';
|
import {
|
||||||
import { SongListSort, SortOrder } from '/@/renderer/api/types';
|
RiArrowDownSLine,
|
||||||
import { useCurrentServer, useAppStoreActions, useSongRouteStore } from '/@/renderer/store';
|
RiFilter3Line,
|
||||||
import { CardDisplayType } from '/@/renderer/types';
|
RiFolder2Line,
|
||||||
|
RiMoreFill,
|
||||||
|
RiSortAsc,
|
||||||
|
RiSortDesc,
|
||||||
|
} from 'react-icons/ri';
|
||||||
|
import { api } from '/@/renderer/api';
|
||||||
|
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||||
|
import { ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
DropdownMenu,
|
||||||
|
PageHeader,
|
||||||
|
SearchInput,
|
||||||
|
Slider,
|
||||||
|
TextTitle,
|
||||||
|
Switch,
|
||||||
|
MultiSelect,
|
||||||
|
Text,
|
||||||
|
SONG_TABLE_COLUMNS,
|
||||||
|
} from '/@/renderer/components';
|
||||||
|
import { useMusicFolders } from '/@/renderer/features/shared';
|
||||||
|
import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
|
||||||
|
import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
|
||||||
|
import { useContainerQuery } from '/@/renderer/hooks';
|
||||||
|
import { queryClient } from '/@/renderer/lib/react-query';
|
||||||
|
import {
|
||||||
|
SongListFilter,
|
||||||
|
useCurrentServer,
|
||||||
|
useSetSongFilters,
|
||||||
|
useSetSongStore,
|
||||||
|
useSetSongTable,
|
||||||
|
useSetSongTablePagination,
|
||||||
|
useSongListStore,
|
||||||
|
} from '/@/renderer/store';
|
||||||
|
import { ListDisplayType, TableColumn } from '/@/renderer/types';
|
||||||
|
|
||||||
const FILTERS = {
|
const FILTERS = {
|
||||||
jellyfin: [
|
jellyfin: [
|
||||||
{ name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||||
{ name: 'Artist', value: SongListSort.ARTIST },
|
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||||
{ name: 'Duration', value: SongListSort.DURATION },
|
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||||
{ name: 'Name', value: SongListSort.NAME },
|
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
|
||||||
{ name: 'Name', value: SongListSort.PLAY_COUNT },
|
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
|
||||||
{ name: 'Random', value: SongListSort.RANDOM },
|
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||||
{ name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
|
||||||
{ name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||||
{ name: 'Release Date', value: SongListSort.RELEASE_DATE },
|
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||||
|
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
|
||||||
],
|
],
|
||||||
navidrome: [
|
navidrome: [
|
||||||
{ name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||||
{ name: 'Artist', value: SongListSort.ARTIST },
|
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||||
{ name: 'BPM', value: SongListSort.BPM },
|
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||||
{ name: 'Channels', value: SongListSort.CHANNELS },
|
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
|
||||||
{ name: 'Comment', value: SongListSort.COMMENT },
|
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
|
||||||
{ name: 'Duration', value: SongListSort.DURATION },
|
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
|
||||||
{ name: 'Favorited', value: SongListSort.FAVORITED },
|
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
|
||||||
{ name: 'Genre', value: SongListSort.GENRE },
|
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
|
||||||
{ name: 'Name', value: SongListSort.NAME },
|
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
|
||||||
{ name: 'Play Count', value: SongListSort.PLAY_COUNT },
|
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||||
{ name: 'Rating', value: SongListSort.RATING },
|
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
|
||||||
{ name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
|
||||||
{ name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||||
{ name: 'Year', value: SongListSort.YEAR },
|
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||||
|
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -43,219 +79,363 @@ const ORDER = [
|
||||||
{ name: 'Descending', value: SortOrder.DESC },
|
{ name: 'Descending', value: SortOrder.DESC },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const SongListHeader = () => {
|
interface SongListHeaderProps {
|
||||||
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
|
||||||
const server = useCurrentServer();
|
const server = useCurrentServer();
|
||||||
const { setPage } = useAppStoreActions();
|
const page = useSongListStore();
|
||||||
const page = useSongRouteStore();
|
const setPage = useSetSongStore();
|
||||||
const filters = page.list.filter;
|
const setFilter = useSetSongFilters();
|
||||||
|
const setTable = useSetSongTable();
|
||||||
|
const cq = useContainerQuery();
|
||||||
|
|
||||||
|
const musicFoldersQuery = useMusicFolders();
|
||||||
|
|
||||||
const sortByLabel =
|
const sortByLabel =
|
||||||
(server?.type &&
|
(server?.type &&
|
||||||
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
|
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
|
||||||
(f) => f.value === filters.sortBy,
|
(f) => f.value === page.filter.sortBy,
|
||||||
)?.name) ||
|
)?.name) ||
|
||||||
'Unknown';
|
'Unknown';
|
||||||
|
|
||||||
const sortOrderLabel = ORDER.find((s) => s.value === filters.sortOrder)?.name;
|
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
|
||||||
|
|
||||||
const setSize = throttle(
|
const handleFilterChange = useCallback(
|
||||||
(e: number) =>
|
async (filters?: SongListFilter) => {
|
||||||
setPage('songs', {
|
const dataSource: IDatasource = {
|
||||||
...page,
|
getRows: async (params) => {
|
||||||
list: { ...page.list, size: e },
|
const limit = params.endRow - params.startRow;
|
||||||
}),
|
const startIndex = params.startRow;
|
||||||
200,
|
|
||||||
|
const pageFilters = filters || page.filter;
|
||||||
|
|
||||||
|
const queryKey = queryKeys.songs.list(server?.id || '', {
|
||||||
|
limit,
|
||||||
|
startIndex,
|
||||||
|
...pageFilters,
|
||||||
|
});
|
||||||
|
|
||||||
|
const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
||||||
|
api.controller.getSongList({
|
||||||
|
query: {
|
||||||
|
limit,
|
||||||
|
startIndex,
|
||||||
|
...pageFilters,
|
||||||
|
},
|
||||||
|
server,
|
||||||
|
signal,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const songs = api.normalize.songList(songsRes, server);
|
||||||
|
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
|
||||||
|
},
|
||||||
|
rowCount: undefined,
|
||||||
|
};
|
||||||
|
tableRef.current?.api.setDatasource(dataSource);
|
||||||
|
tableRef.current?.api.purgeInfiniteCache();
|
||||||
|
tableRef.current?.api.ensureIndexVisible(0, 'top');
|
||||||
|
},
|
||||||
|
[page.filter, server, tableRef],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleSetFilter = useCallback(
|
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;
|
||||||
|
|
||||||
|
const updatedFilters = setFilter({
|
||||||
|
sortBy: e.currentTarget.value as SongListSort,
|
||||||
|
sortOrder: sortOrder || SortOrder.ASC,
|
||||||
|
});
|
||||||
|
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
},
|
||||||
|
[handleFilterChange, server?.type, setFilter],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSetMusicFolder = useCallback(
|
||||||
(e: MouseEvent<HTMLButtonElement>) => {
|
(e: MouseEvent<HTMLButtonElement>) => {
|
||||||
if (!e.currentTarget?.value) return;
|
if (!e.currentTarget?.value) return;
|
||||||
setPage('songs', {
|
|
||||||
list: {
|
let updatedFilters = null;
|
||||||
...page.list,
|
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
|
||||||
filter: {
|
updatedFilters = setFilter({ musicFolderId: undefined });
|
||||||
...page.list.filter,
|
} else {
|
||||||
sortBy: e.currentTarget.value as SongListSort,
|
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
|
||||||
},
|
}
|
||||||
},
|
|
||||||
});
|
handleFilterChange(updatedFilters);
|
||||||
},
|
},
|
||||||
[page.list, setPage],
|
[handleFilterChange, page.filter.musicFolderId, setFilter],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleSetOrder = useCallback(
|
const handleToggleSortOrder = useCallback(() => {
|
||||||
(e: MouseEvent<HTMLButtonElement>) => {
|
const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
|
||||||
if (!e.currentTarget?.value) return;
|
const updatedFilters = setFilter({ sortOrder: newSortOrder });
|
||||||
setPage('songs', {
|
handleFilterChange(updatedFilters);
|
||||||
list: {
|
}, [page.filter.sortOrder, handleFilterChange, setFilter]);
|
||||||
...page.list,
|
|
||||||
filter: {
|
const setPagination = useSetSongTablePagination();
|
||||||
...page.list.filter,
|
|
||||||
sortOrder: e.currentTarget.value as SortOrder,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[page.list, setPage],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSetViewType = useCallback(
|
const handleSetViewType = useCallback(
|
||||||
(e: MouseEvent<HTMLButtonElement>) => {
|
(e: MouseEvent<HTMLButtonElement>) => {
|
||||||
if (!e.currentTarget?.value) return;
|
if (!e.currentTarget?.value) return;
|
||||||
const type = e.currentTarget.value;
|
const display = e.currentTarget.value as ListDisplayType;
|
||||||
if (type === CardDisplayType.CARD) {
|
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
|
||||||
setPage('songs', {
|
|
||||||
...page,
|
if (display === ListDisplayType.TABLE) {
|
||||||
list: {
|
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
|
||||||
...page.list,
|
setPagination({ currentPage: 0 });
|
||||||
display: CardDisplayType.CARD,
|
} else if (display === ListDisplayType.TABLE_PAGINATED) {
|
||||||
type: 'grid',
|
setPagination({ currentPage: 0 });
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (type === CardDisplayType.POSTER) {
|
|
||||||
setPage('songs', {
|
|
||||||
...page,
|
|
||||||
list: {
|
|
||||||
...page.list,
|
|
||||||
display: CardDisplayType.POSTER,
|
|
||||||
type: 'grid',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setPage('songs', {
|
|
||||||
...page,
|
|
||||||
list: {
|
|
||||||
...page.list,
|
|
||||||
type: 'list',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[page, setPage],
|
[page, setPage, setPagination, tableRef],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const updatedFilters = setFilter({
|
||||||
|
searchTerm: e.target.value === '' ? undefined : e.target.value,
|
||||||
|
});
|
||||||
|
handleFilterChange(updatedFilters);
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
const handleTableColumns = (values: TableColumn[]) => {
|
||||||
|
const existingColumns = page.table.columns;
|
||||||
|
|
||||||
|
if (values.length === 0) {
|
||||||
|
return setTable({
|
||||||
|
columns: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// If adding a column
|
||||||
|
if (values.length > existingColumns.length) {
|
||||||
|
const newColumn = { column: values[values.length - 1], width: 100 };
|
||||||
|
|
||||||
|
return setTable({ columns: [...existingColumns, newColumn] });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setTable({ autoFit: e.currentTarget.checked });
|
||||||
|
|
||||||
|
if (e.currentTarget.checked) {
|
||||||
|
tableRef.current?.api.sizeColumnsToFit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowHeight = (e: number) => {
|
||||||
|
setTable({ rowHeight: e });
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageHeader>
|
<PageHeader>
|
||||||
<Group>
|
<Flex
|
||||||
<DropdownMenu
|
ref={cq.ref}
|
||||||
position="bottom-end"
|
direction="row"
|
||||||
width={100}
|
justify="space-between"
|
||||||
|
>
|
||||||
|
<Flex
|
||||||
|
align="center"
|
||||||
|
gap="md"
|
||||||
|
justify="center"
|
||||||
>
|
>
|
||||||
<DropdownMenu.Target>
|
<DropdownMenu position="bottom-start">
|
||||||
<Button
|
<DropdownMenu.Target>
|
||||||
compact
|
<Button
|
||||||
rightIcon={<RiArrowDownSLine size={15} />}
|
compact
|
||||||
size="xl"
|
rightIcon={<RiArrowDownSLine size={15} />}
|
||||||
sx={{ paddingLeft: 0, paddingRight: 0 }}
|
size="xl"
|
||||||
variant="subtle"
|
sx={{ paddingLeft: 0, paddingRight: 0 }}
|
||||||
>
|
variant="subtle"
|
||||||
Tracks
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Target>
|
|
||||||
<DropdownMenu.Dropdown>
|
|
||||||
<DropdownMenu.Item>
|
|
||||||
<Slider
|
|
||||||
defaultValue={page.list?.size || 0}
|
|
||||||
label={null}
|
|
||||||
onChange={setSize}
|
|
||||||
/>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Divider />
|
|
||||||
<DropdownMenu.Item
|
|
||||||
$isActive={page.list.type === 'grid' && page.list.display === CardDisplayType.CARD}
|
|
||||||
value={CardDisplayType.CARD}
|
|
||||||
onClick={handleSetViewType}
|
|
||||||
>
|
|
||||||
Card
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
$isActive={page.list.type === 'grid' && page.list.display === CardDisplayType.POSTER}
|
|
||||||
value={CardDisplayType.POSTER}
|
|
||||||
onClick={handleSetViewType}
|
|
||||||
>
|
|
||||||
Poster
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item
|
|
||||||
disabled
|
|
||||||
$isActive={page.list.type === 'list'}
|
|
||||||
value="list"
|
|
||||||
onClick={handleSetViewType}
|
|
||||||
>
|
|
||||||
List
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Dropdown>
|
|
||||||
</DropdownMenu>
|
|
||||||
<DropdownMenu position="bottom-start">
|
|
||||||
<DropdownMenu.Target>
|
|
||||||
<Button
|
|
||||||
compact
|
|
||||||
fw="normal"
|
|
||||||
variant="subtle"
|
|
||||||
>
|
|
||||||
{sortByLabel}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Target>
|
|
||||||
<DropdownMenu.Dropdown>
|
|
||||||
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
|
|
||||||
<DropdownMenu.Item
|
|
||||||
key={`filter-${filter.name}`}
|
|
||||||
$isActive={filter.value === filters.sortBy}
|
|
||||||
value={filter.value}
|
|
||||||
onClick={handleSetFilter}
|
|
||||||
>
|
>
|
||||||
{filter.name}
|
<TextTitle
|
||||||
</DropdownMenu.Item>
|
fw="bold"
|
||||||
))}
|
order={3}
|
||||||
</DropdownMenu.Dropdown>
|
>
|
||||||
</DropdownMenu>
|
Tracks
|
||||||
<DropdownMenu position="bottom-start">
|
</TextTitle>
|
||||||
<DropdownMenu.Target>
|
</Button>
|
||||||
<Button
|
</DropdownMenu.Target>
|
||||||
compact
|
<DropdownMenu.Dropdown>
|
||||||
fw="normal"
|
<DropdownMenu.Label>Display type</DropdownMenu.Label>
|
||||||
variant="subtle"
|
|
||||||
>
|
|
||||||
{sortOrderLabel}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Target>
|
|
||||||
<DropdownMenu.Dropdown>
|
|
||||||
{ORDER.map((sort) => (
|
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
key={`sort-${sort.value}`}
|
$isActive={page.display === ListDisplayType.TABLE}
|
||||||
$isActive={sort.value === filters.sortOrder}
|
value={ListDisplayType.TABLE}
|
||||||
value={sort.value}
|
onClick={handleSetViewType}
|
||||||
onClick={handleSetOrder}
|
|
||||||
>
|
>
|
||||||
{sort.name}
|
Table
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
))}
|
<DropdownMenu.Item
|
||||||
</DropdownMenu.Dropdown>
|
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
|
||||||
</DropdownMenu>
|
value={ListDisplayType.TABLE_PAGINATED}
|
||||||
<DropdownMenu position="bottom-start">
|
onClick={handleSetViewType}
|
||||||
<DropdownMenu.Target>
|
>
|
||||||
<Button
|
Table (paginated)
|
||||||
compact
|
</DropdownMenu.Item>
|
||||||
fw="normal"
|
<DropdownMenu.Divider />
|
||||||
variant="subtle"
|
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
|
||||||
>
|
<DropdownMenu.Item closeMenuOnClick={false}>
|
||||||
Folder
|
<Slider
|
||||||
</Button>
|
defaultValue={page.table.rowHeight || 0}
|
||||||
</DropdownMenu.Target>
|
label={null}
|
||||||
{/* <DropdownMenu.Dropdown>
|
max={100}
|
||||||
{serverFolders?.map((folder) => (
|
min={25}
|
||||||
<DropdownMenu.Item
|
onChangeEnd={handleRowHeight}
|
||||||
key={folder.id}
|
/>
|
||||||
$isActive={filters.serverFolderId.includes(folder.id)}
|
</DropdownMenu.Item>
|
||||||
closeMenuOnClick={false}
|
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
|
||||||
value={folder.id}
|
<DropdownMenu.Item
|
||||||
onClick={handleSetServerFolder}
|
closeMenuOnClick={false}
|
||||||
>
|
component="div"
|
||||||
{folder.name}
|
sx={{ cursor: 'default' }}
|
||||||
</DropdownMenu.Item>
|
>
|
||||||
))}
|
<MultiSelect
|
||||||
</DropdownMenu.Dropdown> */}
|
clearable
|
||||||
</DropdownMenu>
|
data={SONG_TABLE_COLUMNS}
|
||||||
</Group>
|
defaultValue={page.table?.columns.map((column) => column.column)}
|
||||||
|
width={300}
|
||||||
|
onChange={handleTableColumns}
|
||||||
|
/>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
closeMenuOnClick={false}
|
||||||
|
component="div"
|
||||||
|
sx={{ cursor: 'default' }}
|
||||||
|
>
|
||||||
|
<Group position="apart">
|
||||||
|
<Text>Auto Fit Columns</Text>
|
||||||
|
<Switch
|
||||||
|
defaultChecked={page.table.autoFit}
|
||||||
|
onChange={handleAutoFitColumns}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Dropdown>
|
||||||
|
</DropdownMenu>
|
||||||
|
<DropdownMenu position="bottom-start">
|
||||||
|
<DropdownMenu.Target>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
fw="600"
|
||||||
|
variant="subtle"
|
||||||
|
>
|
||||||
|
{sortByLabel}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Target>
|
||||||
|
<DropdownMenu.Dropdown>
|
||||||
|
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
|
||||||
|
<DropdownMenu.Item
|
||||||
|
key={`filter-${filter.name}`}
|
||||||
|
$isActive={filter.value === page.filter.sortBy}
|
||||||
|
value={filter.value}
|
||||||
|
onClick={handleSetSortBy}
|
||||||
|
>
|
||||||
|
{filter.name}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
))}
|
||||||
|
</DropdownMenu.Dropdown>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
fw="600"
|
||||||
|
variant="subtle"
|
||||||
|
onClick={handleToggleSortOrder}
|
||||||
|
>
|
||||||
|
{cq.isMd ? (
|
||||||
|
sortOrderLabel
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{page.filter.sortOrder === SortOrder.ASC ? (
|
||||||
|
<RiSortAsc size={15} />
|
||||||
|
) : (
|
||||||
|
<RiSortDesc size={15} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{server?.type === ServerType.JELLYFIN && (
|
||||||
|
<DropdownMenu position="bottom-start">
|
||||||
|
<DropdownMenu.Target>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
fw="600"
|
||||||
|
variant="subtle"
|
||||||
|
>
|
||||||
|
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Target>
|
||||||
|
<DropdownMenu.Dropdown>
|
||||||
|
{musicFoldersQuery.data?.map((folder) => (
|
||||||
|
<DropdownMenu.Item
|
||||||
|
key={`musicFolder-${folder.id}`}
|
||||||
|
$isActive={page.filter.musicFolderId === folder.id}
|
||||||
|
value={folder.id}
|
||||||
|
onClick={handleSetMusicFolder}
|
||||||
|
>
|
||||||
|
{folder.name}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
))}
|
||||||
|
</DropdownMenu.Dropdown>
|
||||||
|
</DropdownMenu>
|
||||||
|
)}
|
||||||
|
<DropdownMenu position="bottom-start">
|
||||||
|
<DropdownMenu.Target>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
fw="600"
|
||||||
|
variant="subtle"
|
||||||
|
>
|
||||||
|
{cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Target>
|
||||||
|
<DropdownMenu.Dropdown>
|
||||||
|
{server?.type === ServerType.NAVIDROME ? (
|
||||||
|
<NavidromeSongFilters handleFilterChange={handleFilterChange} />
|
||||||
|
) : (
|
||||||
|
<JellyfinSongFilters handleFilterChange={handleFilterChange} />
|
||||||
|
)}
|
||||||
|
</DropdownMenu.Dropdown>
|
||||||
|
</DropdownMenu>
|
||||||
|
<DropdownMenu position="bottom-start">
|
||||||
|
<DropdownMenu.Target>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
fw="600"
|
||||||
|
variant="subtle"
|
||||||
|
>
|
||||||
|
<RiMoreFill size={15} />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Target>
|
||||||
|
<DropdownMenu.Dropdown>
|
||||||
|
<DropdownMenu.Item disabled>Play</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item disabled>Play last</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item disabled>Play next</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Dropdown>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Flex>
|
||||||
|
<Flex gap="md">
|
||||||
|
<SearchInput
|
||||||
|
defaultValue={page.filter.searchTerm}
|
||||||
|
openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
|
||||||
|
onChange={handleSearch}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,113 +1,18 @@
|
||||||
import { useCallback, useMemo } from 'react';
|
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||||
import {
|
import { useRef } from 'react';
|
||||||
VirtualGridContainer,
|
import { VirtualGridContainer } from '/@/renderer/components';
|
||||||
VirtualGridAutoSizerContainer,
|
|
||||||
VirtualTable,
|
|
||||||
getColumnDefs,
|
|
||||||
} from '/@/renderer/components';
|
|
||||||
import type { ColDef, GridReadyEvent, IDatasource } from '@ag-grid-community/core';
|
|
||||||
import { AnimatedPage } from '/@/renderer/features/shared';
|
import { AnimatedPage } from '/@/renderer/features/shared';
|
||||||
import { useTableSettings } from '/@/renderer/store/settings.store';
|
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
|
||||||
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
|
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
|
||||||
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
|
|
||||||
import { SongListSort, SortOrder } from '/@/renderer/api/types';
|
|
||||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
|
||||||
import { useCurrentServer, useSongRouteStore } from '/@/renderer/store';
|
|
||||||
import { controller } from '/@/renderer/api/controller';
|
|
||||||
import { api } from '/@/renderer/api';
|
|
||||||
import { useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
const TrackListRoute = () => {
|
const TrackListRoute = () => {
|
||||||
const queryClient = useQueryClient();
|
const tableRef = useRef<AgGridReactType | null>(null);
|
||||||
const server = useCurrentServer();
|
|
||||||
const page = useSongRouteStore();
|
|
||||||
const filters = page.list.filter;
|
|
||||||
const tableConfig = useTableSettings('songs');
|
|
||||||
|
|
||||||
const checkSongList = useSongList({
|
|
||||||
limit: 1,
|
|
||||||
sortBy: SongListSort.NAME,
|
|
||||||
sortOrder: SortOrder.ASC,
|
|
||||||
startIndex: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
|
|
||||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
|
||||||
return {
|
|
||||||
lockPinned: true,
|
|
||||||
lockVisible: true,
|
|
||||||
resizable: true,
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onGridReady = useCallback(
|
|
||||||
(params: GridReadyEvent) => {
|
|
||||||
const dataSource: IDatasource = {
|
|
||||||
getRows: async (params) => {
|
|
||||||
const limit = params.endRow - params.startRow;
|
|
||||||
const startIndex = params.startRow;
|
|
||||||
|
|
||||||
const queryKey = queryKeys.songs.list(server?.id || '', {
|
|
||||||
limit,
|
|
||||||
startIndex,
|
|
||||||
...filters,
|
|
||||||
});
|
|
||||||
|
|
||||||
const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
|
||||||
controller.getSongList({
|
|
||||||
query: {
|
|
||||||
limit,
|
|
||||||
sortBy: filters.sortBy,
|
|
||||||
sortOrder: filters.sortOrder,
|
|
||||||
startIndex,
|
|
||||||
},
|
|
||||||
server,
|
|
||||||
signal,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const songs = api.normalize.songList(songsRes, server);
|
|
||||||
|
|
||||||
params.successCallback(songs?.items || [], -1);
|
|
||||||
},
|
|
||||||
rowCount: undefined,
|
|
||||||
};
|
|
||||||
params.api.setDatasource(dataSource);
|
|
||||||
},
|
|
||||||
[filters, queryClient, server],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatedPage>
|
<AnimatedPage>
|
||||||
<VirtualGridContainer>
|
<VirtualGridContainer>
|
||||||
<SongListHeader />
|
<SongListHeader tableRef={tableRef} />
|
||||||
<VirtualGridAutoSizerContainer>
|
<SongListContent tableRef={tableRef} />
|
||||||
{!checkSongList.isLoading && (
|
|
||||||
<VirtualTable
|
|
||||||
alwaysShowHorizontalScroll
|
|
||||||
animateRows
|
|
||||||
maintainColumnOrder
|
|
||||||
suppressCopyRowsToClipboard
|
|
||||||
suppressMoveWhenRowDragging
|
|
||||||
suppressRowDrag
|
|
||||||
suppressScrollOnNewData
|
|
||||||
blockLoadDebounceMillis={200}
|
|
||||||
cacheBlockSize={500}
|
|
||||||
cacheOverflowSize={1}
|
|
||||||
columnDefs={columnDefs}
|
|
||||||
defaultColDef={defaultColumnDefs}
|
|
||||||
enableCellChangeFlash={false}
|
|
||||||
getRowId={(data) => data.data.uniqueId}
|
|
||||||
infiniteInitialRowCount={checkSongList.data?.totalRecordCount}
|
|
||||||
rowBuffer={20}
|
|
||||||
rowHeight={tableConfig.rowHeight || 40}
|
|
||||||
rowModelType="infinite"
|
|
||||||
rowSelection="multiple"
|
|
||||||
onCellContextMenu={(e) => console.log('context', e)}
|
|
||||||
onGridReady={onGridReady}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</VirtualGridAutoSizerContainer>
|
|
||||||
</VirtualGridContainer>
|
</VirtualGridContainer>
|
||||||
</AnimatedPage>
|
</AnimatedPage>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,8 +3,9 @@ import { nanoid } from 'nanoid/non-secure';
|
||||||
import create from 'zustand';
|
import create from 'zustand';
|
||||||
import { devtools, persist } from 'zustand/middleware';
|
import { devtools, persist } from 'zustand/middleware';
|
||||||
import { immer } from 'zustand/middleware/immer';
|
import { immer } from 'zustand/middleware/immer';
|
||||||
import { AlbumListSort, SortOrder } from '/@/renderer/api/types';
|
import { AlbumListSort, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||||
import { useAlbumStore } from '/@/renderer/store/album.store';
|
import { useAlbumStore } from '/@/renderer/store/album.store';
|
||||||
|
import { useSongStore } from '/@/renderer/store/song.store';
|
||||||
import { ServerListItem } from '/@/renderer/types';
|
import { ServerListItem } from '/@/renderer/types';
|
||||||
|
|
||||||
export interface AuthState {
|
export interface AuthState {
|
||||||
|
@ -48,7 +49,12 @@ export const useAuthStore = create<AuthSlice>()(
|
||||||
useAlbumStore.getState().actions.setFilters({
|
useAlbumStore.getState().actions.setFilters({
|
||||||
musicFolderId: undefined,
|
musicFolderId: undefined,
|
||||||
sortBy: AlbumListSort.RECENTLY_ADDED,
|
sortBy: AlbumListSort.RECENTLY_ADDED,
|
||||||
sortOrder: SortOrder.ASC,
|
sortOrder: SortOrder.DESC,
|
||||||
|
});
|
||||||
|
useSongStore.getState().actions.setFilters({
|
||||||
|
musicFolderId: undefined,
|
||||||
|
sortBy: SongListSort.RECENTLY_ADDED,
|
||||||
|
sortOrder: SortOrder.DESC,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,9 +4,10 @@ import { devtools, persist } from 'zustand/middleware';
|
||||||
import { immer } from 'zustand/middleware/immer';
|
import { immer } from 'zustand/middleware/immer';
|
||||||
import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types';
|
import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||||
import { DataTableProps } from '/@/renderer/store/settings.store';
|
import { DataTableProps } from '/@/renderer/store/settings.store';
|
||||||
import { ListDisplayType, TableColumn } from '/@/renderer/types';
|
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
|
||||||
|
|
||||||
type TableProps = {
|
type TableProps = {
|
||||||
|
pagination: TablePagination;
|
||||||
scrollOffset: number;
|
scrollOffset: number;
|
||||||
} & DataTableProps;
|
} & DataTableProps;
|
||||||
|
|
||||||
|
@ -16,16 +17,18 @@ type ListProps<T> = {
|
||||||
table: TableProps;
|
table: TableProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
type AlbumListFilter = Omit<SongListArgs['query'], 'startIndex' | 'limit'>;
|
export type SongListFilter = Omit<SongListArgs['query'], 'startIndex' | 'limit'>;
|
||||||
|
|
||||||
interface SongState {
|
interface SongState {
|
||||||
list: ListProps<AlbumListFilter>;
|
list: ListProps<SongListFilter>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SongSlice extends SongState {
|
export interface SongSlice extends SongState {
|
||||||
actions: {
|
actions: {
|
||||||
setFilters: (data: Partial<AlbumListFilter>) => void;
|
setFilters: (data: Partial<SongListFilter>) => SongListFilter;
|
||||||
setStore: (data: Partial<SongSlice>) => void;
|
setStore: (data: Partial<SongSlice>) => void;
|
||||||
|
setTable: (data: Partial<TableProps>) => void;
|
||||||
|
setTablePagination: (data: Partial<TableProps['pagination']>) => void;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,10 +41,22 @@ export const useSongStore = create<SongSlice>()(
|
||||||
set((state) => {
|
set((state) => {
|
||||||
state.list.filter = { ...state.list.filter, ...data };
|
state.list.filter = { ...state.list.filter, ...data };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return get().list.filter;
|
||||||
},
|
},
|
||||||
setStore: (data) => {
|
setStore: (data) => {
|
||||||
set({ ...get(), ...data });
|
set({ ...get(), ...data });
|
||||||
},
|
},
|
||||||
|
setTable: (data) => {
|
||||||
|
set((state) => {
|
||||||
|
state.list.table = { ...state.list.table, ...data };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setTablePagination: (data) => {
|
||||||
|
set((state) => {
|
||||||
|
state.list.table.pagination = { ...state.list.table.pagination, ...data };
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
display: ListDisplayType.TABLE,
|
display: ListDisplayType.TABLE,
|
||||||
|
@ -78,6 +93,12 @@ export const useSongStore = create<SongSlice>()(
|
||||||
width: 100,
|
width: 100,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
pagination: {
|
||||||
|
currentPage: 1,
|
||||||
|
itemsPerPage: 100,
|
||||||
|
totalItems: 1,
|
||||||
|
totalPages: 1,
|
||||||
|
},
|
||||||
rowHeight: 60,
|
rowHeight: 60,
|
||||||
scrollOffset: 0,
|
scrollOffset: 0,
|
||||||
},
|
},
|
||||||
|
@ -99,8 +120,17 @@ export const useSongStoreActions = () => useSongStore((state) => state.actions);
|
||||||
|
|
||||||
export const useSetSongStore = () => useSongStore((state) => state.actions.setStore);
|
export const useSetSongStore = () => useSongStore((state) => state.actions.setStore);
|
||||||
|
|
||||||
|
export const useSetSongFilters = () => useSongStore((state) => state.actions.setFilters);
|
||||||
|
|
||||||
export const useSongFilters = () => {
|
export const useSongFilters = () => {
|
||||||
return useSongStore((state) => [state.list.filter, state.actions.setFilters]);
|
return useSongStore((state) => [state.list.filter, state.actions.setFilters]);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useSongListStore = () => useSongStore((state) => state.list);
|
export const useSongListStore = () => useSongStore((state) => state.list);
|
||||||
|
|
||||||
|
export const useSongTablePagination = () => useSongStore((state) => state.list.table.pagination);
|
||||||
|
|
||||||
|
export const useSetSongTablePagination = () =>
|
||||||
|
useSongStore((state) => state.actions.setTablePagination);
|
||||||
|
|
||||||
|
export const useSetSongTable = () => useSongStore((state) => state.actions.setTable);
|
||||||
|
|
Reference in a new issue