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

[enhancement]: Support toggling Album/Track view for gneres (#591)

Browse source 
* [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
This commit is contained in:
Kendall Garner 2024-04-20 06:14:31 +00:00 • committed by GitHub
parent 595eba152a
commit ba531505af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 336 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/renderer/features/playlists/components/playlist-list-header.tsx
View file

@ -8,15 +8,12 @@ import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/cr
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { PlaylistListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
import { PlaylistListFilter, useCurrentServer } from '/@/renderer/store';
import debounce from 'lodash/debounce';
import { useTranslation } from 'react-i18next';
import { RiFileAddFill } from 'react-icons/ri';
import { LibraryItem, ServerType } from '/@/renderer/api/types';
import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
import { useListContext } from '/@/renderer/context/list-context';
import { useListStoreByKey } from '../../../store/list.store';
import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
interface PlaylistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -26,11 +23,8 @@ interface PlaylistListHeaderProps {
export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistListHeaderProps) => {
const { t } = useTranslation();
const { pageKey } = useListContext();
const cq = useContainerQuery();
const server = useCurrentServer();
const { setFilter, setTablePagination } = useListStoreActions();
const { display, filter } = useListStoreByKey({ key: pageKey });
const handleCreatePlaylistModal = () => {
openModal({
@ -43,25 +37,16 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
});
};
const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
const { filter, refresh, search } = useDisplayRefresh({
gridRef,
itemType: LibraryItem.PLAYLIST,
server,
tableRef,
});
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const searchTerm = e.target.value === '' ? undefined : e.target.value;
const updatedFilters = setFilter({
data: { searchTerm },
itemType: LibraryItem.PLAYLIST,
key: pageKey,
}) as PlaylistListFilter;
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
handleRefreshTable(tableRef, updatedFilters);
setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} else {
handleRefreshGrid(gridRef, updatedFilters);
}
const updatedFilters = search(e) as PlaylistListFilter;
refresh(updatedFilters);
}, 500);
return (