mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
don't use random backdrop in item header
This commit is contained in:
parent
23a22d6b24
commit
5df5f6cdb2
3 changed files with 14 additions and 13 deletions
|
@ -14,7 +14,7 @@ import alert from '../alert';
|
||||||
import { PluginType } from '../../types/plugin.ts';
|
import { PluginType } from '../../types/plugin.ts';
|
||||||
import { includesAny } from '../../utils/container.ts';
|
import { includesAny } from '../../utils/container.ts';
|
||||||
import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
|
import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
|
||||||
import { getRandomItemBackdropImageUrl } from '../../utils/url';
|
import { getItemBackdropImageUrl } from '../../utils/url';
|
||||||
|
|
||||||
const UNLIMITED_ITEMS = -1;
|
const UNLIMITED_ITEMS = -1;
|
||||||
|
|
||||||
|
@ -2672,7 +2672,7 @@ class PlaybackManager {
|
||||||
title: item.Name
|
title: item.Name
|
||||||
};
|
};
|
||||||
|
|
||||||
const backdropUrl = getRandomItemBackdropImageUrl(apiClient, item);
|
const backdropUrl = getItemBackdropImageUrl(apiClient, item, true);
|
||||||
if (backdropUrl) {
|
if (backdropUrl) {
|
||||||
resultInfo.backdropUrl = backdropUrl;
|
resultInfo.backdropUrl = backdropUrl;
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@ import Dashboard from '../../utils/dashboard';
|
||||||
import ServerConnections from '../../components/ServerConnections';
|
import ServerConnections from '../../components/ServerConnections';
|
||||||
import confirm from '../../components/confirm/confirm';
|
import confirm from '../../components/confirm/confirm';
|
||||||
import { download } from '../../scripts/fileDownloader';
|
import { download } from '../../scripts/fileDownloader';
|
||||||
import { getRandomItemBackdropImageUrl } from '../../utils/url';
|
import { getItemBackdropImageUrl } from '../../utils/url';
|
||||||
|
|
||||||
function autoFocus(container) {
|
function autoFocus(container) {
|
||||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||||
|
@ -505,7 +505,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
|
||||||
let hasbackdrop = false;
|
let hasbackdrop = false;
|
||||||
const itemBackdropElement = page.querySelector('#itemBackdrop');
|
const itemBackdropElement = page.querySelector('#itemBackdrop');
|
||||||
|
|
||||||
const imgUrl = getRandomItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() });
|
const imgUrl = getItemBackdropImageUrl(apiClient, item, false, { maxWitdh: dom.getScreenWidth() });
|
||||||
|
|
||||||
if (imgUrl) {
|
if (imgUrl) {
|
||||||
imageLoader.lazyImage(itemBackdropElement, imgUrl);
|
imageLoader.lazyImage(itemBackdropElement, imgUrl);
|
||||||
|
|
|
@ -49,20 +49,21 @@ export interface ScaleImageOptions {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the url of a random backdrop image of an item.
|
* Returns the url of the first or a random backdrop image of an item.
|
||||||
* If the item has no backdrop image, the url of a random backdrop image of the parent item is returned.
|
* If the item has no backdrop image, the url of the first or a random backdrop image of the parent item is returned.
|
||||||
* Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
|
* Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
|
||||||
* Returns undefined if no usable image was found.
|
* Returns undefined if no usable image was found.
|
||||||
* @param apiClient The ApiClient to generate the url.
|
* @param apiClient The ApiClient to generate the url.
|
||||||
* @param item The item for which the backdrop image is requested.
|
* @param item The item for which the backdrop image is requested.
|
||||||
|
* @param random If set to true and the item has more than one backdrop, a random image is returned.
|
||||||
* @param options Optional; allows to scale the backdrop image.
|
* @param options Optional; allows to scale the backdrop image.
|
||||||
* @returns The url of a random backdrop image of the provided item.
|
* @returns The url of the first or a random backdrop image of the provided item.
|
||||||
*/
|
*/
|
||||||
export const getRandomItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, options: ScaleImageOptions = {}): string | undefined => {
|
export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
|
||||||
let imgUrl;
|
let imgUrl;
|
||||||
|
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
if (item.BackdropImageTags?.length) {
|
||||||
const backdropImgIndex = randomInt(0, item.BackdropImageTags.length - 1);
|
const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
|
||||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
imgUrl = apiClient.getScaledImageUrl(item.Id!, {
|
imgUrl = apiClient.getScaledImageUrl(item.Id!, {
|
||||||
type: 'Backdrop',
|
type: 'Backdrop',
|
||||||
|
@ -70,15 +71,15 @@ export const getRandomItemBackdropImageUrl = (apiClient: ApiClient, item: BaseIt
|
||||||
tag: item.BackdropImageTags[backdropImgIndex],
|
tag: item.BackdropImageTags[backdropImgIndex],
|
||||||
...options
|
...options
|
||||||
});
|
});
|
||||||
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
|
||||||
const backdropImgIndex = randomInt(0, item.ParentBackdropImageTags.length - 1);
|
const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
|
||||||
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||||
type: 'Backdrop',
|
type: 'Backdrop',
|
||||||
index: backdropImgIndex,
|
index: backdropImgIndex,
|
||||||
tag: item.ParentBackdropImageTags[backdropImgIndex],
|
tag: item.ParentBackdropImageTags[backdropImgIndex],
|
||||||
...options
|
...options
|
||||||
});
|
});
|
||||||
} else if (item.ImageTags && item.ImageTags.Primary) {
|
} else if (item.ImageTags?.Primary) {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
imgUrl = apiClient.getScaledImageUrl(item.Id!, {
|
imgUrl = apiClient.getScaledImageUrl(item.Id!, {
|
||||||
type: 'Primary',
|
type: 'Primary',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue