mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Use enums CardShape & BaseItemKind,

Browse source 
Use type import for react FC,
Remove escapeHTML

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
This commit is contained in:
grafixeyehero 2024-02-28 22:47:36 +03:00
parent 11d013b07e
commit 8cbddba8fd
18 changed files with 102 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/apps/experimental/components/library/GenresSectionContainer.tsx
View file

@ -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<GenresSectionContainerProps> = ({
}
return <SectionContainer
sectionTitle={escapeHTML(genre.Name)}
sectionTitle={genre.Name || ''}
items={itemsResult?.Items || []}
url={getRouteUrl(genre)}
cardOptions={{
@ -69,7 +68,7 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
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
}}

22
src/apps/experimental/components/library/ItemsView.tsx
View file

@ -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<ItemsViewProps> = ({
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<ItemsViewProps> = ({
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;

9
src/apps/experimental/components/library/ProgramsSectionView.tsx
View file

@ -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<ProgramsSectionViewProps> = ({
items={group.timerInfo ?? []}
cardOptions={{
queryKey: ['Timers'],
shape: 'overflowBackdrop',
shape: CardShape.BackdropOverflow,
showTitle: true,
showParentTitleOrTitle: true,
showAirTime: true,

14
src/apps/experimental/components/library/SuggestionsSectionView.tsx
View file

@ -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<SuggestionsSectionViewProps> = ({
);
break;
}
return escapeHTML(title);
return title;
};
return (
@ -119,7 +119,7 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
items={recommendation.Items ?? []}
cardOptions={{
queryKey: ['MovieRecommendations'],
shape: 'overflowPortrait',
shape: CardShape.PortraitOverflow,
showYear: true,
scalable: true,
overlayPlayButton: true,

7
src/apps/experimental/components/library/UpcomingView.tsx
View file

@ -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<LibraryViewProps> = ({ parentId }) => {
const { isLoading, data: groupsUpcomingEpisodes } = useGetGroupsUpcomingEpisodes(parentId);
@ -29,7 +30,7 @@ const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
sectionTitle={group.name}
items={group.items ?? []}
cardOptions={{
shape: 'overflowBackdrop',
shape: CardShape.BackdropOverflow,
showLocationTypeIndicator: false,
showParentTitle: true,
preferThumb: true,

4
src/components/cardbuilder/Card/CardBox.tsx
View file

@ -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;

5
src/components/cardbuilder/Card/CardImageContainer.tsx
View file

@ -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} />

8
src/components/cardbuilder/Card/CardOverlayButtons.tsx
View file

@ -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
);
};

10
src/components/cardbuilder/Card/useCard.ts
View file

@ -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 }
);

13
src/components/cardbuilder/Card/useCardImageUrl.ts
View file

@ -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) {

9
src/components/cardbuilder/cardBuilderUtils.ts
View file

@ -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;
}
};

2
src/components/indicators/useIndicator.tsx
View file

@ -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 :

2
src/components/listview/List/ListWrapper.tsx
View file

@ -30,7 +30,7 @@ const ListWrapper: FC<ListWrapperProps> = ({
'itemAction listItem-button listItem-focusscale'
)}
data-action={action}
aria-label={title}
aria-label={title || ''}
{...dataAttributes}
>
{children}

14
src/types/cardOptions.ts
View file

@ -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;

7
src/types/listOptions.ts
View file

@ -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;

2
src/types/progressOptions.ts
View file

@ -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,

10
src/utils/card.ts
View file

@ -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) {

33
src/utils/sections.ts
View file

@ -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,