mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-15 04:51:06 +02:00
add additional client-side filters to playlist songs
This commit is contained in:
jeffvli
@@ -5,17 +5,25 @@ import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-searc
|
||||
import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
|
||||
import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
|
||||
import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
|
||||
import { useAppStore } from '/@/renderer/store/app.store';
|
||||
import {
|
||||
parseArrayParam,
|
||||
parseBooleanParam,
|
||||
parseCustomFiltersParam,
|
||||
parseIntParam,
|
||||
setMultipleSearchParams,
|
||||
setSearchParam,
|
||||
} from '/@/renderer/utils/query-params';
|
||||
import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
|
||||
import { ItemListKey } from '/@/shared/types/types';
|
||||
|
||||
export const usePlaylistSongListFilters = () => {
|
||||
const albumArtistIdsMode = useAppStore((state) => state.albumArtistIdsMode);
|
||||
const artistIdsMode = useAppStore((state) => state.artistIdsMode);
|
||||
const genreIdsMode = useAppStore((state) => state.genreIdsMode);
|
||||
const setAlbumArtistIdsModeStore = useAppStore((state) => state.actions.setAlbumArtistIdsMode);
|
||||
const setArtistIdsModeStore = useAppStore((state) => state.actions.setArtistIdsMode);
|
||||
const setGenreIdsModeStore = useAppStore((state) => state.actions.setGenreIdsMode);
|
||||
const { sortBy } = useSortByFilter<SongListSort>(SongListSort.ID, ItemListKey.PLAYLIST_SONG);
|
||||
|
||||
const { sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.PLAYLIST_SONG);
|
||||
@@ -24,8 +32,8 @@ export const usePlaylistSongListFilters = () => {
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const albumIds = useMemo(
|
||||
() => parseArrayParam(searchParams, FILTER_KEYS.SONG.ALBUM_IDS),
|
||||
const albumArtistIds = useMemo(
|
||||
() => parseArrayParam(searchParams, FILTER_KEYS.SONG.ALBUM_ARTIST_IDS),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
@@ -54,16 +62,22 @@ export const usePlaylistSongListFilters = () => {
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
const hasRating = useMemo(
|
||||
() => parseBooleanParam(searchParams, FILTER_KEYS.SONG.HAS_RATING),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
const custom = useMemo(
|
||||
() => parseCustomFiltersParam(searchParams, FILTER_KEYS.SONG._CUSTOM),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
const setAlbumIds = useCallback(
|
||||
const setAlbumArtistIds = useCallback(
|
||||
(value: null | string[]) => {
|
||||
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.SONG.ALBUM_IDS, value), {
|
||||
replace: true,
|
||||
});
|
||||
setSearchParams(
|
||||
(prev) => setSearchParam(prev, FILTER_KEYS.SONG.ALBUM_ARTIST_IDS, value),
|
||||
{ replace: true },
|
||||
);
|
||||
},
|
||||
[setSearchParams],
|
||||
);
|
||||
@@ -113,6 +127,30 @@ export const usePlaylistSongListFilters = () => {
|
||||
[setSearchParams],
|
||||
);
|
||||
|
||||
const setHasRating = useCallback(
|
||||
(value: boolean | null) => {
|
||||
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.SONG.HAS_RATING, value), {
|
||||
replace: true,
|
||||
});
|
||||
},
|
||||
[setSearchParams],
|
||||
);
|
||||
|
||||
const setAlbumArtistIdsMode = useCallback(
|
||||
(value: 'and' | 'or') => setAlbumArtistIdsModeStore(value),
|
||||
[setAlbumArtistIdsModeStore],
|
||||
);
|
||||
|
||||
const setArtistIdsMode = useCallback(
|
||||
(value: 'and' | 'or') => setArtistIdsModeStore(value),
|
||||
[setArtistIdsModeStore],
|
||||
);
|
||||
|
||||
const setGenreIdsMode = useCallback(
|
||||
(value: 'and' | 'or') => setGenreIdsModeStore(value),
|
||||
[setGenreIdsModeStore],
|
||||
);
|
||||
|
||||
const setCustom = useCallback(
|
||||
(value: null | Record<string, any>) => {
|
||||
setSearchParams(
|
||||
@@ -141,26 +179,74 @@ export const usePlaylistSongListFilters = () => {
|
||||
[setSearchParams],
|
||||
);
|
||||
|
||||
const query = {
|
||||
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
|
||||
[FILTER_KEYS.SHARED.SORT_BY]: sortBy ?? undefined,
|
||||
[FILTER_KEYS.SHARED.SORT_ORDER]: sortOrder ?? undefined,
|
||||
[FILTER_KEYS.SONG._CUSTOM]: custom ?? undefined,
|
||||
[FILTER_KEYS.SONG.ALBUM_IDS]: albumIds ?? undefined,
|
||||
[FILTER_KEYS.SONG.ARTIST_IDS]: artistIds ?? undefined,
|
||||
[FILTER_KEYS.SONG.FAVORITE]: favorite ?? undefined,
|
||||
[FILTER_KEYS.SONG.GENRE_ID]: genreId ?? undefined,
|
||||
[FILTER_KEYS.SONG.MAX_YEAR]: maxYear ?? undefined,
|
||||
[FILTER_KEYS.SONG.MIN_YEAR]: minYear ?? undefined,
|
||||
};
|
||||
const clear = useCallback(() => {
|
||||
setSearchParams(
|
||||
(prev) =>
|
||||
setMultipleSearchParams(
|
||||
prev,
|
||||
{
|
||||
[FILTER_KEYS.SONG._CUSTOM]: null,
|
||||
[FILTER_KEYS.SONG.ALBUM_ARTIST_IDS]: null,
|
||||
[FILTER_KEYS.SONG.ARTIST_IDS]: null,
|
||||
[FILTER_KEYS.SONG.FAVORITE]: null,
|
||||
[FILTER_KEYS.SONG.GENRE_ID]: null,
|
||||
[FILTER_KEYS.SONG.HAS_RATING]: null,
|
||||
[FILTER_KEYS.SONG.MAX_YEAR]: null,
|
||||
[FILTER_KEYS.SONG.MIN_YEAR]: null,
|
||||
},
|
||||
new Set([FILTER_KEYS.SONG._CUSTOM]),
|
||||
),
|
||||
{ replace: true },
|
||||
);
|
||||
}, [setSearchParams]);
|
||||
|
||||
const query = useMemo(
|
||||
() => ({
|
||||
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
|
||||
[FILTER_KEYS.SHARED.SORT_BY]: sortBy ?? undefined,
|
||||
[FILTER_KEYS.SHARED.SORT_ORDER]: sortOrder ?? undefined,
|
||||
[FILTER_KEYS.SONG._CUSTOM]: custom ?? undefined,
|
||||
[FILTER_KEYS.SONG.ALBUM_ARTIST_IDS]: albumArtistIds ?? undefined,
|
||||
[FILTER_KEYS.SONG.ALBUM_ARTIST_IDS_MODE]: albumArtistIdsMode,
|
||||
[FILTER_KEYS.SONG.ARTIST_IDS]: artistIds ?? undefined,
|
||||
[FILTER_KEYS.SONG.ARTIST_IDS_MODE]: artistIdsMode,
|
||||
[FILTER_KEYS.SONG.FAVORITE]: favorite ?? undefined,
|
||||
[FILTER_KEYS.SONG.GENRE_ID]: genreId ?? undefined,
|
||||
[FILTER_KEYS.SONG.GENRE_ID_MODE]: genreIdsMode,
|
||||
[FILTER_KEYS.SONG.HAS_RATING]: hasRating ?? undefined,
|
||||
[FILTER_KEYS.SONG.MAX_YEAR]: maxYear ?? undefined,
|
||||
[FILTER_KEYS.SONG.MIN_YEAR]: minYear ?? undefined,
|
||||
}),
|
||||
[
|
||||
searchTerm,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
custom,
|
||||
albumArtistIds,
|
||||
albumArtistIdsMode,
|
||||
artistIds,
|
||||
artistIdsMode,
|
||||
favorite,
|
||||
genreId,
|
||||
genreIdsMode,
|
||||
hasRating,
|
||||
maxYear,
|
||||
minYear,
|
||||
],
|
||||
);
|
||||
|
||||
return {
|
||||
clear,
|
||||
query,
|
||||
setAlbumIds,
|
||||
setAlbumArtistIds,
|
||||
setAlbumArtistIdsMode,
|
||||
setArtistIds,
|
||||
setArtistIdsMode,
|
||||
setCustom,
|
||||
setFavorite,
|
||||
setGenreId,
|
||||
setGenreIdsMode,
|
||||
setHasRating,
|
||||
setMaxYear,
|
||||
setMinYear,
|
||||
setSearchTerm,
|
||||
|
||||
@@ -3,9 +3,88 @@ import { useEffect, useMemo } from 'react';
|
||||
import { useListContext } from '/@/renderer/context/list-context';
|
||||
import { usePlaylistSongListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-song-list-filters';
|
||||
import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
|
||||
import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
|
||||
import { searchLibraryItems } from '/@/renderer/features/shared/utils';
|
||||
import { sortSongList } from '/@/shared/api/utils';
|
||||
import { LibraryItem, PlaylistSongListResponse, Song } from '/@/shared/types/domain-types';
|
||||
import {
|
||||
LibraryItem,
|
||||
PlaylistSongListResponse,
|
||||
Song,
|
||||
SongListSort,
|
||||
SortOrder,
|
||||
} from '/@/shared/types/domain-types';
|
||||
|
||||
export function applyClientSideSongFilters(songs: Song[], query: Record<string, unknown>): Song[] {
|
||||
let result = songs;
|
||||
|
||||
const favorite = query[FILTER_KEYS.SONG.FAVORITE] as boolean | undefined;
|
||||
if (favorite === true) {
|
||||
result = result.filter((s) => s.userFavorite === true);
|
||||
} else if (favorite === false) {
|
||||
result = result.filter((s) => s.userFavorite === false);
|
||||
}
|
||||
|
||||
const hasRating = query[FILTER_KEYS.SONG.HAS_RATING] as boolean | undefined;
|
||||
if (hasRating === true) {
|
||||
result = result.filter((s) => s.userRating != null && s.userRating > 0);
|
||||
} else if (hasRating === false) {
|
||||
result = result.filter((s) => s.userRating == null || s.userRating === 0);
|
||||
}
|
||||
|
||||
const albumArtistIdsMode =
|
||||
(query[FILTER_KEYS.SONG.ALBUM_ARTIST_IDS_MODE] as 'and' | 'or' | undefined) ?? 'and';
|
||||
const albumArtistIds = query[FILTER_KEYS.SONG.ALBUM_ARTIST_IDS] as string[] | undefined;
|
||||
if (albumArtistIds?.length) {
|
||||
if (albumArtistIdsMode === 'and') {
|
||||
result = result.filter((s) =>
|
||||
albumArtistIds!.every((id) => s.albumArtists?.some((a) => a.id === id)),
|
||||
);
|
||||
} else {
|
||||
const set = new Set(albumArtistIds);
|
||||
result = result.filter((s) => s.albumArtists?.some((a) => a.id && set.has(a.id)));
|
||||
}
|
||||
}
|
||||
|
||||
const artistIdsMode =
|
||||
(query[FILTER_KEYS.SONG.ARTIST_IDS_MODE] as 'and' | 'or' | undefined) ?? 'and';
|
||||
const artistIds = query[FILTER_KEYS.SONG.ARTIST_IDS] as string[] | undefined;
|
||||
if (artistIds?.length) {
|
||||
if (artistIdsMode === 'and') {
|
||||
result = result.filter((s) =>
|
||||
artistIds!.every((id) => s.artists?.some((a) => a.id === id)),
|
||||
);
|
||||
} else {
|
||||
const set = new Set(artistIds);
|
||||
result = result.filter((s) => s.artists?.some((a) => a.id && set.has(a.id)));
|
||||
}
|
||||
}
|
||||
|
||||
const genreIdsMode =
|
||||
(query[FILTER_KEYS.SONG.GENRE_ID_MODE] as 'and' | 'or' | undefined) ?? 'and';
|
||||
const genreIds = query[FILTER_KEYS.SONG.GENRE_ID] as string[] | undefined;
|
||||
if (genreIds?.length) {
|
||||
if (genreIdsMode === 'and') {
|
||||
result = result.filter((s) =>
|
||||
genreIds!.every((id) => s.genres?.some((g) => g.id === id)),
|
||||
);
|
||||
} else {
|
||||
const set = new Set(genreIds);
|
||||
result = result.filter((s) => s.genres?.some((g) => g.id && set.has(g.id)));
|
||||
}
|
||||
}
|
||||
|
||||
const minYear = query[FILTER_KEYS.SONG.MIN_YEAR] as number | undefined;
|
||||
if (minYear != null) {
|
||||
result = result.filter((s) => s.releaseYear != null && s.releaseYear >= minYear);
|
||||
}
|
||||
|
||||
const maxYear = query[FILTER_KEYS.SONG.MAX_YEAR] as number | undefined;
|
||||
if (maxYear != null) {
|
||||
result = result.filter((s) => s.releaseYear != null && s.releaseYear <= maxYear);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function usePlaylistTrackList(data: PlaylistSongListResponse | undefined): {
|
||||
sortedAndFilteredSongs: Song[];
|
||||
@@ -17,20 +96,23 @@ export function usePlaylistTrackList(data: PlaylistSongListResponse | undefined)
|
||||
|
||||
const sortedAndFilteredSongs = useMemo(() => {
|
||||
const raw = data?.items ?? [];
|
||||
|
||||
if (searchTerm) {
|
||||
return searchLibraryItems(raw, searchTerm, LibraryItem.SONG);
|
||||
}
|
||||
|
||||
return sortSongList(raw, query.sortBy, query.sortOrder);
|
||||
}, [data?.items, searchTerm, query.sortBy, query.sortOrder]);
|
||||
const filtered = applyClientSideSongFilters(raw, query as Record<string, unknown>);
|
||||
const searched = searchTerm
|
||||
? searchLibraryItems(filtered, searchTerm, LibraryItem.SONG)
|
||||
: filtered;
|
||||
return sortSongList(
|
||||
searched,
|
||||
(query.sortBy as SongListSort) ?? SongListSort.ID,
|
||||
(query.sortOrder as SortOrder) ?? SortOrder.ASC,
|
||||
);
|
||||
}, [data?.items, query, searchTerm]);
|
||||
|
||||
const totalCount = sortedAndFilteredSongs.length;
|
||||
|
||||
useEffect(() => {
|
||||
setListData?.(sortedAndFilteredSongs);
|
||||
setItemCount?.(totalCount);
|
||||
}, [sortedAndFilteredSongs, totalCount, setListData, setItemCount]);
|
||||
}, [query, searchTerm, setListData, setItemCount, sortedAndFilteredSongs, totalCount]);
|
||||
|
||||
return { sortedAndFilteredSongs, totalCount };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user