pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement new header on home page

Browse source
This commit is contained in:
jeffvli 2023-01-02 18:20:45 -08:00
parent d93e6a612e
commit 26e6f479b7
1 changed files with 62 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,17 @@
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo, useRef } from 'react';
import { Box, Stack } from '@mantine/core'; import { Box, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks'; import { useSetState } from '@mantine/hooks';
import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types'; import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { TextTitle, PageHeader, FeatureCarousel, GridCarousel } from '/@/renderer/components'; import { TextTitle, FeatureCarousel, GridCarousel, NativeScrollArea } from '/@/renderer/components';
import { useAlbumList } from '/@/renderer/features/albums'; import { useAlbumList } from '/@/renderer/features/albums';
import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query'; import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store'; import { useCurrentServer } from '/@/renderer/store';
const HomeRoute = () => { const HomeRoute = () => {
// const rootElement = document.querySelector(':root') as HTMLElement; const scrollAreaRef = useRef<HTMLDivElement>(null);
const server = useCurrentServer(); const server = useCurrentServer();
const cq = useContainerQuery(); const cq = useContainerQuery();
const itemsPerPage = cq.isXl ? 9 : cq.isLg ? 7 : cq.isMd ? 5 : cq.isSm ? 4 : 3; const itemsPerPage = cq.isXl ? 9 : cq.isLg ? 7 : cq.isMd ? 5 : cq.isSm ? 4 : 3;
@ -111,16 +111,6 @@ const HomeRoute = () => {
[pagination, setPagination], [pagination, setPagination],
); );
// const handleScroll = (position: { x: number; y: number }) => {
// if (position.y <= 15) {
// return rootElement?.style?.setProperty('--header-opacity', '0');
// }
// return rootElement?.style?.setProperty('--header-opacity', '1');
// };
// const throttledScroll = throttle(handleScroll, 200);
const carousels = [ const carousels = [
{ {
data: random?.data?.items, data: random?.data?.items,
@ -202,74 +192,73 @@ const HomeRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}> <NativeScrollArea
<PageHeader ref={scrollAreaRef}
isHidden pageHeaderProps={{
backgroundColor="var(--sidebar-bg)" backgroundColor: 'var(--titlebar-bg)',
/> children: (
<LibraryHeaderBar>
<LibraryHeaderBar.Title>Home</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
offset: ['0px', '200px'],
}}
>
<Box <Box
mb="1rem" ref={cq.ref}
mt="-1.5rem" pt="3rem"
px="1rem" px="2rem"
sx={{ sx={{
height: '100%', height: '100%',
overflow: 'auto', maxWidth: '1920px',
width: '100%',
}} }}
> >
<Box <Stack spacing={35}>
ref={cq.ref} <FeatureCarousel data={featureItemsWithImage} />
sx={{ {carousels
height: '100%', .filter((carousel) => {
maxWidth: '1920px', if (
width: '100%', server?.type === ServerType.JELLYFIN &&
}} carousel.uniqueId === 'recentlyPlayed'
> ) {
<Stack spacing={35}> return null;
<FeatureCarousel data={featureItemsWithImage} /> }
{carousels
.filter((carousel) => {
if (
server?.type === ServerType.JELLYFIN &&
carousel.uniqueId === 'recentlyPlayed'
) {
return null;
}
return carousel; return carousel;
}) })
.map((carousel, index) => ( .map((carousel, index) => (
<GridCarousel <GridCarousel
key={`carousel-${carousel.uniqueId}-${index}`} key={`carousel-${carousel.uniqueId}-${index}`}
cardRows={[ cardRows={[
{ {
property: 'name', property: 'name',
route: { route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL, route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
},
}, },
{ },
arrayProperty: 'name', {
property: 'albumArtists', arrayProperty: 'name',
route: { property: 'albumArtists',
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, route: {
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }], route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
}, slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
}, },
]} },
containerWidth={cq.width} ]}
data={carousel.data} containerWidth={cq.width}
loading={carousel.loading} data={carousel.data}
pagination={carousel.pagination} loading={carousel.loading}
uniqueId={carousel.uniqueId} pagination={carousel.pagination}
> uniqueId={carousel.uniqueId}
<GridCarousel.Title>{carousel.title}</GridCarousel.Title> >
</GridCarousel> <GridCarousel.Title>{carousel.title}</GridCarousel.Title>
))} </GridCarousel>
</Stack> ))}
</Box> </Stack>
</Box> </Box>
</Box> </NativeScrollArea>
</AnimatedPage> </AnimatedPage>
); );
}; };