From a8609da7da41d8418482e406bb1e048e4cc9f071 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sat, 21 Dec 2024 22:26:33 +0200
Subject: [PATCH] refactor(MetaDetails): styles + performance

- use useMemo for the bg render check
---
 src/routes/MetaDetails/MetaDetails.js | 31 ++++++++++++++++-----------
 src/routes/MetaDetails/styles.less    | 11 ++--------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index ef7700d09..ee0a6907a 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -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']}
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index 9a155f9dc..092e113c3 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -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)),