Merge pull request #6100 from grafixeyehero/Refactoring-Section-Container

Refactoring Section Container
2024-11-23 22:19:50 +00:00 · 2024-10-14 16:16:34 -04:00 · 2024-10-14 16:16:34 -04:00 · d12fcf7d32
commit d12fcf7d32
parent c3e253d98d 47995ae9a1
11 changed files with 257 additions and 183 deletions
--- a/src/apps/experimental/components/library/GenresItemsContainer.tsx
+++ b/src/apps/experimental/components/library/GenresItemsContainer.tsx
@ -2,7 +2,7 @@ import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/bas
 import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
 import React, { FC } from 'react';
 import { useGetGenres } from 'hooks/useFetchItems';
-import globalize from 'lib/globalize';
+import NoItemsMessage from 'components/common/NoItemsMessage';
 import Loading from 'components/loading/LoadingComponent';
 import GenresSectionContainer from './GenresSectionContainer';
 import type { ParentId } from 'types/library';
@ -25,17 +25,10 @@ const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
    }

    if (!genresResult?.Items?.length) {
-        return (
-            <div className='noItemsMessage centerMessage'>
-                <h1>{globalize.translate('MessageNothingHere')}</h1>
-                <p>{globalize.translate('MessageNoGenresAvailable')}</p>
-            </div>
-        );
+        return <NoItemsMessage message='MessageNoGenresAvailable' />;
    }

-    return (
-        <>
-            {genresResult.Items.map((genre) => (
+    return genresResult.Items.map((genre) => (
        <GenresSectionContainer
            key={genre.Id}
            collectionType={collectionType}
@ -43,9 +36,7 @@ const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
            itemType={itemType}
            genre={genre}
        />
-            ))}
-        </>
-    );
+    ));
 };

 export default GenresItemsContainer;
--- a/src/apps/experimental/components/library/GenresSectionContainer.tsx
+++ b/src/apps/experimental/components/library/GenresSectionContainer.tsx
@ -8,7 +8,7 @@ import React, { type FC } from 'react';
 import { useGetItems } from 'hooks/useFetchItems';
 import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from 'components/router/appRouter';
-import SectionContainer from './SectionContainer';
+import SectionContainer from 'components/common/SectionContainer';
 import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { ItemDto } from 'types/base/models/item-dto';
@ -59,9 +59,12 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
    }

    return <SectionContainer
