diff --git a/src/apps/experimental/components/library/SectionContainer.tsx b/src/apps/experimental/components/library/SectionContainer.tsx index 18669452a0..8eb64c4e6f 100644 --- a/src/apps/experimental/components/library/SectionContainer.tsx +++ b/src/apps/experimental/components/library/SectionContainer.tsx @@ -1,43 +1,29 @@ 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 Scroller from 'elements/emby-scroller/Scroller'; import LinkButton from 'elements/emby-button/LinkButton'; -import imageLoader from 'components/images/imageLoader'; - -import { CardOptions } from 'types/cardOptions'; +import Cards from 'components/cardbuilder/Card/Cards'; +import type { CardOptions } from 'types/cardOptions'; interface SectionContainerProps { url?: string; sectionTitle: string; items: BaseItemDto[] | TimerInfoDto[]; cardOptions: CardOptions; + reloadItems?: () => void; } const SectionContainer: FC = ({ sectionTitle, url, items, - cardOptions + cardOptions, + reloadItems }) => { - const element = useRef(null); - - useEffect(() => { - const itemsContainer = element.current?.querySelector('.itemsContainer'); - cardBuilder.buildCards(items, { - itemsContainer: itemsContainer, - parentContainer: element.current, - - ...cardOptions - }); - - imageLoader.lazyChildren(itemsContainer); - }, [cardOptions, items]); - return ( -
+
{url && items.length > 5 ? ( = ({ > + reloadItems={reloadItems} + queryKey={cardOptions.queryKey} + > + +
);