From 26cd151a9241cc39bf1fa034f139307115ce723b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 6 Sep 2019 18:36:36 +0300
Subject: [PATCH] MetaPreview props/styles updated for readaility

---
 src/common/MetaPreview/MetaPreview.js | 26 ++++++++++----------------
 src/common/MetaPreview/styles.less    | 20 +++++++++-----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 9f26a9d4f..3296cbaf1 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -7,7 +7,7 @@ const ActionButton = require('./ActionButton');
 const MetaLinks = require('./MetaLinks');
 const styles = require('./styles');
 
-const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '', background = '', duration = '', releaseInfo = '', released = '', description = '', genres = [], writers = [], directors = [], cast = [], imdbRating = '', links = {}, inLibrary = false, toggleInLibrary }) => {
+const MetaPreview = ({ className, compact, id, type, name, logo, background, duration, releaseInfo, released, description, genres, writers, directors, cast, imdbRating, links, inLibrary, toggleInLibrary }) => {
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const releaseInfoText = React.useMemo(() => {
         const releasedDate = new Date(released);
@@ -19,9 +19,6 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
                 :
                 null;
     }, [releaseInfo, released]);
-    const logoOnError = React.useCallback((event) => {
-        event.currentTarget.style.display = 'none';
-    }, []);
     const genresLinks = React.useMemo(() => {
         return Array.isArray(genres) ?
             genres.map((genre) => ({
@@ -80,14 +77,14 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
                     :
                     null
             }
-            <div className={styles['meta-info']}>
+            <div className={styles['meta-info-container']}>
                 {
                     typeof logo === 'string' && logo.length > 0 ?
                         <img
                             key={logo}
                             className={styles['logo']}
                             src={logo}
-                            onError={logoOnError}
+                            alt={' '}
                         />
                         :
                         null
@@ -97,13 +94,13 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
                         <div className={styles['duration-release-info-container']}>
                             {
                                 typeof releaseInfoText === 'string' && releaseInfoText.length > 0 ?
-                                    <div className={styles['release-info']}>{releaseInfoText}</div>
+                                    <div className={styles['release-info-label']}>{releaseInfoText}</div>
                                     :
                                     null
                             }
                             {
                                 typeof duration === 'string' && duration.length > 0 ?
-                                    <div className={styles['duration']}>{duration}</div>
+                                    <div className={styles['duration-label']}>{duration}</div>
                                     :
                                     null
                             }
@@ -111,12 +108,9 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
                         :
                         null
                 }
-                {
-                    typeof name === 'string' && name.length > 0 ?
-                        <div className={styles['name-container']}>{name}</div>
-                        :
-                        null
-                }
+                <div className={styles['name-container']}>
+                    {typeof name === 'string' && name.length > 0 ? name : id}
+                </div>
                 {
                     typeof description === 'string' && description.length > 0 ?
                         <div className={styles['description-container']}>{description}</div>
@@ -222,8 +216,8 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
 MetaPreview.propTypes = {
     className: PropTypes.string,
     compact: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    type: PropTypes.string,
     name: PropTypes.string,
     logo: PropTypes.string,
     background: PropTypes.string,
diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 4c617a277..a2464d77a 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -44,7 +44,7 @@
         }
     }
 
-    .meta-info {
+    .meta-info-container {
         flex: 1;
         align-self: stretch;
         padding: 0 1rem;
@@ -54,7 +54,7 @@
             display: block;
             max-width: 100%;
             height: 7rem;
-            margin: 1rem 0;
+            margin-top: 1rem;
             object-fit: contain;
             object-position: left center;
             background-color: var(--color-surfacedarker20);
@@ -64,34 +64,32 @@
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
-            margin: 1rem 0;
+            margin-top: 1rem;
 
-            .duration, .release-info {
+            .duration-label, .release-info-label {
                 flex-grow: 0;
                 flex-shrink: 1;
+                flex-basis: auto;
                 margin: 1rem 1rem 1rem 0;
+                font-size: 1.2rem;
                 text-align: center;
                 color: var(--color-surfacelighter);
             }
         }
 
         .name-container {
-            margin: 1rem 0;
+            margin-top: 1rem;
             font-size: 1.4rem;
             color: var(--color-surfacelighter);
         }
 
         .description-container {
-            margin: 1rem 0;
+            margin-top: 1rem;
             color: var(--color-surfacelighter);
         }
 
         .meta-links {
-            margin: 1rem 0;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
+            margin-top: 1rem;
         }
     }