mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Use enums CardShape & BaseItemKind,
Use type import for react FC, Remove escapeHTML Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
This commit is contained in:
parent
11d013b07e
commit
8cbddba8fd
18 changed files with 102 additions and 82 deletions
|
@ -5,7 +5,7 @@ import CardOverlayButtons from './CardOverlayButtons';
|
|||
import CardHoverMenu from './CardHoverMenu';
|
||||
import CardOuterFooter from './CardOuterFooter';
|
||||
import CardContent from './CardContent';
|
||||
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ItemDto } from 'types/itemDto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
|
@ -13,7 +13,7 @@ interface CardBoxProps {
|
|||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
className: string;
|
||||
shape: string | null | undefined;
|
||||
shape: CardShape | undefined;
|
||||
imgUrl: string | undefined;
|
||||
blurhash: string | undefined;
|
||||
forceName: boolean;
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import React, { type FC } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import classNames from 'classnames';
|
||||
|
@ -32,7 +33,7 @@ const CardImageContainer: FC<CardImageContainerProps> = ({
|
|||
const cardImageClass = classNames(
|
||||
'cardImageContainer',
|
||||
{ coveredImage: coveredImage },
|
||||
{ 'coveredImage-contain': coveredImage && item.Type === 'TvChannel' }
|
||||
{ 'coveredImage-contain': coveredImage && item.Type === BaseItemKind.TvChannel }
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -52,7 +53,7 @@ const CardImageContainer: FC<CardImageContainerProps> = ({
|
|||
indicator.getChildCountIndicator() :
|
||||
indicator.getPlayedIndicator()}
|
||||
|
||||
{(item.Type === 'CollectionFolder'
|
||||
{(item.Type === BaseItemKind.CollectionFolder
|
||||
|| item.CollectionType)
|
||||
&& item.RefreshProgress && (
|
||||
<RefreshIndicator item={item} />
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location-type';
|
||||
import React, { type FC } from 'react';
|
||||
import ButtonGroup from '@mui/material/ButtonGroup';
|
||||
import classNames from 'classnames';
|
||||
|
@ -15,10 +17,10 @@ const sholudShowOverlayPlayButton = (
|
|||
return (
|
||||
overlayPlayButton
|
||||
&& !item.IsPlaceHolder
|
||||
&& (item.LocationType !== 'Virtual'
|
||||
&& (item.LocationType !== LocationType.Virtual
|
||||
|| !item.MediaType
|
||||
|| item.Type === 'Program')
|
||||
&& item.Type !== 'Person'
|
||||
|| item.Type === BaseItemKind.Program)
|
||||
&& item.Type !== BaseItemKind.Person
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import classNames from 'classnames';
|
||||
import useCardImageUrl from './useCardImageUrl';
|
||||
import {
|
||||
|
@ -5,6 +6,7 @@ import {
|
|||
resolveMixedShapeByAspectRatio
|
||||
} from '../cardBuilderUtils';
|
||||
import { getDataAttributes } from 'utils/items';
|
||||
import { CardShape } from 'utils/card';
|
||||
import layoutManager from 'components/layoutManager';
|
||||
|
||||
import type { ItemDto } from 'types/itemDto';
|
||||
|
@ -24,7 +26,7 @@ function useCard({ item, cardOptions }: UseCardProps) {
|
|||
|
||||
let shape = cardOptions.shape;
|
||||
|
||||
if (shape === 'mixed') {
|
||||
if (shape === CardShape.Mixed) {
|
||||
shape = resolveMixedShapeByAspectRatio(item.PrimaryImageAspectRatio);
|
||||
}
|
||||
|
||||
|
@ -82,9 +84,9 @@ function useCard({ item, cardOptions }: UseCardProps) {
|
|||
{ groupedCard: cardOptions.showChildCountIndicator && item.ChildCount },
|
||||
{
|
||||
'card-withuserdata':
|
||||
item.Type !== 'MusicAlbum'
|
||||
&& item.Type !== 'MusicArtist'
|
||||
&& item.Type !== 'Audio'
|
||||
item.Type !== BaseItemKind.MusicAlbum
|
||||
&& item.Type !== BaseItemKind.MusicArtist
|
||||
&& item.Type !== BaseItemKind.Audio
|
||||
},
|
||||
{ itemAction: layoutManager.tv }
|
||||
);
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import { BaseItemKind, ImageType } from '@jellyfin/sdk/lib/generated-client';
|
||||
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
|
||||
import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
|
||||
import { useApi } from 'hooks/useApi';
|
||||
import { getDesiredAspect } from '../cardBuilderUtils';
|
||||
|
||||
import { CardShape } from 'utils/card';
|
||||
import type { ItemDto, NullableNumber, NullableString } from 'types/itemDto';
|
||||
import type { CardOptions } from 'types/cardOptions';
|
||||
|
||||
|
@ -98,10 +99,10 @@ function isCoverImage(
|
|||
function shouldShowPreferBanner(
|
||||
imageTagsBanner: NullableString,
|
||||
cardOptions: CardOptions,
|
||||
shape: NullableString
|
||||
shape: CardShape | undefined
|
||||
): boolean {
|
||||
return (
|
||||
(cardOptions.preferBanner || shape === 'banner')
|
||||
(cardOptions.preferBanner || shape === CardShape.Banner)
|
||||
&& Boolean(imageTagsBanner)
|
||||
);
|
||||
}
|
||||
|
@ -152,7 +153,7 @@ function shouldShowPreferThumb(itemType: NullableString, cardOptions: CardOption
|
|||
function getCardImageInfo(
|
||||
item: ItemDto,
|
||||
cardOptions: CardOptions,
|
||||
shape: NullableString
|
||||
shape: CardShape | undefined
|
||||
) {
|
||||
const width = cardOptions.width;
|
||||
let height;
|
||||
|
@ -251,7 +252,7 @@ function getCardImageInfo(
|
|||
interface UseCardImageUrlProps {
|
||||
item: ItemDto;
|
||||
cardOptions: CardOptions;
|
||||
shape: NullableString;
|
||||
shape: CardShape | undefined;
|
||||
}
|
||||
|
||||
function useCardImageUrl({ item, cardOptions, shape }: UseCardImageUrlProps) {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { CardShape } from 'utils/card';
|
||||
import { randomInt } from '../../utils/number';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
@ -54,15 +55,15 @@ export const isResizable = (windowWidth: number): boolean => {
|
|||
*/
|
||||
export const resolveMixedShapeByAspectRatio = (primaryImageAspectRatio: number | null | undefined) => {
|
||||
if (primaryImageAspectRatio === undefined || primaryImageAspectRatio === null) {
|
||||
return 'mixedSquare';
|
||||
return CardShape.MixedSquare;
|
||||
}
|
||||
|
||||
if (primaryImageAspectRatio >= 1.33) {
|
||||
return 'mixedBackdrop';
|
||||
return CardShape.MixedBackdrop;
|
||||
} else if (primaryImageAspectRatio > 0.71) {
|
||||
return 'mixedSquare';
|
||||
return CardShape.MixedSquare;
|
||||
} else {
|
||||
return 'mixedPortrait';
|
||||
return CardShape.MixedPortrait;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -193,7 +193,7 @@ const useIndicator = (item: ItemDto) => {
|
|||
const getProgressBar = (progressOptions?: ProgressOptions) => {
|
||||
if (
|
||||
enableProgressIndicator(item.Type, item.MediaType)
|
||||
&& item.Type !== 'Recording'
|
||||
&& item.Type !== BaseItemKind.Recording
|
||||
) {
|
||||
const playedPercentage = progressOptions?.userData?.PlayedPercentage ?
|
||||
progressOptions.userData.PlayedPercentage :
|
||||
|
|
|
@ -30,7 +30,7 @@ const ListWrapper: FC<ListWrapperProps> = ({
|
|||
'itemAction listItem-button listItem-focusscale'
|
||||
)}
|
||||
data-action={action}
|
||||
aria-label={title}
|
||||
aria-label={title || ''}
|
||||
{...dataAttributes}
|
||||
>
|
||||
{children}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue