mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #907 from MrTimscampi/artwork-optimal-size
Improve image loading speed and sizes
This commit is contained in:
dkanada
GitHub
commit
bdfa8b0121
14 changed files with 91 additions and 20 deletions
|
|
@ -634,8 +634,11 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
return "<img src='" + iconUrl + "' />";
|
||||
},
|
||||
getNowPlayingImageUrl: function (item) {
|
||||
/* Screen width is multiplied by 0.2, as the there is currently no way to get the width of
|
||||
elements that aren't created yet. */
|
||||
if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
return ApiClient.getScaledImageUrl(item.Id, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Backdrop",
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
|
|
@ -643,6 +646,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Backdrop",
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
|
|
@ -650,6 +654,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.BackdropImageTag) {
|
||||
return ApiClient.getScaledImageUrl(item.BackdropItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Backdrop",
|
||||
tag: item.BackdropImageTag
|
||||
});
|
||||
|
|
@ -659,6 +664,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && imageTags.Thumb) {
|
||||
return ApiClient.getScaledImageUrl(item.Id, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Thumb",
|
||||
tag: imageTags.Thumb
|
||||
});
|
||||
|
|
@ -666,6 +672,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.ParentThumbImageTag) {
|
||||
return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Thumb",
|
||||
tag: item.ParentThumbImageTag
|
||||
});
|
||||
|
|
@ -673,6 +680,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.ThumbImageTag) {
|
||||
return ApiClient.getScaledImageUrl(item.ThumbItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Thumb",
|
||||
tag: item.ThumbImageTag
|
||||
});
|
||||
|
|
@ -680,6 +688,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && imageTags.Primary) {
|
||||
return ApiClient.getScaledImageUrl(item.Id, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Primary",
|
||||
tag: imageTags.Primary
|
||||
});
|
||||
|
|
@ -687,6 +696,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.PrimaryImageTag) {
|
||||
return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Primary",
|
||||
tag: item.PrimaryImageTag
|
||||
});
|
||||
|
|
@ -694,6 +704,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
|
|||
|
||||
if (item && item.AlbumPrimaryImageTag) {
|
||||
return ApiClient.getScaledImageUrl(item.AlbumId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
|
||||
type: "Primary",
|
||||
tag: item.AlbumPrimaryImageTag
|
||||
});
|
||||
|
|
|
|||
|
|
@ -468,6 +468,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: 0,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
|
@ -477,6 +478,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: 0,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
|
|
@ -486,6 +488,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: 0,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
|
|
@ -495,6 +498,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||
type: "Backdrop",
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: 0,
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
|
|
@ -504,6 +508,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
} else if (item.ImageTags && item.ImageTags.Thumb) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: 0,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
|
@ -761,44 +766,54 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
var shape = "portrait";
|
||||
var detectRatio = false;
|
||||
|
||||
/* In the following section, getScreenWidth() is multiplied by 0.5 as the posters
|
||||
are 25vw and we need double the resolution to counter Skia's scaling. */
|
||||
// TODO: Find a reliable way to get the poster width
|
||||
if (imageTags.Primary) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
detectRatio = true;
|
||||
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
shape = "thumb";
|
||||
} else if (imageTags.Thumb) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
shape = "thumb";
|
||||
} else if (imageTags.Disc) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.ImageTags.Disc
|
||||
});
|
||||
shape = "square";
|
||||
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.AlbumId, {
|
||||
type: "Primary",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.AlbumPrimaryImageTag
|
||||
});
|
||||
shape = "square";
|
||||
} else if (item.SeriesId && item.SeriesPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Primary",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.SeriesPrimaryImageTag
|
||||
});
|
||||
} else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.5),
|
||||
tag: item.ParentPrimaryImageTag
|
||||
});
|
||||
}
|
||||
|
|
@ -1805,7 +1820,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
require(["chaptercardbuilder"], function (chaptercardbuilder) {
|
||||
chaptercardbuilder.buildChapterCards(item, chapters, {
|
||||
itemsContainer: scenesContent,
|
||||
width: 400,
|
||||
backdropShape: "overflowBackdrop",
|
||||
squareShape: "overflowSquare"
|
||||
});
|
||||
|
|
@ -1858,7 +1872,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
itemsContainer: castContent,
|
||||
coverImage: true,
|
||||
serverId: item.ServerId,
|
||||
width: 160,
|
||||
shape: "overflowPortrait"
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -256,6 +256,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
|
|||
|
||||
if (virtualFolder.PrimaryImageItemId) {
|
||||
imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
|
||||
maxWidth: Math.round(dom.getScreenWidth() * 0.40),
|
||||
type: "Primary"
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -334,18 +334,24 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
|
|||
|
||||
if (item) {
|
||||
var imgUrl = seriesImageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Primary"
|
||||
}) || seriesImageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Thumb"
|
||||
}) || imageUrl(item, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Primary"
|
||||
});
|
||||
|
||||
if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Primary"
|
||||
}) || seriesImageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Thumb"
|
||||
}) || imageUrl(secondaryItem, {
|
||||
maxWidth: osdPoster.clientWidth * 2,
|
||||
type: "Primary"
|
||||
})), imgUrl) {
|
||||
return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue