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

grouping item cases in 'MetaItem'

Browse source
This commit is contained in:
svetlagasheva 2018-10-03 19:08:05 +03:00
parent 2edb55c5c0
commit 640bb779d2
9 changed files with 252 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,31 +0,0 @@
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
View file

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

34
src/common/LibraryItemGrid/styles.less
View file

@ -1,34 +0,0 @@
@import 'stremio-colors';
.library-item {
width: 150px;
height: 222px;
float: left;
margin: 8px;
display: flex;
background-size: cover;
background-position: center;
.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;
outline: 2px solid @colorwhite;
.play-container {
border-radius: 50%;
background-color: @colorwhite;
.play {
fill: @colormedium;
}
}
}
}

166
src/common/MetaItem/MetaItem.js Normal file
View file

@ -0,0 +1,166 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
import colors from 'stremio-colors';
import { RELATIVE_POSTER_SIZE } from './constants';
import styles from './styles';
class MetaItem extends PureComponent {
getShapeSize = () => {
switch (this.props.posterShape) {
case 'poster':
return {
containerHeight: 290,
width: RELATIVE_POSTER_SIZE,
height: RELATIVE_POSTER_SIZE * 1.464
};
case 'landscape':
if (this.props.progress) {
return {
containerHeight: 290,
width: RELATIVE_POSTER_SIZE / 0.5625,
height: RELATIVE_POSTER_SIZE * 1.464
};
}
return {
containerHeight: 210,
width: RELATIVE_POSTER_SIZE / 0.5625,
height: RELATIVE_POSTER_SIZE
};
default:
if (this.props.progress) {
return {
containerHeight: 290,
width: RELATIVE_POSTER_SIZE * 1.464,
height: RELATIVE_POSTER_SIZE * 1.464
};
}
return {
containerHeight: 210,
width: RELATIVE_POSTER_SIZE,
height: RELATIVE_POSTER_SIZE
};
}
}
getPlaceholderIcon = () => {
switch (this.props.type) {
case 'tv':
return 'ic_tv';
case 'series':
return 'ic_series';
case 'channel':
return 'ic_channels';
default:
return 'ic_movies';
}
}
renderPlay() {
return (
<div style={this.props.progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
<Icon className={styles['play']} icon={'ic_play'} />
</div>
);
}
renderProgress() {
if (this.props.progress <= 0) {
return null;
}
return (
<div className={styles['progress-container']}>
<div style={{ width: this.props.progress + '%' }} className={styles['progress']}></div>
</div>
);
}
renderEpisode() {
if (this.props.episode.length === 0) {
return null;
}
return (
<div className={styles['episode']}>{this.props.episode}</div>
);
}
renderTitle() {
if (this.props.title.length === 0) {
return null;
}
return (
<div className={styles['title']}>{this.props.title}</div>
);
}
renderYear() {
if (this.props.year.length === 0) {
return null;
}
return (
<div className={styles['year']}>{this.props.year}</div>
);
}
renderIcon() {
return (
<Icon className={styles['more-icon']} icon={'ic_more'} />
);
}
render() {
const posterSize = this.getShapeSize();
const contentContainerStyle = {
width: posterSize.width,
height: posterSize.containerHeight
};
const placeholderIcon = this.getPlaceholderIcon();
const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
const imageStyle = {
height: posterSize.height,
backgroundImage: `url(${this.props.poster}), url('${placeholderIconUrl}')`
};
return (
<div style={contentContainerStyle} className={styles['meta-item']}>
<div style={imageStyle} className={styles['poster']}>
{this.renderPlay()}
</div>
{this.renderProgress()}
<div className={styles['info-container']}>
<div className={styles['info']}>
{this.renderEpisode()}
{this.renderTitle()}
{this.renderYear()}
</div>
{this.renderIcon()}
</div>
</div>
);
}
}
MetaItem.propTypes = {
type: PropTypes.oneOf(['movie', 'series', 'channel', 'tv', 'other']).isRequired,
poster: PropTypes.string.isRequired,
posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
progress: PropTypes.number.isRequired,
episode: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
year: PropTypes.string.isRequired
};
MetaItem.defaultProps = {
type: 'other',
poster: '',
posterShape: 'poster',
progress: 0,
episode: '',
title: '',
year: ''
};
export default MetaItem;

3
src/common/MetaItem/constants.json Normal file
View file

@ -0,0 +1,3 @@
{
"RELATIVE_POSTER_SIZE": 138
}

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

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

77
src/common/MetaItem/styles.less Normal file
View file

@ -0,0 +1,77 @@
@import 'stremio-colors';
.meta-item {
margin: 4px;
float: left;
color: @colorwhite;
font-family: LatoLight;
.poster {
display: flex;
background-position: center;
background-size: cover, auto;
background-repeat: no-repeat;
background-color: @colordarkest;
.play-container {
width: 70px;
height: 70px;
margin: auto;
display: flex;
visibility: hidden;
border-radius: 50%;
background-color: @colorwhite;
.play {
width: 26px;
height: 26px;
margin: auto;
margin-left: 26px;
fill: @colormedium;
}
}
}
.progress-container {
background-color: @colorneutral;
.progress {
height: 4px;
background-color: @colorprimlight;
}
}
.info-container {
display: flex;
margin-top: 6px;
align-items: baseline;
.info {
width: 100%;
.title, .year{
color: @colorwhite60;
}
:first-child {
color: @colorwhite;
}
}
}
.more-icon {
width: 10px;
height: 10px;
cursor: pointer;
fill: @colorwhite;
}
&:hover {
cursor: pointer;
color: @colorblack;
background-color: @colorwhite;
outline: 2px solid @colorwhite;
.play-container {
visibility: visible;
}
.info {
.title, .year {
color: @colorblack60;
}
:first-child {
color: @colorblack;
}
}
.more-icon {
fill: @colorblack40;
}
}
}

4
src/common/index.js
View file

@ -7,7 +7,7 @@ import Router from './Router';
import Stream from './Stream';
import Video from './Video';
import LibraryItemList from './LibraryItemList';
import LibraryItemGrid from './LibraryItemGrid';
import MetaItem from './MetaItem';
import Addon from './Addon';
import ShareAddon from './ShareAddon';
import UserPanel from './UserPanel';
@ -22,7 +22,7 @@ export {
Stream,
Video,
LibraryItemList,
LibraryItemGrid,
MetaItem,
Addon,
ShareAddon,
UserPanel,

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

@ -4,7 +4,7 @@ import { addons } from 'stremio-services';
import { Stream } from 'stremio-common';
import { Video } from 'stremio-common';
import { LibraryItemList } from 'stremio-common';
import { LibraryItemGrid } from 'stremio-common';
import { MetaItem } from 'stremio-common';
import { Addon } from 'stremio-common';
import { ShareAddon } from 'stremio-common';
import { UserPanel } from 'stremio-common';