mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 19:02:15 +00:00
BoardRow extracted as a separate component
This commit is contained in:
NikolaBorislavovHristov
parent
b5bc61b408
commit
d686b25bc9
5 changed files with 133 additions and 130 deletions
|
|
@ -1,63 +1,25 @@
|
|||
const React = require('react');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Input } = require('stremio-navigation')
|
||||
const { MetaItem, MainNavBar } = require('stremio/common');
|
||||
const { MainNavBar } = require('stremio/common');
|
||||
const BoardRow = require('./BoardRow');
|
||||
const useCatalogs = require('./useCatalogs');
|
||||
const styles = require('./styles');
|
||||
|
||||
const CONTINUE_WATCHING_MENU = [
|
||||
{
|
||||
label: 'Play',
|
||||
type: 'play'
|
||||
},
|
||||
{
|
||||
label: 'Dismiss',
|
||||
type: 'dismiss'
|
||||
}
|
||||
];
|
||||
|
||||
const BoardRow = ({ className, items }) => {
|
||||
return (
|
||||
<div className={classnames(styles['board-row'], className)}>
|
||||
<div className={styles['meta-items-container']}>
|
||||
{items.map((item) => (
|
||||
<MetaItem
|
||||
{...item}
|
||||
key={item.id}
|
||||
title={item.name}
|
||||
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
|
||||
menuClassName={styles['menu-container']}
|
||||
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
|
||||
menuOptions={CONTINUE_WATCHING_MENU}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Input className={classnames(styles['show-more-container'], 'focusable-with-border')} type={'button'} title={'SHOW MORE'}>
|
||||
<div className={styles['label']}>SHOW MORE</div>
|
||||
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
|
||||
</Input>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Board = () => {
|
||||
const [resumeCatalog, ...addonCatalogs] = useCatalogs();
|
||||
const catalogs = useCatalogs();
|
||||
return (
|
||||
<div className={styles['board-container']}>
|
||||
<MainNavBar className={styles['nav-bar']} />
|
||||
<div className={styles['board-content']} tabIndex={-1}>
|
||||
{
|
||||
resumeCatalog && Array.isArray(resumeCatalog.items) && resumeCatalog.items.length > 0 ?
|
||||
<BoardRow className={styles['continue-watching-row']} items={resumeCatalog.items} />
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
addonCatalogs.map((catalog) => (
|
||||
<BoardRow key={catalog.id} className={styles['addon-catalog-row']} items={catalog.items} />
|
||||
))
|
||||
}
|
||||
{catalogs.map((catalog) => (
|
||||
<BoardRow
|
||||
key={catalog.id}
|
||||
className={classnames(styles['board-row'], styles['addon-catalog-row'])}
|
||||
metaItemClassName={styles['meta-item']}
|
||||
menuClassName={styles['menu-container']}
|
||||
items={catalog.items}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
42
src/routes/Board/BoardRow/BoardRow.js
Normal file
42
src/routes/Board/BoardRow/BoardRow.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
const React = require('react');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Input } = require('stremio-navigation');
|
||||
const { MetaItem } = require('stremio/common');
|
||||
const styles = require('./styles');
|
||||
|
||||
const CONTINUE_WATCHING_MENU = [
|
||||
{
|
||||
label: 'Play',
|
||||
type: 'play'
|
||||
},
|
||||
{
|
||||
label: 'Dismiss',
|
||||
type: 'dismiss'
|
||||
}
|
||||
];
|
||||
|
||||
const BoardRow = ({ className, metaItemClassName, menuClassName, items }) => {
|
||||
return (
|
||||
<div className={classnames(styles['board-row-container'], className)}>
|
||||
<div className={styles['meta-items-container']}>
|
||||
{items.map((item) => (
|
||||
<MetaItem
|
||||
{...item}
|
||||
key={item.id}
|
||||
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape}`], metaItemClassName)}
|
||||
menuClassName={classnames(styles['menu-container'], menuClassName)}
|
||||
title={item.name}
|
||||
menuOptions={CONTINUE_WATCHING_MENU}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Input className={classnames(styles['show-more-container'], 'focusable-with-border')} type={'button'} title={'SHOW MORE'}>
|
||||
<div className={styles['label']}>SHOW MORE</div>
|
||||
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
|
||||
</Input>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = BoardRow;
|
||||
3
src/routes/Board/BoardRow/index.js
Normal file
3
src/routes/Board/BoardRow/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
const BoardRow = require('./BoardRow');
|
||||
|
||||
module.exports = BoardRow;
|
||||
70
src/routes/Board/BoardRow/styles.less
Normal file
70
src/routes/Board/BoardRow/styles.less
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.board-row-container {
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.meta-items-container {
|
||||
flex: 8;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
|
||||
.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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
background-color: var(--color-backgroundlight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2em;
|
||||
max-height: 3.6em;
|
||||
color: var(--color-surfacelight);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
margin-left: 0.3em;
|
||||
fill: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,26 +3,20 @@
|
|||
|
||||
.board-row {
|
||||
&.continue-watching-row {
|
||||
.meta-item {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
.meta-item:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.notificatins-row {
|
||||
.meta-item {
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
.meta-item:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.addon-catalog-row {
|
||||
.meta-item {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
.meta-item:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,74 +43,6 @@
|
|||
.board-row {
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.meta-items-container {
|
||||
flex: 8;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
|
||||
.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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
background-color: var(--color-backgroundlight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2em;
|
||||
max-height: 3.6em;
|
||||
color: var(--color-surfacelight);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
margin-left: 0.3em;
|
||||
fill: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue