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

Remove duplicate card shape functions

Browse source
This commit is contained in:
Bill Thornton 2023-10-01 02:49:36 -04:00
parent 4cbff9dbd7
commit 1e3fa5418c
16 changed files with 294 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/cardbuilder/cardBuilder.js
View file

@ -5,24 +5,29 @@
*/ */
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import datetime from '../../scripts/datetime';
import imageLoader from '../images/imageLoader'; import browser from 'scripts/browser';
import itemHelper from '../itemHelper'; 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 focusManager from '../focusManager';
import imageLoader from '../images/imageLoader';
import indicators from '../indicators/indicators'; import indicators from '../indicators/indicators';
import globalize from '../../scripts/globalize'; import itemHelper from '../itemHelper';
import layoutManager from '../layoutManager'; import layoutManager from '../layoutManager';
import dom from '../../scripts/dom';
import browser from '../../scripts/browser';
import { playbackManager } from '../playback/playbackmanager'; import { playbackManager } from '../playback/playbackmanager';
import itemShortcuts from '../shortcuts';
import imageHelper from '../../scripts/imagehelper';
import { randomInt } from '../../utils/number.ts';
import './card.scss';
import '../../elements/emby-button/paper-icon-button-light';
import '../guide/programs.scss';
import ServerConnections from '../ServerConnections';
import { appRouter } from '../router/appRouter'; import { appRouter } from '../router/appRouter';
import ServerConnections from '../ServerConnections';
import itemShortcuts from '../shortcuts';
import 'elements/emby-button/paper-icon-button-light';
import './card.scss';
import '../guide/programs.scss';
const enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
@ -301,16 +306,16 @@ function setCardData(items, options) {
options.shape = 'banner'; options.shape = 'banner';
options.coverImage = true; options.coverImage = true;
} else if (primaryImageAspectRatio >= 1.33) { } else if (primaryImageAspectRatio >= 1.33) {
options.shape = requestedShape === 'autooverflow' ? 'overflowBackdrop' : 'backdrop'; options.shape = getBackdropShape(requestedShape === 'autooverflow');
} else if (primaryImageAspectRatio > 0.71) { } else if (primaryImageAspectRatio > 0.71) {
options.shape = requestedShape === 'autooverflow' ? 'overflowSquare' : 'square'; options.shape = getSquareShape(requestedShape === 'autooverflow');
} else { } else {
options.shape = requestedShape === 'autooverflow' ? 'overflowPortrait' : 'portrait'; options.shape = getPortraitShape(requestedShape === 'autooverflow');
} }
} }
if (!options.shape) { if (!options.shape) {
options.shape = options.defaultShape || (requestedShape === 'autooverflow' ? 'overflowSquare' : 'square'); options.shape = options.defaultShape || getSquareShape(requestedShape === 'autooverflow');
} }
} }

44
src/components/favoriteitems.js
View file

