mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 10:42:12 +00:00
relations between calendar and future episodes fixed; style changes
This commit is contained in:
svetlagasheva
parent
4157ffd32a
commit
108e09e98c
2 changed files with 237 additions and 202 deletions
|
|
@ -21,15 +21,6 @@ class Calendar extends Component {
|
|||
episodeInfo: '',
|
||||
selectedDate: new Date()
|
||||
};
|
||||
|
||||
// this.episodesNames = this.props.metaItems
|
||||
// .map((metaitem) => metaitem.metaItem.videos
|
||||
// .filter((video) => video.released.getMonth() === new Date().getMonth() && video.released.getDate() === this.state.selectedDate.getDate())
|
||||
// .map((video) => video.name)
|
||||
// .join())
|
||||
// .filter((element) => element.length > 0)
|
||||
|
||||
// console.log(this.episodesNames);
|
||||
}
|
||||
|
||||
changeDate = (event) => {
|
||||
|
|
@ -39,18 +30,32 @@ class Calendar extends Component {
|
|||
}
|
||||
|
||||
showEpisodeInfo = (event) => {
|
||||
this.setState({ episodeInfo: event.currentTarget.dataset.videoName });
|
||||
event.stopPropagation();
|
||||
this.setState({ episodeInfo: event.currentTarget.dataset.videoName, selectedDate: new Date(event.currentTarget.dataset.videoDate) });
|
||||
}
|
||||
|
||||
changeSelectedDate = (event) => {
|
||||
this.setState({ selectedDate: new Date(event.currentTarget.dataset.day) });
|
||||
const selectedDate = new Date(event.currentTarget.dataset.day);
|
||||
|
||||
var firstEpisode = this.props.metaItems
|
||||
.map((metaitem) => metaitem.videos
|
||||
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === selectedDate.getDate())
|
||||
.map((video) => video.name))
|
||||
.filter((videos) => videos.length > 0)
|
||||
.join()
|
||||
.split(',')[0];
|
||||
|
||||
if (firstEpisode.length > 0) {
|
||||
this.setState({ episodeInfo: firstEpisode, selectedDate });
|
||||
} else {
|
||||
this.setState({ selectedDate });
|
||||
}
|
||||
}
|
||||
|
||||
scrollTo = () => {
|
||||
if (this.dateRef.current !== null) {
|
||||
var topPosition = this.dateRef.current.offsetTop;
|
||||
this.futureEpisodesRef.current.scrollTop = topPosition - 16;
|
||||
// this.futureEpisodesRef.current.animate({ scrollTop: this.dateRef.current.offsetTop }, 300);
|
||||
this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
|
||||
} else {
|
||||
this.setState({ episodeInfo: '' });
|
||||
}
|
||||
|
|
@ -78,6 +83,10 @@ class Calendar extends Component {
|
|||
nextState.selectedDate !== this.state.selectedDate;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.scrollTo();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.selectedDate !== this.state.selectedDate) {
|
||||
this.scrollTo();
|
||||
|
|
@ -97,6 +106,12 @@ class Calendar extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const videosDates = this.props.metaItems
|
||||
.map((metaitem) => metaitem.videos
|
||||
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
|
||||
.filter((videos) => videos.length > 0)
|
||||
.map((videos) => videos.map((video) => video.released.getDate()));
|
||||
|
||||
return (
|
||||
<div className={styles['calendar-container']}>
|
||||
<div className={styles['calendar']}>
|
||||
|
|
@ -106,25 +121,35 @@ class Calendar extends Component {
|
|||
{this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
|
||||
</div>
|
||||
<div className={styles['week-days']}>
|
||||
{days.map((day) => <div className={styles['day']} key={day}>{day}</div>)}
|
||||
{days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
|
||||
</div>
|
||||
<div className={styles['month-days']}>
|
||||
{this.pads.map((pad) =>
|
||||
<div className={styles['pad']} key={pad} />
|
||||
<div key={pad} className={styles['pad']} />
|
||||
)}
|
||||
{this.monthDays.map((day) =>
|
||||
<div className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })} key={day} data-day={new Date(new Date().getFullYear(), this.state.date.getMonth(), day + 1)} onClick={this.changeSelectedDate}>
|
||||
<div key={day}
|
||||
className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })}
|
||||
data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), day + 1)}
|
||||
onClick={this.changeSelectedDate}
|
||||
>
|
||||
<div className={styles['date-container']}>
|
||||
<div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
|
||||
<div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
|
||||
</div>
|
||||
<div className={styles['episodes']}>
|
||||
{this.props.metaItems
|
||||
.map((metaitem) => metaitem.metaItem.videos
|
||||
.filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
|
||||
.map((metaitem) => metaitem.videos
|
||||
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
|
||||
.map((video) =>
|
||||
//////indicator for >3 posters?
|
||||
//getTime()?
|
||||
<div style={{ backgroundImage: `url('${metaitem.metaItem.background}')` }} className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })} key={video.id} data-video-name={video.name} onClick={this.showEpisodeInfo} />
|
||||
<div key={video.id}
|
||||
style={{ backgroundImage: `url('${metaitem.background}')` }}
|
||||
className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })}
|
||||
data-video-name={video.name}
|
||||
data-video-date={video.released}
|
||||
onClick={this.showEpisodeInfo}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -133,53 +158,64 @@ class Calendar extends Component {
|
|||
</div>
|
||||
</div>
|
||||
<div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
|
||||
{this.props.metaItems
|
||||
.map((metaitem) => metaitem.metaItem.videos
|
||||
.filter((video) => video.released.getMonth() === this.state.date.getMonth()))
|
||||
.map((videos) => videos.map((video) => video.released.getDate()))
|
||||
.join()
|
||||
.split(',')
|
||||
.filter((date, index, dates) => dates.indexOf(date) === index)
|
||||
.sort(function(a, b) {
|
||||
return a - b;
|
||||
})
|
||||
.map((videoDate) =>
|
||||
<div ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null} className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })} key={videoDate} data-day={new Date(new Date().getFullYear(), new Date().getMonth(), parseInt(videoDate))} onClick={this.changeSelectedDate}>
|
||||
<div className={styles['date']}>
|
||||
{months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
|
||||
</div>
|
||||
{this.props.metaItems
|
||||
.map((metaitem) => metaitem.metaItem.videos
|
||||
.filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
|
||||
.map((video) =>
|
||||
<div className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: parseInt(videoDate) === new Date().getDate() })} key={video.name} data-video-name={video.name} onClick={this.showEpisodeInfo}>
|
||||
<div className={classnames(styles['info'])} >
|
||||
<div className={styles['main-info']}>
|
||||
<div className={styles['serie-name']}>
|
||||
{metaitem.metaItem.name}
|
||||
{
|
||||
videosDates.length > 0
|
||||
?
|
||||
videosDates
|
||||
.join()
|
||||
.split(',')
|
||||
.filter((date, index, dates) => dates.indexOf(date) === index)
|
||||
.sort(function(a, b) {
|
||||
return a - b;
|
||||
})
|
||||
.map((videoDate) =>
|
||||
<div key={videoDate}
|
||||
ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null}
|
||||
className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })}
|
||||
data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate))}
|
||||
onClick={this.changeSelectedDate}
|
||||
>
|
||||
<div className={styles['date']}>
|
||||
{months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
|
||||
</div>
|
||||
{this.props.metaItems
|
||||
.map((metaitem) => metaitem.videos
|
||||
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
|
||||
.map((video) =>
|
||||
<div key={video.name}
|
||||
className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.episodeInfo !== video.name })}
|
||||
data-video-name={video.name}
|
||||
data-video-date={video.released}
|
||||
onClick={this.showEpisodeInfo}
|
||||
>
|
||||
<div className={styles['main-info']}>
|
||||
<div className={styles['serie-name']}>
|
||||
{metaitem.name}
|
||||
</div>
|
||||
<div className={styles['episode-number']}>
|
||||
S{video.season} E{video.episode}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['episode-number']}>
|
||||
S{video.season} E{video.episode}
|
||||
<div className={styles['name']}>
|
||||
"{video.name}"
|
||||
</div>
|
||||
<div className={styles['description']}>
|
||||
{video.description}
|
||||
</div>
|
||||
<a className={styles['watch-button-container']} href={'#/detail'}>
|
||||
<div className={styles['watch-button']}>
|
||||
<Icon className={styles['icon']} icon={'ic_play'} />
|
||||
<div className={styles['label']}>WATCH NOW</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles['name']}>
|
||||
"{video.name}"
|
||||
</div>
|
||||
<div className={styles['description']}>
|
||||
{video.description}
|
||||
</div>
|
||||
<a className={styles['watch-button-container']} href={'#/detail'}>
|
||||
<div className={styles['watch-button']}>
|
||||
<Icon className={styles['icon']} icon={'ic_play'} />
|
||||
<div className={styles['label']}>WATCH NOW</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -193,79 +229,69 @@ Calendar.propTypes = {
|
|||
Calendar.defaultProps = {
|
||||
metaItems: [
|
||||
{
|
||||
metaItem: {
|
||||
background: 'https://images.metahub.space/poster/medium/tt2306299/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Vikings',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 18), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
background: 'https://images.metahub.space/poster/medium/tt2306299/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Vikings',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 1), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 2), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 5), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
metaItem: {
|
||||
background: 'https://images.metahub.space/poster/medium/tt1520211/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'The Walking Dead',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 19), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
background: 'https://images.metahub.space/poster/medium/tt1520211/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'The Walking Dead',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
metaItem: {
|
||||
background: 'https://images.metahub.space/poster/medium/tt0944947/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Game of Thrones',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
background: 'https://images.metahub.space/poster/medium/tt0944947/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Game of Thrones',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
metaItem: {
|
||||
background: 'https://images.metahub.space/poster/medium/tt0411008/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Lost',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
background: 'https://images.metahub.space/poster/medium/tt0411008/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Lost',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
},
|
||||
{
|
||||
metaItem: {
|
||||
background: 'https://images.metahub.space/poster/medium/tt0813715/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Heroes',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 8), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
background: 'https://images.metahub.space/poster/medium/tt0813715/img',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
name: 'Heroes',
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), isUpcoming: true, isWatched: true, season: 5 },
|
||||
{ id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,17 +10,16 @@
|
|||
flex-direction: row;
|
||||
|
||||
.calendar {
|
||||
// width: 75%;
|
||||
flex: 1;
|
||||
|
||||
.months {
|
||||
padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
|
||||
padding: var(--spacing) 0 calc(var(--spacing) * 2) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.month {
|
||||
margin-right: var(--spacing);
|
||||
font-size: 1.7em;
|
||||
color: var(--color-surfacelighter);
|
||||
cursor: pointer;
|
||||
|
|
@ -33,8 +32,11 @@
|
|||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.week-days {
|
||||
|
|
@ -43,7 +45,7 @@
|
|||
flex-direction: row;
|
||||
|
||||
.day {
|
||||
margin: 0 1px 1px 0;
|
||||
margin-right: calc(var(--focusable-border-size) * 0.5);
|
||||
width: 14%;
|
||||
font-size: 1.2em;
|
||||
color: var(--color-secondarylighter);
|
||||
|
|
@ -54,26 +56,26 @@
|
|||
height: 100%;
|
||||
|
||||
.pad {
|
||||
margin: 0 1px 1px 0;
|
||||
margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
|
||||
width: 14%;
|
||||
height: 14%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.day {
|
||||
margin: 0 1px 1px 0;
|
||||
margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
|
||||
width: 14%;
|
||||
height: 16%;
|
||||
height: 14%;
|
||||
float: left;
|
||||
font-size: 1.4em;
|
||||
border: 2px solid transparent;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
cursor: pointer;
|
||||
|
||||
.date-container {
|
||||
margin: calc(var(--spacing) * 0.5);
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.date {
|
||||
width: 100%;
|
||||
|
|
@ -92,14 +94,15 @@
|
|||
}
|
||||
|
||||
.episodes {
|
||||
margin: 0 2px;
|
||||
height: 42px;
|
||||
margin: 0 var(--focusable-border-size) var(--focusable-border-size) var(--focusable-border-size);
|
||||
height: 34px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.poster {
|
||||
margin-right: var(--focusable-border-size);
|
||||
display: none;
|
||||
width: 33%;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -109,7 +112,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:nth-child(-n+3) {
|
||||
&:nth-child(-n+4) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -124,16 +127,16 @@
|
|||
}
|
||||
|
||||
.future-episodes {
|
||||
padding-right: 10px;
|
||||
width: 270px;
|
||||
// width: 25%;
|
||||
// padding: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.episode-container {
|
||||
margin-bottom: var(--spacing);
|
||||
border: 2px solid transparent;
|
||||
width: 252px;
|
||||
border: var(--focusable-border-size) solid var(--color-background);
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.date {
|
||||
|
|
@ -143,60 +146,64 @@
|
|||
}
|
||||
|
||||
.episode {
|
||||
padding: var(--spacing);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
.info {
|
||||
padding: var(--spacing);
|
||||
.main-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.main-info {
|
||||
.serie-name {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.episode-number {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
display: none;
|
||||
padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
padding: var(--spacing) 0;
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.watch-button-container {
|
||||
display: none;
|
||||
margin: 0 calc(var(--spacing) * 0.5);
|
||||
padding: var(--spacing);
|
||||
border-top: calc(var(--focusable-border-size) * 0.5) solid var(--color-background);
|
||||
cursor: pointer;
|
||||
|
||||
.watch-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.serie-name {
|
||||
color: var(--color-surface);
|
||||
.icon {
|
||||
margin-right: var(--spacing);
|
||||
width: 8%;
|
||||
fill: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.episode-number {
|
||||
color: var(--color-surface);
|
||||
.label {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
display: none;
|
||||
padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
padding: var(--spacing) 0;
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.watch-button-container {
|
||||
display: none;
|
||||
margin: 0 calc(var(--spacing) * 0.5);
|
||||
padding: var(--spacing);
|
||||
border-top: 1px solid var(--color-background);
|
||||
cursor: pointer;
|
||||
|
||||
.watch-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
margin-right: var(--spacing);
|
||||
width: 6%;
|
||||
height: 6%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
|
|
@ -208,22 +215,24 @@
|
|||
}
|
||||
|
||||
&.selected {
|
||||
.info {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
background-color: var(--color-primarydark);
|
||||
cursor: default;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.watch-button-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primarydark);
|
||||
cursor: default;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.watch-button-container {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue