This commit is contained in:
jeffvli
2025-09-07 12:09:34 -07:00
parent a7430dae31
commit 0c7c0e488d
6 changed files with 195 additions and 195 deletions
+180 -180
View File
@@ -33,198 +33,198 @@ const HomeRoute = () => {
const { windowBarStyle } = useWindowSettings();
const { homeFeature, homeItems } = useGeneralSettings();
const feature = useAlbumList({
options: {
enabled: homeFeature,
gcTime: 1000 * 60,
staleTime: 1000 * 60,
},
query: {
limit: 20,
offset: 0,
sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.DESC,
},
serverId: server?.id,
});
// const feature = useAlbumList({
// options: {
// enabled: homeFeature,
// gcTime: 1000 * 60,
// staleTime: 1000 * 60,
// },
// query: {
// limit: 20,
// offset: 0,
// sortBy: AlbumListSort.RANDOM,
// sortOrder: ListSortOrder.DESC,
// },
// serverId: server?.id,
// });
const featureItemsWithImage = useMemo(() => {
return feature.data?.items?.filter((item) => item.imageUrl) ?? [];
}, [feature.data?.items]);
// const featureItemsWithImage = useMemo(() => {
// return feature.data?.items?.filter((item) => item.imageUrl) ?? [];
// }, [feature.data?.items]);
const random = useAlbumList({
options: {
staleTime: 1000 * 60 * 5,
},
query: {
limit: itemsPerPage,
offset: 0,
sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.ASC,
},
serverId: server?.id,
});
// const random = useAlbumList({
// options: {
// staleTime: 1000 * 60 * 5,
// },
// query: {
// limit: itemsPerPage,
// offset: 0,
// sortBy: AlbumListSort.RANDOM,
// sortOrder: ListSortOrder.ASC,
// },
// serverId: server?.id,
// });
const recentlyPlayed = useRecentlyPlayed({
options: {
staleTime: 0,
},
query: {
limit: itemsPerPage,
offset: 0,
sortBy: AlbumListSort.RECENTLY_PLAYED,
sortOrder: ListSortOrder.DESC,
},
serverId: server?.id,
});
// const recentlyPlayed = useRecentlyPlayed({
// options: {
// staleTime: 0,
// },
// query: {
// limit: itemsPerPage,
// offset: 0,
// sortBy: AlbumListSort.RECENTLY_PLAYED,
// sortOrder: ListSortOrder.DESC,
// },
// serverId: server?.id,
// });
const recentlyAdded = useAlbumList({
options: {
staleTime: 1000 * 60 * 5,
},
query: {
limit: itemsPerPage,
offset: 0,
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: ListSortOrder.DESC,
},
serverId: server?.id,
});
// const recentlyAdded = useAlbumList({
// options: {
// staleTime: 1000 * 60 * 5,
// },
// query: {
// limit: itemsPerPage,
// offset: 0,
// sortBy: AlbumListSort.RECENTLY_ADDED,
// sortOrder: ListSortOrder.DESC,
// },
// serverId: server?.id,
// });
const mostPlayedAlbums = useAlbumList({
options: {
enabled: server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME,
staleTime: 1000 * 60 * 5,
},
query: {
limit: itemsPerPage,
offset: 0,
sortBy: AlbumListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC,
},
serverId: server?.id,
});
// const mostPlayedAlbums = useAlbumList({
// options: {
// enabled: server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME,
// staleTime: 1000 * 60 * 5,
// },
// query: {
// limit: itemsPerPage,
// offset: 0,
// sortBy: AlbumListSort.PLAY_COUNT,
// sortOrder: ListSortOrder.DESC,
// },
// serverId: server?.id,
// });
const mostPlayedSongs = useSongList(
{
options: {
enabled: server?.type === ServerType.JELLYFIN,
staleTime: 1000 * 60 * 5,
},
query: {
limit: itemsPerPage,
offset: 0,
sortBy: SongListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC,
},
serverId: server?.id,
},
300,
);
// const mostPlayedSongs = useSongList(
// {
// options: {
// enabled: server?.type === ServerType.JELLYFIN,
// staleTime: 1000 * 60 * 5,
// },
// query: {
// limit: itemsPerPage,
// offset: 0,
// sortBy: SongListSort.PLAY_COUNT,
// sortOrder: ListSortOrder.DESC,
// },
// serverId: server?.id,
// },
// 300,
// );
const isLoading =
random.isLoading ||
recentlyPlayed.isLoading ||
recentlyAdded.isLoading ||
(server?.type === ServerType.JELLYFIN && mostPlayedSongs.isLoading) ||
((server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME) &&
mostPlayedAlbums.isLoading);
// const isLoading =
// random.isLoading ||
// recentlyPlayed.isLoading ||
// recentlyAdded.isLoading ||
// (server?.type === ServerType.JELLYFIN && mostPlayedSongs.isLoading) ||
// ((server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME) &&
// mostPlayedAlbums.isLoading);
if (isLoading) {
return <Spinner container />;
}
// if (isLoading) {
// return <Spinner container />;
// }
const carousels = {
[HomeItem.MOST_PLAYED]: {
data:
server?.type === ServerType.JELLYFIN
? mostPlayedSongs?.data?.items
: mostPlayedAlbums?.data?.items,
itemType: server?.type === ServerType.JELLYFIN ? LibraryItem.SONG : LibraryItem.ALBUM,
pagination: {
itemsPerPage,
},
sortBy:
server?.type === ServerType.JELLYFIN
? SongListSort.PLAY_COUNT
: AlbumListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC,
title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
},
[HomeItem.RANDOM]: {
data: random?.data?.items,
itemType: LibraryItem.ALBUM,
sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.ASC,
title: t('page.home.explore', { postProcess: 'sentenceCase' }),
},
[HomeItem.RECENTLY_ADDED]: {
data: recentlyAdded?.data?.items,
itemType: LibraryItem.ALBUM,
pagination: {
itemsPerPage,
},
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: ListSortOrder.DESC,
title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
},
[HomeItem.RECENTLY_PLAYED]: {
data: recentlyPlayed?.data?.items,
itemType: LibraryItem.ALBUM,
pagination: {
itemsPerPage,
},
sortBy: AlbumListSort.RECENTLY_PLAYED,
sortOrder: ListSortOrder.DESC,
title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
},
};
// const carousels = {
// [HomeItem.MOST_PLAYED]: {
// data:
// server?.type === ServerType.JELLYFIN
// ? mostPlayedSongs?.data?.items
// : mostPlayedAlbums?.data?.items,
// itemType: server?.type === ServerType.JELLYFIN ? LibraryItem.SONG : LibraryItem.ALBUM,
// pagination: {
// itemsPerPage,
// },
// sortBy:
// server?.type === ServerType.JELLYFIN
// ? SongListSort.PLAY_COUNT
// : AlbumListSort.PLAY_COUNT,
// sortOrder: ListSortOrder.DESC,
// title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
// },
// [HomeItem.RANDOM]: {
// data: random?.data?.items,
// itemType: LibraryItem.ALBUM,
// sortBy: AlbumListSort.RANDOM,
// sortOrder: ListSortOrder.ASC,
// title: t('page.home.explore', { postProcess: 'sentenceCase' }),
// },
// [HomeItem.RECENTLY_ADDED]: {
// data: recentlyAdded?.data?.items,
// itemType: LibraryItem.ALBUM,
// pagination: {
// itemsPerPage,
// },
// sortBy: AlbumListSort.RECENTLY_ADDED,
// sortOrder: ListSortOrder.DESC,
// title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
// },
// [HomeItem.RECENTLY_PLAYED]: {
// data: recentlyPlayed?.data?.items,
// itemType: LibraryItem.ALBUM,
// pagination: {
// itemsPerPage,
// },
// sortBy: AlbumListSort.RECENTLY_PLAYED,
// sortOrder: ListSortOrder.DESC,
// title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
// },
// };
const sortedCarousel = homeItems
.filter((item) => {
if (item.disabled) {
return false;
}
if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) {
return false;
}
// const sortedCarousel = homeItems
// .filter((item) => {
// if (item.disabled) {
// return false;
// }
// if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) {
// return false;
// }
return true;
})
.map((item) => ({
...carousels[item.id],
uniqueId: item.id,
}));
// return true;
// })
// .map((item) => ({
// ...carousels[item.id],
// uniqueId: item.id,
// }));
const invalidateCarouselQuery = (carousel: {
itemType: LibraryItem;
sortBy: AlbumListSort | SongListSort;
sortOrder: ListSortOrder;
}) => {
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,
}),
});
}
// const invalidateCarouselQuery = (carousel: {
// itemType: LibraryItem;
// sortBy: AlbumListSort | SongListSort;
// sortOrder: ListSortOrder;
// }) => {
// 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,
}),
});
}
};
// 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 (
<AnimatedPage>
@@ -247,7 +247,7 @@ const HomeRoute = () => {
pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'}
px="2rem"
>
{homeFeature && <FeatureCarousel data={featureItemsWithImage} />}
{/* {homeFeature && <FeatureCarousel data={featureItemsWithImage} />} */}
<AlbumInfiniteCarousel
serverId={server?.id ?? ''}
@@ -8,7 +8,11 @@ import {
getInfiniteAlbumListQueryKey,
} from '/@/renderer/features/albums/api/queries/get-album-list-query';
import { GridCarousel } from '/@/shared/components/grid-carousel/grid-carousel';
import { AlbumListResponse, AlbumListSortOptions } from '/@/shared/types/domain/album-domain-types';
import {
Album,
AlbumListResponse,
AlbumListSortOptions,
} from '/@/shared/types/domain/album-domain-types';
import { ListSortOrder } from '/@/shared/types/domain/shared-domain-types';
interface AlbumCarouselProps {
@@ -19,7 +23,7 @@ interface AlbumCarouselProps {
title: string;
}
const MemoizedAlbumCard = memo(PosterCard);
const MemoizedAlbumCard = memo(({ data }: { data: Album }) => <div>{data.name}</div>);
export function AlbumInfiniteCarousel(props: AlbumCarouselProps) {
const { rowCount = 1, serverId, sortBy, sortOrder, title } = props;
@@ -62,7 +62,6 @@ export const normalize = {
explicit: item.explicitStatus === 'explicit',
genres: getGenres(item),
id: item.id.toString(),
imagePlaceholderUrl: null,
imageUrl,
isCompilation: getIsCompilation(item),
mbzId: item.musicBrainzId || null,
@@ -86,22 +86,20 @@ export function GridCarousel(props: GridCarouselProps) {
return (
<motion.div className={styles.gridCarousel} ref={containerRef}>
<div className={styles.navigation}>
<TextTitle order={1} size="lg">
{title}
</TextTitle>
<TextTitle order={1}>{title}</TextTitle>
<Group gap="xs" justify="end">
<ActionIcon
disabled={isPrevDisabled}
icon="arrowLeftS"
onClick={handlePrevPage}
size="lg"
size="xs"
variant="default"
/>
<ActionIcon
disabled={isNextDisabled}
icon="arrowRightS"
onClick={handleNextPage}
size="lg"
size="xs"
variant="default"
/>
</Group>
@@ -6,12 +6,12 @@ import { Breakpoints } from '/@/shared/types/types';
export function useContainerBreakpoints() {
const [ref, rect] = useResizeObserver();
const [globalBreakpoints, setGlobalBreakpoints] = useState({
'2xl': 0,
'3xl': 0,
lg: 0,
md: 0,
sm: 0,
xl: 0,
xxl: 0,
xxxl: 0,
});
useEffect(() => {
@@ -25,12 +25,12 @@ export function useContainerBreakpoints() {
};
setGlobalBreakpoints({
'2xl': getBreakpointValue('2xl'),
'3xl': getBreakpointValue('3xl'),
lg: getBreakpointValue('lg'),
md: getBreakpointValue('md'),
sm: getBreakpointValue('sm'),
xl: getBreakpointValue('xl'),
xxl: getBreakpointValue('xxl'),
xxxl: getBreakpointValue('xxxl'),
});
}, []);
@@ -38,8 +38,8 @@ export function useContainerBreakpoints() {
const isLargerThanMd = rect?.width >= globalBreakpoints.md;
const isLargerThanLg = rect?.width >= globalBreakpoints.lg;
const isLargerThanXl = rect?.width >= globalBreakpoints.xl;
const isLargerThan2xl = rect?.width >= globalBreakpoints.xxl;
const isLargerThan3xl = rect?.width >= globalBreakpoints.xxxl;
const isLargerThan2xl = rect?.width >= globalBreakpoints['2xl'];
const isLargerThan3xl = rect?.width >= globalBreakpoints['3xl'];
const breakpoints: Breakpoints = {
isLargerThan2xl,
@@ -165,7 +165,6 @@ export type Album = {
explicit: boolean | null;
genres: RelatedGenre[];
id: string;
imagePlaceholderUrl: null | string;
imageUrl: null | string;
isCompilation: boolean | null;
mbzId: null | string;