-        sectionTitle={genre.Name || ''}
-        items={itemsResult?.Items || []}
-        url={getRouteUrl(genre)}
+        key={genre.Name}
+        sectionHeaderProps={{
+            title: genre.Name || '',
+            url: getRouteUrl(genre)
+        }}
+        items={itemsResult?.Items}
        cardOptions={{
            scalable: true,
            overlayPlayButton: true,
--- a/src/apps/experimental/components/library/ItemsView.tsx
+++ b/src/apps/experimental/components/library/ItemsView.tsx
@ -181,7 +181,7 @@ const ItemsView: FC<ItemsViewProps> = ({

    const getItems = useCallback(() => {
        if (!itemsResult?.Items?.length) {
-            return <NoItemsMessage noItemsMessage={noItemsMessage} />;
+            return <NoItemsMessage message={noItemsMessage} />;
        }

        if (libraryViewSettings.ViewMode === ViewMode.ListView) {
--- a/src/apps/experimental/components/library/ProgramsSectionView.tsx
+++ b/src/apps/experimental/components/library/ProgramsSectionView.tsx
@ -3,7 +3,8 @@ import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchIte
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import Loading from 'components/loading/LoadingComponent';
-import SectionContainer from './SectionContainer';
+import NoItemsMessage from 'components/common/NoItemsMessage';
+import SectionContainer from 'components/common/SectionContainer';
 import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
@ -30,14 +31,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
    }

    if (!sectionsWithItems?.length && !upcomingRecordings?.length) {
-        return (
-            <div className='noItemsMessage centerMessage'>
-                <h1>{globalize.translate('MessageNothingHere')}</h1>
-                <p>
-                    {globalize.translate('MessageNoItemsAvailable')}
-                </p>
-            </div>
-        );
+        return <NoItemsMessage />;
    }

    const getRouteUrl = (section: Section) => {
@ -58,23 +52,33 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
            {sectionsWithItems?.map(({ section, items }) => (
                <SectionContainer
                    key={section.type}
-                    sectionTitle={globalize.translate(section.name)}
-                    items={items ?? []}
-                    url={getRouteUrl(section)}
-                    reloadItems={refetch}
+                    sectionHeaderProps={{
+                        title: globalize.translate(section.name),
+                        url: getRouteUrl(section)
+                    }}
+                    itemsContainerProps={{
+                        queryKey: ['ProgramSectionWithItems'],
+                        reloadItems: refetch
+                    }}
+                    items={items}
                    cardOptions={{
                        ...section.cardOptions,
                        queryKey: ['ProgramSectionWithItems']
                    }}
                />
-
            ))}

            {upcomingRecordings?.map((group) => (
                <SectionContainer
                    key={group.name}
-                    sectionTitle={group.name}
-                    items={group.timerInfo ?? []}
+                    sectionHeaderProps={{
+                        title: group.name
+                    }}
+                    itemsContainerProps={{
+                        queryKey: ['Timers'],
+                        reloadItems: refetch
+                    }}
+                    items={group.timerInfo}
                    cardOptions={{
                        queryKey: ['Timers'],
                        shape: CardShape.BackdropOverflow,
--- a/src/apps/experimental/components/library/SectionContainer.tsx
+++ b/src/apps/experimental/components/library/SectionContainer.tsx
@ -1,65 +0,0 @@
-import React, { FC } from 'react';
-
-import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
-import Scroller from 'elements/emby-scroller/Scroller';
-import LinkButton from 'elements/emby-button/LinkButton';
-import Cards from 'components/cardbuilder/Card/Cards';
-import type { CardOptions } from 'types/cardOptions';
-import type { ItemDto } from 'types/base/models/item-dto';
-
-interface SectionContainerProps {
-    url?: string;
-    sectionTitle: string;
-    items: ItemDto[];
-    cardOptions: CardOptions;
-    reloadItems?: () => void;
-}
-
-const SectionContainer: FC<SectionContainerProps> = ({
-    sectionTitle,
-    url,
-    items,
-    cardOptions,
-    reloadItems
-}) => {
-    return (
-        <div className='verticalSection'>
-            <div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
-                {url && items.length > 5 ? (
-                    <LinkButton
-                        className='more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre'
-                        href={url}
-                    >
-                        <h2 className='sectionTitle sectionTitle-cards'>
-                            {sectionTitle}
-                        </h2>
-                        <span
-                            className='material-icons chevron_right'
-                            aria-hidden='true'
-                        ></span>
-                    </LinkButton>
-                ) : (
-                    <h2 className='sectionTitle sectionTitle-cards'>
-                        {sectionTitle}
-                    </h2>
-                )}
-            </div>
-
-            <Scroller
-                className='padded-top-focusscale padded-bottom-focusscale'
-                isMouseWheelEnabled={false}
-                isCenterFocusEnabled={true}
-            >
-                <ItemsContainer
-                    className='itemsContainer scrollSlider focuscontainer-x'
-                    reloadItems={reloadItems}
-                    queryKey={cardOptions.queryKey}
-                >
-                    <Cards items={items} cardOptions={cardOptions} />
-                </ItemsContainer>
-            </Scroller>
-        </div>
-    );
-};
-
-export default SectionContainer;
--- a/src/apps/experimental/components/library/SuggestionsSectionView.tsx
+++ b/src/apps/experimental/components/library/SuggestionsSectionView.tsx
@ -8,7 +8,8 @@ import {
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import Loading from 'components/loading/LoadingComponent';
-import SectionContainer from './SectionContainer';
+import NoItemsMessage from 'components/common/NoItemsMessage';
+import SectionContainer from '../../../../components/common/SectionContainer';
 import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
@ -38,12 +39,7 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
    }

    if (!sectionsWithItems?.length && !movieRecommendationsItems?.length) {
-        return (
-            <div className='noItemsMessage centerMessage'>
-                <h1>{globalize.translate('MessageNothingHere')}</h1>
-                <p>{globalize.translate('MessageNoItemsAvailable')}</p>
-            </div>
-        );
+        return <NoItemsMessage />;
    }

    const getRouteUrl = (section: Section) => {
@ -96,9 +92,14 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
            {sectionsWithItems?.map(({ section, items }) => (
                <SectionContainer
                    key={section.type}
-                    sectionTitle={globalize.translate(section.name)}
-                    items={items ?? []}
-                    url={getRouteUrl(section)}
+                    sectionHeaderProps={{
+                        title: globalize.translate(section.name),
+                        url: getRouteUrl(section)
+                    }}
+                    itemsContainerProps={{
+                        queryKey: ['SuggestionSectionWithItems']
+                    }}
+                    items={items}
                    cardOptions={{
                        ...section.cardOptions,
                        queryKey: ['SuggestionSectionWithItems'],
@ -114,8 +115,13 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
                <SectionContainer
                    // eslint-disable-next-line react/no-array-index-key
                    key={`${recommendation.CategoryId}-${index}`} // use a unique id return value may have duplicate id
-                    sectionTitle={getRecommendationTittle(recommendation)}
-                    items={(recommendation.Items as ItemDto[]) ?? []}
+                    sectionHeaderProps={{
+                        title: getRecommendationTittle(recommendation)
+                    }}
+                    itemsContainerProps={{
+                        queryKey: ['MovieRecommendations']
+                    }}
+                    items={recommendation.Items as ItemDto[]}
                    cardOptions={{
                        queryKey: ['MovieRecommendations'],
                        shape: CardShape.PortraitOverflow,
--- a/src/apps/experimental/components/library/UpcomingView.tsx
+++ b/src/apps/experimental/components/library/UpcomingView.tsx
@ -1,34 +1,31 @@
 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) => (
+    if (!groupsUpcomingEpisodes?.length) {
+        return <NoItemsMessage message='MessagePleaseEnsureInternetMetadata' />;
+    }
+
+    return groupsUpcomingEpisodes?.map((group) => (
        <SectionContainer
            key={group.name}
-                        sectionTitle={group.name}
-                        items={group.items ?? []}
+            sectionHeaderProps={{
+                title: group.name
+            }}
+            itemsContainerProps={{
+                queryKey: ['GroupsUpcomingEpisodes']
+            }}
+            items={group.items}
            cardOptions={{
                shape: CardShape.BackdropOverflow,
                showLocationTypeIndicator: false,
@ -37,13 +34,11 @@ const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
                lazy: true,
                showDetailsMenu: true,
                missingIndicator: false,
-                            cardLayout: false
+                cardLayout: false,
+                queryKey: ['GroupsUpcomingEpisodes']
            }}
        />
-                ))
-            )}
-        </Box>
-    );
+    ));
 };

 export default UpcomingView;
--- a/src/components/common/NoItemsMessage.tsx
+++ b/src/components/common/NoItemsMessage.tsx
@ -4,19 +4,19 @@ import Typography from '@mui/material/Typography';
 import globalize from 'lib/globalize';

 interface NoItemsMessageProps {
-    noItemsMessage?: string;
+    message?: string;
 }

 const NoItemsMessage: FC<NoItemsMessageProps> = ({
-    noItemsMessage = 'MessageNoItemsAvailable'
+    message = 'MessageNoItemsAvailable'
 }) => {
    return (
        <Box className='noItemsMessage centerMessage'>
-            <Typography variant='h2'>
+            <Typography variant='h1'>
                {globalize.translate('MessageNothingHere')}
            </Typography>
-            <Typography paragraph variant='h2'>
-                {globalize.translate(noItemsMessage)}
+            <Typography paragraph>
+                {globalize.translate(message)}
            </Typography>
        </Box>
    );
--- a/src/components/common/SectionContainer.tsx
+++ b/src/components/common/SectionContainer.tsx
@ -0,0 +1,145 @@
+import React, { type FC, type PropsWithChildren } from 'react';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import classNames from 'classnames';
+import ItemsContainer, {
+    type ItemsContainerProps
+} from 'elements/emby-itemscontainer/ItemsContainer';
+import Scroller, { type ScrollerProps } from 'elements/emby-scroller/Scroller';
+import Cards from 'components/cardbuilder/Card/Cards';
+import Lists from 'components/listview/List/Lists';
+import type { CardOptions } from 'types/cardOptions';
+import type { ListOptions } from 'types/listOptions';
+import type { ItemDto } from 'types/base/models/item-dto';
+
+interface SectionHeaderProps {
+    className?: string;
+    itemsLength?: number;
+    url?: string;
+    title: string;
+}
+
+const SectionHeader: FC<SectionHeaderProps> = ({
+    title,
+    className,
+    itemsLength = 0,
+    url
+}) => {
+    const sectionHeaderClass = classNames(
+        'sectionTitleContainer sectionTitleContainer-cards',
+        'padded-left',
+        className
+    );
+
+    return (
+        <Box className={sectionHeaderClass}>
+            {url && itemsLength > 5 ? (
+                <Link
+                    className='clearLink button-flat sectionTitleTextButton'
+                    underline='none'
+                    href={url}
+                >
+                    <Typography
+                        className='sectionTitle sectionTitle-cards'
+                        variant='h2'
+                    >
+                        {title}
+                    </Typography>
+                    <ChevronRightIcon sx={{ pt: '5px' }} />
+                </Link>
+            ) : (
+                <Typography
+                    className='sectionTitle sectionTitle-cards'
+                    variant='h2'
+                >
+                    {title}
+                </Typography>
+            )}
+        </Box>
+    );
+};
+
+interface SectionContainerProps {
+    className?: string;
+    items?: ItemDto[];
+    sectionHeaderProps?: Omit<SectionHeaderProps, 'itemsLength'>;
+    scrollerProps?: ScrollerProps;
+    itemsContainerProps?: ItemsContainerProps;
+    isListMode?: boolean;
+    isScrollerMode?: boolean;
+    noPadding?: boolean;
+    cardOptions?: CardOptions;
+    listOptions?: ListOptions;
+}
+
+const SectionContainer: FC<PropsWithChildren<SectionContainerProps>> = ({
+    className,
+    sectionHeaderProps,
+    scrollerProps,
+    itemsContainerProps,
+    isListMode = false,
+    isScrollerMode = true,
+    noPadding = false,
+    items = [],
+    cardOptions = {},
+    listOptions = {},
+    children
+}) => {
+    const sectionClass = classNames('verticalSection', className);
+
+    const renderItems = () => {
+        if (React.isValidElement(children)) {
+            return children;
+        }
+
+        if (isListMode && !isScrollerMode) {
+            return <Lists items={items} listOptions={listOptions} />;
+        } else {
+            return <Cards items={items} cardOptions={cardOptions} />;
+        }
+    };
+
+    const content = (
+        <ItemsContainer
+            className={classNames(
+                { scrollSlider: isScrollerMode },
+                itemsContainerProps?.className
+            )}
+            {...itemsContainerProps}
+        >
+            {renderItems()}
+        </ItemsContainer>
+    );
+
+    return (
+        <Box className={sectionClass}>
+            {sectionHeaderProps?.title && (
+                <SectionHeader
+                    className={classNames(
+                        { 'no-padding': noPadding },
+                        sectionHeaderProps?.className
+                    )}
+                    itemsLength={items.length}
+                    {...sectionHeaderProps}
+                />
+            )}
+            {isScrollerMode && !isListMode ? (
+                <Scroller
+                    className={classNames(
+                        { 'no-padding': noPadding },
+                        scrollerProps?.className
+                    )}
+                    {...scrollerProps}
+                >
+                    {content}
+                </Scroller>
+            ) : (
+                content
+            )}
+        </Box>
+    );
+};
+
+export default SectionContainer;
--- a/src/elements/emby-itemscontainer/ItemsContainer.tsx
+++ b/src/elements/emby-itemscontainer/ItemsContainer.tsx
@ -36,7 +36,7 @@ function getShortcutOptions() {
    };
 }

-interface ItemsContainerProps {
+export interface ItemsContainerProps {
    className?: string;
    isContextMenuEnabled?: boolean;
    isMultiSelectEnabled?: boolean;
@ -136,14 +136,13 @@ const ItemsContainer: FC<PropsWithChildren<ItemsContainerProps>> = ({
            }

            if (!itemId) throw new Error('null itemId');
-            if (!newIndex) throw new Error('null newIndex');

            try {
                loading.show();
                await playlistsMoveItemMutation({
                    playlistId,
                    itemId,
-                    newIndex
+                    newIndex: newIndex || 0
                });
                loading.hide();
            } catch (error) {
--- a/src/elements/emby-scroller/Scroller.tsx
+++ b/src/elements/emby-scroller/Scroller.tsx
@ -9,7 +9,7 @@ import ScrollerFactory from 'lib/scroller';
 import ScrollButtons from '../emby-scrollbuttons/ScrollButtons';
 import './emby-scroller.scss';

-interface ScrollerProps {
+export interface ScrollerProps {
    className?: string;
    isHorizontalEnabled?: boolean;
    isMouseWheelEnabled?: boolean;
@ -23,14 +23,14 @@ interface ScrollerProps {

 const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
    className,
-    isHorizontalEnabled,
-    isMouseWheelEnabled,
-    isCenterFocusEnabled,
-    isScrollButtonsEnabled,
-    isSkipFocusWhenVisibleEnabled,
-    isScrollEventEnabled,
-    isHideScrollbarEnabled,
-    isAllowNativeSmoothScrollEnabled,
+    isHorizontalEnabled = true,
+    isMouseWheelEnabled = false,
+    isCenterFocusEnabled = false,
+    isScrollButtonsEnabled = true,
+    isSkipFocusWhenVisibleEnabled = false,
+    isScrollEventEnabled = false,
+    isHideScrollbarEnabled = false,
+    isAllowNativeSmoothScrollEnabled = false,
    children
 }) => {
    const [scrollRef, size] = useElementSize();
@ -158,27 +158,23 @@ const Scroller: FC<PropsWithChildren<ScrollerProps>> = ({
            return;
        }

-        const horizontal = isHorizontalEnabled !== false;
-        const scrollbuttons = isScrollButtonsEnabled !== false;
-        const mousewheel = isMouseWheelEnabled !== false;
-
-        const enableScrollButtons = layoutManager.desktop && horizontal && scrollbuttons;
+        const enableScrollButtons = layoutManager.desktop && isHorizontalEnabled && isScrollButtonsEnabled;

        const options = {
-            horizontal: horizontal,
+            horizontal: isHorizontalEnabled,
            mouseDragging: 1,
-            mouseWheel: mousewheel,
+            mouseWheel: isMouseWheelEnabled,
            touchDragging: 1,
            slidee: scrollRef.current?.querySelector('.scrollSlider'),
            scrollBy: 200,
-            speed: horizontal ? 270 : 240,
+            speed: isHorizontalEnabled ? 270 : 240,
            elasticBounds: 1,
            dragHandle: 1,
            autoImmediate: true,
-            skipSlideToWhenVisible: isSkipFocusWhenVisibleEnabled === true,
-            dispatchScrollEvent: enableScrollButtons || isScrollEventEnabled === true,
-            hideScrollbar: enableScrollButtons || isHideScrollbarEnabled === true,
-            allowNativeSmoothScroll: isAllowNativeSmoothScrollEnabled === true && !enableScrollButtons,
+            skipSlideToWhenVisible: isSkipFocusWhenVisibleEnabled,
+            dispatchScrollEvent: enableScrollButtons || isScrollEventEnabled,
+            hideScrollbar: enableScrollButtons || isHideScrollbarEnabled,
+            allowNativeSmoothScroll: isAllowNativeSmoothScrollEnabled && !enableScrollButtons,
            allowNativeScroll: !enableScrollButtons,
            forceHideScrollbars: enableScrollButtons,
            // In edge, with the native scroll, the content jumps around when hovering over the buttons