properly handle disableArtistFilter and disableGenreFilter props for all list filters

This commit is contained in:
jeffvli
2026-01-18 14:07:52 -08:00
parent dad3d10a83
commit c3d4f6cacd
7 changed files with 91 additions and 67 deletions
@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
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';
@@ -32,16 +31,16 @@ import {
interface JellyfinAlbumFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFiltersProps) => {
export const JellyfinAlbumFilters = ({
disableArtistFilter,
disableGenreFilter,
}: JellyfinAlbumFiltersProps) => {
const { t } = useTranslation();
const serverId = useCurrentServerId();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const {
query,
setAlbumArtist,
@@ -298,7 +297,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
/>
</>
)}
{!isGenrePage && (
{!disableGenreFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
@@ -27,20 +26,21 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
interface NavidromeAlbumFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFiltersProps) => {
export const NavidromeAlbumFilters = ({
disableArtistFilter,
disableGenreFilter,
}: NavidromeAlbumFiltersProps) => {
const { t } = useTranslation();
const server = useCurrentServer();
const serverId = server.id;
const { customFilters } = useListContext();
const artistSelectMode = useAppStore((state) => state.artistSelectMode);
const genreSelectMode = useAppStore((state) => state.genreSelectMode);
const { setArtistSelectMode, setGenreSelectMode } = useAppStoreActions();
const isGenrePage = customFilters?.genreIds !== undefined;
const {
query,
setAlbumArtist,
@@ -327,7 +327,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
/>
</>
)}
{!isGenrePage && (
{!disableGenreFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
@@ -26,17 +25,17 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
interface SubsonicAlbumFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFiltersProps) => {
export const SubsonicAlbumFilters = ({
disableArtistFilter,
disableGenreFilter,
}: SubsonicAlbumFiltersProps) => {
const { t } = useTranslation();
const serverId = useCurrentServerId();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const { query, setAlbumArtist, setFavorite, setGenreId, setMaxYear, setMinYear } =
useAlbumListFilters();
@@ -262,7 +261,7 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
/>
</>
)}
{!isGenrePage && (
{!disableGenreFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
@@ -39,7 +39,7 @@ export const isFilterValueSet = (value: unknown): boolean => {
export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
const { t } = useTranslation();
const server = useCurrentServer();
const { isSidebarOpen, setIsSidebarOpen } = useListContext();
const { isSidebarOpen, pageKey, setIsSidebarOpen } = useListContext();
const serverType = server.type;
@@ -53,6 +53,9 @@ export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
const canPin = Boolean(setIsSidebarOpen);
const disableArtistFilter = pageKey === ItemListKey.ALBUM_ARTIST_ALBUM;
const disableGenreFilter = pageKey === ItemListKey.GENRE_ALBUM;
return (
<>
<FilterButton isActive={isActive} onClick={handlers.toggle} />
@@ -81,7 +84,10 @@ export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
</Group>
}
>
<FilterComponent />
<FilterComponent
disableArtistFilter={disableArtistFilter}
disableGenreFilter={disableGenreFilter}
/>
</Modal>
</>
);
@@ -91,11 +97,18 @@ export const ListFilters = ({ itemType }: ListFiltersProps) => {
const server = useCurrentServer();
const serverType = server.type;
const FilterComponent = FILTERS[serverType][itemType];
const { pageKey } = useListContext();
const disableArtistFilter = pageKey === ItemListKey.ALBUM_ARTIST_ALBUM;
const disableGenreFilter = pageKey === ItemListKey.GENRE_ALBUM;
return (
<ComponentErrorBoundary>
<Suspense fallback={<Spinner container />}>
<FilterComponent />
<FilterComponent
disableArtistFilter={disableArtistFilter}
disableGenreFilter={disableGenreFilter}
/>
</Suspense>
</ComponentErrorBoundary>
);
@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import {
@@ -27,19 +26,19 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
interface JellyfinSongFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFiltersProps) => {
export const JellyfinSongFilters = ({
disableArtistFilter,
disableGenreFilter,
}: JellyfinSongFiltersProps) => {
const server = useCurrentServer();
const serverId = server.id;
const { t } = useTranslation();
const { query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
// Despite the fact that getTags returns genres, it only returns genre names.
// We prefer using IDs, hence the double query
const genreListQuery = useGenreList();
@@ -280,7 +279,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
/>
</>
)}
{!isGenrePage && (
{!disableGenreFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import {
@@ -24,17 +23,21 @@ import { Text } from '/@/shared/components/text/text';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
export const NavidromeSongFilters = () => {
interface NavidromeSongFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const NavidromeSongFilters = ({
disableArtistFilter,
disableGenreFilter,
}: NavidromeSongFiltersProps) => {
const { t } = useTranslation();
const server = useCurrentServer();
const serverId = server.id;
const { query, setArtistIds, setCustom, setFavorite, setGenreId, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
@@ -257,18 +260,22 @@ export const NavidromeSongFilters = () => {
w="100%"
/>
</Stack>
<Divider my="md" />
<VirtualMultiSelect
displayCountType="song"
height={300}
label={artistFilterLabel}
onChange={handleArtistChange}
options={selectableAlbumArtists}
RowComponent={ArtistMultiSelectRow}
singleSelect={artistSelectMode === 'single'}
value={selectedArtistIds}
/>
{!isGenrePage && (
{!disableArtistFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
displayCountType="song"
height={300}
label={artistFilterLabel}
onChange={handleArtistChange}
options={selectableAlbumArtists}
RowComponent={ArtistMultiSelectRow}
singleSelect={artistSelectMode === 'single'}
value={selectedArtistIds}
/>
</>
)}
{!disableGenreFilter && (
<VirtualMultiSelect
displayCountType="song"
height={220}
@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useListContext } from '/@/renderer/context/list-context';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import {
@@ -20,15 +19,19 @@ import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
export const SubsonicSongFilters = () => {
interface SubsonicSongFiltersProps {
disableArtistFilter?: boolean;
disableGenreFilter?: boolean;
}
export const SubsonicSongFilters = ({
disableArtistFilter,
disableGenreFilter,
}: SubsonicSongFiltersProps) => {
const { t } = useTranslation();
const serverId = useCurrentServerId();
const { query, setArtistIds, setFavorite, setGenreId } = useSongListFilters();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
@@ -149,19 +152,23 @@ export const SubsonicSongFilters = () => {
/>
</Group>
))}
<Divider my="md" />
<VirtualMultiSelect
disabled={isArtistDisabled}
displayCountType="song"
height={300}
label={artistFilterLabel}
onChange={handleArtistFilter}
options={selectableAlbumArtists}
RowComponent={ArtistMultiSelectRow}
singleSelect={true}
value={selectedArtistIds}
/>
{!isGenrePage && (
{!disableArtistFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect
disabled={isArtistDisabled}
displayCountType="song"
height={300}
label={artistFilterLabel}
onChange={handleArtistFilter}
options={selectableAlbumArtists}
RowComponent={ArtistMultiSelectRow}
singleSelect={true}
value={selectedArtistIds}
/>
</>
)}
{!disableGenreFilter && (
<>
<Divider my="md" />
<VirtualMultiSelect