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

Replace card component in SectionContainer

Browse source
This commit is contained in:
grafixeyehero 2024-01-31 04:34:00 +03:00
parent 4a12d5b2c6
commit 42b4d08e55
1 changed files with 12 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/apps/experimental/components/library/SectionContainer.tsx
View file

@ -1,43 +1,29 @@
import type { BaseItemDto, TimerInfoDto } from '@jellyfin/sdk/lib/generated-client'; import type { BaseItemDto, TimerInfoDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react'; import React, { FC } from 'react';
import cardBuilder from 'components/cardbuilder/cardBuilder';
import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer'; import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
import Scroller from 'elements/emby-scroller/Scroller'; import Scroller from 'elements/emby-scroller/Scroller';
import LinkButton from 'elements/emby-button/LinkButton'; import LinkButton from 'elements/emby-button/LinkButton';
import imageLoader from 'components/images/imageLoader'; import Cards from 'components/cardbuilder/Card/Cards';
import type { CardOptions } from 'types/cardOptions';
import { CardOptions } from 'types/cardOptions';
interface SectionContainerProps { interface SectionContainerProps {
url?: string; url?: string;
sectionTitle: string; sectionTitle: string;
items: BaseItemDto[] | TimerInfoDto[]; items: BaseItemDto[] | TimerInfoDto[];
cardOptions: CardOptions; cardOptions: CardOptions;
reloadItems?: () => void;
} }
const SectionContainer: FC<SectionContainerProps> = ({ const SectionContainer: FC<SectionContainerProps> = ({
sectionTitle, sectionTitle,
url, url,
items, items,
cardOptions cardOptions,
reloadItems
}) => { }) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
const itemsContainer = element.current?.querySelector('.itemsContainer');
cardBuilder.buildCards(items, {
itemsContainer: itemsContainer,
parentContainer: element.current,
...cardOptions
});
imageLoader.lazyChildren(itemsContainer);
}, [cardOptions, items]);
return ( return (
<div ref={element} className='verticalSection hide'> <div className='verticalSection'>
<div className='sectionTitleContainer sectionTitleContainer-cards padded-left'> <div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
{url && items.length > 5 ? ( {url && items.length > 5 ? (
<LinkButton <LinkButton
@ -66,7 +52,11 @@ const SectionContainer: FC<SectionContainerProps> = ({
> >
<ItemsContainer <ItemsContainer
className='itemsContainer scrollSlider focuscontainer-x' className='itemsContainer scrollSlider focuscontainer-x'
/> reloadItems={reloadItems}
queryKey={cardOptions.queryKey}
>
<Cards items={items} cardOptions={cardOptions} />
</ItemsContainer>
</Scroller> </Scroller>
</div> </div>
); );