mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-28 21:18:47 +00:00
calendar refactored
This commit is contained in:
svetlagasheva
parent
87fe0a1824
commit
fa45bb4018
2 changed files with 117 additions and 108 deletions
|
|
@ -11,29 +11,29 @@ class Calendar extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.dateRef = React.createRef();
|
||||
this.futureEpisodesRef = React.createRef();
|
||||
this.videosContainerRef = React.createRef();
|
||||
this.videosScrollContainerRef = React.createRef();
|
||||
|
||||
this.state = {
|
||||
date: new Date(),
|
||||
episodeInfo: '',
|
||||
videoId: '',
|
||||
selectedDate: new Date()
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.scrollTo();
|
||||
this.scrollToSelectedVideo();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextState.date !== this.state.date ||
|
||||
nextState.episodeInfo !== this.state.episodeInfo ||
|
||||
nextState.videoId !== this.state.videoId ||
|
||||
nextState.selectedDate !== this.state.selectedDate;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.selectedDate !== this.state.selectedDate) {
|
||||
this.scrollTo();
|
||||
this.scrollToSelectedVideo();
|
||||
}
|
||||
|
||||
if (prevState.date.getMonth() !== this.state.date.getMonth()) {
|
||||
|
|
@ -41,12 +41,12 @@ class Calendar extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
scrollTo = () => {
|
||||
if (this.dateRef.current !== null) {
|
||||
var topPosition = this.dateRef.current.offsetTop;
|
||||
this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
|
||||
scrollToSelectedVideo = () => {
|
||||
if (this.videosContainerRef.current !== null) {
|
||||
var topPosition = this.videosContainerRef.current.offsetTop;
|
||||
this.videosScrollContainerRef.current.scrollTop = topPosition - this.videosScrollContainerRef.current.offsetTop;
|
||||
} else {
|
||||
this.setState({ episodeInfo: '' });
|
||||
this.setState({ videoId: '' });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,24 +54,31 @@ class Calendar extends Component {
|
|||
this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
|
||||
}
|
||||
|
||||
showEpisodeInfo = (event) => {
|
||||
showVideoInfo = (event) => {
|
||||
event.stopPropagation();
|
||||
this.setState({ episodeInfo: event.currentTarget.dataset.videoName, selectedDate: new Date(event.currentTarget.dataset.videoDate) });
|
||||
|
||||
var selectedVideoDate = this.props.metaItems
|
||||
.map((metaitem) => metaitem.videos
|
||||
.filter((video) => video.id == event.currentTarget.dataset.videoId))
|
||||
.reduce((result, videoDates) => {
|
||||
result = result.concat(videoDates);
|
||||
return result;
|
||||
}, [])[0].released;
|
||||
|
||||
this.setState({ videoId: event.currentTarget.dataset.videoId, selectedDate: new Date(selectedVideoDate) });
|
||||
}
|
||||
|
||||
changeSelectedDate = (event) => {
|
||||
const selectedDate = new Date(event.currentTarget.dataset.day);
|
||||
|
||||
var firstEpisode = this.props.metaItems
|
||||
var videosIds = 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];
|
||||
.map((video) => video.id))
|
||||
.filter((videos) => videos.length > 0);
|
||||
|
||||
if (firstEpisode.length > 0) {
|
||||
this.setState({ episodeInfo: firstEpisode, selectedDate });
|
||||
if (videosIds.length > 0) {
|
||||
this.setState({ videoId: videosIds[0][0], selectedDate });
|
||||
} else {
|
||||
this.setState({ selectedDate });
|
||||
}
|
||||
|
|
@ -101,13 +108,16 @@ class Calendar extends Component {
|
|||
|
||||
render() {
|
||||
const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
|
||||
var currentDay = 0;
|
||||
|
||||
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()));
|
||||
.map((videos) => videos.map((video) => video.released.getDate()))
|
||||
.reduce((result, videoDates) => {
|
||||
result = result.concat(videoDates);
|
||||
return result;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles['calendar-container']}>
|
||||
|
|
@ -118,65 +128,63 @@ class Calendar extends Component {
|
|||
{this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
|
||||
</div>
|
||||
<table className={styles['month-days']}>
|
||||
<tr className={styles['week-days']}>
|
||||
{days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
|
||||
</tr>
|
||||
{Array.apply(null, { length: rowsCount }).map((_, row) => (
|
||||
<tr key={row} className={styles['row']}>
|
||||
{Array.apply(null, { length: 7 }).map((_, day) => (
|
||||
day < padsCount && row === 0
|
||||
?
|
||||
<td key={day} />
|
||||
:
|
||||
currentDay < daysCount
|
||||
?
|
||||
++currentDay &&
|
||||
<td key={day}
|
||||
className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === currentDay })}
|
||||
data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), currentDay)}
|
||||
onClick={this.changeSelectedDate}
|
||||
>
|
||||
<div className={styles['date-container']}>
|
||||
<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() === currentDay })}>{currentDay}</div>
|
||||
</div>
|
||||
<div className={classnames(styles['episodes'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
|
||||
{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() === currentDay)
|
||||
.map((video) =>
|
||||
<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() && video.released.getFullYear() <= new Date().getFullYear() })}
|
||||
data-video-name={video.name}
|
||||
data-video-date={video.released}
|
||||
onClick={this.showEpisodeInfo}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
:
|
||||
null
|
||||
))}
|
||||
<tbody>
|
||||
<tr className={styles['week-days']}>
|
||||
{days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
|
||||
</tr>
|
||||
))}
|
||||
{Array.apply(null, { length: rowsCount }).map((_, row) => (
|
||||
<tr key={row} className={styles['row']}>
|
||||
{Array.apply(null, { length: 7 }).map((_, day) => (
|
||||
day < padsCount && row === 0
|
||||
?
|
||||
<td key={day} />
|
||||
:
|
||||
(row * 7) + (day - padsCount) < daysCount
|
||||
?
|
||||
<td key={day}
|
||||
className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === (row * 7) + (day - padsCount + 1) })}
|
||||
data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1))}
|
||||
onClick={this.changeSelectedDate}
|
||||
>
|
||||
<div className={styles['date-container']}>
|
||||
<div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
|
||||
</div>
|
||||
<div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
|
||||
{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() === (row * 7) + (day - padsCount + 1))
|
||||
.map((video) =>
|
||||
<div key={video.id}
|
||||
style={{ backgroundImage: `url('${metaitem.background}')` }}
|
||||
className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
|
||||
data-video-id={video.id}
|
||||
onClick={this.showVideoInfo}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
:
|
||||
null
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
|
||||
<div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
|
||||
{
|
||||
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() })}
|
||||
ref={videoDate === this.state.selectedDate.getDate() ? this.videosContainerRef : null}
|
||||
className={classnames(styles['videos-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}
|
||||
>
|
||||
|
|
@ -187,23 +195,22 @@ class Calendar extends Component {
|
|||
.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 key={video.id}
|
||||
className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.videoId !== video.id })}
|
||||
data-video-id={video.id}
|
||||
onClick={this.showVideoInfo}
|
||||
>
|
||||
<div className={styles['main-info']}>
|
||||
<div className={styles['serie-name']}>
|
||||
<div className={styles['meta-item-name']}>
|
||||
{metaitem.name}
|
||||
</div>
|
||||
<div className={styles['episode-number']}>
|
||||
<div className={styles['video-number']}>
|
||||
S{video.season} E{video.episode}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['name']}>
|
||||
"{video.name}"
|
||||
</div>
|
||||
{video.name}
|
||||
</div>
|
||||
<div className={styles['description']}>
|
||||
{video.description}
|
||||
</div>
|
||||
|
|
@ -228,8 +235,7 @@ class Calendar extends Component {
|
|||
}
|
||||
|
||||
Calendar.propTypes = {
|
||||
metaItems: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
toggleLibraryButton: PropTypes.func
|
||||
metaItems: PropTypes.arrayOf(PropTypes.object).isRequired
|
||||
};
|
||||
Calendar.defaultProps = {
|
||||
metaItems: [
|
||||
|
|
@ -252,11 +258,11 @@ Calendar.defaultProps = {
|
|||
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 }
|
||||
{ id: '6', 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: '7', 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: '8', 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: '9', 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: '10', 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 }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -265,11 +271,11 @@ Calendar.defaultProps = {
|
|||
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 }
|
||||
{ id: '11', 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: '12', 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: '13', 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: '14', 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: '15', 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 }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -278,11 +284,11 @@ Calendar.defaultProps = {
|
|||
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 }
|
||||
{ id: '16', 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: '17', 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: '18', 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: '19', 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: '20', 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 }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -291,11 +297,11 @@ Calendar.defaultProps = {
|
|||
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 }
|
||||
{ id: '21', 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: '22', 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: '23', 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: '24', 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: '25', 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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.calendar-container {
|
||||
--spacing: 16px;
|
||||
--episodes-height: 50px;
|
||||
--future-episodes-width: 270px;
|
||||
--videos-scroll-container-width: 270px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
text-align: center;
|
||||
|
||||
.month {
|
||||
padding: 2px;
|
||||
width: 12%;
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
color: var(--color-surfacelighter);
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -85,7 +87,7 @@
|
|||
font-size: 1.4em;
|
||||
color: var(--color-secondarylighter);
|
||||
|
||||
&.selected {
|
||||
&.today {
|
||||
border-radius: 50%;
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-primary);
|
||||
|
|
@ -93,7 +95,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.episodes {
|
||||
.videos {
|
||||
margin: var(--focusable-border-size);
|
||||
height: var(--episodes-height);
|
||||
display: flex;
|
||||
|
|
@ -135,14 +137,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.future-episodes {
|
||||
.videos-scroll-container {
|
||||
padding-right: calc(var(--spacing) * 0.5);
|
||||
width: var(--future-episodes-width);
|
||||
width: var(--videos-scroll-container-width);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.episode-container {
|
||||
.videos-container {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
border: var(--focusable-border-size) solid var(--color-background);
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
|
@ -151,9 +153,10 @@
|
|||
padding: var(--spacing);
|
||||
font-size: 1.2em;
|
||||
color: var(--color-primarylight);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.episode {
|
||||
.video {
|
||||
padding: var(--spacing);
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -162,7 +165,7 @@
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.serie-name {
|
||||
.meta-item-name {
|
||||
margin-right: 5%;
|
||||
width: 75%;
|
||||
white-space: nowrap;
|
||||
|
|
@ -171,7 +174,7 @@
|
|||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.episode-number {
|
||||
.video-number {
|
||||
width: 20%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
Loading…
Reference in a new issue