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

meta item reimplemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-02-03 10:43:39 +02:00
parent e9fe5c4a1d
commit 34b34c5ba6
4 changed files with 170 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,6 @@ class MetaItem extends Component {
nextProps.popupClassName !== this.props.popupClassName ||
nextProps.id !== this.props.id ||
nextProps.type !== this.props.type ||
nextProps.relativeSide !== this.props.relativeSide ||
nextProps.posterShape !== this.props.posterShape ||
nextProps.poster !== this.props.poster ||
nextProps.title !== this.props.title ||
@ -69,11 +68,16 @@ class MetaItem extends Component {
: 'ic_movies';
return (
<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-icon-container']}>
<Icon className={styles['play-icon']} icon={'ic_play'} viewBox={'-291.6 0 1190.6 1024'} />
<div className={styles['placeholder-image-container']}>
<Icon className={styles['placeholder-image']} icon={placeholderIcon} />
</div>
<div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
<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>
{this.renderProgress()}
</div>
);
@ -120,7 +124,7 @@ class MetaItem extends Component {
render() {
return (
<Input className={classnames(styles['meta-item-container'], styles[`relative-side-${this.props.relativeSide}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} type={'button'} data-meta-item-id={this.props.id} onClick={this.onClick}>
<Input className={classnames(styles['meta-item-container'], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} type={'button'} data-meta-item-id={this.props.id} onClick={this.onClick}>
{this.renderPoster()}
{this.renderInfoBar()}
</Input>
@ -135,7 +139,6 @@ MetaItem.propTypes = {
menuOptionOnSelect: PropTypes.func,
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
relativeSide: PropTypes.oneOf(['auto', 'height']).isRequired,
posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
poster: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
@ -148,7 +151,6 @@ MetaItem.propTypes = {
})).isRequired
};
MetaItem.defaultProps = {
relativeSide: 'auto',
posterShape: 'square',
poster: '',
title: '',

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

@ -1,6 +1,7 @@
.meta-item-container {
display: inline-flex;
flex-direction: column;
align-items: stretch;
background-color: var(--color-backgroundlight);
border: var(--focusable-border-size) solid transparent;
cursor: pointer;
@ -8,16 +9,20 @@
.poster-image-container {
position: relative;
z-index: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
.placeholder-image {
width: calc(var(--poster-relative-size) * 0.5);
height: calc(var(--poster-relative-size) * 0.5);
fill: var(--color-surfacelighter);
.placeholder-image-container {
position: absolute;
top: 25%;
right: 0;
bottom: 25%;
left: 0;
z-index: 0;
.placeholder-image {
width: 100%;
height: 100%;
fill: var(--color-surfacelight20);
}
}
.poster-image {
@ -35,18 +40,19 @@
.play-icon-container {
position: absolute;
width: calc(var(--poster-relative-size) * .4);
height: calc(var(--poster-relative-size) * .4);
top: 30%;
height: 40%;
width: 100%;
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);
overflow: visible;
visibility: var(--play-icon-visibility, collapse);
text-align: center;
.play-icon-background {
fill: var(--color-surfacelighter);
filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));
}
.play-icon {
margin-top: 30%;
height: 40%;
fill: var(--color-primary);
}
}
@ -57,15 +63,19 @@
bottom: 0;
left: 0;
z-index: 3;
height: var(--progress-bar-size);
height: 0.5em;
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);
.progress {
height: 100%;
background-color: var(--color-primary);
}
}
&:before {
content: "";
display: block;
}
}
.title-bar-container {
@ -97,75 +107,39 @@
}
&.poster-shape-square {
.poster-image-container {
width: var(--poster-relative-size);
height: var(--poster-relative-size);
}
.title-bar-container {
width: var(--poster-relative-size);
.poster-image-container:before {
padding-top: 100%;
}
}
&.poster-shape-landscape {
.poster-image-container {
width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
height: var(--poster-relative-size);
}
.title-bar-container {
width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
.poster-image-container:before {
padding-top: calc(100% * var(--landscape-shape-ratio));
}
}
&.poster-shape-poster {
&.relative-side-auto {
.poster-image-container {
width: var(--poster-relative-size);
height: calc(var(--poster-relative-size) * var(--poster-shape-ratio));
}
.title-bar-container {
width: var(--poster-relative-size);
}
}
&.relative-side-height {
.poster-image-container {
width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
height: var(--poster-relative-size);
}
.title-bar-container {
width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
}
.poster-image-container:before {
padding-top: calc(100% * var(--poster-shape-ratio));
}
}
&:hover, &:focus {
border-color: var(--color-surfacelighter);
.poster-image-container {
.poster-image {
filter: brightness(1.2);
}
}
}
}
.menu-popup-container {
--box-shadow: 0 0 2em .15em var(--color-background);
--box-shadow: 0 0 1.5em .2em var(--color-backgroundlight);
.menu-items-container {
min-width: calc(var(--poster-relative-size) * 0.6);
max-width: var(--poster-relative-size);
min-width: 6em;
max-width: 10em;
background-color: var(--color-surfacelighter);
.menu-item {
padding: 0.5em;
width: 100%;
display: inline-block;
font-size: 1.5em;
color: var(--color-backgrounddarker);
cursor: pointer;

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

@ -19,26 +19,86 @@ class Board extends PureComponent {
super(props);
this.items = {
addonCatalogItems2: [
{
id: '0',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
subtitle: '123',
progress: 0.7
},
{
id: '120',
type: 'movie',
posterShape: 'square',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
{
id: '03',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
{
id: '40',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
{
id: '05',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
{
id: '055',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
{
id: '058',
type: 'movie',
posterShape: 'poster',
poster: 'qwe',
title: 'Movie title',
progress: 0.7
},
],
continueWatchingItems: [
{
id: '0',
type: 'movie',
posterShape: 'poster',
poster: 'https://i.ytimg.com/vi/97AUCrEgTj0/hqdefault.jpg',
title: 'Movie title',
progress: 0.7
},
{
id: '1',
type: 'movie',
posterShape: 'poster',
posterShape: 'square',
title: 'Movie title',
progress: 0.2
},
{
id: '3',
type: 'movie',
poster: 'https://www.stremio.com/website/home-stremio.png',
posterShape: 'poster',
poster: 'https://www.stremio.com/website/home-testimonials.jpg',
posterShape: 'square',
title: 'Movie title',
progress: 0.4
},
@ -53,46 +113,17 @@ class Board extends PureComponent {
{
id: '5',
type: 'channel',
posterShape: 'square',
posterShape: 'poster',
title: 'Movie title',
progress: 1
},
{
id: '6',
type: 'channel',
posterShape: 'square',
posterShape: 'poster',
title: 'Movie title',
progress: 0.1
}
],
addonCatalogItems: [
{
id: '01',
type: 'movie',
posterShape: 'landscape',
title: 'Movie title'
},
{
id: '02',
type: 'movie',
posterShape: 'landscape',
title: 'Movie title',
subtitle: 'Movie subtitle'
},
{
id: '022',
type: 'movie',
posterShape: 'square',
title: 'Movie title',
subtitle: 'Movie subtitle'
},
{
id: '0234',
type: 'movie',
posterShape: 'landscape',
title: 'Movie title',
subtitle: 'Movie subtitle'
},
]
};
}
@ -119,32 +150,34 @@ class Board extends PureComponent {
<div className={styles['board-container']}>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{this.items.continueWatchingItems.map((props) => (
{this.items.continueWatchingItems.map((item) => (
<MetaItem
key={props.id}
className={styles['meta-item']}
popupClassName={styles['meta-item-popup-container']}
relativeSide={'height'}
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
menuOptions={CONTINUE_WATCHING_MENU}
onClick={this.onClick}
menuOptionOnSelect={this.menuOptionOnSelect}
{...props}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'}>
show more
</Input>
<Input className={styles['show-more-container']} type={'button'} />
</div>
<div className={classnames(styles['board-row'], styles['notificatins-row'])}>
{this.items.addonCatalogItems.map((props) => (
<MetaItem
key={props.id}
className={styles['meta-item']}
onClick={this.onClick}
{...props}
/>
))}
<div className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
<div className={styles['meta-items-container']}>
{this.items.addonCatalogItems2.map((item, _, metaItems) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
</div>
);

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

@ -2,20 +2,33 @@
font-size: 12px;
.board-row {
&.continue-watching-row {
--poster-relative-size: calc(180px * var(--poster-shape-ratio));
--progress-bar-size: 6px;
--play-icon-visibility: visible;
.meta-item {
--play-icon-visibility: visible;
&:nth-child(n+5) {
display: none;
}
}
}
&.notificatins-row {
--poster-relative-size: 180px;
.meta-item {
&:hover, &:focus {
--play-icon-visibility: visible;
}
&:nth-child(n+4) {
display: none;
}
}
}
&.addon-catalog-row {
.meta-item {
&:nth-child(n+6) {
display: none;
}
}
}
}
@ -24,28 +37,42 @@
.board-container {
width: 100%;
height: 100%;
padding: 2em;
overflow-x: hidden;
overflow-y: auto;
.board-row {
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
.meta-items-container {
flex: 1;
flex: 5;
display: flex;
flex-direction: row;
overflow: hidden;
align-items: stretch;
.meta-item {
margin: 1em;
&.poster-shape-square {
flex: 1;
}
&.poster-shape-landscape {
flex: calc(1 / var(--landscape-shape-ratio));
}
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}
}
}
.show-more-container {
margin: 1em;
width: 20em;
flex: 1;
background-color: var(--color-backgroundlighter);
cursor: pointer;
}