diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js index 1efc0116e..7642edced 100644 --- a/src/common/MetaItem/MetaItem.js +++ b/src/common/MetaItem/MetaItem.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Popup } from 'stremio-common'; @@ -48,35 +48,45 @@ class MetaItem extends Component { ); } - renderTitleBar() { - if (this.props.title.length === 0 && this.props.menu.length === 0) { + renderInfoBar() { + if (this.props.title.length === 0 && this.props.menu.length === 0 && this.props.subtitle.length === 0) { return null; } return ( -
-
{this.props.title}
+ +
+
{this.props.title}
+ { + this.props.menu.length > 0 ? + + + + + +
+ {this.props.menu.map(({ label, callback }) => ( +
{label}
+ ))} +
+
+
+ : + null + } +
{ - this.props.menu.length > 0 ? - - - - - -
- {this.props.menu.map(({ label, callback }) => ( -
{label}
- ))} -
-
-
+ this.props.subtitle.length > 0 ? +
+
{this.props.subtitle}
+
: null } -
+ ); } @@ -84,7 +94,7 @@ class MetaItem extends Component { return (
{this.renderPoster()} - {this.renderTitleBar()} + {this.renderInfoBar()}
); } diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less index 16dbc66cc..067aca9b8 100644 --- a/src/common/MetaItem/styles.less +++ b/src/common/MetaItem/styles.less @@ -1,6 +1,7 @@ .meta-item-container { margin: 10px; - display: inline-block; + display: inline-flex; + flex-direction: column; background-color: var(--color-backgroundlight); .poster-image-container {