From 1e3fa5418c5fbeafd0e5d708149c7c27bbaa52a1 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Sun, 1 Oct 2023 02:49:36 -0400 Subject: [PATCH] Remove duplicate card shape functions --- src/components/cardbuilder/cardBuilder.js | 35 +++++---- src/components/favoriteitems.js | 44 +++++------ src/components/homesections/homesections.js | 51 ++++++------- src/controllers/favorites.js | 56 ++++++-------- src/controllers/itemDetails/index.js | 85 +++++++++------------ src/controllers/livetv/livetvrecordings.js | 18 +++-- src/controllers/livetv/livetvschedule.js | 24 +++--- src/controllers/livetv/livetvsuggested.js | 49 +++++------- src/controllers/movies/moviegenres.js | 35 ++++----- src/controllers/movies/moviesrecommended.js | 52 ++++++------- src/controllers/music/musicrecommended.js | 50 ++++++------ src/controllers/shows/tvgenres.js | 35 ++++----- src/controllers/shows/tvrecommended.js | 44 +++++------ src/controllers/shows/tvupcoming.js | 25 +++--- src/scripts/livetvcomponents.js | 12 ++- src/utils/card.ts | 20 +++++ 16 files changed, 295 insertions(+), 340 deletions(-) create mode 100644 src/utils/card.ts diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 96d7edb06af..c2f5436b39f 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -5,24 +5,29 @@ */ import escapeHtml from 'escape-html'; -import datetime from '../../scripts/datetime'; -import imageLoader from '../images/imageLoader'; -import itemHelper from '../itemHelper'; + +import browser from 'scripts/browser'; +import datetime from 'scripts/datetime'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +import imageHelper from 'scripts/imagehelper'; +import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card'; +import { randomInt } from 'utils/number'; + import focusManager from '../focusManager'; +import imageLoader from '../images/imageLoader'; import indicators from '../indicators/indicators'; -import globalize from '../../scripts/globalize'; +import itemHelper from '../itemHelper'; import layoutManager from '../layoutManager'; -import dom from '../../scripts/dom'; -import browser from '../../scripts/browser'; import { playbackManager } from '../playback/playbackmanager'; +import { appRouter } from '../router/appRouter'; +import ServerConnections from '../ServerConnections'; import itemShortcuts from '../shortcuts'; -import imageHelper from '../../scripts/imagehelper'; -import { randomInt } from '../../utils/number.ts'; + +import 'elements/emby-button/paper-icon-button-light'; + import './card.scss'; -import '../../elements/emby-button/paper-icon-button-light'; import '../guide/programs.scss'; -import ServerConnections from '../ServerConnections'; -import { appRouter } from '../router/appRouter'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -301,16 +306,16 @@ function setCardData(items, options) { options.shape = 'banner'; options.coverImage = true; } else if (primaryImageAspectRatio >= 1.33) { - options.shape = requestedShape === 'autooverflow' ? 'overflowBackdrop' : 'backdrop'; + options.shape = getBackdropShape(requestedShape === 'autooverflow'); } else if (primaryImageAspectRatio > 0.71) { - options.shape = requestedShape === 'autooverflow' ? 'overflowSquare' : 'square'; + options.shape = getSquareShape(requestedShape === 'autooverflow'); } else { - options.shape = requestedShape === 'autooverflow' ? 'overflowPortrait' : 'portrait'; + options.shape = getPortraitShape(requestedShape === 'autooverflow'); } } if (!options.shape) { - options.shape = options.defaultShape || (requestedShape === 'autooverflow' ? 'overflowSquare' : 'square'); + options.shape = options.defaultShape || getSquareShape(requestedShape === 'autooverflow'); } } diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js index ac0f3c0de02..b26c25ede11 100644 --- a/src/components/favoriteitems.js +++ b/src/components/favoriteitems.js @@ -1,28 +1,20 @@ -import loading from './loading/loading'; -import cardBuilder from './cardbuilder/cardBuilder'; -import dom from '../scripts/dom'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card'; +import { getParameterByName } from 'utils/url'; + import { appHost } from './apphost'; +import cardBuilder from './cardbuilder/cardBuilder'; import imageLoader from './images/imageLoader'; -import globalize from '../scripts/globalize'; import layoutManager from './layoutManager'; -import { getParameterByName } from '../utils/url.ts'; -import '../styles/scrollstyles.scss'; -import '../elements/emby-itemscontainer/emby-itemscontainer'; - -function enableScrollX() { - return !layoutManager.desktop; -} +import loading from './loading/loading'; -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} +import 'elements/emby-itemscontainer/emby-itemscontainer'; -function getPosterShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; -} +import 'styles/scrollstyles.scss'; -function getSquareShape() { - return enableScrollX() ? 'overflowSquare' : 'square'; +function enableScrollX() { + return !layoutManager.desktop; } function getSections() { @@ -30,21 +22,21 @@ function getSections() { name: 'Movies', types: 'Movie', id: 'favoriteMovies', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: false, overlayPlayButton: true }, { name: 'Shows', types: 'Series', id: 'favoriteShows', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: false, overlayPlayButton: true }, { name: 'Episodes', types: 'Episode', id: 'favoriteEpisode', - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: false, showTitle: true, showParentTitle: true, @@ -55,7 +47,7 @@ function getSections() { name: 'Videos', types: 'Video,MusicVideo', id: 'favoriteVideos', - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, overlayPlayButton: true, @@ -65,7 +57,7 @@ function getSections() { name: 'Artists', types: 'MusicArtist', id: 'favoriteArtists', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -77,7 +69,7 @@ function getSections() { name: 'Albums', types: 'MusicAlbum', id: 'favoriteAlbums', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -89,7 +81,7 @@ function getSections() { name: 'Songs', types: 'Audio', id: 'favoriteSongs', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 212d976a8fb..6f7be53f6e4 100644 --- a/src/components/homesections/homesections.js +++ b/src/components/homesections/homesections.js @@ -1,18 +1,23 @@ import escapeHtml from 'escape-html'; + +import globalize from 'scripts/globalize'; +import imageHelper from 'scripts/imagehelper'; +import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card'; +import Dashboard from 'utils/dashboard'; + import cardBuilder from '../cardbuilder/cardBuilder'; -import layoutManager from '../layoutManager'; import imageLoader from '../images/imageLoader'; -import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; import { appRouter } from '../router/appRouter'; -import imageHelper from '../../scripts/imagehelper'; -import '../../elements/emby-button/paper-icon-button-light'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-scroller/emby-scroller'; -import '../../elements/emby-button/emby-button'; -import './homesections.scss'; -import Dashboard from '../../utils/dashboard'; import ServerConnections from '../ServerConnections'; +import 'elements/emby-button/paper-icon-button-light'; +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'elements/emby-scroller/emby-scroller'; +import 'elements/emby-button/emby-button'; + +import './homesections.scss'; + export function getDefaultSection(index) { switch (index) { case 0: @@ -169,18 +174,6 @@ function enableScrollX() { return true; } -function getSquareShape() { - return enableScrollX() ? 'overflowSquare' : 'square'; -} - -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - -function getPortraitShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; -} - function getLibraryButtonsHtml(items) { let html = ''; @@ -244,11 +237,11 @@ function getLatestItemsHtmlFn(itemType, viewType) { const cardLayout = false; let shape; if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') { - shape = getPortraitShape(); + shape = getPortraitShape(enableScrollX()); } else if (viewType === 'music' || viewType === 'homevideos') { - shape = getSquareShape(); + shape = getSquareShape(enableScrollX()); } else { - shape = getThumbShape(); + shape = getBackdropShape(enableScrollX()); } return cardBuilder.getCardsHtml({ @@ -345,7 +338,7 @@ export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, use html += cardBuilder.getCardsHtml({ items: userViews, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), showTitle: true, centerText: true, overlayText: false, @@ -423,7 +416,9 @@ function getItemsToResumeHtmlFn(useEpisodeImages, mediaType) { items: items, preferThumb: true, inheritThumb: !useEpisodeImages, - shape: (mediaType === 'Book') ? getPortraitShape() : getThumbShape(), + shape: (mediaType === 'Book') ? + getPortraitShape(enableScrollX()) : + getBackdropShape(enableScrollX()), overlayText: false, showTitle: true, showParentTitle: true, @@ -471,7 +466,7 @@ function getOnNowItemsHtml(items) { showChannelName: false, showAirDateTime: false, showAirEndTime: true, - defaultShape: getThumbShape(), + defaultShape: getBackdropShape(enableScrollX()), lines: 3, overlayPlayButton: true }); @@ -614,7 +609,7 @@ function getNextUpItemsHtmlFn(useEpisodeImages) { items: items, preferThumb: true, inheritThumb: !useEpisodeImages, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), overlayText: false, showTitle: true, showParentTitle: true, diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js index f14727a7643..50c53d90b7e 100644 --- a/src/controllers/favorites.js +++ b/src/controllers/favorites.js @@ -1,35 +1,25 @@ -import { appRouter } from '../components/router/appRouter'; -import cardBuilder from '../components/cardbuilder/cardBuilder'; -import dom from '../scripts/dom'; -import globalize from '../scripts/globalize'; -import { appHost } from '../components/apphost'; -import layoutManager from '../components/layoutManager'; -import focusManager from '../components/focusManager'; -import '../elements/emby-itemscontainer/emby-itemscontainer'; -import '../elements/emby-scroller/emby-scroller'; -import ServerConnections from '../components/ServerConnections'; +import { appHost } from 'components/apphost'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import focusManager from 'components/focusManager'; +import layoutManager from 'components/layoutManager'; +import { appRouter } from 'components/router/appRouter'; +import ServerConnections from 'components/ServerConnections'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card'; + +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'elements/emby-scroller/emby-scroller'; function enableScrollX() { return true; } -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - -function getPosterShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; -} - -function getSquareShape() { - return enableScrollX() ? 'overflowSquare' : 'square'; -} - function getSections() { return [{ name: 'Movies', types: 'Movie', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, showYear: true, overlayPlayButton: true, @@ -38,7 +28,7 @@ function getSections() { }, { name: 'Shows', types: 'Series', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, showYear: true, overlayPlayButton: true, @@ -47,7 +37,7 @@ function getSections() { }, { name: 'Episodes', types: 'Episode', - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: false, showTitle: true, showParentTitle: true, @@ -57,7 +47,7 @@ function getSections() { }, { name: 'Videos', types: 'Video', - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, overlayPlayButton: true, @@ -66,7 +56,7 @@ function getSections() { }, { name: 'Collections', types: 'BoxSet', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, overlayPlayButton: true, overlayText: false, @@ -74,7 +64,7 @@ function getSections() { }, { name: 'Playlists', types: 'Playlist', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -85,7 +75,7 @@ function getSections() { }, { name: 'People', types: 'Person', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -96,7 +86,7 @@ function getSections() { }, { name: 'Artists', types: 'MusicArtist', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -107,7 +97,7 @@ function getSections() { }, { name: 'Albums', types: 'MusicAlbum', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -118,7 +108,7 @@ function getSections() { }, { name: 'Songs', types: 'Audio', - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), preferThumb: false, showTitle: true, overlayText: false, @@ -130,7 +120,7 @@ function getSections() { }, { name: 'Books', types: 'Book', - shape: getPosterShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, showYear: true, overlayPlayButton: true, diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 8b000348e03..4efe69e7818 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -4,39 +4,42 @@ import { marked } from 'marked'; import escapeHtml from 'escape-html'; import isEqual from 'lodash-es/isEqual'; -import { appHost } from '../../components/apphost'; -import loading from '../../components/loading/loading'; -import { appRouter } from '../../components/router/appRouter'; -import layoutManager from '../../components/layoutManager'; -import Events from '../../utils/events.ts'; -import * as userSettings from '../../scripts/settings/userSettings'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import datetime from '../../scripts/datetime'; -import mediaInfo from '../../components/mediainfo/mediainfo'; -import { clearBackdrop, setBackdrops } from '../../components/backdrop/backdrop'; -import listView from '../../components/listview/listview'; -import itemContextMenu from '../../components/itemContextMenu'; -import itemHelper from '../../components/itemHelper'; -import dom from '../../scripts/dom'; -import imageLoader from '../../components/images/imageLoader'; -import libraryMenu from '../../scripts/libraryMenu'; -import globalize from '../../scripts/globalize'; -import browser from '../../scripts/browser'; -import { playbackManager } from '../../components/playback/playbackmanager'; -import '../../styles/scrollstyles.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-checkbox/emby-checkbox'; -import '../../elements/emby-button/emby-button'; -import '../../elements/emby-playstatebutton/emby-playstatebutton'; -import '../../elements/emby-ratingbutton/emby-ratingbutton'; -import '../../elements/emby-scroller/emby-scroller'; -import '../../elements/emby-select/emby-select'; -import itemShortcuts from '../../components/shortcuts'; -import Dashboard from '../../utils/dashboard'; -import ServerConnections from '../../components/ServerConnections'; -import confirm from '../../components/confirm/confirm'; -import { download } from '../../scripts/fileDownloader'; -import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdropImage'; +import { appHost } from 'components/apphost'; +import { clearBackdrop, setBackdrops } from 'components/backdrop/backdrop'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import confirm from 'components/confirm/confirm'; +import imageLoader from 'components/images/imageLoader'; +import itemContextMenu from 'components/itemContextMenu'; +import itemHelper from 'components/itemHelper'; +import mediaInfo from 'components/mediainfo/mediainfo'; +import layoutManager from 'components/layoutManager'; +import listView from 'components/listview/listview'; +import loading from 'components/loading/loading'; +import { playbackManager } from 'components/playback/playbackmanager'; +import { appRouter } from 'components/router/appRouter'; +import itemShortcuts from 'components/shortcuts'; +import ServerConnections from 'components/ServerConnections'; +import browser from 'scripts/browser'; +import datetime from 'scripts/datetime'; +import dom from 'scripts/dom'; +import { download } from 'scripts/fileDownloader'; +import globalize from 'scripts/globalize'; +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'; + +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'elements/emby-checkbox/emby-checkbox'; +import 'elements/emby-button/emby-button'; +import 'elements/emby-playstatebutton/emby-playstatebutton'; +import 'elements/emby-ratingbutton/emby-ratingbutton'; +import 'elements/emby-scroller/emby-scroller'; +import 'elements/emby-select/emby-select'; + +import 'styles/scrollstyles.scss'; function autoFocus(container) { import('../../components/autoFocuser').then(({ default: autoFocuser }) => { @@ -1069,22 +1072,6 @@ function enableScrollX() { return browser.mobile && window.screen.availWidth <= 1000; } -function getPortraitShape(scrollX) { - if (scrollX == null) { - scrollX = enableScrollX(); - } - - return scrollX ? 'overflowPortrait' : 'portrait'; -} - -function getSquareShape(scrollX) { - if (scrollX == null) { - scrollX = enableScrollX(); - } - - return scrollX ? 'overflowSquare' : 'square'; -} - function renderMoreFromSeason(view, item, apiClient) { const section = view.querySelector('.moreFromSeasonSection'); diff --git a/src/controllers/livetv/livetvrecordings.js b/src/controllers/livetv/livetvrecordings.js index 73afca81d79..be62a110aef 100644 --- a/src/controllers/livetv/livetvrecordings.js +++ b/src/controllers/livetv/livetvrecordings.js @@ -1,10 +1,12 @@ -import loading from '../../components/loading/loading'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import imageLoader from '../../components/images/imageLoader'; -import '../../scripts/livetvcomponents'; -import '../../components/listview/listview.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import Dashboard from '../../utils/dashboard'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +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'; +import 'components/listview/listview.scss'; +import 'elements/emby-itemscontainer/emby-itemscontainer'; function renderRecordings(elem, recordings, cardOptions, scrollX) { if (!elem) { @@ -32,7 +34,7 @@ function renderRecordings(elem, recordings, cardOptions, scrollX) { recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ items: recordings, shape: scrollX ? 'autooverflow' : 'auto', - defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop', + defaultShape: getBackdropShape(scrollX), showTitle: true, showParentTitle: true, coverImage: true, diff --git a/src/controllers/livetv/livetvschedule.js b/src/controllers/livetv/livetvschedule.js index 605930e9fd5..595daab7a6e 100644 --- a/src/controllers/livetv/livetvschedule.js +++ b/src/controllers/livetv/livetvschedule.js @@ -1,11 +1,13 @@ -import layoutManager from '../../components/layoutManager'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import imageLoader from '../../components/images/imageLoader'; -import loading from '../../components/loading/loading'; -import '../../scripts/livetvcomponents'; -import '../../elements/emby-button/emby-button'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import Dashboard from '../../utils/dashboard'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import imageLoader from 'components/images/imageLoader'; +import layoutManager from 'components/layoutManager'; +import loading from 'components/loading/loading'; +import { getBackdropShape } from 'utils/card'; +import Dashboard from 'utils/dashboard'; + +import 'elements/emby-button/emby-button'; +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'scripts/livetvcomponents'; function enableScrollX() { return !layoutManager.desktop; @@ -50,15 +52,11 @@ function renderRecordings(elem, recordings, cardOptions) { imageLoader.lazyChildren(recordingItems); } -function getBackdropShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - function renderActiveRecordings(context, promise) { promise.then(function (result) { renderRecordings(context.querySelector('#activeRecordings'), result.Items, { shape: enableScrollX() ? 'autooverflow' : 'auto', - defaultShape: getBackdropShape(), + defaultShape: getBackdropShape(enableScrollX()), showParentTitle: false, showParentTitleOrTitle: true, showTitle: true, diff --git a/src/controllers/livetv/livetvsuggested.js b/src/controllers/livetv/livetvsuggested.js index d8325f7a2b3..b01e7542901 100644 --- a/src/controllers/livetv/livetvsuggested.js +++ b/src/controllers/livetv/livetvsuggested.js @@ -1,36 +1,25 @@ -import layoutManager from '../../components/layoutManager'; -import * as userSettings from '../../scripts/settings/userSettings'; -import inputManager from '../../scripts/inputManager'; -import loading from '../../components/loading/loading'; -import globalize from '../../scripts/globalize'; -import * as mainTabsManager from '../../components/maintabsmanager'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import imageLoader from '../../components/images/imageLoader'; -import '../../styles/scrollstyles.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-tabs/emby-tabs'; -import '../../elements/emby-button/emby-button'; -import { LibraryTab } from '../../types/libraryTab.ts'; -import Dashboard from '../../utils/dashboard'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import imageLoader from 'components/images/imageLoader'; +import layoutManager from 'components/layoutManager'; +import loading from 'components/loading/loading'; +import * as mainTabsManager from 'components/maintabsmanager'; +import globalize from 'scripts/globalize'; +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'; +import 'elements/emby-button/emby-button'; + +import 'styles/scrollstyles.scss'; function enableScrollX() { return !layoutManager.desktop; } -function getBackdropShape() { - if (enableScrollX()) { - return 'overflowBackdrop'; - } - return 'backdrop'; -} - -function getPortraitShape() { - if (enableScrollX()) { - return 'overflowPortrait'; - } - return 'portrait'; -} - function getLimit() { if (enableScrollX()) { return 12; @@ -96,7 +85,7 @@ function reload(page, enableFullRender) { EnableImageTypes: 'Primary,Thumb' }).then(function (result) { renderItems(page, result.Items, 'upcomingTvMovieItems', null, { - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), preferThumb: null, showParentTitle: false }); @@ -147,7 +136,7 @@ function renderItems(page, items, sectionClass, overlayButton, cardOptions) { preferThumb: 'auto', inheritThumb: false, shape: enableScrollX() ? 'autooverflow' : 'auto', - defaultShape: getBackdropShape(), + defaultShape: getBackdropShape(enableScrollX()), showParentTitle: true, showTitle: true, centerText: true, diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js index 3d866c6e9ac..36c433c70db 100644 --- a/src/controllers/movies/moviegenres.js +++ b/src/controllers/movies/moviegenres.js @@ -1,12 +1,15 @@ import escapeHtml from 'escape-html'; -import layoutManager from '../../components/layoutManager'; -import loading from '../../components/loading/loading'; -import * as userSettings from '../../scripts/settings/userSettings'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; -import globalize from '../../scripts/globalize'; -import { appRouter } from '../../components/router/appRouter'; -import '../../elements/emby-button/emby-button'; + +import cardBuilder from 'components/cardbuilder/cardBuilder'; +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 'scripts/globalize'; +import * as userSettings from 'scripts/settings/userSettings'; +import { getBackdropShape, getPortraitShape } from 'utils/card'; + +import 'elements/emby-button/emby-button'; export default function (view, params, tabContent) { function getPageData() { @@ -49,14 +52,6 @@ export default function (view, params, tabContent) { return !layoutManager.desktop; } - function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; - } - - function getPortraitShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; - } - const fillItemsContainer = (entry) => { const elem = entry.target; const id = elem.getAttribute('data-id'); @@ -85,7 +80,7 @@ export default function (view, params, tabContent) { if (viewStyle == 'Thumb') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, scalable: true, @@ -96,7 +91,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'ThumbCard') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, scalable: true, @@ -107,7 +102,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'PosterCard') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, scalable: true, centerText: false, @@ -117,7 +112,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'Poster') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), scalable: true, overlayMoreButton: true, allowBottomPadding: true, diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js index 1dc60c30e13..ea593f805d7 100644 --- a/src/controllers/movies/moviesrecommended.js +++ b/src/controllers/movies/moviesrecommended.js @@ -1,35 +1,29 @@ import escapeHtml from 'escape-html'; -import layoutManager from '../../components/layoutManager'; -import inputManager from '../../scripts/inputManager'; -import * as userSettings from '../../scripts/settings/userSettings'; -import libraryMenu from '../../scripts/libraryMenu'; -import * as mainTabsManager from '../../components/maintabsmanager'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import dom from '../../scripts/dom'; -import imageLoader from '../../components/images/imageLoader'; -import { playbackManager } from '../../components/playback/playbackmanager'; -import globalize from '../../scripts/globalize'; -import { LibraryTab } from '../../types/libraryTab.ts'; -import Dashboard from '../../utils/dashboard'; -import Events from '../../utils/events.ts'; - -import '../../elements/emby-scroller/emby-scroller'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-tabs/emby-tabs'; -import '../../elements/emby-button/emby-button'; + +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import imageLoader from 'components/images/imageLoader'; +import layoutManager from 'components/layoutManager'; +import * as mainTabsManager from 'components/maintabsmanager'; +import { playbackManager } from 'components/playback/playbackmanager'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +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'; + +import 'elements/emby-scroller/emby-scroller'; +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'elements/emby-tabs/emby-tabs'; +import 'elements/emby-button/emby-button'; function enableScrollX() { return !layoutManager.desktop; } -function getPortraitShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; -} - -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - function loadLatest(page, userId, parentId) { const options = { IncludeItemTypes: 'Movie', @@ -45,7 +39,7 @@ function loadLatest(page, userId, parentId) { const container = page.querySelector('#recentlyAddedItems'); cardBuilder.buildCards(items, { itemsContainer: container, - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), scalable: true, overlayPlayButton: true, allowBottomPadding: allowBottomPadding, @@ -87,7 +81,7 @@ function loadResume(page, userId, parentId) { cardBuilder.buildCards(result.Items, { itemsContainer: container, preferThumb: true, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), scalable: true, overlayPlayButton: true, allowBottomPadding: allowBottomPadding, @@ -138,7 +132,7 @@ function getRecommendationHtml(recommendation) { } html += cardBuilder.getCardsHtml(recommendation.Items, { - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), scalable: true, overlayPlayButton: true, allowBottomPadding: allowBottomPadding, diff --git a/src/controllers/music/musicrecommended.js b/src/controllers/music/musicrecommended.js index b66ae0ff7cb..6dc14b9b562 100644 --- a/src/controllers/music/musicrecommended.js +++ b/src/controllers/music/musicrecommended.js @@ -1,22 +1,24 @@ -import browser from '../../scripts/browser'; -import layoutManager from '../../components/layoutManager'; -import * as userSettings from '../../scripts/settings/userSettings'; -import inputManager from '../../scripts/inputManager'; -import loading from '../../components/loading/loading'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import dom from '../../scripts/dom'; -import imageLoader from '../../components/images/imageLoader'; -import libraryMenu from '../../scripts/libraryMenu'; -import * as mainTabsManager from '../../components/maintabsmanager'; -import globalize from '../../scripts/globalize'; -import { LibraryTab } from '../../types/libraryTab.ts'; -import Dashboard from '../../utils/dashboard'; - -import '../../styles/scrollstyles.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-tabs/emby-tabs'; -import '../../elements/emby-button/emby-button'; -import '../../styles/flexstyles.scss'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import imageLoader from 'components/images/imageLoader'; +import layoutManager from 'components/layoutManager'; +import loading from 'components/loading/loading'; +import * as mainTabsManager from 'components/maintabsmanager'; +import browser from 'scripts/browser'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +import inputManager from 'scripts/inputManager'; +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'; +import 'elements/emby-button/emby-button'; + +import 'styles/flexstyles.scss'; +import 'styles/scrollstyles.scss'; function itemsPerRow() { const screenWidth = dom.getWindowSize().innerWidth; @@ -40,10 +42,6 @@ function enableScrollX() { return !layoutManager.desktop; } -function getSquareShape() { - return enableScrollX() ? 'overflowSquare' : 'square'; -} - function loadLatest(page, parentId) { loading.show(); const userId = ApiClient.getCurrentUserId(); @@ -62,7 +60,7 @@ function loadLatest(page, parentId) { items: items, showUnplayedIndicator: false, showLatestItemsPopup: false, - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), showTitle: true, showParentTitle: true, lazy: true, @@ -108,7 +106,7 @@ function loadRecentlyPlayed(page, parentId) { itemsContainer.innerHTML = cardBuilder.getCardsHtml({ items: result.Items, showUnplayedIndicator: false, - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), showTitle: true, showParentTitle: true, action: 'instantmix', @@ -150,7 +148,7 @@ function loadFrequentlyPlayed(page, parentId) { itemsContainer.innerHTML = cardBuilder.getCardsHtml({ items: result.Items, showUnplayedIndicator: false, - shape: getSquareShape(), + shape: getSquareShape(enableScrollX()), showTitle: true, showParentTitle: true, action: 'instantmix', diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js index 061089af86c..3a45be7d5ad 100644 --- a/src/controllers/shows/tvgenres.js +++ b/src/controllers/shows/tvgenres.js @@ -1,12 +1,15 @@ import escapeHtml from 'escape-html'; -import layoutManager from '../../components/layoutManager'; -import loading from '../../components/loading/loading'; -import * as userSettings from '../../scripts/settings/userSettings'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; -import globalize from '../../scripts/globalize'; -import { appRouter } from '../../components/router/appRouter'; -import '../../elements/emby-button/emby-button'; + +import cardBuilder from 'components/cardbuilder/cardBuilder'; +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 'scripts/globalize'; +import * as userSettings from 'scripts/settings/userSettings'; +import { getBackdropShape, getPortraitShape } from 'utils/card'; + +import 'elements/emby-button/emby-button'; export default function (view, params, tabContent) { function getPageData() { @@ -49,14 +52,6 @@ export default function (view, params, tabContent) { return !layoutManager.desktop; } - function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; - } - - function getPortraitShape() { - return enableScrollX() ? 'overflowPortrait' : 'portrait'; - } - function fillItemsContainer(entry) { const elem = entry.target; const id = elem.getAttribute('data-id'); @@ -85,7 +80,7 @@ export default function (view, params, tabContent) { if (viewStyle == 'Thumb') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, scalable: true, @@ -96,7 +91,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'ThumbCard') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), preferThumb: true, showTitle: true, scalable: true, @@ -107,7 +102,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'PosterCard') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), showTitle: true, scalable: true, centerText: false, @@ -117,7 +112,7 @@ export default function (view, params, tabContent) { } else if (viewStyle == 'Poster') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, - shape: getPortraitShape(), + shape: getPortraitShape(enableScrollX()), scalable: true, showTitle: true, centerText: true, diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js index d3673bf6ae5..982420bde7b 100644 --- a/src/controllers/shows/tvrecommended.js +++ b/src/controllers/shows/tvrecommended.js @@ -1,21 +1,23 @@ - -import inputManager from '../../scripts/inputManager'; -import libraryMenu from '../../scripts/libraryMenu'; -import layoutManager from '../../components/layoutManager'; -import loading from '../../components/loading/loading'; -import dom from '../../scripts/dom'; -import * as userSettings from '../../scripts/settings/userSettings'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import { playbackManager } from '../../components/playback/playbackmanager'; -import * as mainTabsManager from '../../components/maintabsmanager'; -import globalize from '../../scripts/globalize'; -import '../../styles/scrollstyles.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import '../../elements/emby-button/emby-button'; -import { LibraryTab } from '../../types/libraryTab.ts'; -import Dashboard from '../../utils/dashboard'; -import Events from '../../utils/events.ts'; -import autoFocuser from '../../components/autoFocuser'; +import autoFocuser from 'components/autoFocuser'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import layoutManager from 'components/layoutManager'; +import loading from 'components/loading/loading'; +import * as mainTabsManager from 'components/maintabsmanager'; +import { playbackManager } from 'components/playback/playbackmanager'; +import dom from 'scripts/dom'; +import globalize from 'scripts/globalize'; +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 'elements/emby-itemscontainer/emby-itemscontainer'; +import 'elements/emby-button/emby-button'; + +import 'styles/scrollstyles.scss'; function getTabs() { return [{ @@ -119,7 +121,7 @@ function loadResume(view, userId, parentId) { itemsContainer: container, preferThumb: true, inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(), - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), scalable: true, overlayPlayButton: true, allowBottomPadding: allowBottomPadding, @@ -217,10 +219,6 @@ function enableScrollX() { return !layoutManager.desktop; } -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - export default function (view, params) { function onBeforeTabChange(e) { preLoadTab(view, parseInt(e.detail.selectedTabIndex, 10)); diff --git a/src/controllers/shows/tvupcoming.js b/src/controllers/shows/tvupcoming.js index f8b2f31eaac..f3c7d90ec6b 100644 --- a/src/controllers/shows/tvupcoming.js +++ b/src/controllers/shows/tvupcoming.js @@ -1,11 +1,14 @@ -import layoutManager from '../../components/layoutManager'; -import loading from '../../components/loading/loading'; -import datetime from '../../scripts/datetime'; -import cardBuilder from '../../components/cardbuilder/cardBuilder'; -import imageLoader from '../../components/images/imageLoader'; -import globalize from '../../scripts/globalize'; -import '../../styles/scrollstyles.scss'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +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 'scripts/globalize'; +import { getBackdropShape } from 'utils/card'; + +import 'elements/emby-itemscontainer/emby-itemscontainer'; + +import 'styles/scrollstyles.scss'; function getUpcomingPromise(context, params) { loading.show(); @@ -40,10 +43,6 @@ function enableScrollX() { return !layoutManager.desktop; } -function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - function renderUpcoming(elem, items) { const groups = []; let currentGroupName = ''; @@ -105,7 +104,7 @@ function renderUpcoming(elem, items) { html += cardBuilder.getCardsHtml({ items: group.items, showLocationTypeIndicator: false, - shape: getThumbShape(), + shape: getBackdropShape(enableScrollX()), showTitle: true, preferThumb: true, lazy: true, diff --git a/src/scripts/livetvcomponents.js b/src/scripts/livetvcomponents.js index 38035c3dc21..68a2c53453a 100644 --- a/src/scripts/livetvcomponents.js +++ b/src/scripts/livetvcomponents.js @@ -1,15 +1,13 @@ -import layoutManager from '../components/layoutManager'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import layoutManager from 'components/layoutManager'; +import { getBackdropShape } from 'utils/card'; + import datetime from './datetime'; -import cardBuilder from '../components/cardbuilder/cardBuilder'; function enableScrollX() { return !layoutManager.desktop; } -function getBackdropShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; -} - function getTimersHtml(timers, options) { options = options || {}; @@ -78,7 +76,7 @@ function getTimersHtml(timers, options) { html += cardBuilder.getCardsHtml({ items: group.items, - shape: getBackdropShape(), + shape: getBackdropShape(enableScrollX()), showTitle: true, showParentTitleOrTitle: true, showAirTime: true, diff --git a/src/utils/card.ts b/src/utils/card.ts new file mode 100644 index 00000000000..c3f047a79a8 --- /dev/null +++ b/src/utils/card.ts @@ -0,0 +1,20 @@ +enum CardShape { + Backdrop = 'backdrop', + BackdropOverflow = 'overflowBackdrop', + Portrait = 'portrait', + PortraitOverflow = 'overflowPortrait', + Square = 'square', + SquareOverflow = 'overflowSquare' +} + +export function getSquareShape(enableOverflow = true) { + return enableOverflow ? CardShape.SquareOverflow : CardShape.Square; +} + +export function getBackdropShape(enableOverflow = true) { + return enableOverflow ? CardShape.BackdropOverflow : CardShape.Backdrop; +} + +export function getPortraitShape(enableOverflow = true) { + return enableOverflow ? CardShape.PortraitOverflow : CardShape.Portrait; +}