Merge pull request #7733 from thornbill/card-utils

src/apps/dashboard/components/BaseCard.tsx

@@ -6,7 +6,7 @@ import CardMedia from '@mui/material/CardMedia';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/utils/builder';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
 import { Link, To } from 'react-router-dom';

src/apps/dashboard/features/devices/components/DeviceCard.tsx

@@ -8,7 +8,7 @@ import Stack from '@mui/material/Stack';
 import getNowPlayingName from '../../sessions/utils/getNowPlayingName';
 import getSessionNowPlayingTime from '../../sessions/utils/getSessionNowPlayingTime';
 import getNowPlayingImageUrl from '../../sessions/utils/getNowPlayingImageUrl';
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/utils/builder';
 import Comment from '@mui/icons-material/Comment';
 import PlayArrow from '@mui/icons-material/PlayArrow';
 import Pause from '@mui/icons-material/Pause';

src/apps/experimental/components/library/GenresSectionContainer.tsx

@@ -6,12 +6,12 @@ import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-
 import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
 import React, { type FC } from 'react';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { useApi } from 'hooks/useApi';
 import { useGetItems } from 'hooks/useFetchItems';
 import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from 'components/router/appRouter';
 import SectionContainer from 'components/common/SectionContainer';
-import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { ItemDto } from 'types/base/models/item-dto';
 

src/apps/experimental/components/library/ItemsView.tsx

