From fa45bb401898ced93e173eae51f0020034d6be39 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 14 Mar 2019 16:59:52 +0200
Subject: [PATCH] calendar refactored

---
 src/routes/Calendar/Calendar.js | 204 ++++++++++++++++----------------
 src/routes/Calendar/styles.less |  21 ++--
 2 files changed, 117 insertions(+), 108 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 764c3c2b3..32e82a344 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -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 }
             ]
         }
     ]
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index de69b03d5..4131f3044 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -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;