jellyfin-web/src/components/cardbuilder/Card/useCard.ts

import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import classNames from 'classnames';
import useCardImageUrl from './useCardImageUrl';
import {
    resolveAction,
    resolveMixedShapeByAspectRatio
} from '../cardBuilderUtils';
import { getDataAttributes } from 'utils/items';
import { CardShape } from 'utils/card';
import layoutManager from 'components/layoutManager';

import type { ItemDto } from 'types/itemDto';
import type { CardOptions } from 'types/cardOptions';

interface UseCardProps {
    item: ItemDto;
    cardOptions: CardOptions;
}

function useCard({ item, cardOptions }: UseCardProps) {
    const action = resolveAction({
        defaultAction: cardOptions.action ?? 'link',
        isFolder: item.IsFolder ?? false,
        isPhoto: item.MediaType === 'Photo'
    });

    let shape = cardOptions.shape;

    if (shape === CardShape.Mixed) {
        shape = resolveMixedShapeByAspectRatio(item.PrimaryImageAspectRatio);
    }

    const imgInfo = useCardImageUrl({
        item: item.ProgramInfo ?? item,
        cardOptions,
        shape
    });
    const imgUrl = imgInfo.imgUrl;
    const blurhash = imgInfo.blurhash;
    const forceName = imgInfo.forceName;
    const coveredImage = cardOptions.coverImage ?? imgInfo.coverImage;
    const overlayText = cardOptions.overlayText;

    const nameWithPrefix = item.SortName ?? item.Name ?? '';
    let prefix = nameWithPrefix.substring(
        0,
        Math.min(3, nameWithPrefix.length)
    );

    if (prefix) {
        prefix = prefix.toUpperCase();
    }

    const dataAttributes = getDataAttributes(
        {
            action,
            itemServerId: item.ServerId ?? cardOptions.serverId,
            context: cardOptions.context,
            parentId: cardOptions.parentId,
            collectionId: cardOptions.collectionId,
            playlistId: cardOptions.playlistId,
            itemId: item.Id,
            itemTimerId: item.TimerId,
            itemSeriesTimerId: item.SeriesTimerId,
            itemChannelId: item.ChannelId,
            itemType: item.Type,
            itemMediaType: item.MediaType,
            itemCollectionType: item.CollectionType,
            itemIsFolder: item.IsFolder,
            itemPath: item.Path,
            itemStartDate: item.StartDate,
            itemEndDate: item.EndDate,
            itemUserData: item.UserData,
            prefix
        }
    );

    const cardClass = classNames(
        'card',
        { [`${shape}Card`]: shape },
        cardOptions.cardCssClass,
        cardOptions.cardClass,
        { 'card-hoverable': layoutManager.desktop },
        { groupedCard: cardOptions.showChildCountIndicator && item.ChildCount },
        {
            'card-withuserdata':
                item.Type !== BaseItemKind.MusicAlbum
                && item.Type !== BaseItemKind.MusicArtist
                && item.Type !== BaseItemKind.Audio
        },
        { itemAction: layoutManager.tv }
    );

    const cardBoxClass = classNames(
        'cardBox',
        { visualCardBox: cardOptions.cardLayout },
        { 'cardBox-bottompadded': !cardOptions.cardLayout }
    );

    const getCardWrapperProps = () => ({
        className: cardClass,
        dataAttributes
    });

    const getCardBoxProps = () => ({
        item,
        cardOptions,
        className: cardBoxClass,
        shape,
        imgUrl,
        blurhash,
        forceName,
        coveredImage,
        overlayText
    });

    return {
        getCardWrapperProps,
        getCardBoxProps
    };
}

export default useCard;