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

metaitem play button implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-29 14:41:25 +02:00
parent db8837cb49
commit d3de0f1bed
4 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -65,6 +65,12 @@ class MetaItem extends Component {
<div className={styles['poster-image-container']}>
<Icon className={styles['placeholder-image']} icon={placeholderIcon} />
<div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
<div className={styles['play-button-container']}>
{/* <Icon className={styles['play-button-icon']} icon={'ic_play'} /> */}
<svg className={styles['play-button-icon']} viewBox="-291.6 0 1190.6 1024">
<path d="M891.482 512l-884.254 512v-1024z"></path>
</svg>
</div>
{this.renderProgress()}
</div>
);

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

@ -32,12 +32,32 @@
background-origin: border-box;
}
.play-button-container {
position: absolute;
top: calc(50% - (var(--poster-relative-size) * 0.2));
left: calc(50% - (var(--poster-relative-size) * 0.2));
width: calc(var(--poster-relative-size) * 0.4);
height: calc(var(--poster-relative-size) * 0.4);
z-index: 2;
background-color: var(--color-surfacelighter);
border-radius: 50%;
box-shadow: 0 0 calc(var(--poster-relative-size) * 0.1) calc(var(--poster-relative-size) * 0.015) var(--color-backgroundlight);
visibility: var(--play-button-visibility, collapse);
text-align: center;
.play-button-icon {
height: 40%;
margin-top: 30%;
fill: var(--color-primary);
}
}
.progress-bar-container {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
z-index: 3;
height: var(--progress-bar-size);
background-color: var(--color-backgroundlighter);
box-shadow: 0 0 calc(var(--progress-bar-size) * 4) calc(var(--progress-bar-size) * 1.5) var(--color-backgroundlight);

2
src/routes/Board/Board.js
View file

@ -54,7 +54,7 @@ class Board extends PureComponent {
{this.items.cw.map((props) => (
<MetaItem
key={props.id}
className={styles['meta-item-container']}
className={styles['meta-item']}
popupClassName={styles['meta-item-popup-container']}
relativeSize={'height'}
menu={this.cwMenu}

12
src/routes/Board/styles.less
View file

@ -5,10 +5,20 @@
.continue-watching-row {
--poster-relative-size: calc(180px * var(--poster-shape-ratio));
.meta-item {
--play-button-visibility: visible;
}
}
.search-row {
--poster-relative-size: 220px;
.meta-item {
&:hover, &:focus {
--play-button-visibility: visible;
}
}
}
}
@ -24,7 +34,7 @@
align-items: stretch;
}
.meta-item-container {
.meta-item {
margin: 10px;
}
}