@@ -9,12 +9,12 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import classNames from 'classnames';
 import React, { type FC, useCallback } from 'react';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 import { 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';

src/apps/experimental/components/library/ProgramsSectionView.tsx

@@ -1,5 +1,6 @@
 import React, { type FC } from 'react';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import NoItemsMessage from 'components/common/NoItemsMessage';
 import SectionContainer from 'components/common/SectionContainer';
 import Loading from 'components/loading/LoadingComponent';
@@ -10,7 +11,6 @@ import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchIte
 import globalize from 'lib/globalize';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
-import { CardShape } from 'utils/card';
 
 interface ProgramsSectionViewProps {
     parentId: ParentId;

src/apps/experimental/components/library/SuggestionsSectionView.tsx

@@ -2,6 +2,7 @@ import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client/model
 import { RecommendationType } from '@jellyfin/sdk/lib/generated-client/models/recommendation-type';
 import React, { type FC } from 'react';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { useApi } from 'hooks/useApi';
 import {
     useGetMovieRecommendations,
@@ -12,7 +13,6 @@ import globalize from 'lib/globalize';
 import Loading from 'components/loading/LoadingComponent';
 import NoItemsMessage from 'components/common/NoItemsMessage';
 import SectionContainer from '../../../../components/common/SectionContainer';
-import { CardShape } from 'utils/card';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
 import type { ItemDto } from 'types/base/models/item-dto';

src/apps/experimental/components/library/UpcomingView.tsx

@@ -1,11 +1,11 @@
 import React, { type FC } from 'react';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { useApi } from 'hooks/useApi';
 import { useGetGroupsUpcomingEpisodes } from 'hooks/useFetchItems';
 import Loading from 'components/loading/LoadingComponent';
 import NoItemsMessage from 'components/common/NoItemsMessage';
 import SectionContainer from 'components/common/SectionContainer';
-import { CardShape } from 'utils/card';
 import type { LibraryViewProps } from 'types/library';
 
 // eslint-disable-next-line sonarjs/function-return-type

src/apps/stable/features/search/api/useLiveTvSearch.ts

@@ -5,7 +5,7 @@ import { useApi } from 'hooks/useApi';
 import { addSection, isLivetv } from '../utils/search';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { LIVETV_CARD_OPTIONS } from '../constants/liveTvCardOptions';
-import { CardShape } from 'utils/card';
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { Section } from '../types';
 import { fetchItemsByType } from './fetchItemsByType';
 

src/apps/stable/features/search/components/SearchResults.tsx

@@ -3,7 +3,7 @@ import { useSearchItems } from '../api/useSearchItems';
 import globalize from 'lib/globalize';
 import Loading from 'components/loading/LoadingComponent';
 import SearchResultsRow from './SearchResultsRow';
-import { CardShape } from 'utils/card';
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
 import { Section } from '../types';
 import { Link } from 'react-router-dom';

src/apps/stable/features/search/utils/search.ts

@@ -1,6 +1,6 @@
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import { CardShape } from 'utils/card';
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { Section } from '../types';
 import { CardOptions } from 'types/cardOptions';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';

src/apps/wizard/controllers/library.js

@@ -1,6 +1,6 @@
 import escapeHtml from 'escape-html';
 
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/utils/builder';
 import confirm from 'components/confirm/confirm';
 import loading from 'components/loading/loading';
 import globalize from 'lib/globalize';

src/components/cardbuilder/Card/CardBox.tsx

@@ -2,10 +2,11 @@ import React, { type FC } from 'react';
 
 import layoutManager from 'components/layoutManager';
 import { ItemAction } from 'constants/itemAction';
-import { CardShape } from 'utils/card';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';
 
+import type { CardShape } from '../utils/shape';
+
 import CardOverlayButtons from './CardOverlayButtons';
 import CardHoverMenu from './CardHoverMenu';
 import CardOuterFooter from './CardOuterFooter';

src/components/cardbuilder/Card/CardContent.tsx

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
 import classNames from 'classnames';
-import { getDefaultBackgroundClass } from '../cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../utils/builder';
 import CardImageContainer from './CardImageContainer';
 
 import { useApi } from 'hooks/useApi';

src/components/cardbuilder/Card/cardHelper.ts

@@ -10,7 +10,7 @@ import itemHelper from 'components/itemHelper';
 import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import datetime from 'scripts/datetime';
-import { isUsingLiveTvNaming } from '../cardBuilderUtils';
+import { isUsingLiveTvNaming } from '../utils/builder';
 import { getDataAttributes } from 'utils/items';
 import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';

src/components/cardbuilder/Card/useCard.ts

@@ -7,13 +7,13 @@ import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';
-import { CardShape } from 'utils/card';
 import { getDataAttributes } from 'utils/items';
 
 import {
     resolveAction,
     resolveMixedShapeByAspectRatio
-} from '../cardBuilderUtils';
+} from '../utils/builder';
+import { CardShape } from '../utils/shape';
 import { getCardImageUrl } from '../utils/url';
 
 interface UseCardProps {

src/components/cardbuilder/cardBuilder.js

@@ -14,7 +14,6 @@ import datetime from 'scripts/datetime';
 import dom from 'utils/dom';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
 import { getItemTypeIcon, getLibraryIcon } from 'utils/image';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
 
@@ -41,7 +40,8 @@ import {
     resolveCardCssClasses,
     resolveCardImageContainerCssClasses,
     resolveMixedShapeByAspectRatio
-} from './cardBuilderUtils';
+} from './utils/builder';
+import { getBackdropShape, getPortraitShape, getSquareShape } from './utils/shape';
 import { getCardImageUrl } from './utils/url';
 
 const enableFocusTransform = !browser.slow && !browser.edge;

src/components/cardbuilder/cardImage.ts

@@ -3,10 +3,10 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import type { ApiClient } from 'jellyfin-apiclient';
 
 import type { CardOptions } from 'types/cardOptions';
-import { CardShape } from 'utils/card';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
 
 import { getDefaultText } from './cardBuilder';
+import { CardShape } from './utils/shape';
 import { getCardImageUrl } from './utils/url';
 
 /**

src/components/cardbuilder/utils/builder.test.ts

@@ -10,7 +10,7 @@ import {
     resolveCardCssClasses,
     resolveCardImageContainerCssClasses,
     resolveMixedShapeByAspectRatio
-} from './cardBuilderUtils';
+} from './builder';
 import { ItemAction } from 'constants/itemAction';
 
 describe('getDesiredAspect', () => {

src/components/cardbuilder/utils/builder.ts

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 
 import { ItemAction } from 'constants/itemAction';
-import { CardShape } from 'utils/card';
 import { randomInt } from 'utils/number';
 
+import { CardShape } from './shape';
+
 const ASPECT_RATIOS = {
     portrait: (2 / 3),
     backdrop: (16 / 9),

src/components/cardbuilder/utils/shape.test.ts

@@ -1,36 +1,36 @@
 import { describe, expect, it } from 'vitest';
-import * as card from './card';
+import * as cardShape from './shape';
 
 describe('Utils: card', () => {
     describe('Function: getSquareShape', () => {
         it('Should return "overflowSquare"', () => {
-            const result = card.getSquareShape(true);
+            const result = cardShape.getSquareShape(true);
             expect(result).toEqual('overflowSquare');
         });
         it('Should return "square"', () => {
-            const result = card.getSquareShape(false);
+            const result = cardShape.getSquareShape(false);
             expect(result).toEqual('square');
         });
     });
 
     describe('Function: getBackdropShape', () => {
         it('Should return "overflowBackdrop"', () => {
-            const result = card.getBackdropShape(true);
+            const result = cardShape.getBackdropShape(true);
             expect(result).toEqual('overflowBackdrop');
         });
         it('Should return "backdrop"', () => {
-            const result = card.getBackdropShape(false);
+            const result = cardShape.getBackdropShape(false);
             expect(result).toEqual('backdrop');
         });
     });
 
     describe('Function: getPortraitShape', () => {
         it('Should return "overflowPortrait"', () => {
-            const result = card.getPortraitShape(true);
+            const result = cardShape.getPortraitShape(true);
             expect(result).toEqual('overflowPortrait');
         });
         it('Should return "portrait"', () => {
-            const result = card.getPortraitShape(false);
+            const result = cardShape.getPortraitShape(false);
             expect(result).toEqual('portrait');
         });
     });

src/components/cardbuilder/utils/url.ts

@@ -4,9 +4,9 @@ import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 
 import { ItemDto } from 'types/base/models/item-dto';
 import { CardOptions } from 'types/cardOptions';
-import { CardShape } from 'utils/card';
 
-import { getDesiredAspect } from '../cardBuilderUtils';
+import { getDesiredAspect } from './builder';
+import { CardShape } from './shape';
 
 interface CardImageUrlParams {
     api?: Api;

src/components/common/DefaultName.tsx

@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
 import Box from '@mui/material/Box';
 import itemHelper from 'components/itemHelper';
-import { isUsingLiveTvNaming } from '../cardbuilder/cardBuilderUtils';
+import { isUsingLiveTvNaming } from '../cardbuilder/utils/builder';
 import type { ItemDto } from 'types/base/models/item-dto';
 
 interface DefaultNameProps {

src/components/dashboard/users/UserCardBox.tsx

@@ -5,7 +5,7 @@ import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale';
 import globalize from '../../../lib/globalize';
 import IconButtonElement from '../../../elements/IconButtonElement';
 import LinkButton from '../../../elements/emby-button/LinkButton';
-import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../../cardbuilder/utils/builder';
 
 type IProps = {
     user?: UserDto;

src/components/favoriteitems.js

@@ -1,6 +1,6 @@
+import { getBackdropShape, getPortraitShape, getSquareShape } from 'components/cardbuilder/utils/shape';
 import dom from 'utils/dom';
 import globalize from 'lib/globalize';
-import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
 import { getParameterByName } from 'utils/url';
 
 import cardBuilder from './cardbuilder/cardBuilder';

src/components/homesections/sections/libraryTiles.ts

@@ -1,9 +1,9 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import globalize from 'lib/globalize';
-import { getBackdropShape } from 'utils/card';
 
 import type { SectionOptions } from './section';
 

src/components/homesections/sections/liveTv.ts

@@ -4,10 +4,10 @@ import type { ApiClient } from 'jellyfin-apiclient';
 
 import { appRouter } from 'components/router/appRouter';
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getBackdropShape } from 'utils/card';
 
 import type { SectionContainerElement, SectionOptions } from './section';
 

src/components/homesections/sections/nextUp.ts

@@ -2,12 +2,12 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base
 import type { ApiClient } from 'jellyfin-apiclient';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import type { UserSettings } from 'scripts/settings/userSettings';
-import { getBackdropShape } from 'utils/card';
 
 import type { SectionContainerElement, SectionOptions } from './section';
 

src/components/homesections/sections/recentlyAdded.ts

@@ -6,11 +6,11 @@ import escapeHtml from 'escape-html';
 import type { ApiClient } from 'jellyfin-apiclient';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape, getSquareShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
 
 import type { SectionContainerElement, SectionOptions } from './section';
 

src/components/homesections/sections/resume.ts

@@ -3,10 +3,10 @@ import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/bas
 import type { ApiClient } from 'jellyfin-apiclient';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape } from 'components/cardbuilder/utils/shape';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import type { UserSettings } from 'scripts/settings/userSettings';
-import { getBackdropShape, getPortraitShape } from 'utils/card';
 
 import type { SectionContainerElement, SectionOptions } from './section';
 

src/components/listview/List/ListImageContainer.tsx

@@ -11,7 +11,7 @@ import type { ListOptions } from 'types/listOptions';
 
 import useIndicator from '../../indicators/useIndicator';
 import layoutManager from '../../layoutManager';
-import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../../cardbuilder/utils/builder';
 import {
     canResume,
     getChannelImageUrl,

src/components/listview/listview.js

@@ -10,7 +10,7 @@ import markdownIt from 'markdown-it';
 
 import { ItemAction } from 'constants/itemAction';
 
-import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../cardbuilder/utils/builder';
 import itemHelper from '../itemHelper';
 import mediaInfo from '../mediainfo/mediainfo';
 import indicators from '../indicators/indicators';

src/components/remotecontrol/remotecontrol.js

@@ -19,7 +19,7 @@ import * as userSettings from '../../scripts/settings/userSettings';
 import itemContextMenu from '../itemContextMenu';
 import toast from '../toast/toast';
 import { appRouter } from '../router/appRouter';
-import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../cardbuilder/utils/builder';
 
 import '../cardbuilder/card.scss';
 import '../../elements/emby-button/emby-button';

src/controllers/favorites.js

@@ -2,13 +2,13 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape, getSquareShape } from 'components/cardbuilder/utils/shape';
 import focusManager from 'components/focusManager';
 import layoutManager from 'components/layoutManager';
 import { appRouter } from 'components/router/appRouter';
 import dom from 'utils/dom';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
 
 import 'elements/emby-itemscontainer/emby-itemscontainer';
 import 'elements/emby-scroller/emby-scroller';

src/controllers/itemDetails/index.js

@@ -11,6 +11,7 @@ import { appHost } from 'components/apphost';
 import { clearBackdrop, setBackdrops } from 'components/backdrop/backdrop';
 import cardBuilder from 'components/cardbuilder/cardBuilder';
 import { buildCardImage } from 'components/cardbuilder/cardImage';
+import { getPortraitShape, getSquareShape } from 'components/cardbuilder/utils/shape';
 import confirm from 'components/confirm/confirm';
 import imageLoader from 'components/images/imageLoader';
 import itemContextMenu from 'components/itemContextMenu';
@@ -34,7 +35,6 @@ import { renderComponent } from 'utils/reactUtils';
 import { download } from 'scripts/fileDownloader';
 import libraryMenu from 'scripts/libraryMenu';
 import * as userSettings from 'scripts/settings/userSettings';
-import { getPortraitShape, getSquareShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 import Events from 'utils/events';
 import { getItemBackdropImageUrl } from 'utils/jellyfin-apiclient/backdropImage';

src/controllers/livetv/livetvrecordings.js

@@ -1,7 +1,7 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import loading from 'components/loading/loading';
-import { getBackdropShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 
 import 'scripts/livetvcomponents';

src/controllers/livetv/livetvschedule.js

@@ -1,9 +1,9 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
 import { getTimersHtml } from 'scripts/livetvcomponents';
-import { getBackdropShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 
 import 'elements/emby-button/emby-button';

src/controllers/livetv/livetvsuggested.js

@@ -1,4 +1,5 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
@@ -8,7 +9,6 @@ import inputManager from 'scripts/inputManager';
 import * as userSettings from 'scripts/settings/userSettings';
 import { LibraryTab } from 'types/libraryTab';
 import Dashboard from 'utils/dashboard';
-import { getBackdropShape, getPortraitShape } from 'utils/card';
 
 import 'elements/emby-itemscontainer/emby-itemscontainer';
 import 'elements/emby-tabs/emby-tabs';

src/controllers/movies/moviegenres.js

@@ -1,13 +1,13 @@
 import escapeHtml from 'escape-html';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
 import lazyLoader from 'components/lazyLoader/lazyLoaderIntersectionObserver';
 import loading from 'components/loading/loading';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import * as userSettings from 'scripts/settings/userSettings';
-import { getBackdropShape, getPortraitShape } from 'utils/card';
 
 import 'elements/emby-button/emby-button';
 

src/controllers/movies/moviesrecommended.js

@@ -1,6 +1,7 @@
 import escapeHtml from 'escape-html';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import layoutManager from 'components/layoutManager';
 import * as mainTabsManager from 'components/maintabsmanager';
@@ -11,7 +12,6 @@ import inputManager from 'scripts/inputManager';
 import libraryMenu from 'scripts/libraryMenu';
 import * as userSettings from 'scripts/settings/userSettings';
 import { LibraryTab } from 'types/libraryTab';
-import { getBackdropShape, getPortraitShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 import Events from 'utils/events';
 

src/controllers/music/musicrecommended.js

@@ -1,4 +1,5 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getSquareShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
@@ -11,7 +12,6 @@ import libraryMenu from 'scripts/libraryMenu';
 import * as userSettings from 'scripts/settings/userSettings';
 import { LibraryTab } from 'types/libraryTab';
 import Dashboard from 'utils/dashboard';
-import { getSquareShape } from 'utils/card';
 
 import 'elements/emby-itemscontainer/emby-itemscontainer';
 import 'elements/emby-tabs/emby-tabs';

src/controllers/session/login/index.js

@@ -18,7 +18,7 @@ import Dashboard from '../../../utils/dashboard';
 import toast from '../../../components/toast/toast';
 import dialogHelper from '../../../components/dialogHelper/dialogHelper';
 import baseAlert from '../../../components/alert';
-import { getDefaultBackgroundClass } from '../../../components/cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../../../components/cardbuilder/utils/builder';
 
 import './login.scss';
 

src/controllers/session/selectServer/index.js

@@ -18,7 +18,7 @@ import '../../../components/cardbuilder/card.scss';
 import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../utils/dashboard';
 import alert from '../../../components/alert';
-import { getDefaultBackgroundClass } from '../../../components/cardbuilder/cardBuilderUtils';
+import { getDefaultBackgroundClass } from '../../../components/cardbuilder/utils/builder';
 import { ConnectionState, ServerConnections } from 'lib/jellyfin-apiclient';
 
 const enableFocusTransform = !browser.slow && !browser.edge;

src/controllers/shows/tvgenres.js

@@ -1,13 +1,13 @@
 import escapeHtml from 'escape-html';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape, getPortraitShape } from 'components/cardbuilder/utils/shape';
 import lazyLoader from 'components/lazyLoader/lazyLoaderIntersectionObserver';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import * as userSettings from 'scripts/settings/userSettings';
-import { getBackdropShape, getPortraitShape } from 'utils/card';
 
 import 'elements/emby-button/emby-button';
 

src/controllers/shows/tvrecommended.js

@@ -1,5 +1,6 @@
 import autoFocuser from 'components/autoFocuser';
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
 import * as mainTabsManager from 'components/maintabsmanager';
@@ -10,7 +11,6 @@ import inputManager from 'scripts/inputManager';
 import libraryMenu from 'scripts/libraryMenu';
 import * as userSettings from 'scripts/settings/userSettings';
 import { LibraryTab } from 'types/libraryTab';
-import { getBackdropShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 import Events from 'utils/events';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';

src/controllers/shows/tvupcoming.js

@@ -1,10 +1,10 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import imageLoader from 'components/images/imageLoader';
 import layoutManager from 'components/layoutManager';
 import loading from 'components/loading/loading';
 import datetime from 'scripts/datetime';
 import globalize from 'lib/globalize';
-import { getBackdropShape } from 'utils/card';
 
 import 'elements/emby-itemscontainer/emby-itemscontainer';
 

src/scripts/livetvcomponents.js

@@ -1,6 +1,6 @@
 import cardBuilder from 'components/cardbuilder/cardBuilder';
+import { getBackdropShape } from 'components/cardbuilder/utils/shape';
 import layoutManager from 'components/layoutManager';
-import { getBackdropShape } from 'utils/card';
 
 import datetime from './datetime';
 

src/types/cardOptions.ts

@@ -4,8 +4,8 @@ import type { UserItemDataDto } from '@jellyfin/sdk/lib/generated-client/models/
 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 { ItemAction } from 'constants/itemAction';
-import { CardShape } from 'utils/card';
+import type { CardShape } from 'components/cardbuilder/utils/shape';
+import type { ItemAction } from 'constants/itemAction';
 
 import type { NullableString } from './base/common/shared/types';
 import type { ItemDto } from './base/models/item-dto';
@@ -46,7 +46,7 @@ export interface CardOptions {
     showUnplayedIndicator?: boolean;
     showChildCountIndicator?: boolean;
     lines?: number;
-    context?: CollectionType;
+    context?: CollectionType | string;
     action?: ItemAction | null;
     indexBy?: string;
     parentId?: ParentId;

src/types/dataAttributes.ts

@@ -6,7 +6,7 @@ import { ItemAction } from 'constants/itemAction';
 import type { NullableBoolean, NullableNumber, NullableString } from './base/common/shared/types';
 
 export type AttributesOpts = {
-    context?: CollectionType,
+    context?: CollectionType | string,
     parentId?: NullableString,
     collectionId?: NullableString,
     playlistId?: NullableString,

src/utils/sections.ts

@@ -5,10 +5,10 @@ import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
 import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
 
+import { CardShape } from 'components/cardbuilder/utils/shape';
 import { ItemAction } from 'constants/itemAction';
 import * as userSettings from 'scripts/settings/userSettings';
 import { type Section, SectionType, SectionApiMethod } from 'types/sections';
-import { CardShape } from 'utils/card';
 
 export const getSuggestionSections = (): Section[] => {
     const parametersOptions = {