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

error and loading cases handled in videos list

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-11-11 13:32:03 +02:00
parent 187faba125
commit 40660a01d7
2 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/routes/Detail/VideosList/VideosList.js
View file

@ -8,39 +8,20 @@ const VideoPlaceholder = require('./VideoPlaceholder');
const useSeasons = require('./useSeasons');
const styles = require('./styles');
const VideosList = ({ className, metaItem }) => {
const [season, seasons, setSeason] = useSeasons(metaItem);
const VideosList = ({ className, meta }) => {
const [season, seasons, setSeason] = useSeasons(meta !== null && meta.content.type === 'Ready' ? meta.content.content : null);
const videos = React.useMemo(() => {
return meta !== null && meta.content.type === 'Ready' ?
meta.content.content.videos.filter((video) => {
return isNaN(season) || video.season === season;
})
:
[];
}, [meta, season]);
return (
<div className={classnames(className, styles['videos-list-container'])}>
{
metaItem !== null ?
<React.Fragment>
{
seasons.length > 1 ?
<SeasonsBar
className={styles['seasons-bar']}
season={season}
seasons={seasons}
onSeasonChange={setSeason}
/>
:
null
}
<div className={styles['videos-scroll-container']}>
{
metaItem.videos
.filter((video) => isNaN(season) || video.season === season)
.map((video) => (
<Video
{...video}
key={video.id}
className={styles['video']}
/>
))
}
</div>
</React.Fragment>
:
meta === null ?
<React.Fragment>
<SeasonsBarPlaceholder className={styles['seasons-bar']} />
<div className={styles['videos-scroll-container']}>
@ -54,6 +35,41 @@ const VideosList = ({ className, metaItem }) => {
<VideoPlaceholder className={styles['video']} />
</div>
</React.Fragment>
:
meta.content.type === 'Ready' ?
<React.Fragment>
{
seasons.length > 1 ?
<SeasonsBar
className={styles['seasons-bar']}
season={season}
seasons={seasons}
onSeasonChange={setSeason}
/>
:
null
}
{
videos.length > 0 ?
<div className={styles['videos-scroll-container']}>
{videos.map((video, index) => (
<Video
{...video}
key={index}
className={styles['video']}
/>
))}
</div>
:
<div className={styles['message-label']}>
No videos
</div>
}
</React.Fragment>
:
<div className={styles['message-label']}>
No videos
</div>
}
</div>
);
@ -61,7 +77,7 @@ const VideosList = ({ className, metaItem }) => {
VideosList.propTypes = {
className: PropTypes.string,
metaItem: PropTypes.object
meta: PropTypes.object
};
module.exports = VideosList;

8
src/routes/Detail/VideosList/styles.less
View file

@ -3,12 +3,18 @@
flex-direction: column;
background: var(--color-backgrounddark80);
.seasons-bar {
.seasons-bar, .message-label {
flex: none;
width: var(--item-size);
margin: 2rem 2rem 1rem 2rem;
}
.message-label {
font-size: 2rem;
text-align: center;
color: var(--color-surfacelighter);
}
.videos-scroll-container {
flex: 1;
align-self: stretch;