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

'LibraryItemList' component

Browse source
This commit is contained in:
svetlagasheva 2018-09-11 17:18:27 +03:00
parent a67fa5603e
commit a6cf2c060f
5 changed files with 84 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/common/LibraryItemGrid/LibraryItemGrid.js Normal file
View file

@ -0,0 +1,31 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from 'stremio-icons/dom';
import styles from './styles';
class LibraryItemGrid extends Component {
renderPlay() {
return (
<div className={styles['play-container']}>
<Icon className={styles['play']} icon={'ic_play'}/>
</div>
);
}
render() {
return (
<div className={styles['library-item']} style={{ backgroundImage: 'url('+ this.props.poster +')'}}>
{this.renderPlay()}
</div>
);
}
}
LibraryItemGrid.propTypes = {
poster: PropTypes.string.isRequired
};
LibraryItemGrid.defaultProps = {
poster: ''
};
export default LibraryItemGrid;

3
src/common/LibraryItemGrid/index.js Normal file
View file

@ -0,0 +1,3 @@
import LibraryItemGrid from './LibraryItemGrid';
export default LibraryItemGrid;

36
src/common/LibraryItemGrid/styles.less Normal file
View file

@ -0,0 +1,36 @@
@import 'stremio-colors';
.library-item {
width: 150px;
height: 222px;
float: left;
margin: 8px;
display: flex;
background-size: cover;
background-position: center;
transition: transform 0.4s ease-in-out;
.play-container {
width: 70px;
height: 70px;
margin: auto;
display: flex;
.play {
width: 26px;
height: 26px;
margin: auto;
margin-left: 26px;
fill: @colortransparent;
}
}
&:hover, &:focus {
cursor: pointer;
transform: scale(1.11);
border: 1px solid @colorwhite;
.play-container {
border-radius: 50%;
background-color: @colorwhite;
.play {
fill: @colormedium;
}
}
}
}

4
src/common/index.js
View file

@ -7,6 +7,7 @@ import Router from './Router';
import Stream from './Stream';
import Episode from './Episode';
import LibraryItemList from './LibraryItemList';
import LibraryItemGrid from './LibraryItemGrid';
export {
Checkbox,
@ -17,5 +18,6 @@ export {
Router,
Stream,
Episode,
LibraryItemList
LibraryItemList,
LibraryItemGrid
};

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

@ -4,6 +4,7 @@ import { addons } from 'stremio-services';
import { Stream } from 'stremio-common';
import { Episode } from 'stremio-common';
import { LibraryItemList } from 'stremio-common';
import { LibraryItemGrid } from 'stremio-common';
class Board extends PureComponent {
constructor(props) {
@ -32,10 +33,16 @@ class Board extends PureComponent {
render() {
return (
<div style={{ paddingTop: 40, color: 'yellow' }}>
<LibraryItemList poster={'http://t3.gstatic.com/images?q=tbn:ANd9GcST1uigGrukMvSAVUefFNuQ0NMZAR-FjfFIwSZFCR5ZkyMSgCyj'} title={'Thor Ragnarok'} type={'Movies'} year={'2017'} dateAdded={'14.12.2017'} views={12} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
<LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'} title={'Pitch Perfect 3'} type={'Series'} year={'2015'} dateAdded={'12.12.2012'} views={1} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
<LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'} title={'Deadpool'} type={'Channel'} year={'2013'} dateAdded={'12.12.2012'} views={3} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
<LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'} title={'The Shape of Water'} type={'Movies'} year={'2017'} dateAdded={'12.12.2012'} views={8} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BYjQ5NjM0Y2YtNjZkNC00ZDhkLWJjMWItN2QyNzFkMDE3ZjAxXkEyXkFqcGdeQXVyODIxMzk5NjA@._V1_UY268_CR3,0,182,268_AL_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'}></LibraryItemGrid>
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BNjFhZjM4ZDYtMGRjYi00Yzc2LWExYmEtMDQ3NzA4ODU4YTljXkEyXkFqcGdeQXVyNjkwMzU3NDI@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
</div>
);
}