meta progress and poster ui implemented

src/common/MetaItem/MetaItem.js

@@ -1,13 +1,40 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
-class MetaItem extends Component {
+class MetaItem extends PureComponent {
+    renderProgress() {
+        if (this.props.progress === 0) {
+            return null;
+        }
+
+        return (
+            <div className={styles['progress-bar-container']}>
+                <div className={styles['progress']} style={{ width: `${this.props.progress * 100}%` }} />
+            </div>
+        );
+    }
+
+    renderPoster() {
+        const placeholderIcon = this.props.type === 'tv' ? 'ic_tv'
+            : this.props.type === 'series' ? 'ic_series'
+                : this.props.type === 'channel' ? 'ic_channels'
+                    : 'ic_movies';
+        return (
+            <div className={styles['poster-image-container']}>
+                <Icon className={styles['placeholder-image']} icon={placeholderIcon} />
+                <div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
+                {this.renderProgress()}
+            </div>
+        );
+    }
+
     render() {
         return (
             <div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}>
-                <div style={{ backgroundImage: `url('${this.props.poster}')` }} className={styles['poster-image']} />
+                {this.renderPoster()}
             </div>
         );
     }
@@ -15,14 +42,23 @@ class MetaItem extends Component {
 
 MetaItem.propTypes = {
     className: PropTypes.string,
+    type: PropTypes.string.isRequired,
     relativeSize: PropTypes.oneOf(['auto', 'height']).isRequired,
     posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
     poster: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    progress: PropTypes.number.isRequired,
+    released: PropTypes.instanceOf(Date).isRequired,
 };
 MetaItem.defaultProps = {
     relativeSize: 'auto',
     posterShape: 'square',
     poster: '',
+    title: '',
+    subtitle: '',
+    progress: 0,
+    released: new Date(NaN)
 };
 
 export default MetaItem;

src/common/MetaItem/styles.less

@@ -1,16 +1,60 @@
 .meta-item-container {
     margin: 10px;
     display: inline-block;
+    background-color: var(--color-backgroundlight);
+
+    .poster-image-container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 0;
+
+        .placeholder-image {
+            width: calc(var(--poster-relative-size) * 0.5);
+            height: calc(var(--poster-relative-size) * 0.5);
+            fill: var(--color-surfacelighter);
+        }
+
+        .poster-image {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-origin: border-box;
+        }
+
+        .progress-bar-container {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 2;
+            height: 6px;
+            background-color: var(--color-backgroundlighter);
+            box-shadow: 0 0 20px 8px var(--color-backgrounddarker);
+
+            .progress {
+                height: 100%;
+                background-color: var(--color-primary);
+            }
+        }
+    }
 
     &.poster-shape-square {
-        .poster-image {
+        .poster-image-container {
             width: var(--poster-relative-size);
             height: var(--poster-relative-size);
         }
     }
 
     &.poster-shape-landscape {
-        .poster-image {
+        .poster-image-container {
             width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
             height: var(--poster-relative-size);
         }
@@ -18,14 +62,14 @@
 
     &.poster-shape-poster {
         &.relative-size-auto {
-            .poster-image {
+            .poster-image-container {
                 width: var(--poster-relative-size);
                 height: calc(var(--poster-relative-size) * var(--poster-shape-ratio));
             }
         }
 
         &.relative-size-height {
-            .poster-image {
+            .poster-image-container {
                 width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
                 height: var(--poster-relative-size);
             }