@ -1,50 +1,42 @@
import loading from './loading/loading'; import dom from 'scripts/dom';
import cardBuilder from './cardbuilder/cardBuilder'; import globalize from 'scripts/globalize';
import dom from '../scripts/dom'; import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
import { getParameterByName } from 'utils/url';
import { appHost } from './apphost'; import { appHost } from './apphost';
import cardBuilder from './cardbuilder/cardBuilder';
import imageLoader from './images/imageLoader'; import imageLoader from './images/imageLoader';
import globalize from '../scripts/globalize';
import layoutManager from './layoutManager'; import layoutManager from './layoutManager';
import { getParameterByName } from '../utils/url.ts'; import loading from './loading/loading';
import '../styles/scrollstyles.scss';
import '../elements/emby-itemscontainer/emby-itemscontainer'; import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'styles/scrollstyles.scss';
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getPosterShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function getSquareShape() {
return enableScrollX() ? 'overflowSquare' : 'square';
}
function getSections() { function getSections() {
return [{ return [{
name: 'Movies', name: 'Movies',
types: 'Movie', types: 'Movie',
id: 'favoriteMovies', id: 'favoriteMovies',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: false, showTitle: false,
overlayPlayButton: true overlayPlayButton: true
}, { }, {
name: 'Shows', name: 'Shows',
types: 'Series', types: 'Series',
id: 'favoriteShows', id: 'favoriteShows',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: false, showTitle: false,
overlayPlayButton: true overlayPlayButton: true
}, { }, {
name: 'Episodes', name: 'Episodes',
types: 'Episode', types: 'Episode',
id: 'favoriteEpisode', id: 'favoriteEpisode',
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
@ -55,7 +47,7 @@ function getSections() {
name: 'Videos', name: 'Videos',
types: 'Video,MusicVideo', types: 'Video,MusicVideo',
id: 'favoriteVideos', id: 'favoriteVideos',
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
overlayPlayButton: true, overlayPlayButton: true,
@ -65,7 +57,7 @@ function getSections() {
name: 'Artists', name: 'Artists',
types: 'MusicArtist', types: 'MusicArtist',
id: 'favoriteArtists', id: 'favoriteArtists',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -77,7 +69,7 @@ function getSections() {
name: 'Albums', name: 'Albums',
types: 'MusicAlbum', types: 'MusicAlbum',
id: 'favoriteAlbums', id: 'favoriteAlbums',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -89,7 +81,7 @@ function getSections() {
name: 'Songs', name: 'Songs',
types: 'Audio', types: 'Audio',
id: 'favoriteSongs', id: 'favoriteSongs',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,

51
src/components/homesections/homesections.js
View file

@ -1,18 +1,23 @@
import escapeHtml from 'escape-html'; 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 cardBuilder from '../cardbuilder/cardBuilder';
import layoutManager from '../layoutManager';
import imageLoader from '../images/imageLoader'; import imageLoader from '../images/imageLoader';
import globalize from '../../scripts/globalize'; import layoutManager from '../layoutManager';
import { appRouter } from '../router/appRouter'; 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 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) { export function getDefaultSection(index) {
switch (index) { switch (index) {
case 0: case 0:
@ -169,18 +174,6 @@ function enableScrollX() {
return true; return true;
} }
function getSquareShape() {
return enableScrollX() ? 'overflowSquare' : 'square';
}
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function getLibraryButtonsHtml(items) { function getLibraryButtonsHtml(items) {
let html = ''; let html = '';
@ -244,11 +237,11 @@ function getLatestItemsHtmlFn(itemType, viewType) {
const cardLayout = false; const cardLayout = false;
let shape; let shape;
if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') { if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
shape = getPortraitShape(); shape = getPortraitShape(enableScrollX());
} else if (viewType === 'music' || viewType === 'homevideos') { } else if (viewType === 'music' || viewType === 'homevideos') {
shape = getSquareShape(); shape = getSquareShape(enableScrollX());
} else { } else {
shape = getThumbShape(); shape = getBackdropShape(enableScrollX());
} }
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
@ -345,7 +338,7 @@ export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, use
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: userViews, items: userViews,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayText: false, overlayText: false,
@ -423,7 +416,9 @@ function getItemsToResumeHtmlFn(useEpisodeImages, mediaType) {
items: items, items: items,
preferThumb: true, preferThumb: true,
inheritThumb: !useEpisodeImages, inheritThumb: !useEpisodeImages,
shape: (mediaType === 'Book') ? getPortraitShape() : getThumbShape(), shape: (mediaType === 'Book') ?
getPortraitShape(enableScrollX()) :
getBackdropShape(enableScrollX()),
overlayText: false, overlayText: false,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
@ -471,7 +466,7 @@ function getOnNowItemsHtml(items) {
showChannelName: false, showChannelName: false,
showAirDateTime: false, showAirDateTime: false,
showAirEndTime: true, showAirEndTime: true,
defaultShape: getThumbShape(), defaultShape: getBackdropShape(enableScrollX()),
lines: 3, lines: 3,
overlayPlayButton: true overlayPlayButton: true
}); });
@ -614,7 +609,7 @@ function getNextUpItemsHtmlFn(useEpisodeImages) {
items: items, items: items,
preferThumb: true, preferThumb: true,
inheritThumb: !useEpisodeImages, inheritThumb: !useEpisodeImages,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
overlayText: false, overlayText: false,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,

56
src/controllers/favorites.js
View file

@ -1,35 +1,25 @@
import { appRouter } from '../components/router/appRouter'; import { appHost } from 'components/apphost';
import cardBuilder from '../components/cardbuilder/cardBuilder'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import dom from '../scripts/dom'; import focusManager from 'components/focusManager';
import globalize from '../scripts/globalize'; import layoutManager from 'components/layoutManager';
import { appHost } from '../components/apphost'; import { appRouter } from 'components/router/appRouter';
import layoutManager from '../components/layoutManager'; import ServerConnections from 'components/ServerConnections';
import focusManager from '../components/focusManager'; import dom from 'scripts/dom';
import '../elements/emby-itemscontainer/emby-itemscontainer'; import globalize from 'scripts/globalize';
import '../elements/emby-scroller/emby-scroller'; import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
import ServerConnections from '../components/ServerConnections';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'elements/emby-scroller/emby-scroller';
function enableScrollX() { function enableScrollX() {
return true; return true;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getPosterShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function getSquareShape() {
return enableScrollX() ? 'overflowSquare' : 'square';
}
function getSections() { function getSections() {
return [{ return [{
name: 'Movies', name: 'Movies',
types: 'Movie', types: 'Movie',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
showYear: true, showYear: true,
overlayPlayButton: true, overlayPlayButton: true,
@ -38,7 +28,7 @@ function getSections() {
}, { }, {
name: 'Shows', name: 'Shows',
types: 'Series', types: 'Series',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
showYear: true, showYear: true,
overlayPlayButton: true, overlayPlayButton: true,
@ -47,7 +37,7 @@ function getSections() {
}, { }, {
name: 'Episodes', name: 'Episodes',
types: 'Episode', types: 'Episode',
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
@ -57,7 +47,7 @@ function getSections() {
}, { }, {
name: 'Videos', name: 'Videos',
types: 'Video', types: 'Video',
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
overlayPlayButton: true, overlayPlayButton: true,
@ -66,7 +56,7 @@ function getSections() {
}, { }, {
name: 'Collections', name: 'Collections',
types: 'BoxSet', types: 'BoxSet',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
overlayPlayButton: true, overlayPlayButton: true,
overlayText: false, overlayText: false,
@ -74,7 +64,7 @@ function getSections() {
}, { }, {
name: 'Playlists', name: 'Playlists',
types: 'Playlist', types: 'Playlist',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -85,7 +75,7 @@ function getSections() {
}, { }, {
name: 'People', name: 'People',
types: 'Person', types: 'Person',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -96,7 +86,7 @@ function getSections() {
}, { }, {
name: 'Artists', name: 'Artists',
types: 'MusicArtist', types: 'MusicArtist',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -107,7 +97,7 @@ function getSections() {
}, { }, {
name: 'Albums', name: 'Albums',
types: 'MusicAlbum', types: 'MusicAlbum',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -118,7 +108,7 @@ function getSections() {
}, { }, {
name: 'Songs', name: 'Songs',
types: 'Audio', types: 'Audio',
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
preferThumb: false, preferThumb: false,
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
@ -130,7 +120,7 @@ function getSections() {
}, { }, {
name: 'Books', name: 'Books',
types: 'Book', types: 'Book',
shape: getPosterShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
showYear: true, showYear: true,
overlayPlayButton: true, overlayPlayButton: true,

85
src/controllers/itemDetails/index.js
View file

@ -4,39 +4,42 @@ import { marked } from 'marked';
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import isEqual from 'lodash-es/isEqual'; import isEqual from 'lodash-es/isEqual';
import { appHost } from '../../components/apphost'; import { appHost } from 'components/apphost';
import loading from '../../components/loading/loading'; import { clearBackdrop, setBackdrops } from 'components/backdrop/backdrop';
import { appRouter } from '../../components/router/appRouter'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import layoutManager from '../../components/layoutManager'; import confirm from 'components/confirm/confirm';
import Events from '../../utils/events.ts'; import imageLoader from 'components/images/imageLoader';
import * as userSettings from '../../scripts/settings/userSettings'; import itemContextMenu from 'components/itemContextMenu';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import itemHelper from 'components/itemHelper';
import datetime from '../../scripts/datetime'; import mediaInfo from 'components/mediainfo/mediainfo';
import mediaInfo from '../../components/mediainfo/mediainfo'; import layoutManager from 'components/layoutManager';
import { clearBackdrop, setBackdrops } from '../../components/backdrop/backdrop'; import listView from 'components/listview/listview';
import listView from '../../components/listview/listview'; import loading from 'components/loading/loading';
import itemContextMenu from '../../components/itemContextMenu'; import { playbackManager } from 'components/playback/playbackmanager';
import itemHelper from '../../components/itemHelper'; import { appRouter } from 'components/router/appRouter';
import dom from '../../scripts/dom'; import itemShortcuts from 'components/shortcuts';
import imageLoader from '../../components/images/imageLoader'; import ServerConnections from 'components/ServerConnections';
import libraryMenu from '../../scripts/libraryMenu'; import browser from 'scripts/browser';
import globalize from '../../scripts/globalize'; import datetime from 'scripts/datetime';
import browser from '../../scripts/browser'; import dom from 'scripts/dom';
import { playbackManager } from '../../components/playback/playbackmanager'; import { download } from 'scripts/fileDownloader';
import '../../styles/scrollstyles.scss'; import globalize from 'scripts/globalize';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import libraryMenu from 'scripts/libraryMenu';
import '../../elements/emby-checkbox/emby-checkbox'; import * as userSettings from 'scripts/settings/userSettings';
import '../../elements/emby-button/emby-button'; import { getPortraitShape, getSquareShape } from 'utils/card';
import '../../elements/emby-playstatebutton/emby-playstatebutton'; import Dashboard from 'utils/dashboard';
import '../../elements/emby-ratingbutton/emby-ratingbutton'; import Events from 'utils/events';
import '../../elements/emby-scroller/emby-scroller'; import { getItemBackdropImageUrl } from 'utils/jellyfin-apiclient/backdropImage';
import '../../elements/emby-select/emby-select';
import itemShortcuts from '../../components/shortcuts'; import 'elements/emby-itemscontainer/emby-itemscontainer';
import Dashboard from '../../utils/dashboard'; import 'elements/emby-checkbox/emby-checkbox';
import ServerConnections from '../../components/ServerConnections'; import 'elements/emby-button/emby-button';
import confirm from '../../components/confirm/confirm'; import 'elements/emby-playstatebutton/emby-playstatebutton';
import { download } from '../../scripts/fileDownloader'; import 'elements/emby-ratingbutton/emby-ratingbutton';
import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdropImage'; import 'elements/emby-scroller/emby-scroller';
import 'elements/emby-select/emby-select';
import 'styles/scrollstyles.scss';
function autoFocus(container) { function autoFocus(container) {
import('../../components/autoFocuser').then(({ default: autoFocuser }) => { import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
@ -1069,22 +1072,6 @@ function enableScrollX() {
return browser.mobile && window.screen.availWidth <= 1000; 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) { function renderMoreFromSeason(view, item, apiClient) {
const section = view.querySelector('.moreFromSeasonSection'); const section = view.querySelector('.moreFromSeasonSection');

18
src/controllers/livetv/livetvrecordings.js
View file

@ -1,10 +1,12 @@
import loading from '../../components/loading/loading'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import imageLoader from 'components/images/imageLoader';
import imageLoader from '../../components/images/imageLoader'; import loading from 'components/loading/loading';
import '../../scripts/livetvcomponents'; import { getBackdropShape } from 'utils/card';
import '../../components/listview/listview.scss'; import Dashboard from 'utils/dashboard';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
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) { function renderRecordings(elem, recordings, cardOptions, scrollX) {
if (!elem) { if (!elem) {
@ -32,7 +34,7 @@ function renderRecordings(elem, recordings, cardOptions, scrollX) {
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
items: recordings, items: recordings,
shape: scrollX ? 'autooverflow' : 'auto', shape: scrollX ? 'autooverflow' : 'auto',
defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop', defaultShape: getBackdropShape(scrollX),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
coverImage: true, coverImage: true,

24
src/controllers/livetv/livetvschedule.js
View file

@ -1,11 +1,13 @@
import layoutManager from '../../components/layoutManager'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import imageLoader from 'components/images/imageLoader';
import imageLoader from '../../components/images/imageLoader'; import layoutManager from 'components/layoutManager';
import loading from '../../components/loading/loading'; import loading from 'components/loading/loading';
import '../../scripts/livetvcomponents'; import { getBackdropShape } from 'utils/card';
import '../../elements/emby-button/emby-button'; import Dashboard from 'utils/dashboard';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import Dashboard from '../../utils/dashboard'; import 'elements/emby-button/emby-button';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'scripts/livetvcomponents';
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
@ -50,15 +52,11 @@ function renderRecordings(elem, recordings, cardOptions) {
imageLoader.lazyChildren(recordingItems); imageLoader.lazyChildren(recordingItems);
} }
function getBackdropShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function renderActiveRecordings(context, promise) { function renderActiveRecordings(context, promise) {
promise.then(function (result) { promise.then(function (result) {
renderRecordings(context.querySelector('#activeRecordings'), result.Items, { renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
shape: enableScrollX() ? 'autooverflow' : 'auto', shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(), defaultShape: getBackdropShape(enableScrollX()),
showParentTitle: false, showParentTitle: false,
showParentTitleOrTitle: true, showParentTitleOrTitle: true,
showTitle: true, showTitle: true,

49
src/controllers/livetv/livetvsuggested.js
View file

@ -1,36 +1,25 @@
import layoutManager from '../../components/layoutManager'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import * as userSettings from '../../scripts/settings/userSettings'; import imageLoader from 'components/images/imageLoader';
import inputManager from '../../scripts/inputManager'; import layoutManager from 'components/layoutManager';
import loading from '../../components/loading/loading'; import loading from 'components/loading/loading';
import globalize from '../../scripts/globalize'; import * as mainTabsManager from 'components/maintabsmanager';
import * as mainTabsManager from '../../components/maintabsmanager'; import globalize from 'scripts/globalize';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import inputManager from 'scripts/inputManager';
import imageLoader from '../../components/images/imageLoader'; import * as userSettings from 'scripts/settings/userSettings';
import '../../styles/scrollstyles.scss'; import { LibraryTab } from 'types/libraryTab';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import Dashboard from 'utils/dashboard';
import '../../elements/emby-tabs/emby-tabs'; import { getBackdropShape, getPortraitShape } from 'utils/card';
import '../../elements/emby-button/emby-button';
import { LibraryTab } from '../../types/libraryTab.ts'; import 'elements/emby-itemscontainer/emby-itemscontainer';
import Dashboard from '../../utils/dashboard'; import 'elements/emby-tabs/emby-tabs';
import 'elements/emby-button/emby-button';
import 'styles/scrollstyles.scss';
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getBackdropShape() {
if (enableScrollX()) {
return 'overflowBackdrop';
}
return 'backdrop';
}
function getPortraitShape() {
if (enableScrollX()) {
return 'overflowPortrait';
}
return 'portrait';
}
function getLimit() { function getLimit() {
if (enableScrollX()) { if (enableScrollX()) {
return 12; return 12;
@ -96,7 +85,7 @@ function reload(page, enableFullRender) {
EnableImageTypes: 'Primary,Thumb' EnableImageTypes: 'Primary,Thumb'
}).then(function (result) { }).then(function (result) {
renderItems(page, result.Items, 'upcomingTvMovieItems', null, { renderItems(page, result.Items, 'upcomingTvMovieItems', null, {
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
preferThumb: null, preferThumb: null,
showParentTitle: false showParentTitle: false
}); });
@ -147,7 +136,7 @@ function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
preferThumb: 'auto', preferThumb: 'auto',
inheritThumb: false, inheritThumb: false,
shape: enableScrollX() ? 'autooverflow' : 'auto', shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(), defaultShape: getBackdropShape(enableScrollX()),
showParentTitle: true, showParentTitle: true,
showTitle: true, showTitle: true,
centerText: true, centerText: true,

35
src/controllers/movies/moviegenres.js
View file

@ -1,12 +1,15 @@
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import layoutManager from '../../components/layoutManager';
import loading from '../../components/loading/loading'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import * as userSettings from '../../scripts/settings/userSettings'; import layoutManager from 'components/layoutManager';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import lazyLoader from 'components/lazyLoader/lazyLoaderIntersectionObserver';
import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; import loading from 'components/loading/loading';
import globalize from '../../scripts/globalize'; import { appRouter } from 'components/router/appRouter';
import { appRouter } from '../../components/router/appRouter'; import globalize from 'scripts/globalize';
import '../../elements/emby-button/emby-button'; 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) { export default function (view, params, tabContent) {
function getPageData() { function getPageData() {
@ -49,14 +52,6 @@ export default function (view, params, tabContent) {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
const fillItemsContainer = (entry) => { const fillItemsContainer = (entry) => {
const elem = entry.target; const elem = entry.target;
const id = elem.getAttribute('data-id'); const id = elem.getAttribute('data-id');
@ -85,7 +80,7 @@ export default function (view, params, tabContent) {
if (viewStyle == 'Thumb') { if (viewStyle == 'Thumb') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
scalable: true, scalable: true,
@ -96,7 +91,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'ThumbCard') { } else if (viewStyle == 'ThumbCard') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
scalable: true, scalable: true,
@ -107,7 +102,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == 'PosterCard') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
scalable: true, scalable: true,
centerText: false, centerText: false,
@ -117,7 +112,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'Poster') { } else if (viewStyle == 'Poster') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
scalable: true, scalable: true,
overlayMoreButton: true, overlayMoreButton: true,
allowBottomPadding: true, allowBottomPadding: true,

50
src/controllers/movies/moviesrecommended.js
View file

@ -1,35 +1,29 @@
import escapeHtml from 'escape-html'; 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 cardBuilder from 'components/cardbuilder/cardBuilder';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import imageLoader from 'components/images/imageLoader';
import '../../elements/emby-tabs/emby-tabs'; import layoutManager from 'components/layoutManager';
import '../../elements/emby-button/emby-button'; 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() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function loadLatest(page, userId, parentId) { function loadLatest(page, userId, parentId) {
const options = { const options = {
IncludeItemTypes: 'Movie', IncludeItemTypes: 'Movie',
@ -45,7 +39,7 @@ function loadLatest(page, userId, parentId) {
const container = page.querySelector('#recentlyAddedItems'); const container = page.querySelector('#recentlyAddedItems');
cardBuilder.buildCards(items, { cardBuilder.buildCards(items, {
itemsContainer: container, itemsContainer: container,
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,
allowBottomPadding: allowBottomPadding, allowBottomPadding: allowBottomPadding,
@ -87,7 +81,7 @@ function loadResume(page, userId, parentId) {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: container, itemsContainer: container,
preferThumb: true, preferThumb: true,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,
allowBottomPadding: allowBottomPadding, allowBottomPadding: allowBottomPadding,
@ -138,7 +132,7 @@ function getRecommendationHtml(recommendation) {
} }
html += cardBuilder.getCardsHtml(recommendation.Items, { html += cardBuilder.getCardsHtml(recommendation.Items, {
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,
allowBottomPadding: allowBottomPadding, allowBottomPadding: allowBottomPadding,

48
src/controllers/music/musicrecommended.js
View file

@ -1,22 +1,24 @@
import browser from '../../scripts/browser'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import layoutManager from '../../components/layoutManager'; import imageLoader from 'components/images/imageLoader';
import * as userSettings from '../../scripts/settings/userSettings'; import layoutManager from 'components/layoutManager';
import inputManager from '../../scripts/inputManager'; import loading from 'components/loading/loading';
import loading from '../../components/loading/loading'; import * as mainTabsManager from 'components/maintabsmanager';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import browser from 'scripts/browser';
import dom from '../../scripts/dom'; import dom from 'scripts/dom';
import imageLoader from '../../components/images/imageLoader'; import globalize from 'scripts/globalize';
import libraryMenu from '../../scripts/libraryMenu'; import inputManager from 'scripts/inputManager';
import * as mainTabsManager from '../../components/maintabsmanager'; import libraryMenu from 'scripts/libraryMenu';
import globalize from '../../scripts/globalize'; import * as userSettings from 'scripts/settings/userSettings';
import { LibraryTab } from '../../types/libraryTab.ts'; import { LibraryTab } from 'types/libraryTab';
import Dashboard from '../../utils/dashboard'; import Dashboard from 'utils/dashboard';
import { getSquareShape } from 'utils/card';
import '../../styles/scrollstyles.scss'; import 'elements/emby-itemscontainer/emby-itemscontainer';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import 'elements/emby-tabs/emby-tabs';
import '../../elements/emby-tabs/emby-tabs'; import 'elements/emby-button/emby-button';
import '../../elements/emby-button/emby-button';
import '../../styles/flexstyles.scss'; import 'styles/flexstyles.scss';
import 'styles/scrollstyles.scss';
function itemsPerRow() { function itemsPerRow() {
const screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
@ -40,10 +42,6 @@ function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getSquareShape() {
return enableScrollX() ? 'overflowSquare' : 'square';
}
function loadLatest(page, parentId) { function loadLatest(page, parentId) {
loading.show(); loading.show();
const userId = ApiClient.getCurrentUserId(); const userId = ApiClient.getCurrentUserId();
@ -62,7 +60,7 @@ function loadLatest(page, parentId) {
items: items, items: items,
showUnplayedIndicator: false, showUnplayedIndicator: false,
showLatestItemsPopup: false, showLatestItemsPopup: false,
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
lazy: true, lazy: true,
@ -108,7 +106,7 @@ function loadRecentlyPlayed(page, parentId) {
itemsContainer.innerHTML = cardBuilder.getCardsHtml({ itemsContainer.innerHTML = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
showUnplayedIndicator: false, showUnplayedIndicator: false,
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
action: 'instantmix', action: 'instantmix',
@ -150,7 +148,7 @@ function loadFrequentlyPlayed(page, parentId) {
itemsContainer.innerHTML = cardBuilder.getCardsHtml({ itemsContainer.innerHTML = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
showUnplayedIndicator: false, showUnplayedIndicator: false,
shape: getSquareShape(), shape: getSquareShape(enableScrollX()),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
action: 'instantmix', action: 'instantmix',

35
src/controllers/shows/tvgenres.js
View file

@ -1,12 +1,15 @@
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import layoutManager from '../../components/layoutManager';
import loading from '../../components/loading/loading'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import * as userSettings from '../../scripts/settings/userSettings'; import lazyLoader from 'components/lazyLoader/lazyLoaderIntersectionObserver';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import layoutManager from 'components/layoutManager';
import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; import loading from 'components/loading/loading';
import globalize from '../../scripts/globalize'; import { appRouter } from 'components/router/appRouter';
import { appRouter } from '../../components/router/appRouter'; import globalize from 'scripts/globalize';
import '../../elements/emby-button/emby-button'; 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) { export default function (view, params, tabContent) {
function getPageData() { function getPageData() {
@ -49,14 +52,6 @@ export default function (view, params, tabContent) {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function fillItemsContainer(entry) { function fillItemsContainer(entry) {
const elem = entry.target; const elem = entry.target;
const id = elem.getAttribute('data-id'); const id = elem.getAttribute('data-id');
@ -85,7 +80,7 @@ export default function (view, params, tabContent) {
if (viewStyle == 'Thumb') { if (viewStyle == 'Thumb') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
scalable: true, scalable: true,
@ -96,7 +91,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'ThumbCard') { } else if (viewStyle == 'ThumbCard') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
preferThumb: true, preferThumb: true,
showTitle: true, showTitle: true,
scalable: true, scalable: true,
@ -107,7 +102,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == 'PosterCard') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
showTitle: true, showTitle: true,
scalable: true, scalable: true,
centerText: false, centerText: false,
@ -117,7 +112,7 @@ export default function (view, params, tabContent) {
} else if (viewStyle == 'Poster') { } else if (viewStyle == 'Poster') {
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: elem, itemsContainer: elem,
shape: getPortraitShape(), shape: getPortraitShape(enableScrollX()),
scalable: true, scalable: true,
showTitle: true, showTitle: true,
centerText: true, centerText: true,

42
src/controllers/shows/tvrecommended.js
View file

@ -1,21 +1,23 @@
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 inputManager from '../../scripts/inputManager'; import 'elements/emby-itemscontainer/emby-itemscontainer';
import libraryMenu from '../../scripts/libraryMenu'; import 'elements/emby-button/emby-button';
import layoutManager from '../../components/layoutManager';
import loading from '../../components/loading/loading'; import 'styles/scrollstyles.scss';
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';
function getTabs() { function getTabs() {
return [{ return [{
@ -119,7 +121,7 @@ function loadResume(view, userId, parentId) {
itemsContainer: container, itemsContainer: container,
preferThumb: true, preferThumb: true,
inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(), inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(),
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,
allowBottomPadding: allowBottomPadding, allowBottomPadding: allowBottomPadding,
@ -217,10 +219,6 @@ function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
export default function (view, params) { export default function (view, params) {
function onBeforeTabChange(e) { function onBeforeTabChange(e) {
preLoadTab(view, parseInt(e.detail.selectedTabIndex, 10)); preLoadTab(view, parseInt(e.detail.selectedTabIndex, 10));

25
src/controllers/shows/tvupcoming.js
View file

@ -1,11 +1,14 @@
import layoutManager from '../../components/layoutManager'; import cardBuilder from 'components/cardbuilder/cardBuilder';
import loading from '../../components/loading/loading'; import imageLoader from 'components/images/imageLoader';
import datetime from '../../scripts/datetime'; import layoutManager from 'components/layoutManager';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import loading from 'components/loading/loading';
import imageLoader from '../../components/images/imageLoader'; import datetime from 'scripts/datetime';
import globalize from '../../scripts/globalize'; import globalize from 'scripts/globalize';
import '../../styles/scrollstyles.scss'; import { getBackdropShape } from 'utils/card';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'styles/scrollstyles.scss';
function getUpcomingPromise(context, params) { function getUpcomingPromise(context, params) {
loading.show(); loading.show();
@ -40,10 +43,6 @@ function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function renderUpcoming(elem, items) { function renderUpcoming(elem, items) {
const groups = []; const groups = [];
let currentGroupName = ''; let currentGroupName = '';
@ -105,7 +104,7 @@ function renderUpcoming(elem, items) {
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: group.items, items: group.items,
showLocationTypeIndicator: false, showLocationTypeIndicator: false,
shape: getThumbShape(), shape: getBackdropShape(enableScrollX()),
showTitle: true, showTitle: true,
preferThumb: true, preferThumb: true,
lazy: true, lazy: true,

12
src/scripts/livetvcomponents.js
View file

@ -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 datetime from './datetime';
import cardBuilder from '../components/cardbuilder/cardBuilder';
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
} }
function getBackdropShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getTimersHtml(timers, options) { function getTimersHtml(timers, options) {
options = options || {}; options = options || {};
@ -78,7 +76,7 @@ function getTimersHtml(timers, options) {
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: group.items, items: group.items,
shape: getBackdropShape(), shape: getBackdropShape(enableScrollX()),
showTitle: true, showTitle: true,
showParentTitleOrTitle: true, showParentTitleOrTitle: true,
showAirTime: true, showAirTime: true,

20
src/utils/card.ts Normal file
View file

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