mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Refactoring Section Container

Browse source
This commit is contained in:
grafixeyehero 2024-09-23 02:53:44 +03:00 • committed by Bill Thornton
parent c3e253d98d
commit 12995545b9
11 changed files with 257 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/apps/experimental/components/library/UpcomingView.tsx
View file

@ -1,49 +1,44 @@
import React, { type FC } from 'react';
import Box from '@mui/material/Box';
import { useGetGroupsUpcomingEpisodes } from 'hooks/useFetchItems';
import Loading from 'components/loading/LoadingComponent';
import globalize from 'lib/globalize';
import SectionContainer from './SectionContainer';
import NoItemsMessage from 'components/common/NoItemsMessage';
import SectionContainer from 'components/common/SectionContainer';
import { CardShape } from 'utils/card';
import type { LibraryViewProps } from 'types/library';
const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
const { isLoading, data: groupsUpcomingEpisodes } = useGetGroupsUpcomingEpisodes(parentId);
const { isLoading, data: groupsUpcomingEpisodes } =
useGetGroupsUpcomingEpisodes(parentId);
if (isLoading) return <Loading />;
return (
<Box>
{!groupsUpcomingEpisodes?.length ? (
<div className='noItemsMessage centerMessage'>
<h1>{globalize.translate('MessageNothingHere')}</h1>
<p>
{globalize.translate(
'MessagePleaseEnsureInternetMetadata'
)}
</p>
</div>
) : (
groupsUpcomingEpisodes?.map((group) => (
<SectionContainer
key={group.name}
sectionTitle={group.name}
items={group.items ?? []}
cardOptions={{
shape: CardShape.BackdropOverflow,
showLocationTypeIndicator: false,
showParentTitle: true,
preferThumb: true,
lazy: true,
showDetailsMenu: true,
missingIndicator: false,
cardLayout: false
}}
/>
))
)}
</Box>
);
if (!groupsUpcomingEpisodes?.length) {
return <NoItemsMessage message='MessagePleaseEnsureInternetMetadata' />;
}
return groupsUpcomingEpisodes?.map((group) => (
<SectionContainer
key={group.name}
sectionHeaderProps={{
title: group.name
}}
itemsContainerProps={{
queryKey: ['GroupsUpcomingEpisodes']
}}
items={group.items}
cardOptions={{
shape: CardShape.BackdropOverflow,
showLocationTypeIndicator: false,
showParentTitle: true,
preferThumb: true,
lazy: true,
showDetailsMenu: true,
missingIndicator: false,
cardLayout: false,
queryKey: ['GroupsUpcomingEpisodes']
}}
/>
));
};
export default UpcomingView;