From 67e3ffeed481ea780cf4c0eac0769ac71bfd2677 Mon Sep 17 00:00:00 2001
From: Alexandru Branza <branza.alex@gmail.com>
Date: Fri, 4 Feb 2022 14:30:59 +0200
Subject: [PATCH] Improvements to MetaDetails Page

Changes made:
- removed `meta.name` from MetaDetails Page
- removed `meta.description` from MetaDetails Page
- remove "Writers" from MetaDetails Page
- fallback to blank PNG if logo unavailable (MetaPreview only)
- fallback to `meta.name` (css hack used to hide broken image) if logo unavailable
---
 src/common/MetaPreview/MetaPreview.js | 39 +++++++++++++++------------
 src/common/MetaPreview/styles.less    | 19 ++++++++++++-
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index a9424b8fd..e6c042c40 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -92,9 +92,16 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
 
         return trailerStreams[0].deepLinks.player;
     }, [trailerStreams]);
-    const renderLogoFallback = React.useCallback(() => (
-        <Icon className={styles['logo-placeholder-icon']} icon={'ic_broken_link'} />
-    ), []);
+    const logoFallback = ({ currentTarget }) => {
+        currentTarget.onerror = null; // detach handler
+        if (compact) {
+            // replace with blank png
+            currentTarget.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+        } else {
+            // show img.alt without broken image icon
+            currentTarget.className = styles['missing'];
+        }
+    }
     return (
         <div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })}>
             {
@@ -106,17 +113,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                     null
             }
             <div className={styles['meta-info-container']}>
-                {
-                    typeof logo === 'string' && logo.length > 0 ?
-                        <Image
-                            className={styles['logo']}
-                            src={logo}
-                            alt={' '}
-                            renderFallback={renderLogoFallback}
-                        />
-                        :
-                        null
-                }
+                <div className={styles['logo-holder']}>
+                    <Image
+                        className={styles['logo']}
+                        src={logo || ''}
+                        alt={name}
+                        onError={logoFallback}
+                    />
+                </div>
                 {
                     (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?
                         <div className={styles['runtime-release-info-container']}>
@@ -155,7 +159,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    typeof name === 'string' && name.length > 0 ?
+                    compact && typeof name === 'string' && name.length > 0 ?
                         <div className={styles['name-container']}>
                             {name}
                         </div>
@@ -163,7 +167,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    typeof description === 'string' && description.length > 0 ?
+                    compact && typeof description === 'string' && description.length > 0 ?
                         <div className={styles['description-container']}>{description}</div>
                         :
                         null
@@ -172,7 +176,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                     Array.from(linksGroups.keys())
                         .filter((category) => {
                             return category !== CONSTANTS.IMDB_LINK_CATEGORY &&
-                                category !== CONSTANTS.SHARE_LINK_CATEGORY;
+                                category !== CONSTANTS.SHARE_LINK_CATEGORY &&
+                                category !== 'Writers';
                         })
                         .map((category, index) => (
                             <MetaLinks
diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 96a160f05..2fe0588e1 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -89,6 +89,23 @@
             margin: 2rem 0;
         }
 
+        .missing {
+            margin-left: -33px;
+            text-indent: 16px;
+            max-width: 200%;
+            color: white;
+            font-size: 1.5rem;
+            position: absolute;
+            bottom: 1.1rem;
+        }
+
+        .logo-holder {
+            height: 12rem;
+            overflow: hidden;
+            width: 100%;
+            position: relative;
+        }
+
         .logo {
             object-fit: contain;
             object-position: center;
@@ -153,7 +170,7 @@
 
         .name-container {
             margin-top: 1rem;
-            font-size: 1.7rem;
+            font-size: 1.5rem;
             color: @color-surface-light5-90;
         }