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

simple boardrow placeholder implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-19 16:26:03 +03:00
parent f59f637752
commit be1ae90141
4 changed files with 85 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
const React = require('react');
const { MainNavBar } = require('stremio/common');
const BoardRow = require('./BoardRow');
const BoardRowPlaceholder = require('./BoardRowPlaceholder');
const useCatalogs = require('./useCatalogs');
require('./styles');
@ -21,28 +22,38 @@ const Board = () => {
<div className={'board-container'}>
<MainNavBar className={'nav-bar'} />
<div className={'board-content'}>
{
catalogs
.filter(([_, response]) => response.type === 'Ready')
.map(([request, response]) => [
request,
{
...response,
content: response.content.map((item) => ({
...item,
posterShape: item.posterShape || 'poster'
}))
}
])
.map(([request, response], index) => (
<BoardRow
key={`${index}${request.transport_url}`}
className={'board-row'}
title={`${request.resource_ref.id} - ${request.resource_ref.type_name}`}
items={response.content}
/>
))
}
{catalogs.map(([request, response], index) => {
switch (response.type) {
case 'Ready':
return (
<BoardRow
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
title={`${request.resource_ref.id} - ${request.resource_ref.type_name}`}
items={response.content.map((item) => ({
...item,
posterShape: item.posterShape || 'poster'
}))}
/>
);
case 'Message':
return (
<BoardRow
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
title={`${request.resource_ref.id} - ${request.resource_ref.type_name}`}
message={response.content}
/>
);
case 'Loading':
return (
<BoardRowPlaceholder
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
/>
);
}
})}
</div>
</div>
);

26
src/routes/Board/BoardRowPlaceholder/BoardRowPlaceholder.js Normal file
View file

@ -0,0 +1,26 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { animatedPlaceholderStyles } = require('stremio/common');
require('./styles');
const BoardRowPlaceholder = ({ className }) => {
return (
<div className={classnames(className, 'board-row-placeholder-container')}>
<div className={classnames('title-container', animatedPlaceholderStyles['animated-placeholder'])} />
<div className={'meta-items-container'}>
{Array(10).fill(null).map((_, index) => (
<div key={index} className={classnames('meta-item', animatedPlaceholderStyles['animated-placeholder'])}>
<div className={'meta-item-poster'} />
</div>
))}
</div>
</div>
);
};
BoardRowPlaceholder.propTypes = {
className: PropTypes.string
};
module.exports = BoardRowPlaceholder;

3
src/routes/Board/BoardRowPlaceholder/index.js Normal file
View file

@ -0,0 +1,3 @@
const BoardRowPlaceholder = require('./BoardRowPlaceholder');
module.exports = BoardRowPlaceholder;

23
src/routes/Board/BoardRowPlaceholder/styles.less Normal file
View file

@ -0,0 +1,23 @@
.board-row-placeholder-container {
.title-container {
width: 60%;
height: 2.4rem;
margin: 0 1rem;
background-color: var(--color-backgroundlighter);
}
.meta-items-container {
display: flex;
flex-direction: row;
.meta-item {
flex: 1;
margin: 1rem;
background-color: var(--color-backgroundlighter);
.meta-item-poster {
padding-top: calc(100% * var(--poster-shape-ratio));
}
}
}
}