diff --git a/src/apps/experimental/components/library/GenresSectionContainer.tsx b/src/apps/experimental/components/library/GenresSectionContainer.tsx index 13ba08ced6..39e81052eb 100644 --- a/src/apps/experimental/components/library/GenresSectionContainer.tsx +++ b/src/apps/experimental/components/library/GenresSectionContainer.tsx @@ -1,18 +1,17 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order'; -import escapeHTML from 'escape-html'; -import React, { FC } from 'react'; - +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 { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; -import { ParentId } from 'types/library'; +import { CardShape } from 'utils/card'; +import type { ParentId } from 'types/library'; interface GenresSectionContainerProps { parentId: ParentId; @@ -60,7 +59,7 @@ const GenresSectionContainer: FC = ({ } return = ({ showTitle: true, centerText: true, cardLayout: false, - shape: collectionType === CollectionType.Music ? 'overflowSquare' : 'overflowPortrait', + shape: collectionType === CollectionType.Music ? CardShape.SquareOverflow : CardShape.PortraitOverflow, showParentTitle: collectionType === CollectionType.Music, showYear: collectionType !== CollectionType.Music }} diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx index b13ab14165..93be9d1348 100644 --- a/src/apps/experimental/components/library/ItemsView.tsx +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -1,12 +1,14 @@ import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; import { ImageType } from '@jellyfin/sdk/lib/generated-client'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; -import React, { FC, useCallback } from 'react'; +import React, { type FC, useCallback } from 'react'; import Box from '@mui/material/Box'; import classNames from 'classnames'; import { useLocalStorage } from 'hooks/useLocalStorage'; import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems'; import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items'; +import { CardShape } from 'utils/card'; import Loading from 'components/loading/LoadingComponent'; import { playbackManager } from 'components/playback/playbackmanager'; import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer'; @@ -22,10 +24,8 @@ import GridListViewButton from './GridListViewButton'; import NoItemsMessage from 'components/common/NoItemsMessage'; import Lists from 'components/listview/List/Lists'; import Cards from 'components/cardbuilder/Card/Cards'; -import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library'; -import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; import { LibraryTab } from 'types/libraryTab'; - +import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library'; import type { CardOptions } from 'types/cardOptions'; import type { ListOptions } from 'types/listOptions'; @@ -110,18 +110,18 @@ const ItemsView: FC = ({ let preferLogo; if (libraryViewSettings.ImageType === ImageType.Banner) { - shape = 'banner'; + shape = CardShape.Banner; } else if (libraryViewSettings.ImageType === ImageType.Disc) { - shape = 'square'; + shape = CardShape.Square; preferDisc = true; } else if (libraryViewSettings.ImageType === ImageType.Logo) { - shape = 'backdrop'; + shape = CardShape.Backdrop; preferLogo = true; } else if (libraryViewSettings.ImageType === ImageType.Thumb) { - shape = 'backdrop'; + shape = CardShape.Backdrop; preferThumb = true; } else { - shape = 'auto'; + shape = CardShape.Auto; } const cardOptions: CardOptions = { @@ -152,12 +152,12 @@ const ItemsView: FC = ({ cardOptions.showYear = false; cardOptions.overlayPlayButton = true; } else if (viewType === LibraryTab.Channels) { - cardOptions.shape = 'square'; + cardOptions.shape = CardShape.Square; cardOptions.showDetailsMenu = true; cardOptions.showCurrentProgram = true; cardOptions.showCurrentProgramTime = true; } else if (viewType === LibraryTab.SeriesTimers) { - cardOptions.shape = 'backdrop'; + cardOptions.shape = CardShape.Backdrop; cardOptions.showSeriesTimerTime = true; cardOptions.showSeriesTimerChannel = true; cardOptions.overlayMoreButton = true; diff --git a/src/apps/experimental/components/library/ProgramsSectionView.tsx b/src/apps/experimental/components/library/ProgramsSectionView.tsx index b15f319789..960ba1e96f 100644 --- a/src/apps/experimental/components/library/ProgramsSectionView.tsx +++ b/src/apps/experimental/components/library/ProgramsSectionView.tsx @@ -1,11 +1,12 @@ -import React, { FC } from 'react'; +import React, { type FC } from 'react'; import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems'; import { appRouter } from 'components/router/appRouter'; import globalize from 'scripts/globalize'; import Loading from 'components/loading/LoadingComponent'; import SectionContainer from './SectionContainer'; -import { ParentId } from 'types/library'; -import { Section, SectionType } from 'types/sections'; +import { CardShape } from 'utils/card'; +import type { ParentId } from 'types/library'; +import type { Section, SectionType } from 'types/sections'; interface ProgramsSectionViewProps { parentId: ParentId; @@ -76,7 +77,7 @@ const ProgramsSectionView: FC = ({ items={group.timerInfo ?? []} cardOptions={{ queryKey: ['Timers'], - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, showTitle: true, showParentTitleOrTitle: true, showAirTime: true, diff --git a/src/apps/experimental/components/library/SuggestionsSectionView.tsx b/src/apps/experimental/components/library/SuggestionsSectionView.tsx index d41270e4a6..ca3631e67d 100644 --- a/src/apps/experimental/components/library/SuggestionsSectionView.tsx +++ b/src/apps/experimental/components/library/SuggestionsSectionView.tsx @@ -1,9 +1,8 @@ import { - RecommendationDto, + type RecommendationDto, RecommendationType } from '@jellyfin/sdk/lib/generated-client'; -import React, { FC } from 'react'; -import escapeHTML from 'escape-html'; +import React, { type FC } from 'react'; import { useGetMovieRecommendations, useGetSuggestionSectionsWithItems @@ -12,8 +11,9 @@ import { appRouter } from 'components/router/appRouter'; import globalize from 'scripts/globalize'; import Loading from 'components/loading/LoadingComponent'; import SectionContainer from './SectionContainer'; -import { ParentId } from 'types/library'; -import { Section, SectionType } from 'types/sections'; +import { CardShape } from 'utils/card'; +import type { ParentId } from 'types/library'; +import type { Section, SectionType } from 'types/sections'; interface SuggestionsSectionViewProps { parentId: ParentId; @@ -89,7 +89,7 @@ const SuggestionsSectionView: FC = ({ ); break; } - return escapeHTML(title); + return title; }; return ( @@ -119,7 +119,7 @@ const SuggestionsSectionView: FC = ({ items={recommendation.Items ?? []} cardOptions={{ queryKey: ['MovieRecommendations'], - shape: 'overflowPortrait', + shape: CardShape.PortraitOverflow, showYear: true, scalable: true, overlayPlayButton: true, diff --git a/src/apps/experimental/components/library/UpcomingView.tsx b/src/apps/experimental/components/library/UpcomingView.tsx index bf6a6b0ace..874382d9e5 100644 --- a/src/apps/experimental/components/library/UpcomingView.tsx +++ b/src/apps/experimental/components/library/UpcomingView.tsx @@ -1,10 +1,11 @@ -import React, { FC } from 'react'; +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 'scripts/globalize'; import SectionContainer from './SectionContainer'; -import { LibraryViewProps } from 'types/library'; +import { CardShape } from 'utils/card'; +import type { LibraryViewProps } from 'types/library'; const UpcomingView: FC = ({ parentId }) => { const { isLoading, data: groupsUpcomingEpisodes } = useGetGroupsUpcomingEpisodes(parentId); @@ -29,7 +30,7 @@ const UpcomingView: FC = ({ parentId }) => { sectionTitle={group.name} items={group.items ?? []} cardOptions={{ - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, showLocationTypeIndicator: false, showParentTitle: true, preferThumb: true, diff --git a/src/components/cardbuilder/Card/CardBox.tsx b/src/components/cardbuilder/Card/CardBox.tsx index 34e5044bec..07c8bc2d67 100644 --- a/src/components/cardbuilder/Card/CardBox.tsx +++ b/src/components/cardbuilder/Card/CardBox.tsx @@ -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; diff --git a/src/components/cardbuilder/Card/CardImageContainer.tsx b/src/components/cardbuilder/Card/CardImageContainer.tsx index 69eb47c66b..8a10b6b330 100644 --- a/src/components/cardbuilder/Card/CardImageContainer.tsx +++ b/src/components/cardbuilder/Card/CardImageContainer.tsx @@ -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 = ({ 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 = ({ indicator.getChildCountIndicator() : indicator.getPlayedIndicator()} - {(item.Type === 'CollectionFolder' + {(item.Type === BaseItemKind.CollectionFolder || item.CollectionType) && item.RefreshProgress && ( diff --git a/src/components/cardbuilder/Card/CardOverlayButtons.tsx b/src/components/cardbuilder/Card/CardOverlayButtons.tsx index f3b1b34749..66abd459e3 100644 --- a/src/components/cardbuilder/Card/CardOverlayButtons.tsx +++ b/src/components/cardbuilder/Card/CardOverlayButtons.tsx @@ -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 ); }; diff --git a/src/components/cardbuilder/Card/useCard.ts b/src/components/cardbuilder/Card/useCard.ts index 5751471801..80c5dd69b7 100644 --- a/src/components/cardbuilder/Card/useCard.ts +++ b/src/components/cardbuilder/Card/useCard.ts @@ -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 } ); diff --git a/src/components/cardbuilder/Card/useCardImageUrl.ts b/src/components/cardbuilder/Card/useCardImageUrl.ts index 3e1997d542..1d1fca2dc7 100644 --- a/src/components/cardbuilder/Card/useCardImageUrl.ts +++ b/src/components/cardbuilder/Card/useCardImageUrl.ts @@ -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) { diff --git a/src/components/cardbuilder/cardBuilderUtils.ts b/src/components/cardbuilder/cardBuilderUtils.ts index 3ac471ccb1..ecd1d375b5 100644 --- a/src/components/cardbuilder/cardBuilderUtils.ts +++ b/src/components/cardbuilder/cardBuilderUtils.ts @@ -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; } }; diff --git a/src/components/indicators/useIndicator.tsx b/src/components/indicators/useIndicator.tsx index 214c736267..d6e3df180e 100644 --- a/src/components/indicators/useIndicator.tsx +++ b/src/components/indicators/useIndicator.tsx @@ -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 : diff --git a/src/components/listview/List/ListWrapper.tsx b/src/components/listview/List/ListWrapper.tsx index fb03919191..9b394f9839 100644 --- a/src/components/listview/List/ListWrapper.tsx +++ b/src/components/listview/List/ListWrapper.tsx @@ -30,7 +30,7 @@ const ListWrapper: FC = ({ 'itemAction listItem-button listItem-focusscale' )} data-action={action} - aria-label={title} + aria-label={title || ''} {...dataAttributes} > {children} diff --git a/src/types/cardOptions.ts b/src/types/cardOptions.ts index 3745d804a4..19cea6a272 100644 --- a/src/types/cardOptions.ts +++ b/src/types/cardOptions.ts @@ -1,7 +1,11 @@ -import type { BaseItemDtoImageBlurHashes, BaseItemKind, ImageType, UserItemDataDto } from '@jellyfin/sdk/lib/generated-client'; -import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; +import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import type { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; +import type { UserItemDataDto } from '@jellyfin/sdk/lib/generated-client/models/user-item-data-dto'; +import type { BaseItemDtoImageBlurHashes } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto-image-blur-hashes'; +import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; +import { CardShape } from 'utils/card'; import type { ItemDto, NullableString } from './itemDto'; -import { ParentId } from './library'; +import type { ParentId } from './library'; export interface CardOptions { itemsContainer?: HTMLElement | null; @@ -20,7 +24,8 @@ export interface CardOptions { preferDisc?: boolean; preferLogo?: boolean; scalable?: boolean; - shape?: string | null; + shape?: CardShape; + defaultShape?: CardShape; lazy?: boolean; cardLayout?: boolean | null; showParentTitle?: boolean; @@ -39,7 +44,6 @@ export interface CardOptions { lines?: number; context?: CollectionType; action?: string | null; - defaultShape?: string; indexBy?: string; parentId?: ParentId; showMenu?: boolean; diff --git a/src/types/listOptions.ts b/src/types/listOptions.ts index 7df383a48b..b9b5eea80a 100644 --- a/src/types/listOptions.ts +++ b/src/types/listOptions.ts @@ -1,9 +1,8 @@ -import { BaseItemDto, SeriesTimerInfoDto } from '@jellyfin/sdk/lib/generated-client'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; -import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; - +import type { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; +import type { ItemDto } from './itemDto'; export interface ListOptions { - items?: BaseItemDto[] | SeriesTimerInfoDto[] | null; + items?: ItemDto[] | null; index?: string; showIndex?: boolean; action?: string | null; diff --git a/src/types/progressOptions.ts b/src/types/progressOptions.ts index ae043f2066..fd5ed7e468 100644 --- a/src/types/progressOptions.ts +++ b/src/types/progressOptions.ts @@ -1,4 +1,4 @@ -import { UserItemDataDto } from '@jellyfin/sdk/lib/generated-client'; +import type { UserItemDataDto } from '@jellyfin/sdk/lib/generated-client/models/user-item-data-dto'; export interface ProgressOptions { containerClass: string, diff --git a/src/utils/card.ts b/src/utils/card.ts index bdb68e7243..950964054a 100644 --- a/src/utils/card.ts +++ b/src/utils/card.ts @@ -5,7 +5,15 @@ export enum CardShape { Portrait = 'portrait', PortraitOverflow = 'overflowPortrait', Square = 'square', - SquareOverflow = 'overflowSquare' + SquareOverflow = 'overflowSquare', + Auto = 'auto', + AutoHome = 'autohome', + AutoOverflow = 'autooverflow', + AutoVertical = 'autoVertical', + Mixed = 'mixed', + MixedSquare = 'mixedSquare', + MixedBackdrop = 'mixedBackdrop', + MixedPortrait = 'mixedPortrait', } export function getSquareShape(enableOverflow = true) { diff --git a/src/utils/sections.ts b/src/utils/sections.ts index 4617ea7f14..ce78417da8 100644 --- a/src/utils/sections.ts +++ b/src/utils/sections.ts @@ -3,6 +3,7 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order'; import * as userSettings from 'scripts/settings/userSettings'; +import { CardShape } from 'utils/card'; import { Section, SectionType, SectionApiMethod } from 'types/sections'; export const getSuggestionSections = (): Section[] => { @@ -29,7 +30,7 @@ export const getSuggestionSections = (): Section[] => { cardOptions: { overlayPlayButton: true, preferThumb: true, - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, showYear: true } }, @@ -43,7 +44,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { overlayPlayButton: true, - shape: 'overflowPortrait', + shape: CardShape.PortraitOverflow, showYear: true } }, @@ -57,7 +58,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { overlayPlayButton: true, - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, preferThumb: true, inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(undefined), @@ -74,7 +75,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { overlayPlayButton: true, - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, preferThumb: true, showSeriesYear: true, showParentTitle: true, @@ -90,7 +91,7 @@ export const getSuggestionSections = (): Section[] => { type: SectionType.NextUp, cardOptions: { overlayPlayButton: true, - shape: 'overflowBackdrop', + shape: CardShape.BackdropOverflow, preferThumb: true, inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(undefined), @@ -107,7 +108,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { showUnplayedIndicator: false, - shape: 'overflowSquare', + shape: CardShape.SquareOverflow, showParentTitle: true, overlayPlayButton: true, coverImage: true @@ -125,7 +126,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { showUnplayedIndicator: false, - shape: 'overflowSquare', + shape: CardShape.SquareOverflow, showParentTitle: true, action: 'instantmix', overlayMoreButton: true, @@ -144,7 +145,7 @@ export const getSuggestionSections = (): Section[] => { }, cardOptions: { showUnplayedIndicator: false, - shape: 'overflowSquare', + shape: CardShape.SquareOverflow, showParentTitle: true, action: 'instantmix', overlayMoreButton: true, @@ -157,8 +158,8 @@ export const getSuggestionSections = (): Section[] => { export const getProgramSections = (): Section[] => { const cardOptions = { inheritThumb: false, - shape: 'autooverflow', - defaultShape: 'overflowBackdrop', + shape: CardShape.AutoOverflow, + defaultShape: CardShape.BackdropOverflow, centerText: true, coverImage: true, overlayText: false, @@ -309,8 +310,8 @@ export const getProgramSections = (): Section[] => { cardOptions: { showYear: true, lines: 2, - shape: 'autooverflow', - defaultShape: 'overflowBackdrop', + shape: CardShape.AutoOverflow, + defaultShape: CardShape.BackdropOverflow, showTitle: true, showParentTitle: true, coverImage: true, @@ -328,8 +329,8 @@ export const getProgramSections = (): Section[] => { cardOptions: { showYear: false, showParentTitle: false, - shape: 'autooverflow', - defaultShape: 'overflowBackdrop', + shape: CardShape.AutoOverflow, + defaultShape: CardShape.BackdropOverflow, showTitle: true, coverImage: true, cardLayout: false, @@ -347,8 +348,8 @@ export const getProgramSections = (): Section[] => { isInProgress: true }, cardOptions: { - shape: 'autooverflow', - defaultShape: 'backdrop', + shape: CardShape.AutoOverflow, + defaultShape: CardShape.Backdrop, showParentTitle: false, showParentTitleOrTitle: true, showTitle: true,