Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-17 12:40:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

placeholder icon added to compact metapreview

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-31 17:04:30 +02:00
parent e87c6d836c
commit 42d432eeac
2 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/MetaPreview/MetaPreview.js
View file

@ -2,6 +2,8 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Modal } = require('stremio-router');
const Icon = require('stremio-icons/dom');
const Image = require('stremio/common/Image');
const useBinaryState = require('stremio/common/useBinaryState');
const ActionButton = require('./ActionButton');
const MetaLinks = require('./MetaLinks');
@ -75,11 +77,19 @@ const MetaPreview = ({ className, compact, id, type, name, logo, background, dur
<div className={styles['meta-info-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
<img
<Image
key={logo}
className={styles['logo']}
src={logo}
alt={' '}
renderFallback={
compact ?
() => (
<Icon className={styles['logo-placeholder-icon']} icon={'ic_broken_link'} />
)
:
null
}
/>
:
null

19
src/common/MetaPreview/styles.less
View file

@ -6,8 +6,11 @@
&.compact {
.meta-info-container {
.logo {
.logo, .logo-placeholder-icon {
width: 100%;
}
.logo {
object-position: center;
}
@ -40,7 +43,7 @@
height: 100%;
object-fit: cover;
object-position: top left;
filter: blur(5px) brightness(80%);
filter: blur(5px) brightness(50%);
}
}
@ -50,14 +53,22 @@
padding: 0 1rem;
overflow-y: auto;
.logo {
.logo, .logo-placeholder-icon {
display: block;
max-width: 100%;
height: 7rem;
margin-top: 1rem;
background-color: var(--color-surfacedarker20);
}
.logo {
object-fit: contain;
object-position: left center;
background-color: var(--color-surfacedarker20);
}
.logo-placeholder-icon {
padding: 1rem;
fill: var(--color-surfacelight);
}
.duration-release-info-container {