vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

reimplement genre detail route

Browse Source
This commit is contained in:
jeffvli
2025-11-24 20:19:09 -08:00
parent eba485034a
commit d3132ad570
30 changed files with 443 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/api/jellyfin/jellyfin-controller.ts
+12 -8
View File
@@ -208,7 +208,7 @@ export const JellyfinController: InternalControllerEndpoint = {
Fields: 'Genres, DateCreated, ExternalUrls, Overview',
ImageTypeLimit: 1,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query.searchTerm,
SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
@@ -316,11 +316,11 @@ export const JellyfinController: InternalControllerEndpoint = {
query: {
...artistQuery,
Fields: 'People, Tags',
GenreIds: query.genres ? query.genres.join(',') : undefined,
GenreIds: query.genreIds ? query.genreIds.join(',') : undefined,
IncludeItemTypes: 'MusicAlbum',
IsFavorite: query.favorite,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query.searchTerm,
SortBy: albumListSortMap.jellyfin[query.sortBy] || 'SortName',
@@ -354,7 +354,7 @@ export const JellyfinController: InternalControllerEndpoint = {
Fields: 'Genres, DateCreated, ExternalUrls, Overview',
ImageTypeLimit: 1,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query.searchTerm,
SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
@@ -398,7 +398,7 @@ export const JellyfinController: InternalControllerEndpoint = {
EnableTotalRecordCount: true,
Fields: 'ItemCounts',
Limit: query.limit,
ParentId: query?.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query?.searchTerm,
SortBy: genreListSortMap.jellyfin[query.sortBy] || 'SortName',
@@ -588,7 +588,7 @@ export const JellyfinController: InternalControllerEndpoint = {
? true
: undefined,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SortBy: JFSongListSort.RANDOM,
SortOrder: JFSortOrder.ASC,
@@ -742,7 +742,7 @@ export const JellyfinController: InternalControllerEndpoint = {
IncludeItemTypes: 'Audio',
IsFavorite: query.favorite,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query.searchTerm,
SortBy: songListSortMap.jellyfin[query.sortBy] || 'Album,SortName',
@@ -777,7 +777,7 @@ export const JellyfinController: InternalControllerEndpoint = {
IncludeItemTypes: 'Audio',
IsFavorite: query.favorite,
Limit: query.limit,
ParentId: query.musicFolderId,
ParentId: getMusicFolderId(query.musicFolderId),
Recursive: true,
SearchTerm: query.searchTerm,
SortBy: songListSortMap.jellyfin[query.sortBy] || 'Album,SortName',
@@ -1160,3 +1160,7 @@ export const JellyfinController: InternalControllerEndpoint = {
// totalRecordCount: res.body.TotalRecordCount,
// };
// };
function getMusicFolderId(musicFolderId?: string | string[]) {
return Array.isArray(musicFolderId) ? musicFolderId[0] : musicFolderId;
}
src/renderer/api/navidrome/navidrome-controller.ts
+2 -2
View File
@@ -284,8 +284,8 @@ export const NavidromeController: InternalControllerEndpoint = {
const { apiClientProps, query } = args;
const genres = hasFeature(apiClientProps.server, ServerFeature.BFR)
? query.genres
: query.genres?.[0];
? query.genreIds
: query.genreIds?.[0];
const res = await ndApiClient(apiClientProps).getAlbumList({
query: {
src/renderer/api/subsonic/subsonic-controller.ts
+20 -16
View File
@@ -219,7 +219,7 @@ export const SubsonicController: InternalControllerEndpoint = {
const res = await ssApiClient(apiClientProps).getArtists({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -340,7 +340,7 @@ export const SubsonicController: InternalControllerEndpoint = {
if (query.favorite) {
const res = await ssApiClient(apiClientProps).getStarred({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -360,7 +360,7 @@ export const SubsonicController: InternalControllerEndpoint = {
};
}
if (query.genres?.length) {
if (query.genreIds?.length) {
type = AlbumListSortType.BY_GENRE;
}
@@ -397,8 +397,8 @@ export const SubsonicController: InternalControllerEndpoint = {
const res = await ssApiClient(apiClientProps).getAlbumList2({
query: {
fromYear,
genre: query.genres?.length ? query.genres[0] : undefined,
musicFolderId: query.musicFolderId,
genre: query.genreIds?.length ? query.genreIds[0] : undefined,
musicFolderId: getMusicFolderId(query.musicFolderId),
offset: query.startIndex,
size: query.limit,
toYear,
@@ -485,7 +485,7 @@ export const SubsonicController: InternalControllerEndpoint = {
if (query.favorite) {
const res = await ssApiClient(apiClientProps).getStarred({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -502,7 +502,7 @@ export const SubsonicController: InternalControllerEndpoint = {
let startIndex = 0;
let totalRecordCount = 0;
if (query.genres?.length) {
if (query.genreIds?.length) {
type = AlbumListSortType.BY_GENRE;
}
@@ -530,8 +530,8 @@ export const SubsonicController: InternalControllerEndpoint = {
const res = await ssApiClient(apiClientProps).getAlbumList2({
query: {
fromYear,
genre: query.genres?.length ? query.genres[0] : undefined,
musicFolderId: query.musicFolderId,
genre: query.genreIds?.length ? query.genreIds[0] : undefined,
musicFolderId: getMusicFolderId(query.musicFolderId),
offset: startIndex,
size: MAX_SUBSONIC_ITEMS,
toYear,
@@ -567,7 +567,7 @@ export const SubsonicController: InternalControllerEndpoint = {
const res = await ssApiClient(apiClientProps).getArtists({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -783,7 +783,7 @@ export const SubsonicController: InternalControllerEndpoint = {
query: {
fromYear: query.minYear,
genre: query.genre,
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
size: query.limit,
toYear: query.maxYear,
},
@@ -938,7 +938,7 @@ export const SubsonicController: InternalControllerEndpoint = {
query: {
count: query.limit,
genre: query.genreIds[0],
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
offset: query.startIndex,
},
});
@@ -959,7 +959,7 @@ export const SubsonicController: InternalControllerEndpoint = {
if (query.favorite) {
const res = await ssApiClient(apiClientProps).getStarred({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -1127,7 +1127,7 @@ export const SubsonicController: InternalControllerEndpoint = {
query: {
count: 1,
genre: query.genreIds[0],
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
offset: sectionIndex,
},
});
@@ -1152,7 +1152,7 @@ export const SubsonicController: InternalControllerEndpoint = {
query: {
count: MAX_SUBSONIC_ITEMS,
genre: query.genreIds[0],
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
offset: startIndex,
},
});
@@ -1175,7 +1175,7 @@ export const SubsonicController: InternalControllerEndpoint = {
if (query.favorite) {
const res = await ssApiClient(apiClientProps).getStarred({
query: {
musicFolderId: query.musicFolderId,
musicFolderId: getMusicFolderId(query.musicFolderId),
},
});
@@ -1423,3 +1423,7 @@ export const SubsonicController: InternalControllerEndpoint = {
return null;
},
};
function getMusicFolderId(musicFolderId?: string | string[]) {
return Array.isArray(musicFolderId) ? musicFolderId[0] : musicFolderId;
}
src/renderer/components/item-list/helpers/get-title-path.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const getTitlePath = (itemType: LibraryItem, id: string) => {
case LibraryItem.ARTIST:
return generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, { artistId: id });
case LibraryItem.GENRE:
return generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: id });
return generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: id });
case LibraryItem.PLAYLIST:
return generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: id });
default:
src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
if (!row) return [];
return row.map((genre) => {
const { color, isLight } = stringToColor(genre.name);
const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
return { ...genre, color, isLight, path };
});
}, [row]);
src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
const genres = useMemo(() => {
if (!row) return [];
return row.map((genre) => {
const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
genreId: genre.id,
});
return { ...genre, path };
src/renderer/features/albums/components/album-list-content.tsx
+18 -6
View File
@@ -1,4 +1,4 @@
import { lazy, Suspense } from 'react';
import { lazy, Suspense, useMemo } from 'react';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
@@ -46,7 +46,7 @@ export const AlbumListContent = () => {
);
};
export type OverrideAlbumListQuery = Omit<AlbumListQuery, 'limit' | 'startIndex'>;
export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
export const AlbumListView = ({
display,
@@ -60,6 +60,18 @@ export const AlbumListView = ({
const { query } = useAlbumListFilters();
const mergedQuery = useMemo(() => {
if (!overrideQuery) {
return query;
}
return {
...overrideQuery,
sortBy: overrideQuery.sortBy || query.sortBy,
sortOrder: overrideQuery.sortOrder || query.sortOrder,
};
}, [query, overrideQuery]);
switch (display) {
case ListDisplayType.GRID: {
switch (pagination) {
@@ -69,7 +81,7 @@ export const AlbumListView = ({
gap={grid.itemGap}
itemsPerPage={itemsPerPage}
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
/>
);
@@ -80,7 +92,7 @@ export const AlbumListView = ({
gap={grid.itemGap}
itemsPerPage={itemsPerPage}
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
/>
);
@@ -101,7 +113,7 @@ export const AlbumListView = ({
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
itemsPerPage={itemsPerPage}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
size={table.size}
/>
@@ -117,7 +129,7 @@ export const AlbumListView = ({
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
itemsPerPage={itemsPerPage}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
size={table.size}
/>
src/renderer/features/albums/components/album-list-header-filters.tsx
+33 -1
View File
@@ -1,19 +1,51 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
import { GenreTarget, useGenreTarget, useSettingsStoreActions } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
export const AlbumListHeaderFilters = () => {
export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget?: boolean }) => {
const { t } = useTranslation();
const target = useGenreTarget();
const { setGenreBehavior } = useSettingsStoreActions();
const choice = useMemo(() => {
return target === GenreTarget.ALBUM
? t('entity.album_other', { postProcess: 'titleCase' })
: t('entity.track_other', { postProcess: 'titleCase' });
}, [target, t]);
const handleToggleGenreTarget = () => {
setGenreBehavior(target === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM);
};
return (
<Flex justify="space-between">
<Group gap="sm" w="100%">
{toggleGenreTarget && (
<>
<Button
leftSection={<Icon icon="arrowLeftRight" />}
onClick={handleToggleGenreTarget}
variant="subtle"
>
{choice}
</Button>
<Divider orientation="vertical" />
</>
)}
<ListSortByDropdown
defaultSortByValue={AlbumListSort.NAME}
itemType={LibraryItem.ALBUM}
src/renderer/features/albums/components/jellyfin-album-filters.tsx
+1 -3
View File
@@ -51,7 +51,6 @@ export const JellyfinAlbumFilters = ({
const genreListQuery = useQuery(
genresQueries.list({
query: {
musicFolderId: query.musicFolderId,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
@@ -75,7 +74,6 @@ export const JellyfinAlbumFilters = ({
staleTime: 1000 * 60 * 1,
},
query: {
folder: query.musicFolderId,
type: LibraryItem.ALBUM,
},
serverId,
@@ -150,7 +148,7 @@ export const JellyfinAlbumFilters = ({
label: artist.name,
value: artist.id,
}));
}, [albumArtistListQuery?.data?.items]);
}, [albumArtistListQuery.data?.items]);
const handleAlbumArtistFilter = (e: null | string[]) => {
setAlbumArtist(e ?? null);
src/renderer/features/albums/components/navidrome-album-filters.tsx
+4 -22
View File
@@ -9,7 +9,7 @@ import {
} from '/@/renderer/components/select-with-invalid-data';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { useCurrentServer } from '/@/renderer/store';
import { NDSongQueryFields } from '/@/shared/api/navidrome/navidrome-types';
@@ -22,12 +22,7 @@ import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
import {
AlbumArtistListSort,
GenreListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import { ServerFeature } from '/@/shared/types/features-types';
interface NavidromeAlbumFiltersProps {
@@ -52,20 +47,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
setRecentlyPlayed,
} = useAlbumListFilters();
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
@@ -152,7 +134,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
label: artist.name,
value: artist.id,
}));
}, [albumArtistListQuery?.data?.items]);
}, [albumArtistListQuery.data?.items]);
const handleTagFilter = debounce((tag: string, e: null | string) => {
setCustom((prev) => ({
src/renderer/features/albums/components/subsonic-album-filters.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const SubsonicAlbumFilters = ({
const handleGenresFilter = debounce((e: null | string) => {
setGenreId(e ?? null);
const updatedFilters: Partial<AlbumListFilter> = {
genres: e ? [e] : undefined,
genreIds: e ? [e] : undefined,
};
onFilterChange(updatedFilters as AlbumListFilter);
}, 250);
src/renderer/features/genres/api/genres-api.ts
+26 -2
View File
@@ -1,9 +1,15 @@
import { queryOptions } from '@tanstack/react-query';
import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { QueryHookArgs } from '/@/renderer/lib/react-query';
import { GenreListQuery, ListCountQuery } from '/@/shared/types/domain-types';
import { useCurrentServerId } from '/@/renderer/store';
import {
GenreListQuery,
GenreListSort,
ListCountQuery,
SortOrder,
} from '/@/shared/types/domain-types';
export const genresQueries = {
list: (args: QueryHookArgs<GenreListQuery>) => {
@@ -37,3 +43,21 @@ export const genresQueries = {
});
},
};
export const useGenreList = () => {
const serverId = useCurrentServerId();
return useSuspenseQuery({
...genresQueries.list({
query: {
limit: -1,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
gcTime: Infinity,
staleTime: Infinity,
});
};
src/renderer/features/genres/components/genre-detail-content.tsx
+69
View File
@@ -0,0 +1,69 @@
import { Suspense, useMemo } from 'react';
import { useParams } from 'react-router';
import { AlbumListView } from '/@/renderer/features/albums/components/album-list-content';
import { SongListView } from '/@/renderer/features/songs/components/song-list-content';
import { GenreTarget, useGenreTarget, useListSettings } from '/@/renderer/store';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { ItemListKey } from '/@/shared/types/types';
export const GenreDetailContent = () => {
const genreTarget = useGenreTarget();
switch (genreTarget) {
case GenreTarget.ALBUM:
return <GenreDetailContentAlbums />;
case GenreTarget.TRACK:
return <GenreDetailContentSongs />;
default:
return null;
}
};
function GenreDetailContentAlbums() {
const { genreId } = useParams() as { genreId: string };
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const overrideQuery = useMemo(() => {
return {
genreIds: [genreId],
};
}, [genreId]);
return (
<Suspense fallback={<Spinner container />}>
<AlbumListView
display={display}
grid={grid}
itemsPerPage={itemsPerPage}
overrideQuery={overrideQuery}
pagination={pagination}
table={table}
/>
</Suspense>
);
}
function GenreDetailContentSongs() {
const { genreId } = useParams() as { genreId: string };
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
const overrideQuery = useMemo(() => {
return {
genreIds: [genreId],
};
}, [genreId]);
return (
<Suspense fallback={<Spinner container />}>
<SongListView
display={display}
grid={grid}
itemsPerPage={itemsPerPage}
overrideQuery={overrideQuery}
pagination={pagination}
table={table}
/>
</Suspense>
);
}
src/renderer/features/genres/components/genre-detail-header.tsx
+106
View File
@@ -0,0 +1,106 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { GenreTarget, useGenreTarget } from '/@/renderer/store';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface GenreDetailHeaderProps {
title?: string;
}
export const GenreDetailHeader = ({ title }: GenreDetailHeaderProps) => {
const { t } = useTranslation();
const { itemCount } = useListContext();
const pageTitle = title || t('page.genreList.title', { postProcess: 'titleCase' });
const genreTarget = useGenreTarget();
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
</LibraryHeaderBar.Badge>
</LibraryHeaderBar>
<Group>
<ListSearchInput />
</Group>
</PageHeader>
<FilterBar>
{genreTarget === GenreTarget.ALBUM ? (
<AlbumListHeaderFilters toggleGenreTarget />
) : (
<SongListHeaderFilters toggleGenreTarget />
)}
</FilterBar>
</Stack>
);
};
const PlayButton = () => {
const genreTarget = useGenreTarget();
switch (genreTarget) {
case GenreTarget.ALBUM:
return <AlbumPlayButton />;
case GenreTarget.TRACK:
return <SongPlayButton />;
default:
return null;
}
};
const AlbumPlayButton = () => {
const { query } = useAlbumListFilters();
const { id } = useListContext();
const mergedQuery = useMemo(() => {
return {
...query,
genreIds: [id],
};
}, [query, id]);
return (
<LibraryHeaderBar.PlayButton
itemType={LibraryItem.ALBUM}
listQuery={mergedQuery}
variant="filled"
/>
);
};
const SongPlayButton = () => {
const { query } = useSongListFilters();
const { id } = useListContext();
const mergedQuery = useMemo(() => {
return {
...query,
genreIds: [id],
};
}, [query, id]);
return (
<LibraryHeaderBar.PlayButton
itemType={LibraryItem.SONG}
listQuery={mergedQuery}
variant="filled"
/>
);
};
src/renderer/features/genres/routes/genre-detail-route.tsx
+56
View File
@@ -0,0 +1,56 @@
import { useMemo, useState } from 'react';
import { useLocation, useParams } from 'react-router';
import { ListContext } from '/@/renderer/context/list-context';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { GenreDetailContent } from '/@/renderer/features/genres/components/genre-detail-content';
import { GenreDetailHeader } from '/@/renderer/features/genres/components/genre-detail-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
const GenreDetailRoute = () => {
const { genreId } = useParams() as { genreId: string };
const pageKey = 'genre';
const [itemCount, setItemCount] = useState<number | undefined>(undefined);
const providerValue = useMemo(() => {
return {
id: genreId,
itemCount,
pageKey,
setItemCount,
};
}, [genreId, itemCount, pageKey, setItemCount]);
const { data: genres } = useGenreList();
const name = useMemo(() => {
return genres?.items.find((g) => g.id === genreId)?.name || '—';
}, [genreId, genres]);
const location = useLocation();
console.log('location', location.pathname);
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<GenreDetailHeader title={name} />
<GenreDetailContent />
</LibraryContainer>
</ListContext.Provider>
</AnimatedPage>
);
};
const GenreDetailRouteWithBoundary = () => {
return (
<PageErrorBoundary>
<GenreDetailRoute />
</PageErrorBoundary>
);
};
export default GenreDetailRouteWithBoundary;
src/renderer/features/home/components/featured-genres.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ export const FeaturedGenres = () => {
return visibleGenres.map((genre: Genre) => {
const { color, isLight } = stringToColor(genre.name);
const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
return {
...genre,
src/renderer/features/shared/components/list-search-input.tsx
+4 -1
View File
@@ -5,6 +5,9 @@ export const ListSearchInput = () => {
const { searchTerm, setSearchTerm } = useSearchTermFilter();
return (
<SearchInput defaultValue={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
<SearchInput
defaultValue={searchTerm}
onChange={(e) => setSearchTerm(e.target.value || null)}
/>
);
};
src/renderer/features/shared/hooks/use-search-term-filter.ts
+6 -2
View File
@@ -9,10 +9,14 @@ export const useSearchTermFilter = (defaultValue?: string) => {
defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
);
const debouncedSetSearchTerm = useDebouncedCallback(setSearchTerm, 300);
const handleSetSearchTerm = (value: null | string) => {
setSearchTerm(value === '' ? null : value);
};
const debouncedSetSearchTerm = useDebouncedCallback(handleSetSearchTerm, 300);
return {
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm || undefined,
setSearchTerm: debouncedSetSearchTerm,
};
};
src/renderer/features/songs/components/jellyfin-song-filters.tsx
+3 -14
View File
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries, useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { SongListFilter, useCurrentServer } from '/@/renderer/store';
@@ -29,20 +29,10 @@ export const JellyfinSongFilters = ({ customFilters }: JellyfinSongFiltersProps)
// Despite the fact that getTags returns genres, it only returns genre names.
// We prefer using IDs, hence the double query
const genreListQuery = useQuery(
genresQueries.list({
query: {
musicFolderId: query.musicFolderId,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server.id,
}),
);
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
if (!genreListQuery.data) return [];
return genreListQuery.data.items.map((genre) => ({
label: genre.name,
value: genre.id,
@@ -52,7 +42,6 @@ export const JellyfinSongFilters = ({ customFilters }: JellyfinSongFiltersProps)
const tagsQuery = useQuery(
sharedQueries.tags({
query: {
folder: query.musicFolderId,
type: LibraryItem.SONG,
},
serverId: server.id,
src/renderer/features/songs/components/navidrome-song-filters.tsx
+2 -11
View File
@@ -7,7 +7,7 @@ import {
MultiSelectWithInvalidData,
SelectWithInvalidData,
} from '/@/renderer/components/select-with-invalid-data';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries, useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import {
SongListFilter,
@@ -46,16 +46,7 @@ export const NavidromeSongFilters = ({
const isGenrePage = customFilters?.genreIds !== undefined;
const genreListQuery = useQuery(
genresQueries.list({
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreListQuery = useGenreList();
const tagsQuery = useQuery(
sharedQueries.tags({
src/renderer/features/songs/components/song-list-content.tsx
+18 -6
View File
@@ -1,4 +1,4 @@
import { lazy, Suspense } from 'react';
import { lazy, Suspense, useMemo } from 'react';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
@@ -43,7 +43,7 @@ export const SongListContent = () => {
);
};
export type OverrideSongListQuery = Omit<SongListQuery, 'limit' | 'startIndex'>;
export type OverrideSongListQuery = Omit<Partial<SongListQuery>, 'limit' | 'startIndex'>;
export const SongListView = ({
display,
@@ -57,6 +57,18 @@ export const SongListView = ({
const { query } = useSongListFilters();
const mergedQuery = useMemo(() => {
if (!overrideQuery) {
return query;
}
return {
...overrideQuery,
sortBy: overrideQuery.sortBy || query.sortBy,
sortOrder: overrideQuery.sortOrder || query.sortOrder,
};
}, [query, overrideQuery]);
switch (display) {
case ListDisplayType.GRID: {
switch (pagination) {
@@ -66,7 +78,7 @@ export const SongListView = ({
gap={grid.itemGap}
itemsPerPage={itemsPerPage}
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
/>
);
@@ -76,7 +88,7 @@ export const SongListView = ({
gap={grid.itemGap}
itemsPerPage={itemsPerPage}
itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
/>
);
@@ -96,7 +108,7 @@ export const SongListView = ({
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
itemsPerPage={itemsPerPage}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
size={table.size}
/>
@@ -111,7 +123,7 @@ export const SongListView = ({
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
itemsPerPage={itemsPerPage}
query={overrideQuery ?? query}
query={mergedQuery}
serverId={server.id}
size={table.size}
/>
src/renderer/features/songs/components/song-list-header-filters.tsx
+33 -1
View File
@@ -1,19 +1,51 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
import { GenreTarget, useGenreTarget, useSettingsStoreActions } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { LibraryItem, SongListSort, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
export const SongListHeaderFilters = () => {
export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget?: boolean }) => {
const { t } = useTranslation();
const target = useGenreTarget();
const { setGenreBehavior } = useSettingsStoreActions();
const handleToggleGenreTarget = () => {
setGenreBehavior(target === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM);
};
const choice = useMemo(() => {
return target === GenreTarget.ALBUM
? t('entity.album_other', { postProcess: 'titleCase' })
: t('entity.track_other', { postProcess: 'titleCase' });
}, [target, t]);
return (
<Flex justify="space-between">
<Group gap="sm" w="100%">
{toggleGenreTarget && (
<>
<Button
leftSection={<Icon icon="arrowLeftRight" />}
onClick={handleToggleGenreTarget}
variant="subtle"
>
{choice}
</Button>
<Divider orientation="vertical" />
</>
)}
<ListSortByDropdown
defaultSortByValue={SongListSort.NAME}
itemType={LibraryItem.SONG}
src/renderer/features/songs/components/subsonic-song-filters.tsx
+4 -16
View File
@@ -1,43 +1,31 @@
import { useQuery } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { SongListFilter, useCurrentServer } from '/@/renderer/store';
import { SongListFilter } from '/@/renderer/store';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
import { GenreListSort, SortOrder } from '/@/shared/types/domain-types';
interface SubsonicSongFiltersProps {
customFilters?: Partial<SongListFilter>;
}
export const SubsonicSongFilters = ({ customFilters }: SubsonicSongFiltersProps) => {
const server = useCurrentServer();
const { t } = useTranslation();
const { query, setFavorite, setGenreId } = useSongListFilters();
const isGenrePage = customFilters?.genreIds !== undefined;
const genreListQuery = useQuery(
genresQueries.list({
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server.id,
}),
);
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
if (!genreListQuery.data) return [];
return genreListQuery.data.items.map((genre) => ({
label: genre.name,
value: genre.id,
src/renderer/features/songs/routes/song-list-route.tsx
+4 -55
View File
@@ -1,82 +1,31 @@
import { useQuery } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import { useParams, useSearchParams } from 'react-router';
import { ListContext } from '/@/renderer/context/list-context';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
import { useCurrentServer } from '/@/renderer/store';
import { GenreListSort, SortOrder } from '/@/shared/types/domain-types';
const SongListRoute = () => {
const server = useCurrentServer();
const [searchParams] = useSearchParams();
const { albumArtistId, genreId } = useParams();
const pageKey = albumArtistId ? `albumArtistSong` : 'song';
// const customFilters = useMemo(() => {
// const value = {
// ...(albumArtistId && { artistIds: [albumArtistId] }),
// ...(genreId && {
// genreIds: [genreId],
// }),
// };
// if (isEmpty(value)) {
// return undefined;
// }
// return value;
// }, [albumArtistId, genreId]);
const genreList = useQuery(
genresQueries.list({
options: {
enabled: !!genreId,
gcTime: 1000 * 60 * 60,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server?.id,
}),
);
const genreTitle = useMemo(() => {
if (!genreList.data) return '';
const genre = genreList.data.items.find((g) => g.id === genreId);
if (!genre) return 'Unknown';
return genre?.name;
}, [genreId, genreList.data]);
const pageKey = 'song';
const [itemCount, setItemCount] = useState<number | undefined>(undefined);
const providerValue = useMemo(() => {
return {
id: albumArtistId ?? genreId,
id: undefined,
itemCount,
pageKey,
setItemCount,
};
}, [albumArtistId, genreId, itemCount, pageKey, setItemCount]);
const artist = searchParams.get('artistName');
const title = artist ? artist : genreId ? genreTitle : undefined;
}, [itemCount, pageKey, setItemCount]);
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<SongListHeader title={title} />
<SongListHeader />
<SongListContent />
</LibraryContainer>
</ListContext.Provider>
src/renderer/hooks/use-genre-route.ts
+3 -8
View File
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
import { useLocation } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
import { GenreTarget, useSettingsStore } from '/@/renderer/store';
const ALBUM_REGEX = /albums$/;
const SONG_REGEX = /songs$/;
@@ -12,18 +11,14 @@ export const useGenreRoute = () => {
const matchAlbum = ALBUM_REGEX.test(pathname);
const matchSongs = SONG_REGEX.test(pathname);
const baseState = useSettingsStore((state) =>
state.general.genreTarget === GenreTarget.ALBUM
? AppRoute.LIBRARY_GENRES_ALBUMS
: AppRoute.LIBRARY_GENRES_SONGS,
);
const baseState = AppRoute.LIBRARY_GENRES_DETAIL;
return useMemo(() => {
if (matchAlbum) {
return AppRoute.LIBRARY_GENRES_ALBUMS;
return AppRoute.LIBRARY_GENRES_DETAIL;
}
if (matchSongs) {
return AppRoute.LIBRARY_GENRES_SONGS;
return AppRoute.LIBRARY_GENRES_DETAIL;
}
return baseState;
}, [baseState, matchAlbum, matchSongs]);
src/renderer/router/app-router.tsx
+6 -6
View File
@@ -63,6 +63,10 @@ const DummyAlbumDetailRoute = lazy(
const GenreListRoute = lazy(() => import('/@/renderer/features/genres/routes/genre-list-route'));
const GenreDetailRoute = lazy(
() => import('/@/renderer/features/genres/routes/genre-detail-route'),
);
const SearchRoute = lazy(() => import('/@/renderer/features/search/routes/search-route'));
export const AppRouter = () => {
@@ -91,12 +95,8 @@ export const AppRouter = () => {
<Route path={AppRoute.LIBRARY_GENRES}>
<Route element={<GenreListRoute />} index />
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_GENRES_ALBUMS}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_GENRES_SONGS}
element={<GenreDetailRoute />}
path={AppRoute.LIBRARY_GENRES_DETAIL}
/>
</Route>
<Route
src/renderer/router/routes.ts
+2 -3
View File
@@ -1,7 +1,6 @@
export enum AppRoute {
ACTION_REQUIRED = '/action-required',
EXPLORE = '/explore',
LOGIN = '/login',
FAKE_LIBRARY_ALBUM_DETAILS = '/library/albums/dummy/:albumId',
HOME = '/',
LIBRARY_ALBUM_ARTISTS = '/library/album-artists',
@@ -18,9 +17,9 @@ export enum AppRoute {
LIBRARY_ARTISTS_DETAIL_TOP_SONGS = '/library/artists/:artistId/top-songs',
LIBRARY_FOLDERS = '/library/folders',
LIBRARY_GENRES = '/library/genres',
LIBRARY_GENRES_ALBUMS = '/library/genres/:genreId/albums',
LIBRARY_GENRES_SONGS = '/library/genres/:genreId/songs',
LIBRARY_GENRES_DETAIL = '/library/genres/:genreId',
LIBRARY_SONGS = '/library/songs',
LOGIN = '/login',
NOW_PLAYING = '/now-playing',
PLAYING = '/playing',
PLAYLISTS = '/playlists',
src/renderer/store/settings.store.ts
+2
View File
@@ -1321,3 +1321,5 @@ export const useListSettings = (type: ItemListKey) =>
export const usePrimaryColor = () => useSettingsStore((store) => store.general.accent);
export const usePlayerbarSlider = () => useSettingsStore((store) => store.general.playerbarSlider);
export const useGenreTarget = () => useSettingsStore((store) => store.general.genreTarget);
src/shared/components/icon/icon.tsx
+2
View File
@@ -12,6 +12,7 @@ import {
LuArrowDownToLine,
LuArrowDownWideNarrow,
LuArrowLeft,
LuArrowLeftRight,
LuArrowLeftToLine,
LuArrowRight,
LuArrowRightToLine,
@@ -126,6 +127,7 @@ export const AppIcon = {
arrowDownS: LuChevronDown,
arrowDownToLine: LuArrowDownToLine,
arrowLeft: LuArrowLeft,
arrowLeftRight: LuArrowLeftRight,
arrowLeftS: LuChevronLeft,
arrowLeftToLine: LuArrowLeftToLine,
arrowRight: LuArrowRight,
src/shared/types/domain-types.ts
+2 -2
View File
@@ -431,7 +431,7 @@ export interface AlbumListQuery extends AlbumListNavidromeQuery, BaseQuery<Album
artistIds?: string[];
compilation?: boolean;
favorite?: boolean;
genres?: string[];
genreIds?: string[];
limit?: number;
maxYear?: number;
minYear?: number;
@@ -765,7 +765,7 @@ export interface ArtistListQuery extends BaseQuery<ArtistListSort> {
}
// Artist List
export type ArtistListResponse = BasePaginatedResponse<Artist[]>;
export type ArtistListResponse = BasePaginatedResponse<AlbumArtist[]>;
type ArtistListSortMap = {
jellyfin: Record<ArtistListSort, JFArtistListSort | undefined>;