antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Optimize various pages

Browse source
This commit is contained in:
jeffvli 2023-06-01 20:08:43 -07:00
parent e7c7eb3ec0
commit 17b1acad9d
4 changed files with 101 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/renderer/features/home/routes/home-route.tsx
View file

@ -1,11 +1,10 @@
import { useMemo, useRef } from 'react';
import { Box, Stack } from '@mantine/core';
import { Center, Stack } from '@mantine/core';
import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
import { FeatureCarousel, NativeScrollArea } from '/@/renderer/components';
import { FeatureCarousel, NativeScrollArea, Spinner } from '/@/renderer/components';
import { useAlbumList } from '/@/renderer/features/albums';
import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useWindowSettings } from '/@/renderer/store';
import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
@ -14,8 +13,7 @@ import { Platform } from '/@/renderer/types';
const HomeRoute = () => {
const scrollAreaRef = useRef<HTMLDivElement>(null);
const server = useCurrentServer();
const cq = useContainerQuery();
const itemsPerPage = 25;
const itemsPerPage = 15;
const { windowBarStyle } = useWindowSettings();
const feature = useAlbumList({
@ -63,6 +61,9 @@ const HomeRoute = () => {
});
const recentlyAdded = useAlbumList({
options: {
staleTime: 0,
},
query: {
limit: itemsPerPage,
sortBy: AlbumListSort.RECENTLY_ADDED,
@ -74,7 +75,7 @@ const HomeRoute = () => {
const mostPlayed = useAlbumList({
options: {
staleTime: 1000 * 60 * 5,
staleTime: 0,
},
query: {
limit: itemsPerPage,
@ -85,16 +86,31 @@ const HomeRoute = () => {
serverId: server?.id,
});
const isLoading =
random.isFetching ||
recentlyPlayed.isFetching ||
recentlyAdded.isFetching ||
mostPlayed.isFetching;
if (isLoading) {
return (
<Center
h="100%"
w="100%"
>
<Spinner />
</Center>
);
}
const carousels = [
{
data: random?.data?.items,
loading: random?.isLoading,
title: 'Explore from your library',
uniqueId: 'random',
},
{
data: recentlyPlayed?.data?.items,
loading: recentlyPlayed?.isLoading,
pagination: {
itemsPerPage,
},
@ -103,7 +119,6 @@ const HomeRoute = () => {
},
{
data: recentlyAdded?.data?.items,
loading: recentlyAdded?.isLoading,
pagination: {
itemsPerPage,
},
@ -112,7 +127,6 @@ const HomeRoute = () => {
},
{
data: mostPlayed?.data?.items,
loading: mostPlayed?.isLoading,
pagination: {
itemsPerPage,
},
@ -135,58 +149,52 @@ const HomeRoute = () => {
offset: ['0px', '200px'],
}}
>
<Box
ref={cq.ref}
<Stack
mb="5rem"
pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'}
px="2rem"
spacing="lg"
>
<Stack spacing="lg">
<FeatureCarousel data={featureItemsWithImage} />
{carousels
.filter((carousel) => {
if (
server?.type === ServerType.JELLYFIN &&
carousel.uniqueId === 'recentlyPlayed'
) {
return null;
}
<FeatureCarousel data={featureItemsWithImage} />
{carousels
.filter((carousel) => {
if (server?.type === ServerType.JELLYFIN && carousel.uniqueId === 'recentlyPlayed') {
return null;
}
return carousel;
})
.map((carousel) => (
<SwiperGridCarousel
key={`carousel-${carousel.uniqueId}`}
cardRows={[
{
property: 'name',
route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
},
return carousel;
})
.map((carousel) => (
<SwiperGridCarousel
key={`carousel-${carousel.uniqueId}`}
cardRows={[
{
property: 'name',
route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
},
{
arrayProperty: 'name',
property: 'albumArtists',
route: {
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
},
},
{
arrayProperty: 'name',
property: 'albumArtists',
route: {
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
},
]}
data={carousel.data}
isLoading={carousel.loading}
itemType={LibraryItem.ALBUM}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}}
title={{ label: carousel.title }}
uniqueId={carousel.uniqueId}
/>
))}
</Stack>
</Box>
},
]}
data={carousel.data}
itemType={LibraryItem.ALBUM}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}}
title={{ label: carousel.title }}
uniqueId={carousel.uniqueId}
/>
))}
</Stack>
</NativeScrollArea>
</AnimatedPage>
);