Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 14:35:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MetaItem optimizations

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-27 13:52:42 +03:00
parent b607a8ea5d
commit ef1fd33bce
2 changed files with 19 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,7 @@ const ICON_FOR_TYPE = Object.freeze({
'tv': 'ic_tv'
});
const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, menuOptions = [], onClick, menuOptionOnSelect }) => {
const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, playIcon = false, menuOptions = [], onClick, menuOptionOnSelect }) => {
const menuRef = React.useRef(null);
const [menuOpen, setMenuOpen] = React.useState(false);
const onMenuOpen = React.useCallback(() => {
@ -39,14 +39,19 @@ const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterS
<div className={styles['poster-image-layer']}>
<div className={styles['poster-image']} style={{ backgroundImage: `url('${poster}')` }} />
</div>
<div className={styles['play-icon-layer']}>
<svg className={styles['play-icon-container']} viewBox={'0 0 100 100'}>
<circle className={styles['play-icon-background']} cx={'50'} cy={'50'} r={'50'} />
<svg className={styles['play-icon']} x={'0'} y={'25'} width={'100'} height={'50'} viewBox={'0 0 37.14 32'}>
<path d={'M 9.14,0 37.14,16 9.14,32 Z'} />
</svg>
</svg>
</div>
{
playIcon ?
<div className={styles['play-icon-layer']}>
<svg className={styles['play-icon-container']} viewBox={'0 0 100 100'}>
<circle className={styles['play-icon-background']} cx={'50'} cy={'50'} r={'50'} />
<svg className={styles['play-icon']} x={'0'} y={'25'} width={'100'} height={'50'} viewBox={'0 0 37.14 32'}>
<path d={'M 9.14,0 37.14,16 9.14,32 Z'} />
</svg>
</svg>
</div>
:
null
}
{
progress > 0 ?
<div className={styles['progress-bar-container']}>
@ -108,6 +113,7 @@ MetaItem.propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
progress: PropTypes.number,
playIcon: PropTypes.bool,
menuOptions: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
type: PropTypes.string.isRequired

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

@ -1,9 +1,4 @@
.meta-item-container {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
align-items: stretch;
background-color: var(--color-backgroundlight);
cursor: pointer;
@ -27,16 +22,10 @@
&:hover, &:focus {
outline: var(--focusable-border-size) solid var(--color-surfacelighter);
outline-offset: calc(-1 * var(--focusable-border-size));
.poster-image-container {
.poster-image {
filter: brightness(120%);
}
}
}
.poster-image-container {
width: 100%;
position: relative;
z-index: 0;
@ -85,7 +74,6 @@
width: 100%;
height: 100%;
overflow: visible;
visibility: var(--play-icon-visibility, collapse);
filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));
.play-icon-background {
@ -115,21 +103,20 @@
}
.title-bar-container {
width: 100%;
height: 2.5em;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
.title {
flex: 1;
max-height: 2.2em;
flex-grow: 1;
padding: 0 0.5em;
line-height: 1.1em;
max-height: 2.2em;
color: var(--color-surfacelighter);
word-break: break-all;
word-break: break-word;
overflow: hidden;
}
.menu-icon {