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

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
Show stats 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>
);

16
src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
View file

@ -1,6 +1,7 @@
import { createPolymorphicComponent, Flex } from '@mantine/core';
import { motion } from 'framer-motion';
import { forwardRef } from 'react';
import { useMatch } from 'react-router';
import styled from 'styled-components';
import { Text } from '/@/renderer/components';
@ -62,29 +63,32 @@ const ActiveTabIndicator = styled(motion.div)`
`;
interface CollapsedSidebarItemProps {
active?: boolean;
activeIcon: React.ReactNode;
disabled?: boolean;
icon: React.ReactNode;
label: string;
route?: string;
}
const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
({ active, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
const match = useMatch(route || '/null');
const isMatch = Boolean(match);
return (
<Container
ref={ref}
$active={active}
$active={Boolean(match)}
$disabled={disabled}
align="center"
direction="column"
{...props}
>
{active && <ActiveTabIndicator layoutId="active-tab-indicator" />}
{active ? activeIcon : icon}
{isMatch ? <ActiveTabIndicator /> : null}
{isMatch ? activeIcon : icon}
<TextWrapper>
<Text
$secondary={!active}
$secondary={!isMatch}
fw="600"
overflow="hidden"
size="xs"

28
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file

@ -19,8 +19,7 @@ import {
RiSearchLine,
RiSearchFill,
} from 'react-icons/ri';
import { useLocation } from 'react-router';
import { Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { DropdownMenu, ScrollArea } from '/@/renderer/components';
import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
@ -41,7 +40,6 @@ const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
`;
export const CollapsedSidebar = () => {
const location = useLocation();
const { windowBarStyle } = useWindowSettings();
const { open } = useCommandPalette();
@ -71,41 +69,41 @@ export const CollapsedSidebar = () => {
onClick={open}
/>
<CollapsedSidebarItem
active={location.pathname === AppRoute.HOME}
activeIcon={<RiHome6Fill size="25" />}
component={Link}
component={NavLink}
icon={<RiHome6Line size="25" />}
label="Home"
route={AppRoute.HOME}
to={AppRoute.HOME}
/>
<CollapsedSidebarItem
active={location.pathname === AppRoute.LIBRARY_ALBUMS}
activeIcon={<RiAlbumFill size="25" />}
component={Link}
component={NavLink}
icon={<RiAlbumLine size="25" />}
label="Albums"
route={AppRoute.LIBRARY_ALBUMS}
to={AppRoute.LIBRARY_ALBUMS}
/>
<CollapsedSidebarItem
active={location.pathname === AppRoute.LIBRARY_SONGS}
activeIcon={<RiMusic2Fill size="25" />}
component={Link}
component={NavLink}
icon={<RiMusic2Line size="25" />}
label="Tracks"
route={AppRoute.LIBRARY_SONGS}
to={AppRoute.LIBRARY_SONGS}
/>
<CollapsedSidebarItem
active={location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS}
activeIcon={<RiUserVoiceFill size="25" />}
component={Link}
component={NavLink}
icon={<RiUserVoiceLine size="25" />}
label="Artists"
route={AppRoute.LIBRARY_ALBUM_ARTISTS}
to={AppRoute.LIBRARY_ALBUM_ARTISTS}
/>
<CollapsedSidebarItem
disabled
activeIcon={<RiFlag2Fill size="25" />}
component={Link}
component={NavLink}
icon={<RiFlag2Line size="25" />}
label="Genres"
to={AppRoute.LIBRARY_GENRES}
@ -113,17 +111,17 @@ export const CollapsedSidebar = () => {
<CollapsedSidebarItem
disabled
activeIcon={<RiFolder3Fill size="25" />}
component={Link}
component={NavLink}
icon={<RiFolder3Line size="25" />}
label="Folders"
to={AppRoute.LIBRARY_FOLDERS}
/>
<CollapsedSidebarItem
active={location.pathname === AppRoute.PLAYLISTS}
activeIcon={<RiPlayListFill size="25" />}
component={Link}
component={NavLink}
icon={<RiPlayListLine size="25" />}
label="Playlists"
route={AppRoute.PLAYLISTS}
to={AppRoute.PLAYLISTS}
/>
</ScrollArea>

19
src/renderer/layouts/default-layout/main-content.tsx
View file

@ -9,6 +9,8 @@ import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/u
import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
import { Center } from '@mantine/core';
import { Spinner } from '/@/renderer/components';
const SideDrawerQueue = lazy(() =>
import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
@ -102,8 +104,8 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
sidebarCollapsed={collapsed}
>
{!shell && (
<Suspense fallback={<></>}>
{showQueueDrawerButton && <SideDrawerQueue />}
<>
<Suspense fallback={<></>}>{showQueueDrawerButton && <SideDrawerQueue />}</Suspense>
<FullScreenOverlay />
<LeftSidebar
isResizing={isResizing}
@ -114,9 +116,18 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
isResizing={isResizingRight}
startResizing={startResizing}
/>
</Suspense>
</>
)}
<Suspense fallback={<></>}>
<Suspense
fallback={
<Center
h="100%"
w="100%"
>
<Spinner />
</Center>
}
>
<Outlet />
</Suspense>
</MainContentContainer>