BreizhHardware/Jellystat
1
0
Fork 0
mirror of https://github.com/BreizhHardware/Jellystat.git synced 2026-01-18 16:27:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve image loading logic in MoreItemCards component

Browse Source
This commit is contained in:
CyferShepard
2024-07-30 10:41:00 +02:00
parent c4cad1cac4
commit 3a0455795e
1 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/components/item-info/more-items/more-items-card.jsx
View File

@@ -56,7 +56,8 @@ function MoreItemCards(props) {
>
{((props.data.ImageBlurHashes && props.data.ImageBlurHashes != null) ||
(props.data.PrimaryImageHash && props.data.PrimaryImageHash != null)) &&
!loaded ? (
!loaded &&
!fallback ? (
<Blurhash
hash={props.data.PrimaryImageHash || props.data.ImageBlurHashes.Primary[props.data.ImageTags.Primary]}
width={"100%"}
@@ -68,7 +69,23 @@ function MoreItemCards(props) {
{!props.data.archived ? (
fallback ? (
Id == undefined ? (
currentLibraryDefaultIcon
<div
className="d-flex flex-column justify-content-center align-items-center position-relative"
style={{ height: "100%", width: "200px" }}
>
{props.data.PrimaryImageHash && props.data.PrimaryImageHash != null ? (
<Blurhash
hash={props.data.PrimaryImageHash}
width={"100%"}
height={"100%"}
className="rounded-top-3 overflow-hidden position-absolute"
style={{ display: "block" }}
/>
) : null}
<div className="d-flex flex-column justify-content-center align-items-center position-absolute">
{currentLibraryDefaultIcon}
</div>
</div>
) : (
<img
src={`${"/proxy/Items/Images/Primary?id=" + Id + "&fillHeight=320&fillWidth=213&quality=50"}`}
@@ -95,15 +112,15 @@ function MoreItemCards(props) {
) : (
<div
className="d-flex flex-column justify-content-center align-items-center position-relative"
style={{ height: "100%" }}
style={{ height: "100%", width: "200px" }}
>
{(props.data.ImageBlurHashes && props.data.ImageBlurHashes != null) ||
(props.data.PrimaryImageHash && props.data.PrimaryImageHash != null) ? (
{props.data.PrimaryImageHash && props.data.PrimaryImageHash != null ? (
<Blurhash
hash={props.data.PrimaryImageHash || props.data.ImageBlurHashes.Primary[props.data.ImageTags.Primary]}
hash={props.data.PrimaryImageHash}
width={"100%"}
height={"100%"}
className="rounded-top-3 overflow-hidden position-absolute"
style={{ display: "block" }}
/>
) : null}
<div className="d-flex flex-column justify-content-center align-items-center position-absolute">