Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 13:52:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(MetaDetails): styles + performance

Browse source 
- use useMemo for the bg render check
This commit is contained in:
Timothy Z. 2024-12-21 22:26:33 +02:00
parent 9ca41aa8c0
commit a8609da7da
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/routes/MetaDetails/MetaDetails.js
View file

@ -76,22 +76,29 @@ const MetaDetails = ({ urlParams, queryParams }) => {
setSeason(event.value);
}, [setSeason]);
const renderBackgroundImageFallback = React.useCallback(() => null, []);
const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' &&
typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0;
const renderBackground = React.useMemo(() => !!(
metaPath &&
metaDetails?.metaItem &&
metaDetails.metaItem.content?.type !== 'Err' &&
metaDetails.metaItem.content.type !== 'Loading' &&
typeof metaDetails.metaItem.content.content?.background === 'string' &&
metaDetails.metaItem.content.content.background.length > 0
), [metaPath, metaDetails]);
return (
<div className={styles['metadetails-container']}>
{
canRenderBackground &&
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
renderBackground ?
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
:
null
}
<HorizontalNavBar
className={styles['nav-bar']}

11
src/routes/MetaDetails/styles.less
View file

@ -21,11 +21,6 @@
padding-right: env(safe-area-inset-right, 0rem);
box-sizing: border-box;
--navbar-assumed-height: 84px;
--top-overlay-size: var(--navbar-assumed-height);
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
.background-image-layer {
position: fixed;
top: 0;
@ -59,11 +54,9 @@
z-index: 0;
display: flex;
flex-direction: row;
margin-top: calc(var(--navbar-assumed-height) * -1);
padding-top: var(--navbar-assumed-height);
margin-top: calc(var(--top-overlay-size) * -1);
padding-top: var(--top-overlay-size);
padding-bottom: var(--calculated-bottom-safe-inset, 0px);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),