mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-06 20:10:12 +02:00
temp 2
This commit is contained in:
@@ -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 ?? ''}
|
||||
|
||||
+6
-2
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user