jellyfish-web/src/components/common/GenresItemsContainer.tsx

import '../../elements/emby-button/emby-button';
import '../../elements/emby-itemscontainer/emby-itemscontainer';

import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import escapeHTML from 'escape-html';
import React, { FC, useCallback, useEffect, useRef } from 'react';

import { appRouter } from '../appRouter';
import cardBuilder from '../cardbuilder/cardBuilder';
import layoutManager from '../layoutManager';
import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
import globalize from '../../scripts/globalize';

interface GenresItemsContainerProps {
    topParentId?: string | null;
    getCurrentViewStyle: () => string;
    itemsResult?: BaseItemDtoQueryResult;
}

const GenresItemsContainer: FC<GenresItemsContainerProps> = ({ topParentId, getCurrentViewStyle, itemsResult = {} }) => {
    const element = useRef<HTMLDivElement>(null);

    const enableScrollX = useCallback(() => {
        return !layoutManager.desktop;
    }, []);

    const getPortraitShape = useCallback(() => {
        return enableScrollX() ? 'overflowPortrait' : 'portrait';
    }, [enableScrollX]);

    const getThumbShape = useCallback(() => {
        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
    }, [enableScrollX]);

    const fillItemsContainer = useCallback((entry) => {
        const elem = entry.target;
        const id = elem.getAttribute('data-id');
        const viewStyle = getCurrentViewStyle();
        let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;

        if (enableScrollX()) {
            limit = 10;
        }

        const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
        const query = {
            SortBy: 'Random',
            SortOrder: 'Ascending',
            IncludeItemTypes: 'Movie',
            Recursive: true,
            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
            ImageTypeLimit: 1,
            EnableImageTypes: enableImageTypes,
            Limit: limit,
            GenreIds: id,
            EnableTotalRecordCount: false,
            ParentId: topParentId
        };
        window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
            const items = result.Items || [];
            if (viewStyle == 'Thumb') {
                cardBuilder.buildCards(items, {
                    itemsContainer: elem,
                    shape: getThumbShape(),
                    preferThumb: true,
                    showTitle: true,
                    scalable: true,
                    centerText: true,
                    overlayMoreButton: true,
                    allowBottomPadding: false
                });
            } else if (viewStyle == 'ThumbCard') {
                cardBuilder.buildCards(items, {
                    itemsContainer: elem,
                    shape: getThumbShape(),
                    preferThumb: true,
                    showTitle: true,
                    scalable: true,
                    centerText: false,
                    cardLayout: true,
                    showYear: true
                });
            } else if (viewStyle == 'PosterCard') {
                cardBuilder.buildCards(items, {
                    itemsContainer: elem,
                    shape: getPortraitShape(),
                    showTitle: true,
                    scalable: true,
                    centerText: false,
                    cardLayout: true,
                    showYear: true
                });
            } else if (viewStyle == 'Poster') {
                cardBuilder.buildCards(items, {
                    itemsContainer: elem,
                    shape: getPortraitShape(),
                    scalable: true,
                    overlayMoreButton: true,
                    allowBottomPadding: true,
                    showTitle: true,
                    centerText: true,
                    showYear: true
                });
            }
        });
    }, [enableScrollX, getCurrentViewStyle, getPortraitShape, getThumbShape, topParentId]);

    useEffect(() => {
        const elem = element.current?.querySelector('#items') as HTMLDivElement;
        let html = '';
        const items = itemsResult.Items || [];

        for (let i = 0, length = items.length; i < length; i++) {
            const item = items[i];

            html += '<div class="verticalSection">';
            html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item, {
                context: 'movies',
                parentId: topParentId
            }) + '" class="more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre' + item.Id + '">';
            html += '<h2 class="sectionTitle sectionTitle-cards">';
            html += escapeHTML(item.Name);
            html += '</h2>';
            html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
            html += '</a>';
            html += '</div>';
            if (enableScrollX()) {
                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
                html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x lazy" data-id="' + item.Id + '">';
            } else {
                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap lazy padded-left padded-right" data-id="' + item.Id + '">';
            }

            html += '</div>';
            html += '</div>';
        }

        if (!itemsResult.Items?.length) {
            html = '';

            html += '<div class="noItemsMessage centerMessage">';
            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
            html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
            html += '</div>';
        }

        elem.innerHTML = html;
        lazyLoader.lazyChildren(elem, fillItemsContainer);
    }, [getCurrentViewStyle, itemsResult.Items, fillItemsContainer, topParentId, enableScrollX]);

    return (
        <div ref={element}>
            <div id='items'/>
        </div>
    );
};

export default GenresItemsContainer;