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

44
src/components/favoriteitems.js
View file

@ -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';
import loading from './loading/loading';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'styles/scrollstyles.scss';
function enableScrollX() {
return !layoutManager.desktop;
}
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',
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,

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

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

56
src/controllers/favorites.js
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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 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 '../../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 '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',

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

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

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 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 '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));

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

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

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

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