vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 05:36:00 +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/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,