Improve Jellyfin/Navidrome Album/Song filter, Navidrome artist recent release

- Use `compilation=false` for Navidrome recent releases with artist credit
- Add `YesNoSelect` (yes, no, undefined) for `favorite` for Navidrome/Jellyfin `album`/`track`, and Navidrome `compilation`
- Fix folderButton translation
This commit is contained in:
Kendall Garner 2025-06-29 22:14:06 -07:00
parent b5bdea1845
commit 5456c2c2b8
No known key found for this signature in database
GPG key ID: 9355F387FE765C94
10 changed files with 119 additions and 62 deletions

View file

@ -414,18 +414,23 @@ export const AlbumListHeaderFilters = ({
Object.values(filter?._custom?.jellyfin).some((value) => value !== undefined);
const isSubsonicFilterApplied =
server?.type === ServerType.SUBSONIC &&
(filter.maxYear || filter.minYear || filter.favorite);
server?.type === ServerType.SUBSONIC && (filter.maxYear || filter.minYear);
const isCompilationFilterApplied =
server?.type === ServerType.NAVIDROME && filter.compilation !== undefined;
return (
isNavidromeFilterApplied ||
isJellyfinFilterApplied ||
isSubsonicFilterApplied ||
filter.genres?.length
filter.genres?.length ||
filter.favorite !== undefined ||
isCompilationFilterApplied
);
}, [
filter?._custom?.jellyfin,
filter?._custom?.navidrome,
filter.compilation,
filter.favorite,
filter.genres?.length,
filter.maxYear,

View file

@ -1,5 +1,5 @@
import debounce from 'lodash/debounce';
import { ChangeEvent, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@ -12,8 +12,8 @@ import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
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,
AlbumListQuery,
@ -72,15 +72,15 @@ export const JellyfinAlbumFilters = ({
return filter?._custom?.jellyfin?.Tags?.split('|');
}, [filter?._custom?.jellyfin?.Tags]);
const toggleFilters = [
const yesNoFilter = [
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
onChange: (favorite?: boolean) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter?._custom,
favorite: e.currentTarget.checked ? true : undefined,
favorite,
},
itemType: LibraryItem.ALBUM,
key: pageKey,
@ -189,16 +189,16 @@ export const JellyfinAlbumFilters = ({
return (
<Stack p="0.8rem">
{toggleFilters.map((filter) => (
{yesNoFilter.map((filter) => (
<Group
justify="space-between"
key={`nd-filter-${filter.label}`}
>
<Text>{filter.label}</Text>
<Switch
checked={filter?.value || false}
<YesNoSelect
onChange={filter.onChange}
size="xs"
value={filter.value}
/>
</Group>
))}
@ -250,7 +250,7 @@ export const JellyfinAlbumFilters = ({
searchValue={albumArtistSearchTerm}
/>
</Group>
{tagsQuery.data?.boolTags?.length && (
{tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
<Group grow>
<MultiSelectWithInvalidData
clearable

View file

@ -14,6 +14,7 @@ import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
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,
AlbumListQuery,
@ -78,6 +79,41 @@ export const NavidromeAlbumFilters = ({
serverId,
});
const yesNoUndefinedFilters = [
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (favorite?: boolean) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter._custom,
favorite,
},
itemType: LibraryItem.ALBUM,
key: pageKey,
}) as AlbumListFilter;
onFilterChange(updatedFilters);
},
value: filter.favorite,
},
{
label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
onChange: (compilation?: boolean) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter._custom,
compilation,
},
itemType: LibraryItem.ALBUM,
key: pageKey,
}) as AlbumListFilter;
onFilterChange(updatedFilters);
},
value: filter.compilation,
},
];
const toggleFilters = [
{
label: t('filter.isRated', { postProcess: 'sentenceCase' }),
@ -100,38 +136,6 @@ export const NavidromeAlbumFilters = ({
},
value: filter._custom?.navidrome?.has_rating,
},
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter._custom,
favorite: e.currentTarget.checked ? true : undefined,
},
itemType: LibraryItem.ALBUM,
key: pageKey,
}) as AlbumListFilter;
onFilterChange(updatedFilters);
},
value: filter.favorite,
},
{
label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter._custom,
compilation: e.currentTarget.checked ? true : undefined,
},
itemType: LibraryItem.ALBUM,
key: pageKey,
}) as AlbumListFilter;
onFilterChange(updatedFilters);
},
value: filter.compilation,
},
{
label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
@ -236,6 +240,19 @@ export const NavidromeAlbumFilters = ({
return (
<Stack p="0.8rem">
{yesNoUndefinedFilters.map((filter) => (
<Group
justify="space-between"
key={`nd-filter-${filter.label}`}
>
<Text>{filter.label}</Text>
<YesNoSelect
onChange={filter.onChange}
size="xs"
value={filter.value}
/>
</Group>
))}
{toggleFilters.map((filter) => (
<Group
justify="space-between"

View file

@ -103,6 +103,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
},
query: {
artistIds: [routeId],
compilation: false,
limit: 15,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,

View file

@ -18,7 +18,7 @@ export const FolderButton = ({ isActive, ...props }: FolderButtonProps) => {
...props.iconProps,
}}
tooltip={{
label: t('entity.folder', { postProcess: 'sentenceCase' }),
label: t('entity.folder', { count: 1, postProcess: 'sentenceCase' }),
...props.tooltip,
}}
variant="subtle"

View file

@ -1,5 +1,5 @@
import debounce from 'lodash/debounce';
import { ChangeEvent, useMemo } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
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 { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
interface JellyfinSongFiltersProps {
@ -69,10 +69,10 @@ export const JellyfinSongFilters = ({
return filter?._custom?.jellyfin?.Tags?.split('|');
}, [filter?._custom?.jellyfin?.Tags]);
const toggleFilters = [
const yesNoFilters = [
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
onChange: (favorite?: boolean) => {
const updatedFilters = setFilter({
customFilters,
data: {
@ -83,7 +83,7 @@ export const JellyfinSongFilters = ({
IncludeItemTypes: 'Audio',
},
},
favorite: e.currentTarget.checked ? true : undefined,
favorite,
},
itemType: LibraryItem.SONG,
key: pageKey,
@ -174,15 +174,16 @@ export const JellyfinSongFilters = ({
return (
<Stack p="0.8rem">
{toggleFilters.map((filter) => (
{yesNoFilters.map((filter) => (
<Group
justify="space-between"
key={`nd-filter-${filter.label}`}
>
<Text>{filter.label}</Text>
<Switch
checked={filter?.value || false}
<YesNoSelect
onChange={filter.onChange}
size="xs"
value={filter.value}
/>
</Group>
))}
@ -218,7 +219,7 @@ export const JellyfinSongFilters = ({
/>
</Group>
)}
{tagsQuery.data?.boolTags?.length && (
{tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
<Group grow>
<MultiSelectWithInvalidData
clearable

View file

@ -1,5 +1,5 @@
import debounce from 'lodash/debounce';
import { ChangeEvent, useMemo } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
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 { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
interface NavidromeSongFiltersProps {
@ -93,12 +93,12 @@ export const NavidromeSongFilters = ({
const toggleFilters = [
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
onChange: (favorite: boolean | undefined) => {
const updatedFilters = setFilter({
customFilters,
data: {
_custom: filter._custom,
favorite: e.currentTarget.checked ? true : undefined,
favorite,
},
itemType: LibraryItem.SONG,
key: pageKey,
@ -137,10 +137,10 @@ export const NavidromeSongFilters = ({
key={`nd-filter-${filter.label}`}
>
<Text>{filter.label}</Text>
<Switch
checked={filter?.value || false}
<YesNoSelect
onChange={filter.onChange}
size="xs"
value={filter.value}
/>
</Group>
))}

View file

@ -467,7 +467,7 @@ export const SongListHeaderFilters = ({
.filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
.some((value) => value !== undefined);
const isGenericFilterApplied = filter?.favorite || filter?.genreIds?.length;
const isGenericFilterApplied = filter?.favorite !== undefined || filter?.genreIds?.length;
return isNavidromeFilterApplied || isJellyfinFilterApplied || isGenericFilterApplied;
}, [

View file

@ -69,7 +69,7 @@ export const SubsonicSongFilters = ({
const updatedFilters = setFilter({
customFilters,
data: {
favorite: e.target.checked,
favorite: e.target.checked ? true : undefined,
},
itemType: LibraryItem.SONG,
key: pageKey,

View file

@ -0,0 +1,33 @@
import { useTranslation } from 'react-i18next';
import { Select, SelectProps } from '/@/shared/components/select/select';
export interface YesNoSelectProps extends Omit<SelectProps, 'data' | 'onChange' | 'value'> {
onChange: (e?: boolean) => void;
value?: boolean;
}
export const YesNoSelect = ({ onChange, value, ...props }: YesNoSelectProps) => {
const { t } = useTranslation();
return (
<Select
clearable
data={[
{
label: t('common.no', { postProcess: 'sentenceCase' }),
value: 'false',
},
{
label: t('common.yes', { postProcess: 'sentenceCase' }),
value: 'true',
},
]}
onChange={(e) => {
onChange(e ? e === 'true' : undefined);
}}
value={value !== undefined ? value.toString() : undefined}
{...props}
/>
);
};