Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-05 00:10:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MetaItem uses the new common Image component

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-27 13:12:36 +03:00
parent 9426ac530a
commit 661c628cef
2 changed files with 38 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/common/MetaItem/MetaItem.js
View file

@ -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']}>

48
src/common/MetaItem/styles.less
View file

@ -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);
}
}
}