Merge pull request #4819 from thornbill/card-shapes

Remove duplicate card shape functions
jellyfin · Oct 2, 2023 · d9a8d47 · d9a8d47
2 parents f563fce + 1e3fa54
commit d9a8d47
Show file tree

Hide file tree

Showing 16 changed files with 295 additions and 340 deletions.
diff --git 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
@@ -1,50 +1,42 @@
-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() {
     return [{
         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
@@ -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,