mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 18:13:31 +00:00
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:
parent
b5bdea1845
commit
5456c2c2b8
10 changed files with 119 additions and 62 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
|
|||
},
|
||||
query: {
|
||||
artistIds: [routeId],
|
||||
compilation: false,
|
||||
limit: 15,
|
||||
sortBy: AlbumListSort.RELEASE_DATE,
|
||||
sortOrder: SortOrder.DESC,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}, [
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
33
src/shared/components/yes-no-select/yes-no-select.tsx
Normal file
33
src/shared/components/yes-no-select/yes-no-select.tsx
Normal 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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue