ba531505af
* [enhancement]: Support toggling Album/Track view for gneres The _primary_ purpose of this PR is to enable viewing tracks OR albums for genres. This has a few requirements: 1. Ability to set default route for genres, **except** when already on song/album page 2. Ability to toggle between album and genre view 3. Fixed refresh for genre ID Additionally, there was some refactoring: - Since the *-list-headers had very similar functions for search, export that as a hook instead * also use hook for album artist * support switching albumartist tracks/albums * remove toggle on song/album list, simplify logic
80 lines
3 KiB
TypeScript
80 lines
3 KiB
TypeScript
import type { ChangeEvent, MutableRefObject } from 'react';
|
|
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
|
import { Flex, Group, Stack } from '@mantine/core';
|
|
import debounce from 'lodash/debounce';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FilterBar } from '../../shared/components/filter-bar';
|
|
import { LibraryItem } from '/@/renderer/api/types';
|
|
import { PageHeader, SearchInput } from '/@/renderer/components';
|
|
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
|
import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
|
|
import { LibraryHeaderBar } from '/@/renderer/features/shared';
|
|
import { useContainerQuery } from '/@/renderer/hooks';
|
|
import { AlbumArtistListFilter, useCurrentServer } from '/@/renderer/store';
|
|
import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
|
|
|
|
interface AlbumArtistListHeaderProps {
|
|
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
|
|
itemCount?: number;
|
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
|
}
|
|
|
|
export const AlbumArtistListHeader = ({
|
|
itemCount,
|
|
gridRef,
|
|
tableRef,
|
|
}: AlbumArtistListHeaderProps) => {
|
|
const { t } = useTranslation();
|
|
const server = useCurrentServer();
|
|
const cq = useContainerQuery();
|
|
|
|
const { filter, refresh, search } = useDisplayRefresh({
|
|
gridRef,
|
|
itemType: LibraryItem.ALBUM_ARTIST,
|
|
server,
|
|
tableRef,
|
|
});
|
|
|
|
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
|
const updatedFilters = search(e) as AlbumArtistListFilter;
|
|
refresh(updatedFilters);
|
|
}, 500);
|
|
|
|
return (
|
|
<Stack
|
|
ref={cq.ref}
|
|
spacing={0}
|
|
>
|
|
<PageHeader backgroundColor="var(--titlebar-bg)">
|
|
<Flex
|
|
justify="space-between"
|
|
w="100%"
|
|
>
|
|
<LibraryHeaderBar>
|
|
<LibraryHeaderBar.Title>
|
|
{t('page.albumArtistList.title', { postProcess: 'titleCase' })}
|
|
</LibraryHeaderBar.Title>
|
|
<LibraryHeaderBar.Badge
|
|
isLoading={itemCount === null || itemCount === undefined}
|
|
>
|
|
{itemCount}
|
|
</LibraryHeaderBar.Badge>
|
|
</LibraryHeaderBar>
|
|
<Group>
|
|
<SearchInput
|
|
defaultValue={filter.searchTerm}
|
|
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
|
|
onChange={handleSearch}
|
|
/>
|
|
</Group>
|
|
</Flex>
|
|
</PageHeader>
|
|
<FilterBar>
|
|
<AlbumArtistListHeaderFilters
|
|
gridRef={gridRef}
|
|
tableRef={tableRef}
|
|
/>
|
|
</FilterBar>
|
|
</Stack>
|
|
);
|
|
};
|