mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Improve image loading speed and sizes
This commit is contained in:
MrTimscampi
parent
2a99df8365
commit
f816f5267f
5 changed files with 59 additions and 3 deletions
|
|
@ -182,6 +182,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings"
|
|||
return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
|
||||
type: "Backdrop",
|
||||
tag: imgTag,
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: index
|
||||
}));
|
||||
});
|
||||
|
|
@ -192,6 +193,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings"
|
|||
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
|
||||
type: "Backdrop",
|
||||
tag: imgTag,
|
||||
maxWidth: dom.getScreenWidth(),
|
||||
index: index
|
||||
}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -233,9 +233,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
function getImageWidth(shape, screenWidth, isOrientationLandscape) {
|
||||
var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
|
||||
var shapeWidth = screenWidth / imagesPerRow;
|
||||
var shapeWidth = Math.round(screenWidth / imagesPerRow) * 2;
|
||||
|
||||
return Math.round(shapeWidth);
|
||||
return shapeWidth;
|
||||
}
|
||||
|
||||
function setCardData(items, options) {
|
||||
|
|
@ -463,6 +463,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
||||
|
|
@ -470,6 +471,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Banner",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Banner
|
||||
});
|
||||
|
||||
|
|
@ -477,6 +479,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Disc
|
||||
});
|
||||
|
||||
|
|
@ -484,6 +487,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Logo",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Logo
|
||||
});
|
||||
|
||||
|
|
@ -491,6 +495,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
|
||||
type: "Logo",
|
||||
maxWidth: width,
|
||||
tag: item.ParentLogoImageTag
|
||||
});
|
||||
|
||||
|
|
@ -498,6 +503,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.SeriesThumbImageTag
|
||||
});
|
||||
|
||||
|
|
@ -505,6 +511,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.ParentThumbImageTag
|
||||
});
|
||||
|
||||
|
|
@ -512,6 +519,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: width,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
|
||||
|
|
@ -521,6 +529,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||
type: "Backdrop",
|
||||
maxWidth: width,
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
|
||||
|
|
@ -530,6 +539,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxHeight: height,
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
|
||||
|
|
@ -550,6 +561,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
|
||||
type: "Primary",
|
||||
maxHeight: height,
|
||||
maxWidth: width,
|
||||
tag: item.PrimaryImageTag
|
||||
});
|
||||
|
||||
|
|
@ -567,12 +580,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
maxWidth: width,
|
||||
tag: item.ParentPrimaryImageTag
|
||||
});
|
||||
} else if (item.SeriesPrimaryImageTag) {
|
||||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Primary",
|
||||
maxWidth: width,
|
||||
tag: item.SeriesPrimaryImageTag
|
||||
});
|
||||
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
|
@ -581,6 +596,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
|
||||
type: "Primary",
|
||||
maxHeight: height,
|
||||
maxWidth: width,
|
||||
tag: item.AlbumPrimaryImageTag
|
||||
});
|
||||
|
||||
|
|
@ -594,6 +611,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
||||
|
|
@ -601,6 +619,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: width,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
|
||||
|
|
@ -608,6 +627,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
||||
|
|
@ -615,6 +635,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.SeriesThumbImageTag
|
||||
});
|
||||
|
||||
|
|
@ -622,6 +643,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
|
||||
type: "Thumb",
|
||||
maxWidth: width,
|
||||
tag: item.ParentThumbImageTag
|
||||
});
|
||||
|
||||
|
|
@ -629,6 +651,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
||||
type: "Backdrop",
|
||||
maxWidth: width,
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -112,6 +112,24 @@ define([], function () {
|
|||
return windowSize;
|
||||
}
|
||||
|
||||
var standardWidths = [480, 720, 1280, 1440, 1920, 2560, 3840, 5120, 7680];
|
||||
function getScreenWidth() {
|
||||
var width = window.innerWidth * window.devicePixelRatio;
|
||||
var height = window.innerHeight * window.devicePixelRatio;
|
||||
|
||||
if (height > width) {
|
||||
/* If we're in portrait, compute the proper width for this height,
|
||||
taking 16:9 as the most common ratio */
|
||||
width = height * 1.78;
|
||||
}
|
||||
|
||||
var closest = standardWidths.sort(function (a, b) {
|
||||
return Math.abs(width - a) - Math.abs(width - b);
|
||||
})[0];
|
||||
|
||||
return closest;
|
||||
}
|
||||
|
||||
var _animationEvent;
|
||||
function whichAnimationEvent() {
|
||||
|
||||
|
|
@ -175,6 +193,7 @@ define([], function () {
|
|||
addEventListener: addEventListenerWithOptions,
|
||||
removeEventListener: removeEventListenerWithOptions,
|
||||
getWindowSize: getWindowSize,
|
||||
getScreenWidth: getScreenWidth,
|
||||
whichTransitionEvent: whichTransitionEvent,
|
||||
whichAnimationEvent: whichAnimationEvent,
|
||||
whichAnimationCancelEvent: whichAnimationCancelEvent
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
|
||||
var options = {
|
||||
width: width,
|
||||
maxWidth: width,
|
||||
type: "Primary"
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -469,6 +469,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
|
||||
});
|
||||
|
|
@ -478,6 +479,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
|
||||
});
|
||||
|
|
@ -487,6 +489,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]
|
||||
});
|
||||
|
|
@ -496,6 +499,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]
|
||||
});
|
||||
|
|
@ -505,6 +509,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
|
||||
});
|
||||
|
|
@ -765,41 +770,48 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
|
|||
if (imageTags.Primary) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxWidth: 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: dom.getScreenWidth() * 0.5,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
shape = "thumb";
|
||||
} else if (imageTags.Thumb) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: dom.getScreenWidth() * 0.5,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
shape = "thumb";
|
||||
} else if (imageTags.Disc) {
|
||||
url = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
maxWidth: dom.getScreenWidth() * 0.5,
|
||||
tag: item.ImageTags.Disc
|
||||
});
|
||||
shape = "square";
|
||||
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.AlbumId, {
|
||||
type: "Primary",
|
||||
maxWidth: dom.getScreenWidth() * 0.5,
|
||||
tag: item.AlbumPrimaryImageTag
|
||||
});
|
||||
shape = "square";
|
||||
} else if (item.SeriesId && item.SeriesPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Primary",
|
||||
maxWidth: dom.getScreenWidth() * 0.5,
|
||||
tag: item.SeriesPrimaryImageTag
|
||||
});
|
||||
} else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) {
|
||||
url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
maxWidth: dom.getScreenWidth() * 0.5,
|
||||
tag: item.ParentPrimaryImageTag
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue