From 661c628cef2f2dfb6908cd23715c38eb48b5e675 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 27 Sep 2019 13:12:36 +0300
Subject: [PATCH] MetaItem uses the new common Image component

---
 src/common/MetaItem/MetaItem.js | 27 ++++++++++---------
 src/common/MetaItem/styles.less | 48 ++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index a25c905ea..ffb5545e6 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
+const Image = require('stremio/common/Image');
 const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered');
 const Dropdown = require('stremio/common/Dropdown');
 const styles = require('./styles');
@@ -33,21 +34,21 @@ const MetaItem = React.memo(({ className, id, type, name, posterShape, poster, t
     }, []);
     return (
         <Button className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={metaItemOnClick}>
-            <div className={styles['poster-image-container']}>
-                <div className={styles['placeholder-icon-layer']}>
-                    <Icon
-                        className={styles['placeholder-icon']}
-                        icon={typeof ICON_FOR_TYPE[type] === 'string' ? ICON_FOR_TYPE[type] : ICON_FOR_TYPE['other']}
+            <div className={styles['poster-container']}>
+                <div className={styles['poster-image-layer']}>
+                    <Image
+                        className={styles['poster-image-container']}
+                        src={poster}
+                        alt={' '}
+                        id={id}
+                        renderFallback={() => (
+                            <Icon
+                                className={styles['placeholder-icon']}
+                                icon={typeof ICON_FOR_TYPE[type] === 'string' ? ICON_FOR_TYPE[type] : ICON_FOR_TYPE['other']}
+                            />
+                        )}
                     />
                 </div>
-                {
-                    typeof poster === 'string' && poster.length > 0 ?
-                        <div className={styles['poster-image-layer']}>
-                            <img className={styles['poster-image']} src={poster} alt={' '} />
-                        </div>
-                        :
-                        null
-                }
                 {
                     playIcon ?
                         <div className={styles['play-icon-layer']}>
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 35ecd60bf..9c9e2843a 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,3 +1,7 @@
+:import('~stremio/common/Image/styles.less') {
+    poster-image: image;
+}
+
 :import('~stremio/common/PlayIconCircleCentered/styles.less') {
     play-icon-circle-centered-background: background;
     play-icon-circle-centered-icon: icon;
@@ -33,44 +37,28 @@
     }
 
     &.poster-shape-poster {
-        .poster-image-container {
+        .poster-container {
             padding-top: calc(100% * var(--poster-shape-ratio));
         }
     }
 
     &.poster-shape-square {
-        .poster-image-container {
+        .poster-container {
             padding-top: 100%;
         }
     }
 
     &.poster-shape-landscape {
-        .poster-image-container {
+        .poster-container {
             padding-top: calc(100% * var(--landscape-shape-ratio));
         }
     }
 
-    .poster-image-container {
+    .poster-container {
         position: relative;
         z-index: -1;
         background-color: var(--color-backgroundlight);
 
-        .placeholder-icon-layer {
-            position: absolute;
-            top: 25%;
-            right: 10%;
-            bottom: 25%;
-            left: 10%;
-            z-index: 0;
-
-            .placeholder-icon {
-                display: block;
-                width: 100%;
-                height: 100%;
-                fill: var(--color-surfacelight20);
-            }
-        }
-
         .poster-image-layer {
             position: absolute;
             top: 0;
@@ -79,12 +67,24 @@
             left: 0;
             z-index: 1;
 
-            .poster-image {
-                display: block;
+            .poster-image-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
                 width: 100%;
                 height: 100%;
-                object-fit: cover;
-                object-position: center;
+
+                .poster-image {
+                    object-fit: cover;
+                }
+
+                .placeholder-icon {
+                    flex: none;
+                    height: 50%;
+                    width: 80%;
+                    fill: var(--color-surfacelight20);
+                }
             }
         }