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
}
-
+
{
typeof logo === 'string' && logo.length > 0 ?

:
null
@@ -97,13 +94,13 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
{
typeof releaseInfoText === 'string' && releaseInfoText.length > 0 ?
-
{releaseInfoText}
+
{releaseInfoText}
:
null
}
{
typeof duration === 'string' && duration.length > 0 ?
-
{duration}
+
{duration}
:
null
}
@@ -111,12 +108,9 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
:
null
}
- {
- typeof name === 'string' && name.length > 0 ?
-
{name}
- :
- null
- }
+
+ {typeof name === 'string' && name.length > 0 ? name : id}
+
{
typeof description === 'string' && description.length > 0 ?
{description}
@@ -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;
}
}