diff --git a/src/renderer/features/home/routes/home-route.tsx b/src/renderer/features/home/routes/home-route.tsx index 25b8bb10..ae143b4d 100644 --- a/src/renderer/features/home/routes/home-route.tsx +++ b/src/renderer/features/home/routes/home-route.tsx @@ -1,6 +1,12 @@ import { useMemo, useRef } from 'react'; import { ActionIcon, Group, Stack } from '@mantine/core'; -import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types'; +import { + AlbumListSort, + LibraryItem, + ServerType, + SongListSort, + SortOrder, +} from '/@/renderer/api/types'; import { FeatureCarousel, NativeScrollArea, Spinner, TextTitle } from '/@/renderer/components'; import { useAlbumList } from '/@/renderer/features/albums'; import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query'; @@ -13,6 +19,7 @@ import { useQueryClient } from '@tanstack/react-query'; import { queryKeys } from '/@/renderer/api/query-keys'; import { useTranslation } from 'react-i18next'; import { RiRefreshLine } from 'react-icons/ri'; +import { useSongList } from '/@/renderer/features/songs'; const HomeRoute = () => { const { t } = useTranslation(); @@ -79,8 +86,9 @@ const HomeRoute = () => { serverId: server?.id, }); - const mostPlayed = useAlbumList({ + const mostPlayedAlbums = useAlbumList({ options: { + enabled: server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME, staleTime: 1000 * 60 * 5, }, query: { @@ -92,11 +100,30 @@ const HomeRoute = () => { serverId: server?.id, }); + const mostPlayedSongs = useSongList( + { + options: { + enabled: server?.type === ServerType.JELLYFIN, + staleTime: 1000 * 60 * 5, + }, + query: { + limit: itemsPerPage, + sortBy: SongListSort.PLAY_COUNT, + sortOrder: SortOrder.DESC, + startIndex: 0, + }, + serverId: server?.id, + }, + 300, + ); + const isLoading = random.isLoading || recentlyPlayed.isLoading || recentlyAdded.isLoading || - mostPlayed.isLoading; + (server?.type === ServerType.JELLYFIN && mostPlayedSongs.isLoading) || + ((server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME) && + mostPlayedAlbums.isLoading); if (isLoading) { return ; @@ -105,6 +132,7 @@ const HomeRoute = () => { const carousels = [ { data: random?.data?.items, + itemType: LibraryItem.ALBUM, sortBy: AlbumListSort.RANDOM, sortOrder: SortOrder.ASC, title: t('page.home.explore', { postProcess: 'sentenceCase' }), @@ -112,6 +140,7 @@ const HomeRoute = () => { }, { data: recentlyPlayed?.data?.items, + itemType: LibraryItem.ALBUM, pagination: { itemsPerPage, }, @@ -122,6 +151,7 @@ const HomeRoute = () => { }, { data: recentlyAdded?.data?.items, + itemType: LibraryItem.ALBUM, pagination: { itemsPerPage, }, @@ -131,17 +161,54 @@ const HomeRoute = () => { uniqueId: 'recentlyAdded', }, { - data: mostPlayed?.data?.items, + data: + server?.type === ServerType.JELLYFIN + ? mostPlayedSongs?.data?.items + : mostPlayedAlbums?.data?.items, + itemType: server?.type === ServerType.JELLYFIN ? LibraryItem.SONG : LibraryItem.ALBUM, pagination: { itemsPerPage, }, - sortBy: AlbumListSort.PLAY_COUNT, + sortBy: + server?.type === ServerType.JELLYFIN + ? SongListSort.PLAY_COUNT + : AlbumListSort.PLAY_COUNT, sortOrder: SortOrder.DESC, title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }), uniqueId: 'mostPlayed', }, ]; + const invalidateCarouselQuery = (carousel: { + itemType: LibraryItem; + sortBy: SongListSort | AlbumListSort; + sortOrder: SortOrder; + }) => { + if (carousel.itemType === LibraryItem.ALBUM) { + queryClient.invalidateQueries({ + exact: false, + queryKey: queryKeys.albums.list(server?.id, { + limit: itemsPerPage, + sortBy: carousel.sortBy, + sortOrder: carousel.sortOrder, + startIndex: 0, + }), + }); + } + + if (carousel.itemType === LibraryItem.SONG) { + queryClient.invalidateQueries({ + exact: false, + queryKey: queryKeys.songs.list(server?.id, { + limit: itemsPerPage, + sortBy: carousel.sortBy, + sortOrder: carousel.sortOrder, + startIndex: 0, + }), + }); + } + }; + return ( { }, ]} data={carousel.data} - itemType={LibraryItem.ALBUM} + itemType={carousel.itemType} route={{ route: AppRoute.LIBRARY_ALBUMS_DETAIL, slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], @@ -218,20 +285,7 @@ const HomeRoute = () => { - queryClient.invalidateQueries({ - exact: false, - queryKey: queryKeys.albums.list( - server?.id, - { - limit: itemsPerPage, - sortBy: carousel.sortBy, - sortOrder: carousel.sortOrder, - startIndex: 0, - }, - ), - }) - } + onClick={() => invalidateCarouselQuery(carousel)} >